Compartir pantalla: Conceptos generales

Puedes publicar una retransmisión que utilice una captura de 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).

El videoSource del parámetro options del OT.initPublisher() define la fuente de vídeo del flujo que se va a publicar. Para compartir pantalla, establezca esta propiedad en "screen". En versiones anteriores del navegador, también se podía pasar en "application" o "window" para especificar un tipo de fuente de pantalla compartida. Sin embargo, en los navegadores actuales que admiten la función de pantalla compartida, al introducir cualquiera de estos valores se produce el mismo comportamiento: el navegador muestra un cuadro de diálogo en el que el usuario final selecciona la fuente de pantalla compartida (que puede ser toda la pantalla o una ventana concreta). En Electron, la función de compartir pantalla captura toda la pantalla, sin solicitar permiso al usuario.

El siguiente código muestra cómo publicar una retransmisión que utiliza la función de compartir pantalla como fuente:

<div id="publisher"></div>
<div id="screen-preview"></div>
<script>
OT.checkScreenSharingCapability(function(response) {
  if(!response.supported || response.extensionRegistered === false) {
    // This browser does not support screen sharing.
  } else if (response.extensionInstalled === false) {
    // Prompt to install the extension.
  } else {
    // Screen sharing is available. Publish the screen.
    var publisher = OT.initPublisher('screen-preview',
      {videoSource: 'screen'},
      function(error) {
        if (error) {
          // Look at error.message to see what went wrong.
        } else {
          session.publish(publisher, function(error) {
            if (error) {
              // Look error.message to see what went wrong.
            }
          });
        }
      }
    );
  }
});
</script>

En caso de error, el gestor de finalización de OT.initPublisher() se le puede pasar un objeto de error con uno de los siguientes códigos de error:

1550 - "No se admite compartir pantalla".
1551 — «Para compartir pantalla se necesita un tipo pero no hay ninguna extensión registrada para tipo."
1552 — «Para compartir pantalla se necesita un tipo «extensión, pero no está instalada».

Cuando se publica un flujo de pantalla compartida, se establecen los siguientes valores por defecto para los parámetros options del OT.initPublisher() método:

maxResolution - { width: 1920, height: 1920 }
mirror - false
fitMode - "contain"
publishAudio - false

Además, los suscriptores del flujo resultante también utilizan por defecto el "contain" fitMode ajuste.

Para obtener información sobre maxResolution y fitModeconsulte las dos secciones siguientes.

Por defecto, vídeo escalable está desactivado para los flujos de pantalla compartida. Puede activar el vídeo escalable para los flujos de pantalla compartida configurando el parámetro scalableScreenshare opción para el OT.initPublisher() método. Nota: vídeo escalable para flujos de pantalla compartida es un beta característica.

Para utilizar la pantalla del dispositivo, en lugar de una cámara, como fuente de vídeo, utiliza la clase PublisherKit para emplear un capturador de vídeo personalizado. Para ver un ejemplo de código, consulta la actividad de uso compartido de pantalla en el directorio «samples» del SDK.

Llame al setPublisherVideoType(PublisherKit.PublisherKitVideoType type) del objeto Publisher e introduzca PublisherKit.PublisherKitVideoTypePublisherKitVideoTypeScreen. Esto indica que el flujo publicado tiene una fuente de vídeo de pantalla compartida (en lugar de una cámara).

Antes de publicar un flujo de pantalla compartida que utilice el tipo de vídeo de pantalla en una sesión enrutada, debe llamar a la función setAudioFallbackEnabled(boolean enabled) método del objeto PublisherKit y pasarle false. Esto desactiva la función de repuesto de solo audio, de modo que el vídeo no se interrumpa para los suscriptores. Véase El enrutador de medios de video de Vonage y los modos de medios.

Por defecto, vídeo escalable está desactivado para las transmisiones de pantalla compartida. Puedes activar el vídeo escalable para las transmisiones de pantalla compartida mediante el PublisherKit.Builder.scalableScreenshare() método.

Para utilizar la pantalla del dispositivo, en lugar de una cámara, como fuente de vídeo, utiliza la clase PublisherKit para emplear un capturador de vídeo personalizado. Para ver un ejemplo de código, consulta el proyecto «Screen-Sharing» en el directorio «samples» del SDK.

Fije el OTPublisherKit.videoType propiedad a OTPublisherKitVideoTypeScreen (definido en OTPublisherKitVideoType). Indica que el flujo publicado tiene una fuente de vídeo de pantalla compartida (en lugar de una cámara).

Antes de publicar una transmisión compartida de pantalla que utilice el tipo de vídeo «pantalla» en una sesión que utilice el servidor de medios de vídeo de Vonage, debes configurar el OTPublisherKit.audioFallbackEnabled a NO (false en swift). Esto deshabilita la función fallback de sólo audio, para que el vídeo no se caiga en los suscriptores. Véase El enrutador de medios de video de Vonage y los modos de medios.

Por defecto, vídeo escalable está desactivado para las transmisiones de pantalla compartida. Puedes activar el vídeo escalable para las transmisiones de pantalla compartida mediante el OTPublisherKitSettings.scalableScreenshare propiedad. Nota: vídeo escalable para flujos de pantalla compartida es un beta característica.

Para utilizar la pantalla del dispositivo, en lugar de una cámara, como fuente de vídeo, utiliza la clase PublisherKit para emplear un capturador de vídeo personalizado. Para ver un ejemplo de código, consulta el proyecto «Screen-Sharing» en el directorio «samples» del SDK.

Por defecto, vídeo escalable está desactivado para las transmisiones de pantalla compartida. Puedes activar el vídeo escalable para las transmisiones de pantalla compartida mediante el OTPublisherKitSettings.scalableScreenshare propiedad. Nota: vídeo escalable para flujos de pantalla compartida es un beta característica.

Para utilizar la pantalla del dispositivo, en lugar de una cámara, como fuente de vídeo, tendrá que implementar una función capturador de vídeo personalizado.

A continuación se muestra un ejemplo que define un capturador de vídeo personalizado para implementar la compartición de pantalla (utilizando la pantalla en lugar de una cámara como fuente de vídeo):

public class ScreenSharingCapturer : IVideoCapturer
{
    System.Threading.Timer timer;
    IVideoFrameConsumer frameConsumer;
    const int WIDTH = 640;
    const int HEIGHT = 480;
    const int FPS = 30;

    public void Init(IVideoFrameConsumer frameConsumer)
    {
        this.frameConsumer = frameConsumer;
    }

    public void Start()
    {
        timer = new System.Threading.Timer((Object stateInfo) =>
        {
            using (Bitmap bitmap = new Bitmap(WIDTH, HEIGHT, System.Drawing.Imaging.PixelFormat.Format32bppArgb))
            {
                using (Graphics graphics = Graphics.FromImage(bitmap as Image))
                {
                    graphics.CopyFromScreen(0, 0, 0, 0, new Size(WIDTH, HEIGHT), CopyPixelOperation.SourceCopy);
                }
                using (var frame = OpenTok.VideoFrame.CreateYuv420pFrameFromBitmap(bitmap))
                {
                    frameConsumer.Consume(frame);
                }
            }

        }, null, 0, 1000 / FPS);
    }

    public void Stop()
    {
        if (timer != null)
        {
            using (var timerDisposed = new ManualResetEvent(false))
            {
                timer.Dispose(timerDisposed);
                timerDisposed.WaitOne();
            }
        }
        timer = null;
    }

    public void Destroy()
    {
    }

    public VideoCaptureSettings GetCaptureSettings()
    {
        VideoCaptureSettings settings = new VideoCaptureSettings();
        settings.Width = WIDTH;
        settings.Height = HEIGHT;
        settings.Fps = FPS;
        settings.MirrorOnLocalRender = false;
        settings.PixelFormat = PixelFormat.FormatYuv420p;

        return settings;
    }
}

Fije el VideoSourceType del objeto Editor a OpenTok.VideoSourceType.Screen. Esto indica que el flujo publicado tiene una fuente de vídeo de pantalla compartida (en lugar de una cámara).

Nota: vídeo escalable para flujos de pantalla compartida es un beta característica.

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 emite un evento «streamPropertyChanged» cuando cambian las dimensiones de la transmisión de otro cliente. Esto puede ocurrir cuando el cliente que realiza la publicación cambia el tamaño de una ventana que se está compartiendo (como la ventana de un navegador en una aplicación que utilice el Vonage Client SDK). La propiedad «changedProperty» del objeto del evento se establece en «videoDimensions». Las propiedades stream.height y stream.width del objeto de evento corresponden a la nueva anchura y altura del vídeo.

<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>

Puedes utilizar los datos de dimensiones y tipo de vídeo de las transmisiones para ajustar el tamaño o las dimensiones de los suscriptores correspondientes en la interfaz de usuario. Para obtener más información sobre cómo personalizar la disposición de los suscriptores en la interfaz de usuario, consulta Suscripción a flujos.

El objeto Stream contiene un videoType propiedad. Se puede establecer en uno de los siguientes valores

"camera" — una transmisión 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 solo 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>

El objeto Stream contiene un videoType propiedad. Puede establecerse a uno de los siguientes valores, definidos en el enum Stream.StreamVideoType:

StreamVideoTypeCamera — una transmisión de vídeo estándar que utiliza una cámara como fuente de vídeo
StreamVideoTypeScreen - un flujo de vídeo de pantalla compartida
StreamVideoTypeCustom - un flujo publicado por un cliente web que utiliza un elemento HTML VideoTrack como fuente de vídeo.

El objeto Stream contiene un videoType propiedad. Se puede establecer en uno de los siguientes valores, definidos en la enumeración OTStreamVideoType:

OTStreamVideoTypeCamera — una transmisión de vídeo estándar que utiliza una cámara como fuente de vídeo
OTStreamVideoTypeScreen - un flujo de vídeo de pantalla compartida
OTStreamVideoTypeCustom - un flujo publicado por un cliente web que utiliza un elemento HTML VideoTrack como fuente de vídeo

El objeto Stream contiene un videoType propiedad. Se puede establecer en uno de los siguientes valores, definidos en la enumeración OTStreamVideoType:

OTStreamVideoTypeCamera — una transmisión de vídeo estándar que utiliza una cámara como fuente de vídeo
OTStreamVideoTypeScreen - un flujo de vídeo de pantalla compartida
OTStreamVideoTypeCustom - un flujo publicado por un cliente web que utiliza un elemento HTML VideoTrack como fuente de vídeo

El objeto Stream contiene un VideoSourceType propiedad. Se puede establecer en uno de los siguientes valores, definidos en el archivo OpenTok.VideoSourceType enum:

Camera — una transmisión 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.

Suscribirse a las retransmisiones con pantalla compartida

El objeto Stream contiene un videoType propiedad. Se puede establecer en uno de los siguientes valores

"camera" — una transmisión 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 solo de voz)

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>

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 utilice una cámara como fuente. Consulte Suscripción a secuencias en Swift.