Compartilhamento de tela: conceitos gerais

Você pode publicar uma transmissão que utilize uma captura de tela (em vez de uma câmera) como fonte.

Um cliente conectado à sessão pode se inscrever no stream (e visualizá-lo) da mesma forma que se inscreveria em um stream que usa uma câmera como fonte.

Como transmitir com uma fonte de compartilhamento de tela

Para publicar uma transmissão de compartilhamento de tela, defina a propriedade videoSource do objeto de propriedades OTPublisher como “screen”:

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

A transmissão de compartilhamento de tela capturará o vídeo de toda a tela do aplicativo. Por esse motivo, talvez seja recomendável desativar os assinantes no cliente local ao publicar uma transmissão de compartilhamento de tela (para evitar que eles apareçam na transmissão publicada).

O videoSource propriedade do parâmetro “options” do OT.initPublisher() O método define a fonte de vídeo para a transmissão a ser publicada. Para o compartilhamento de tela, defina esta propriedade como "screen". Em versões mais antigas do navegador, também era possível passar "application" ou "window" para especificar um tipo de fonte de compartilhamento de tela. No entanto, nos navegadores atuais que oferecem suporte ao compartilhamento de tela, a passagem de qualquer um desses valores resulta no mesmo comportamento — o navegador exibe uma caixa de diálogo na qual o usuário final seleciona a fonte de compartilhamento de tela (que pode ser a tela inteira ou uma janela específica). No Electron, o compartilhamento de tela captura a tela inteira, sem solicitar permissão ao usuário.

O código a seguir mostra como publicar uma transmissão que usa o compartilhamento de tela como fonte:

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

Em caso de erro, o manipulador de conclusão para o OT.initPublisher() É possível passar para o método um objeto de erro com um dos seguintes códigos de erro:

1550 — “O compartilhamento de tela não é compatível.”
1551 — “Para compartilhar a tela, é necessário um tipo extensão, mas não há nenhuma extensão registrada para tipo."
1552 — “Para compartilhar a tela, é necessário um tipo extensão, mas ela não está instalada."

Ao publicar uma transmissão com compartilhamento de tela, os seguintes valores padrão são definidos para o options parâmetro do OT.initPublisher() método:

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

Além disso, os assinantes do fluxo resultante também passam a usar, por padrão, o "contain" fitMode configuração.

Para obter informações sobre maxResolution e fitMode, consulte as duas seções seguintes.

Por padrão, vídeo escalável está desativado para transmissões de compartilhamento de tela. Você pode ativar o vídeo escalável para transmissões de compartilhamento de tela configurando o scalableScreenshare opção para o OT.initPublisher() método. Observação: O vídeo escalável para transmissões de compartilhamento de tela é um beta recurso.

Para usar a tela do dispositivo, em vez de uma câmera, como fonte de vídeo, utilize a classe PublisherKit para empregar um capturador de vídeo personalizado. Para obter um exemplo de código, consulte a atividade de compartilhamento de tela no diretório de exemplos do SDK.

Ligue para o setPublisherVideoType(PublisherKit.PublisherKitVideoType type) propriedade do objeto Publisher e passar PublisherKit.PublisherKitVideoTypePublisherKitVideoTypeScreen. Isso indica que a transmissão publicada tem uma fonte de vídeo de compartilhamento de tela (em vez de uma câmera).

Antes de publicar uma transmissão de compartilhamento de tela que utilize o tipo de vídeo “tela” em uma sessão roteada, você deve chamar a função setAudioFallbackEnabled(boolean enabled) método do objeto PublisherKit e passar false. Isso desativa o recurso de fallback apenas para áudio, de modo que o vídeo não seja interrompido para os assinantes. Consulte O Roteador de Mídia de Vídeo da Vonage e os modos de mídia.

Para usar a tela do dispositivo, em vez de uma câmera, como fonte de vídeo, utilize a classe PublisherKit para empregar um capturador de vídeo personalizado. Para obter um exemplo de código, consulte o projeto “Screen-Sharing” no diretório de exemplos do SDK.

Defina o OTPublisherKit.videoType propriedade para OTPublisherKitVideoTypeScreen (definido em OTPublisherKitVideoType). Isso indica que o stream publicado tem uma fonte de vídeo de compartilhamento de tela (em vez de uma câmera).

Antes de publicar uma transmissão de compartilhamento de tela que utilize o tipo de vídeo “tela” em uma sessão que utilize o Vonage Video Media Server, você deve definir o OTPublisherKit.audioFallbackEnabled propriedade para NO (false no Swift). Isso desativa o recurso de fallback apenas de áudio, de modo que o vídeo não seja interrompido nos assinantes. Consulte O Roteador de Mídia de Vídeo da Vonage e os modos de mídia.

Por padrão, vídeo escalável está desativado para transmissões de compartilhamento de tela. Você pode ativar o vídeo escalável para transmissões de compartilhamento de tela usando o OTPublisherKitSettings.scalableScreenshare propriedade. Observação: O vídeo escalável para transmissões de compartilhamento de tela é um beta recurso.

Para usar a tela do dispositivo, em vez de uma câmera, como fonte de vídeo, utilize a classe PublisherKit para empregar um capturador de vídeo personalizado. Para obter um exemplo de código, consulte o projeto “Screen-Sharing” no diretório de exemplos do SDK.

Para usar a tela do dispositivo, em vez de uma câmera, como fonte de vídeo, você precisará implementar um capturador de vídeo personalizado.

Aqui está um exemplo que define um capturador de vídeo personalizado para implementar o compartilhamento de tela (usando a tela, em vez de uma câmera, como fonte 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;
    }
}

Defina o VideoSourceType propriedade do objeto Publisher para OpenTok.VideoSourceType.Screen. Isso indica que a transmissão publicada tem uma fonte de vídeo de compartilhamento de tela (em vez de uma câmera).

Observação: O vídeo escalável para transmissões de compartilhamento de tela é um beta recurso.

Determinação do tipo de vídeo (“tela” ou “câmera”) para uma transmissão

Você pode se inscrever em uma transmissão que utilize uma fonte de vídeo de compartilhamento de tela da mesma forma que se inscreve em uma transmissão que utilize uma câmera como fonte. Consulte Inscrever-se em canais.

É possível identificar se uma transmissão é do tipo compartilhamento de tela verificando o videoType propriedade do objeto de evento na OTSession streamCreated evento. Para uma transmissão com compartilhamento de tela, essa propriedade é definida como "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>

O objeto OTSession dispara um evento `streamPropertyChanged` quando as dimensões do stream de outro cliente são alteradas. Isso pode ocorrer quando o cliente que está transmitindo redimensiona uma janela que está sendo compartilhada (como uma janela do navegador em um aplicativo que utiliza o Vonage Client SDK). A propriedade `changedProperty` do objeto do evento é definida como “videoDimensions”. As propriedades stream.height e stream.width do objeto de evento correspondem à nova largura e altura do 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>

Você pode usar as dimensões do vídeo e os detalhes do tipo de vídeo (videoType) das transmissões para ajustar o tamanho ou as dimensões dos assinantes correspondentes na interface do usuário. Para obter detalhes sobre como personalizar o layout dos assinantes na interface do usuário, consulte Inscrever-se em canais.

O objeto Stream contém um videoType propriedade. Ela pode ser definida com um dos seguintes valores

"camera" — uma transmissão de vídeo padrão que utiliza uma câmera como fonte de vídeo
"screen" — uma transmissão de vídeo com compartilhamento de tela
"custom" — um stream publicado por um cliente web usando um elemento VideoTrack em HTML como fonte de vídeo
undefined — uma transmissão é apenas de voz (consulte o Guia apenas por voz)

Essa propriedade pode ser alterada se uma transmissão publicada a partir de um dispositivo móvel mudar de um tipo de vídeo de câmera para um tipo de vídeo de compartilhamento de tela. Quando o tipo de vídeo muda, o objeto Session dispara um streamPropertyChanged evento.

O código a seguir assina fluxos e os adiciona a diferentes elementos contêineres DIV em HTML, de acordo com o 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>

O objeto Stream contém um videoType propriedade. Ela pode ser definida como um dos seguintes valores, definidos na enumeração Stream.StreamVideoType:

StreamVideoTypeCamera — uma transmissão de vídeo padrão que utiliza uma câmera como fonte de vídeo
StreamVideoTypeScreen — uma transmissão de vídeo com compartilhamento de tela
StreamVideoTypeCustom — um stream publicado por um cliente web que utiliza um elemento VideoTrack em HTML como fonte de vídeo.

O objeto Stream contém um videoType propriedade. Ela pode ser definida como um dos seguintes valores, definidos na enumeração OTStreamVideoType:

OTStreamVideoTypeCamera — uma transmissão de vídeo padrão que utiliza uma câmera como fonte de vídeo
OTStreamVideoTypeScreen — uma transmissão de vídeo com compartilhamento de tela
OTStreamVideoTypeCustom — um stream publicado por um cliente web usando um elemento VideoTrack em HTML como fonte de vídeo

O objeto Stream contém um videoType propriedade. Ela pode ser definida como um dos seguintes valores, definidos na enumeração OTStreamVideoType:

OTStreamVideoTypeCamera — uma transmissão de vídeo padrão que utiliza uma câmera como fonte de vídeo
OTStreamVideoTypeScreen — uma transmissão de vídeo com compartilhamento de tela
OTStreamVideoTypeCustom — um stream publicado por um cliente web usando um elemento VideoTrack em HTML como fonte de vídeo

O objeto Stream contém um VideoSourceType propriedade. Ela pode ser definida como um dos seguintes valores, definidos no OpenTok.VideoSourceType enum:

Camera — uma transmissão de vídeo padrão que utiliza uma câmera como fonte de vídeo
Screen — uma transmissão de vídeo com compartilhamento de tela
Custom — um stream publicado por um cliente web que utiliza um elemento VideoTrack em HTML como fonte de vídeo.

Inscrever-se em transmissões com compartilhamento de tela

O objeto Stream contém um videoType propriedade. Ela pode ser definida com um dos seguintes valores

"camera" — uma transmissão de vídeo padrão que utiliza uma câmera como fonte de vídeo
"screen" — uma transmissão de vídeo com compartilhamento de tela
"custom" — um stream publicado por um cliente web usando um elemento VideoTrack em HTML como fonte de vídeo
undefined — uma transmissão é apenas de voz (consulte o Guia apenas por voz)

O código a seguir assina fluxos e os adiciona a diferentes elementos contêineres DIV em HTML, de acordo com o 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>