Publicar: Ajustes y dispositivos

Utilice esta guía para configurar cómo capturar y codificar el vídeo y el audio salientes. Abarca los permisos y la selección de dispositivos, el recuerdo de dispositivos, el modo de orientación de la cámara resolución y velocidad de fotogramas, sugerencias de contenido para movimiento o texto, publicación desde fuentes (Canvas, Vídeo, Web Audio) y dónde encontrar las opciones avanzadas de Publisher.

Comprueba los permisos de la cámara y el micrófono

Antes de que un Publisher pueda acceder a la cámara y al micrófono del cliente, el usuario debe concederle acceso. El objeto Publisher envía eventos cuando el usuario concede o deniega el acceso a la cámara y al micrófono:

publisher.on({
  accessAllowed: function () {
    // The user granted access to the camera and mic.
  },
  accessDenied: function () {
    // The user denied access to the camera and mic.
  }
});

También envía eventos cuando se abre o se cierra el cuadro de diálogo Permitir/Denegar:

publisher.on({
  accessDialogOpened: function () {
    // The Allow/Deny dialog box is opened.
  },
  accessDialogClosed: function () {
    // The Allow/Deny dialog box is closed.
  }
});

La editorial tiene un accessAllowed que indica si se ha concedido el acceso.

Elegir cámara y micrófono

Elija qué cámara y micrófono debe utilizar el Editor. Puede enumerar los dispositivos y seleccionarlos a través de las opciones de Publisher.

<OTPublisher
  properties={{
    cameraPosition: 'back',
  }}
/>

var audioInputDevices;
var videoInputDevices;
OT.getDevices(function(error, devices) {
  audioInputDevices = devices.filter(function(element) {
    return element.kind == "audioInput";
  });
  videoInputDevices = devices.filter(function(element) {
    return element.kind == "videoInput";
  });
  for (var i = 0; i < audioInputDevices.length; i++) {
    console.log("audio input device: ", audioInputDevices[i].deviceId);
  }
  for (i = 0; i < videoInputDevices.length; i++) {
    console.log("video input device: ", videoInputDevices[i].deviceId);
  }
});

var pubOptions =
  {
    audioSource: audioInputDevices[0].deviceId,
    videoSource: videoInputDevices[0].deviceId
  };
var publisher = OT.initPublisher(null, pubOptions, function(error) {
  console.log("OT.initPublisher error: ", error);
});

Recordar selección de dispositivo

En contextos HTTPS, algunos navegadores pueden recordar la selección de cámara y micrófono para visitas posteriores. Por ejemplo, en IE puede configurar usePreviousDeviceSelection: true al inicializar el Editor:

var pubOptions = { usePreviousDeviceSelection: true };
var publisher = OT.initPublisher(null, pubOptions, function (error) {
  console.log("OT.initPublisher error:", error);
});

También puedes configurar facingMode para elegir cámara frontal o trasera en los dispositivos compatibles y desactivar la gestión automática de dispositivos de entrada de audio mediante disableAudioInputDeviceManagement si necesitas un control total.

Para pedir al usuario que seleccione la cámara y el micrófono que desea utilizar en IE (e ignorar las selecciones de dispositivos anteriores), no configure la opción usePreviousDevices en las opciones que introduzca en el campo OT.initPublisher() (o configurarlo como falsepor defecto).

Desactivar la gestión automática de dispositivos de entrada de audio (avanzado):

var pubOptions = {disableAudioInputDeviceManagement: true};
var publisher = OT.initPublisher(null, pubOptions, function(error) {
  console.log("Publishing a stream");
});

Ajustar la resolución y la frecuencia de imagen

Establezca la resolución de vídeo y la frecuencia de imagen recomendadas mediante OT.initPublisher() opciones:

var publisher = OT.initPublisher(targetElement, {
  resolution: '1280x720', // 1920x1080, 1280x720, 640x480, or 320x240
  frameRate: 15            // 30, 15, 7, or 1
});

Nota: La resolución real del abonado y la frecuencia de imagen pueden variar en función de las condiciones de la red y del dispositivo.

Ajustes del flujo (Web)

Para establecer una resolución de vídeo recomendada para un flujo publicado, establezca la opción resolution propiedad del properties que pasa a OT.initPublisher():

var publisherProperties = {resolution: '1280x720'};
var publisher = OT.initPublisher(targetElement, publisherProperties);
publisher.on('streamCreated', function(event) {
  console.log('Stream resolution: ' + event.stream.videoDimensions.width + 'x' + event.stream.videoDimensions.height);
});

Los valores válidos son "1920x1080", "1280x720", "640x480"y "320x240". El valor por defecto es 640x480.

Para establecer una velocidad de fotogramas recomendada para un flujo publicado, establezca la opción frameRate propiedad:

var publisherProperties = {frameRate: 7};
var publisher = OT.initPublisher(targetElement, publisherProperties);
publisher.on('streamCreated', function(event) {
  console.log('Frame rate: ' + event.stream.frameRate);
});

Los valores válidos son 30, 15, 7 y 1.

Si el editor especifica una velocidad de fotogramas, la velocidad de fotogramas real de la secuencia de vídeo se establece como el valor de frameRate del objeto Stream, aunque la frecuencia de imagen real variará en función de las condiciones cambiantes de la red y del sistema. Si no especifica una frecuencia de imagen al llamar a OT.initPublisheresta propiedad no está definida.

Para las sesiones que utilizan el enrutador de medios (sesiones con la función modo multimedia enrutado), al reducir la frecuencia de imagen se reduce proporcionalmente el ancho de banda máximo que puede utilizar el flujo.

Sin embargo, en las sesiones modo multimedia en retransmitido, la reducción de la frecuencia de imagen no reduce el ancho de banda del flujo.

En videoHeight() y videoWidth() devuelven la resolución configurada del objeto Publisher. La resolución real de un flujo de vídeo de abonado se devuelve mediante el método videoWidth() y videoHeight() del objeto Suscriptor. Éstos pueden diferir de los valores de resolution que ha pasado a OT.initPublisher() si el navegador de publicación no admite la resolución solicitada.

Sugerencias sobre contenidos de vídeo

Puede establecer una sugerencia de contenido de vídeo para mejorar la calidad y el rendimiento de un vídeo publicado. Esto puede ser útil en determinadas situaciones:

• Al publicar un vídeo para compartir la pantalla que contendrá principalmente texto o contenido de vídeo.
• Cuando utilice una fuente de vídeo de cámara, si prefiere degradar la frecuencia de imagen y mantener la resolución, puede establecer la sugerencia de contenido en "texto" o "detalle". En una sesión enrutada, si el editor soporta el uso de vídeo escalable, enviará un flujo de resolución completa y baja velocidad de fotogramas y - si las condiciones de la red lo permiten - un flujo de resolución completa y velocidad de fotogramas regular. El router OpenTok Media reenviará uno de esos flujos a los abonados.

Esto indica al navegador que utilice métodos de codificación o procesamiento más apropiados para el tipo de contenido especificado.

Establezca la sugerencia de contenido de vídeo inicial para una secuencia estableciendo el parámetro videoContentHint de las opciones que introduzca en el campo OT.initPublisher() método:

var publisherOptions = {
  videoContentHint: "text",
  // other options, such as videoSource: "screen"
};
var publisher = OT.initPublisher(targetElement, publisherOptions, callbackFunction);

Puede cambiar la sugerencia de contenido de vídeo dinámicamente llamando a la función setVideoContentHint() de un objeto Publisher:

publisher.setVideoContentHint("motion");

Puede establecer la sugerencia de contenido de vídeo en uno de los siguientes valores:

• "" - No se proporciona ninguna sugerencia (por defecto). El cliente de publicación hará una estimación de cómo debe tratarse el contenido de vídeo.
• "motion" - La pista debe tratarse como si contuviera vídeo en el que el movimiento es importante. Por ejemplo, puede utilizar esta configuración para un flujo de vídeo de pantalla compartida que contenga vídeo.
• "detail" - La pista debe tratarse como si los detalles del vídeo fueran extra importantes. Por ejemplo, puede utilizar este ajuste para un flujo de vídeo de pantalla compartida que contenga contenido de texto, pintura o arte lineal.
• "text" - La pista debe tratarse como si los detalles de texto fueran extra importantes. Por ejemplo, puede utilizar este ajuste para un flujo de vídeo de pantalla compartida que contenga texto.

Con las sugerencias de contenido "texto" y "detallado", el navegador intenta mantener una resolución alta, aunque tenga que reducir la frecuencia de imagen del vídeo. En el caso de la sugerencia de contenido "movimiento", el navegador reduce la resolución para evitar que la frecuencia de imagen se detenga.

Chrome 60+, Safari 12.1+, Edge 79+, Opera 47+, las versiones recientes de Samsung Internet, WebView Android y WebView en iOS 12.2+ admiten sugerencias de contenido de vídeo. La configuración se ignora en otros navegadores.

Establecer la tasa de bits máxima

Puedes establecer una tasa de bits de vídeo máxima para un editor con el fin de limitar el uso del ancho de banda (por ejemplo, en redes con contador). Utiliza preajustes predefinidos (DEFAULT, BW_SAVER, EXTRA_BW_SAVER) o establece un valor de tasa de bits sin procesar; el codificador se adaptará dentro del rango permitido en función de las condiciones de la red. Véase esta documentación.

Publicar desde fuentes alternativas (Web)

Publicar desde fuentes de vídeo personalizadas

Puede establecer la fuente de vídeo para un Editor en un objeto MediaStreamTrack de vídeo. Esto le permite hacer lo siguiente:

• Publicar vídeo utilizando un elemento HTML Canvas como vídeo. Puede llamar al elemento captureStream() del objeto HTMLCanvasElement y llamar al método getVideoTracks() del objeto CanvasCaptureMediaStream resultante para obtener un objeto MediaStreamTrack de vídeo.

• Publicar vídeo desde un elemento Vídeo. Llame al captureStream() de un objeto HTMLVideoElement para obtener un objeto MediaStream. La dirección getVideoTracks() del objeto MediaStream devuelve una matriz de objetos MediaStreamTrack de audio (normalmente uno). A continuación, puede utilizar el objeto MediaStreamTrack como el objeto audioSource propiedad del options que se pasa al objeto OT.initPublisher() método.

Puede utilizar un objeto MediaStreamTrack de vídeo como el objeto videoSource propiedad del options que se pasa al objeto OT.initPublisher() método. Esto hace que el vídeo representado por el objeto MediaStreamTrack sea la fuente de vídeo para el flujo publicado.

La configuración de la fuente de video a un objeto MediaStreamTrack no es compatible con el complemento de video de Vonage para Internet Explorer.

Publicar desde fuentes de audio personalizadas

Puede establecer la fuente de audio para un Editor en un objeto MediaStreamTrack de audio. Esto le permite hacer lo siguiente:

• Publicar audio desde un elemento Audio o Video. Llame al captureStream() de un objeto HTMLAudioElement o un objeto HTMLVideoElement para obtener un objeto MediaStream. La dirección getAudioTracks() del objeto MediaStream es un array de objetos MediaStreamTrack de audio (normalmente uno). A continuación, puede utilizar el objeto MediaStreamTrack como el método audioSource propiedad del options que se pasa al objeto OT.initPublisher() método.
• Publicar audio desde un objeto MediaStreamTrack de audio. Por ejemplo, puede utilizar el objeto AudioContext y la Web audio API para generar audio de forma dinámica. A continuación, puede llamar a createMediaStreamDestination().stream.getAudioTracks()[0] en el objeto AudioContext para obtener el objeto MediaStreamTrack de audio que se utilizará como objeto audioSource propiedad del options que se pasa al objeto OT.initPublisher() método.

Aplicación de filtros y efectos

Puede aplicar filtros y efectos sobre el audio o el vídeo obtenido de un micrófono o una cámara utilizados como fuente para una secuencia publicada. Consulte Filtros y efectos.

Otras opciones de audio y vídeo

Consulte la lista completa de opciones en Ajustes del editor.