Compartir pantalla mediante el SDK web

Importante: A partir de Chrome 72+, Firefox 52+ y Opera 59+, ya no es necesaria una extensión para compartir la pantalla. El navegador solicita al usuario final el acceso a la pantalla como lo haría para acceder a la cámara.

En versiones anteriores de Opera y Chrome, para publicar un vídeo de pantalla compartida, el cliente necesita añadir una extensión que permita publicar flujos de pantalla compartida para su dominio. (Véase Desarrollar una extensión para compartir pantalla.)

Nota: En macOS 10.15+ (Catalina), para publicar un flujo de pantalla compartida el usuario debe conceder al navegador acceso a la pantalla en Preferencias del Sistema de macOS > Seguridad y privacidad > Privacidad > Grabación de pantalla. De lo contrario, el Editor enviará un accessDenied evento.

El complemento de Vonage Video para Internet Explorer es compatible con la función de compartir pantalla. (Ten en cuenta que la compatibilidad con el complemento de Vonage Video para Internet Explorer se elimina en Vonage Video 2.17).

En Electron, la pantalla compartida es compatible si el webPreferences.contextIsolation de Electron BrowserWindow se establece en false o si la aplicación utiliza un script de precarga para acceder al capturador de escritorio. Para obtener más información, consulte Activar la pantalla compartida en Electron.

La publicación de flujos de pantalla compartida es actualmente no compatible con Safari en iOS o con Safari 12 y versiones anteriores en macOS.

En todos los navegadores compatibles, la publicación de un flujo de pantalla compartida requiere que la página se cargue a través de HTTPS.

La publicación de vídeos para compartir pantalla es compatible con Chrome, Firefox, Opera, las versiones de Edge basadas en Chromium (versiones 79+) y Safari 13+. Actualmente no compatible con navegadores móviles, Safari 12 y versiones anteriores en macOS. La publicación de un flujo de pantalla compartida solo es compatible cuando la página web se carga a través de HTTPS.

Nota: Para poder compartir pantalla en versiones anteriores de Chrome y Opera, debes crear una extensión para compartir pantalla.

No se requiere ninguna extensión para suscribirse a una transmisión de video de pantalla compartida, lo cual es posible en todos los navegadores que admiten la Video API de Vonage.

Desarrollo de una extensión para compartir pantalla (obsoleto)

Importante: Las extensiones para compartir pantalla no son necesarias en las últimas versiones de Chrome, Firefox y Opera.

Para poder compartir pantalla en versiones anteriores de Chrome y Opera, debes crear una extensión para compartir pantalla.

https://github.com/opentok/screensharing-extensions

Comprobación de la compatibilidad con la pantalla compartida

Para comprobar si la publicación de un flujo de pantalla compartida es compatible con el navegador cliente, llame a la función OT.checkScreenSharingCapability() método. Este método recibe un parámetro: una función de devolución de llamada. A la función de devolución de llamada se le pasa un response Este objeto tiene las siguientes propiedades Este objeto tiene las siguientes propiedades que indican el soporte para publicar flujos de pantalla compartida en el cliente:

supported - (Booleano) Indica si se puede compartir.
supportedSources- Obsoleto. En versiones anteriores del navegador, se podía seleccionar un tipo de fuente de pantalla compartida (como "application", "screen"o "window" estableciendo el videoSource de las opciones introducidas en el campo OT.initPublisher() método. Sin embargo, en los navegadores actuales que soportan la compartición de pantalla, pasar cualquiera de estos valores resulta en el mismo comportamiento - el navegador muestra un cuadro de diálogo en el que el usuario final selecciona la fuente de compartición de pantalla (que puede ser toda la pantalla o una ventana específica). En Electron, la pantalla compartida captura toda la pantalla, sin pedir permiso al usuario.

El parámetro de opciones también incluye las siguientes propiedades, que se aplican al soporte de pantalla compartida en versiones antiguas de Chrome y Opera, que requieren extensiones de pantalla compartida - en otros navegadores, no están definidas:

extensionRequired (Cadena) - Se establece en "chrome" en versiones antiguas de Chrome (anteriores a Chrome 72) y Opera (anteriores a Opera 59), que requieren la instalación de una extensión para compartir pantalla.
extensionRegistered (Boolean) - En versiones antiguas de Chrome (anteriores a Chrome 72) y Opera (anteriores a Opera 59), esta propiedad se establece en true si se ha registrado una extensión para compartir pantalla; en caso contrario, se establece en false. Utilice el OT.registerScreenSharingExtension() para registrar una extensión en Chrome u Opera.
extensionInstalled (booleano) - Si se requiere una extensión, se establece en true si la extensión está instalada (y registrada, si es necesario); de lo contrario, se establece en false.

Nota: Compartir pantalla sólo es posible cuando la página web se carga a través de HTTPS.

El siguiente ejemplo muestra cómo comprobar la compatibilidad con la pantalla compartida:

OT.checkScreenSharingCapability(function(response) {
  if(!response.supported || response.extensionRegistered === false) {
    // This browser does not support screen sharing
  }
});

Ajuste de la resolución máxima del flujo

Puede establecer un maxResolution cuando llame a la propiedad OT.initPublisher() método. Esta propiedad establece la resolución máxima del flujo. Cuando se comparte una ventana, la resolución del flujo coincidirá con las dimensiones de la ventana a menos que la ventana sea mayor que la propiedad maxResolution (cuando el usuario cambia el tamaño de la ventana).

En maxResolution es un objeto con dos propiedades: width y height. El valor máximo de cada uno es 1920, y el valor mínimo es 10.

var publishOptions = {};
publishOptions.maxResolution = { width: 1920, height: 1080 };
publishOptions.videoSource = 'screen';
OT.initPublisher('some-element-id', publishOptions);

Para compartir pantalla, no configure la opción resolution para el OT.initPublisher() método.

Es posible que no desee mostrar el vídeo de pantalla compartida en el DOM HTML de la página desde la que lo publica. Por ejemplo, si está compartiendo toda la pantalla e incluye el vídeo en el DOM HTML, verá un efecto recursivo de "sala de espejos". Para evitarlo, cree un elemento HTML DOM para el elemento editor y no muestre el elemento en el HTML DOM:

    var publishOptions = {videoSource: 'screen'};
    var screenPublisherElement = document.createElement('div');
    OT.initPublisher(screenPublisherElement, publishOptions);

Recortar o poner en buzón los vídeos para compartir pantalla

Puede establecer un fitMode propiedad del options que se pasa al parámetro OT.initPublisher() y Session.subscribe() métodos. El sitio fitMode determina cómo se muestra el vídeo si sus dimensiones no coinciden con las del elemento DOM. Puede establecer esta propiedad en uno de los siguientes valores:

"cover" - El vídeo se recorta si sus dimensiones no coinciden con las del elemento DOM. Esta es la configuración predeterminada para los vídeos que publican un feed de cámara.
"contain" - El vídeo aparece en buzón si sus dimensiones no coinciden con las del elemento DOM. Esta es la configuración predeterminada para los vídeos de pantalla compartida.

Detección de cambios en las dimensiones del vídeo

El objeto Editor que publica un flujo de pantalla compartida y el objeto Suscriptor que se suscribe a un flujo de pantalla compartida pueden enviar cada uno un comando videoDimensionsChanged evento. El evento se envía cuando el cliente de publicación cambia el tamaño de una ventana compartida.

En videoDimensionsChanged tiene las siguientes propiedades:

newValue - Un objeto con propiedades de anchura y altura que definen la nueva anchura y altura del vídeo.
oldValue - Un objeto con propiedades de anchura y altura que definen la anchura y altura previas del vídeo.
target - El objeto Editor o Abonado.

Puede utilizar el newValue.width y newValue.height para ajustar el tamaño del editor en el DOM HTML:

var publisher = OT.initPublisher('some-element',
  {videoSource: 'screen'});

publisher.on('videoDimensionsChanged', function(event) {
  publisher.element.style.width = event.newValue.width + 'px';
  publisher.element.style.height = event.newValue.height + 'px';
});

Determinar cuándo el usuario deja de compartir la pantalla

Cuando el usuario deja de compartir la pantalla, el objeto Editor envía un comando mediaStopped evento.

Si el Editor también estaba publicando el flujo en una sesión, también enviará un evento streamDestroyed con la propiedad reason con el valor "mediaStopped". Además, el objeto Session de todos los clientes conectados a la sesión envía un comando streamDestroyed con el evento reason con el valor "mediaStopped".

El comportamiento por defecto tanto para el mediaStopped y el evento streamDestroyed es eliminar el editor (o el suscriptor en el caso de un flujo suscrito). Llame al evento preventDefault() del objeto de evento para evitar que se elimine el publicador o el suscriptor.

publisher.on('mediaStopped', function(event) {
  // The user clicked stop.
});

publisher.on('streamDestroyed', function(event) {
  if (event.reason === 'mediaStopped') {
    // User clicked stop sharing
  } else if (event.reason === 'forceUnpublished') {
    // A moderator forced the user to stop sharing.
  }
});

Activar la pantalla compartida en Electron

En Electron, la pantalla compartida es compatible si el webPreferences.contextIsolation de Electron BrowserWindow se establece en false o si la aplicación utiliza un script de precarga para acceder al capturador de escritorio. El valor predeterminado de webPreferences.contextIsolation es la opción true en Electrón 12+ y false en versiones anteriores. En Electron 17+, un cambio radical que hacía que la pantalla compartida sólo estuviera disponible tras utilizar un script de precarga.

Activación de la pantalla compartida a través del script de precarga en las versiones Electron 12-16

Para habilitar la pantalla compartida en las versiones Electron 12-16 utilizando un script de precarga, añada lo siguiente al archivo preload.js:

const {
  contextBridge,
  desktopCapturer
} = require('electron');
// Expose the desktopCapturer so that OpenTok.js can access it
// via window.electron.desktopCapturer
contextBridge.exposeInMainWorld(
  'electron', {
    desktopCapturer,
  }
);

A continuación, haga referencia a preload.js al instanciar un BrowserWindow en Electron:

mainWindow = new BrowserWindow({
  webPreferences: {
    nodeIntegration: true,
    preload: path.join(__dirname, 'preload.js'), // use the preload script
  }
});

Activación de la pantalla compartida mediante el script de precarga en las versiones 17+ de Electron

Para habilitar la pantalla compartida en las versiones 17+ de Electron, añade lo siguiente al archivo preload.js:

const {
  contextBridge,
  ipcRenderer
} = require('electron');

// Event emitter to send asynchronous messages to the main process. The
// corresponding ipcMain handler listens for the 'DESKTOP_CAPTURER_GET_SOURCES'
// channel and returns an array of the available DesktopCapturerSource objects.
const desktopCapturer = {
  getSources: (opts) => ipcRenderer.invoke('DESKTOP_CAPTURER_GET_SOURCES', opts)
};

// Expose desktopCapturer so that the SDK can access it.
contextBridge.exposeInMainWorld(
  'electron', {
    desktopCapturer
  }
);