Publicar: Configuración 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

Para que un «Publisher» pueda acceder a la cámara y al micrófono del cliente, el usuario debe concederle permiso. El objeto «Publisher» emite 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 propiedad que indica si se ha concedido el acceso.

Selecciona la cámara y el 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 la 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 Publisher:

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 que el usuario seleccione la cámara y el micrófono que desea utilizar en IE (e ignorar las selecciones de dispositivos anteriores), no establezcas el usePreviousDevices en las opciones que introduzca en el campo OT.initPublisher() método (o configúralo en false, el valor por 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");
});

Configurar la resolución y la frecuencia de fotogramas

Configura la resolución de vídeo y la frecuencia de fotogramas recomendadas a través de 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 y la frecuencia de fotogramas reales del suscriptor 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 una transmisión publicada, configura el 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 predeterminado es 640x480.

Para establecer una frecuencia de fotogramas recomendada para una transmisión publicada, configura el 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.

En el caso de las sesiones que utilizan el Media Router (sesiones con el 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.

El 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() métodos del objeto «Subscriber». Estos pueden diferir de los valores de la resolution propiedad que has pasado a OT.initPublisher() si el navegador de publicación no admite la resolución solicitada.

Consejos sobre contenidos de vídeo

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

• Al publicar un vídeo de pantalla compartida que contenga 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.

Para establecer la indicación de contenido de vídeo inicial de una transmisión, configura el videoContentHint propiedad de las opciones que pasas a la OT.initPublisher() método:

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

Puedes modificar dinámicamente la sugerencia del contenido de vídeo llamando a la función setVideoContentHint() método de un objeto Publisher:

publisher.setVideoContentHint("motion");

Puedes establecer la indicación 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 sea importante. Por ejemplo, puedes utilizar esta configuración para una transmisión 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 máxima de vídeo para un Publisher con el fin de limitar el uso del ancho de banda (por ejemplo, en redes con tarifa por consumo). Utiliza los ajustes 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. Consulta 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() método del objeto HTMLCanvasElement y llamar a la getVideoTracks() método del objeto `CanvasCaptureMediaStream` resultante para obtener un objeto `MediaStreamTrack` de vídeo.

• Publicar vídeo desde un elemento Vídeo. Llame al captureStream() método de un objeto HTMLVideoElement para obtener un objeto MediaStream. El 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.

Puedes utilizar un objeto MediaStreamTrack de vídeo como el 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() El método del objeto `MediaStream` es una matriz de objetos `MediaStreamTrack` de audio (normalmente uno). A continuación, puedes utilizar el objeto `MediaStreamTrack` como el audioSource propiedad del options que se pasa al objeto OT.initPublisher() método.
• Publica audio desde un objeto `MediaStreamTrack`. Por ejemplo, puedes utilizar el objeto `AudioContext` y la API de audio web para generar audio de forma dinámica. A continuación, puedes 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.

Aplicar filtros y efectos

Puedes aplicar filtros y efectos al audio o al vídeo procedentes de un micrófono o una cámara utilizados como fuente para una retransmisión publicada. Consulta Filtros y efectos.

Otras opciones de audio y vídeo

Consulta la lista completa de opciones en Ajustes del editor.