Partage d'écran à l'aide du SDK Web

Important : Depuis Chrome 72+, Firefox 52+ et Opera 59+, une extension n'est plus nécessaire pour le partage d'écran. Le navigateur demande à l'utilisateur final d'accéder à l'écran comme il le ferait pour la caméra.

Dans les anciennes versions d'Opera et de Chrome, pour publier une vidéo de partage d'écran, le client doit ajouter une extension qui permet de publier des flux de partage d'écran pour votre domaine. (Voir Développer une extension de partage d'écran.)

Remarque : Sous macOS 10.15+ (Catalina), pour publier un flux de partage d'écran, l'utilisateur doit autoriser le navigateur à accéder à l'écran dans les Préférences système de macOS > Sécurité et confidentialité > Confidentialité > Enregistrement d'écran. Dans le cas contraire, l'éditeur enverra un accessDenied événement.

Le plugin Vonage Video pour Internet Explorer intègre la fonction de partage d'écran. (Notez que la prise en charge du plugin Vonage Video pour Internet Explorer est supprimée dans la version 2.17 de Vonage Video).

La publication de flux de partage d'écran est actuellement pas pris en charge dans Safari sur iOS ou dans Safari 12 et plus sur macOS.

Dans tous les navigateurs pris en charge, la publication d'un flux de partage d'écran nécessite que la page soit chargée via HTTPS.

La publication de vidéos en partage d'écran est prise en charge par Chrome, Firefox, Opera, les versions d'Edge basées sur Chromium (versions 79+) et Safari 13+. Elle est actuellement pas pris en charge dans les navigateurs mobiles, Safari 12 et les versions antérieures sur macOS. La publication d'un flux de partage d'écran n'est prise en charge que lorsque la page web est chargée via HTTPS.

Remarque : Pour prendre en charge le partage d'écran dans les anciennes versions de Chrome et d'Opera, vous devez créer une extension de partage d'écran.

Aucune extension n'est nécessaire pour s'abonner à un flux vidéo de partage d'écran, ce qui est possible dans tous les navigateurs qui prennent en charge l'API Video de Vonage.

Développement d'une extension de partage d'écran (obsolète)

Important : Les extensions de partage d'écran ne sont pas nécessaires dans les dernières versions de Chrome, Firefox et Opera.

Pour prendre en charge le partage d'écran dans les anciennes versions de Chrome et d'Opera, vous devez créer une extension de partage d'écran.

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

Vérification de la prise en charge du partage d'écran

Pour vérifier si la publication d'un flux de partage d'écran est prise en charge par le navigateur du client, appelez la fonction OT.checkScreenSharingCapability() (méthode de rappel). Cette méthode prend un paramètre : une fonction de rappel. La fonction de rappel se voit passer un response (objet de partage d'écran). Cet objet possède les propriétés suivantes qui indiquent la prise en charge de la publication de flux de partage d'écran dans le client :

supported - (Booléen) Indique si le partage est pris en charge.
supportedSources- Obsolète. Dans les versions antérieures du navigateur, vous pouviez sélectionner un type de source de partage d'écran (tel que "application", "screen"ou "window" en réglant le videoSource des options transmises à la fonction OT.initPublisher() (méthode de partage d'écran). Cependant, dans les navigateurs actuels qui prennent en charge le partage d'écran, l'introduction de l'une ou l'autre de ces valeurs entraîne le même comportement : le navigateur affiche une boîte de dialogue dans laquelle l'utilisateur final sélectionne la source de partage d'écran (qui peut être l'ensemble de l'écran ou une fenêtre spécifique). Dans Electron, le partage d'écran capture la totalité de l'écran, sans demander la permission à l'utilisateur.

Le paramètre options comprend également les propriétés suivantes, qui s'appliquent à la prise en charge du partage d'écran dans les anciennes versions de Chrome et d'Opera, qui nécessitent des extensions de partage d'écran - dans les autres navigateurs, elles ne sont pas définies :

extensionRequired (Chaîne) - Défini à "chrome" dans les anciennes versions de Chrome (avant Chrome 72) et d'Opera (avant Opera 59), qui nécessitent l'installation d'une extension de partage d'écran.
extensionRegistered (booléen) - Dans les anciennes versions de Chrome (avant Chrome 72) et d'Opera (avant Opera 59), cette propriété est définie sur true si une extension de partage d'écran est enregistrée ; dans le cas contraire, la valeur est fixée à false. Utiliser le OT.registerScreenSharingExtension() pour enregistrer une extension dans Chrome ou Opera.
extensionInstalled (booléen) - Si une extension est requise, cette valeur est fixée à true si l'extension est installée (et enregistrée, le cas échéant) ; dans le cas contraire, la valeur est fixée à false.

Remarque : Le partage d'écran n'est possible que lorsque la page web est chargée via HTTPS.

L'exemple suivant montre comment vérifier la prise en charge du partage d'écran :

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

Définition de la résolution maximale du flux

Vous pouvez définir un maxResolution lorsque vous appelez la fonction OT.initPublisher() méthode. Cette propriété définit la résolution maximale du flux. Lors du partage d'une fenêtre, la résolution du flux correspondra aux dimensions de la fenêtre, à moins que la fenêtre ne soit plus grande que la propriété maxResolution (lorsque l'utilisateur redimensionne la fenêtre).

Les maxResolution est un objet doté de deux propriétés : width et height. La valeur maximale de chacun est 1920 et la valeur minimale est 10.

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

Pour le partage d'écran, ne définissez pas l'option resolution pour l'option OT.initPublisher() méthode.

Il se peut que vous ne souhaitiez pas afficher la vidéo de partage d'écran dans le DOM HTML sur la page à partir de laquelle vous la publiez. Par exemple, si vous partagez tout l'écran et que vous incluez la vidéo dans le DOM HTML, vous obtiendrez un effet récursif de "galerie des glaces". Pour éviter cela, créez un élément HTML DOM pour l'élément éditeur et n'affichez pas l'élément dans le HTML DOM :

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

Recadrage ou Letter-boxing Vidéos en partage d'écran

Vous pouvez définir un fitMode de la propriété options que vous passez dans le paramètre OT.initPublisher() et Session.subscribe() des méthodes. Les fitMode détermine la manière dont la vidéo est affichée si ses dimensions ne correspondent pas à celles de l'élément DOM. Vous pouvez définir cette propriété sur l'une des valeurs suivantes :

"cover" - La vidéo est recadrée si ses dimensions ne correspondent pas à celles de l'élément DOM. Il s'agit du paramètre par défaut pour les vidéos publiant un flux de caméra.
"contain" - La vidéo est mise en boîte aux lettres si ses dimensions ne correspondent pas à celles de l'élément DOM. Il s'agit du paramètre par défaut pour les vidéos de partage d'écran.

Détection des changements de dimensions de la vidéo

L'objet Éditeur qui publie un flux de partage d'écran et l'objet Abonné qui s'abonne à un flux de partage d'écran peuvent chacun envoyer une commande videoDimensionsChanged événement. Cet événement est déclenché lorsque le client de publication redimensionne une fenêtre partagée.

Les videoDimensionsChanged a les propriétés suivantes :

newValue - Un objet avec des propriétés de largeur et de hauteur définissant la nouvelle largeur et la nouvelle hauteur de la vidéo.
oldValue - Un objet avec des propriétés width et height définissant la largeur et la hauteur précédentes de la vidéo.
target - L'objet Éditeur ou Abonné.

Vous pouvez utiliser le newValue.width et newValue.height pour ajuster la taille de l'éditeur dans le 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';
});

Déterminer quand l'utilisateur cesse de partager l'écran

Lorsque l'utilisateur cesse de partager l'écran, l'objet Publisher envoie une commande mediaStopped événement.

Si l'éditeur publiait également le flux dans une session, il envoie également un événement streamDestroyed avec l'attribut reason est définie comme étant la propriété "mediaStopped". En outre, l'objet Session de tous les clients connectés à la session envoie une commande streamDestroyed avec l'événement reason est définie comme étant la propriété "mediaStopped".

Le comportement par défaut de l'option mediaStopped et l'événement streamDestroyed est de supprimer l'éditeur (ou l'abonné dans le cas d'un flux abonné). Appeler l'événement preventDefault() de l'objet événement pour empêcher la suppression de l'éditeur ou de l'abonné.

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.
  }
});

Activation du partage d'écran dans Electron

Dans Electron, le partage d'écran est pris en charge si l'option webPreferences.contextIsolation de la fenêtre du navigateur Electron est fixée à false ou si l'application utilise un script de préchargement pour accéder au desktop capturer. La valeur par défaut de webPreferences.contextIsolation est l'option true dans l'électron 12+ et false dans les versions précédentes. Dans Electron 17+, un rupture du changement a été introduite, ce qui fait que le partage d'écran n'est disponible qu'après l'utilisation d'un script de préchargement.

Activation du partage d'écran via le script de préchargement dans les versions 12-16 d'Electron

Pour activer le partage d'écran dans les versions 12-16 d'Electron à l'aide d'un script de préchargement, ajoutez ce qui suit au fichier 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,
  }
);

Faites ensuite référence à preload.js lors de l'instanciation d'une BrowserWindow dans Electron :

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

Activation du partage d'écran via le script de préchargement dans les versions 17+ d'Electron

Pour activer le partage d'écran dans les versions 17+ d'Electron, ajoutez ce qui suit au fichier 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
  }
);