Compartir pantalla: Conceptos generales

Puede publicar un flujo que utilice una vista de vídeo de su pantalla (en lugar de una cámara) como fuente.

Un cliente conectado a la sesión puede suscribirse al flujo (y verlo) como si se suscribiera a un flujo que utiliza una cámara como fuente.

Publicar un flujo con una fuente de pantalla compartida

Para publicar un flujo de pantalla compartida, establece la propiedad videoSource de la propiedad prop de OTPublisher a "screen":

<OTPublisher
  properties={{
    videoSource: 'screen',
  }}
/>

El flujo de pantalla compartida capturará vídeo de toda la vista de la aplicación. Por esta razón, es posible que desee desactivar los suscriptores en el cliente local al publicar un flujo de pantalla compartida (para evitar que aparezcan en el flujo publicado).

Determinar el tipo de vídeo ("pantalla" o "cámara") para un flujo

Puede suscribirse a una transmisión que utilice una fuente de vídeo de pantalla compartida del mismo modo que se suscribe a una transmisión que utiliza una cámara como fuente. Consulte Suscripción a flujos.

Puede detectar que un flujo es un flujo de pantalla compartida, comprobando la opción videoType del objeto de evento en la OTSession streamCreated evento. Para un flujo de pantalla compartida, esta propiedad se establece en "screen":

<OTSession
  applicationId="the API key"
  sessionId="the session ID"
  token="the token"
  eventHandlers={{
    streamCreated: event => {
      console.log(event.videoType, 'stream created', event.streamId);
    }
  }}>
  { /* ... */ }
</OTSession>

El objeto OTSession envía un evento streamPropertyChanged cuando cambian las dimensiones de la transmisión de otro cliente. Esto puede suceder cuando el cliente de publicación cambia el tamaño de una ventana compartida (como una ventana del navegador en una aplicación que utiliza el SDK del cliente web de Vonage Video). La propiedad changedProperty del objeto de evento se establece en "videoDimensions". Las propiedades stream.height y stream.width del objeto de evento son el nuevo ancho y alto del video.

<OTSession
  applicationId="the API key"
  sessionId="the session ID"
  token="the token"
  eventHandlers={{
    streamPropertyChanged: event => {
      console.log(event.stream.streamId, 'stream property', event.changedProperty, 'changed:', event.stream.height, event.stream.width);
    }
  }}>
  { /* ... */ }
</OTSession>

Puede utilizar las dimensiones de vídeo y los detalles de videoType de las secuencias para ajustar el tamaño o las dimensiones de sus suscriptores correspondientes en la interfaz de usuario. Para obtener más información sobre cómo personalizar el diseño de los abonados en la interfaz de usuario, consulte Suscripción a flujos.

Suscribirse a flujos de pantalla compartida

El objeto Stream contiene un videoType propiedad. Puede tener uno de los siguientes valores

  • "camera" - un flujo de vídeo estándar que utiliza una cámara como fuente de vídeo
  • "screen" - un flujo de vídeo de pantalla compartida
  • "custom" - un flujo publicado por un cliente web que utiliza un elemento HTML VideoTrack como fuente de vídeo
  • undefined - un flujo es sólo de voz (véase el Guía sólo de voz)

Esta propiedad puede cambiar si un flujo publicado desde un dispositivo móvil cambia de un tipo de vídeo de cámara a uno de pantalla compartida. Cuando cambia el tipo de vídeo, el objeto Session envía un comando streamPropertyChanged evento.

El siguiente código se suscribe a streams y los añade a diferentes elementos contenedores HTML DIV, en función del tipo de vídeo:

<div id="people"></div>
<div id="screens"></div>
<script>
session.on('streamCreated', function(event) {
  var subOptions = {insertMode: 'append'};
  if(event.stream.videoType === 'screen') {
    session.subscribe(event.stream, 'screens', subOptions);
  } else {
    session.subscribe(event.stream, 'people', subOptions);
  }
});
</script>