Bildschirmfreigabe mit dem Web-SDK

Das ist wichtig: Ab Chrome 72+, Firefox 52+ und Opera 59+ ist für die Bildschirmfreigabe keine Erweiterung mehr erforderlich. Der Browser fordert den Endbenutzer auf, auf den Bildschirm zuzugreifen, so wie er es für den Zugriff auf die Kamera tun würde.

In älteren Versionen von Opera und Chrome muss der Client zum Veröffentlichen eines Videos zur Bildschirmfreigabe eine Erweiterung hinzufügen, die die Veröffentlichung von Streams zur Bildschirmfreigabe für Ihre Domain ermöglicht. (Siehe Entwicklung einer Erweiterung für die Bildschirmfreigabe.)

Anmerkung: Unter macOS 10.15+ (Catalina) muss der Benutzer, um einen Screen-Sharing-Stream zu veröffentlichen, dem Browser unter macOS Systemeinstellungen > Sicherheit & Datenschutz > Datenschutz > Bildschirmaufzeichnung Zugriff auf den Bildschirm gewähren. Andernfalls sendet der Publisher eine accessDenied Veranstaltung.

Das Vonage Video-Plugin für Internet Explorer bietet integrierte Unterstützung für die Bildschirmfreigabe. (Beachten Sie, dass die Unterstützung für das Vonage Video-Plugin für Internet Explorer in Vonage Video 2.17 entfernt wurde).

Die Veröffentlichung von Streams zur Bildschirmfreigabe ist derzeit nicht unterstützt in Safari auf iOS oder in Safari 12 und älter auf macOS.

In allen unterstützten Browsern erfordert die Veröffentlichung eines Screen-Sharing-Streams, dass die Seite über HTTPS geladen wird.

Die Veröffentlichung von Videos zur Bildschirmfreigabe wird von Chrome, Firefox, Opera, Chromium-basierten Versionen von Edge (Version 79+) und Safari 13+ unterstützt. Derzeit ist es nicht unterstützt in mobilen Browsern, Safari 12 und älter unter macOS. Die Veröffentlichung eines Screen-Sharing-Streams wird nur unterstützt, wenn die Webseite über HTTPS geladen wird.

Anmerkung: Um die Bildschirmfreigabe in älteren Versionen von Chrome und Opera zu unterstützen, müssen Sie eine Erweiterung für die Bildschirmfreigabe erstellen.

Zum Abonnieren eines Screen-Sharing-Videostreams ist keine Erweiterung erforderlich. Dies ist in allen Browsern möglich, die die Vonage Video API unterstützen.

Entwicklung einer Erweiterung für die Bildschirmfreigabe (veraltet)

Das ist wichtig: Erweiterungen für die Bildschirmfreigabe sind in den neuesten Versionen von Chrome, Firefox und Opera nicht erforderlich.

Um die Bildschirmfreigabe in älteren Versionen von Chrome und Opera zu unterstützen, müssen Sie eine Erweiterung für die Bildschirmfreigabe erstellen.

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

Überprüfung der Unterstützung für die Bildschirmfreigabe

Um zu prüfen, ob die Veröffentlichung eines Screen-Sharing-Streams im Client-Browser unterstützt wird, rufen Sie die Funktion OT.checkScreenSharingCapability() Methode. Diese Methode hat einen Parameter: eine Callback-Funktion. Der Rückruf-Funktion wird ein response Objekt. Dieses Objekt hat die folgenden Eigenschaften, die die Unterstützung für die Veröffentlichung von Screen-Sharing-Streams im Client anzeigen:

supported - (Boolean) Ob die gemeinsame Nutzung unterstützt wird.
supportedSources- Veraltet. In älteren Browserversionen konnten Sie eine Quelle für die Bildschirmfreigabe auswählen (z. B. "application", "screen", oder "window" durch Einstellung der videoSource Eigenschaft der Optionen, die an die OT.initPublisher() Methode. In aktuellen Browsern, die die gemeinsame Nutzung des Bildschirms unterstützen, führt die Übergabe eines dieser Werte jedoch zum gleichen Verhalten - der Browser zeigt ein Dialogfeld an, in dem der Endbenutzer die Quelle für die gemeinsame Nutzung des Bildschirms auswählt (dies kann der gesamte Bildschirm oder ein bestimmtes Fenster sein). In Electron wird bei der Bildschirmfreigabe der gesamte Bildschirm erfasst, ohne dass der Benutzer um Erlaubnis gefragt wird.

Der Parameter options enthält auch die folgenden Eigenschaften, die für die Unterstützung der Bildschirmfreigabe in älteren Versionen von Chrome und Opera gelten, die Erweiterungen für die Bildschirmfreigabe benötigen - in anderen Browsern sind sie nicht definiert:

extensionRequired (String) - In älteren Versionen von Chrome (vor Chrome 72) und Opera (vor Opera 59), für die eine Erweiterung für die Bildschirmfreigabe installiert sein muss, auf "chrome" gesetzt.
extensionRegistered (Boolean) - In älteren Versionen von Chrome (vor Chrome 72) und Opera (vor Opera 59) ist diese Eigenschaft auf true wenn eine Bildschirmfreigabe-Erweiterung registriert ist; andernfalls wird sie auf false. Verwenden Sie die OT.registerScreenSharingExtension() Methode, um eine Erweiterung in Chrome oder Opera zu registrieren.
extensionInstalled (Boolean) - Wenn eine Erweiterung erforderlich ist, wird dieser Wert auf true wenn die Erweiterung installiert (und ggf. registriert) ist; andernfalls wird sie auf false.

Anmerkung: Die Bildschirmfreigabe wird nur unterstützt, wenn die Webseite über HTTPS geladen wird.

Das folgende Beispiel zeigt, wie Sie die Unterstützung für die Bildschirmfreigabe prüfen:

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

Einstellung der maximalen Auflösung des Streams

Sie können eine maxResolution Eigenschaft, wenn Sie die OT.initPublisher() Methode. Diese Eigenschaft legt die maximale Auflösung des Streams fest. Wenn ein Fenster gemeinsam genutzt wird, entspricht die Auflösung des Streams den Abmessungen des Fensters, es sei denn, das Fenster ist größer als die Eigenschaft maxResolution Einstellung (wenn der Benutzer die Größe des Fensters ändert).

Die maxResolution Eigenschaft ist ein Objekt mit zwei Eigenschaften: width und height. Der Maximalwert ist jeweils 1920, der Minimalwert ist 10.

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

Setzen Sie für die Bildschirmfreigabe nicht die resolution Option für die OT.initPublisher() Methode.

Möglicherweise möchten Sie das Video für die Bildschirmfreigabe nicht im HTML-DOM auf der Seite anzeigen, von der aus Sie es veröffentlichen. Wenn Sie z. B. den gesamten Bildschirm freigeben und das Video in das HTML-DOM aufnehmen, entsteht ein rekursiver "Spiegelsaal"-Effekt. Um dies zu verhindern, erstellen Sie ein HTML-DOM-Element für das Herausgeberelement und zeigen Sie das Element nicht im HTML-DOM an:

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

Beschneiden oder Letterboxing von Videos für die Bildschirmfreigabe

Sie können eine fitMode Eigenschaft der options Parameter, den Sie an die OT.initPublisher() und Session.subscribe() Methoden. Die Website fitMode bestimmt, wie das Video angezeigt wird, wenn seine Abmessungen nicht mit denen des DOM-Elements übereinstimmen. Sie können diese Eigenschaft auf einen der folgenden Werte einstellen:

"cover" - Das Video wird beschnitten, wenn seine Abmessungen nicht mit denen des DOM-Elements übereinstimmen. Dies ist die Standardeinstellung für Videos, die einen Kamera-Feed veröffentlichen.
"contain" - Das Video wird im Letterbox-Format angezeigt, wenn seine Abmessungen nicht mit denen des DOM-Elements übereinstimmen. Dies ist die Standardeinstellung für Videos zur Bildschirmfreigabe.

Erkennen, wenn sich die Videodimensionen ändern

Das Publisher-Objekt, das einen Screen-Sharing-Stream veröffentlicht, und ein Subscriber-Objekt, das einen Screen-Sharing-Stream abonniert, können jeweils eine videoDimensionsChanged Ereignis. Das Ereignis wird ausgelöst, wenn der veröffentlichende Client die Größe eines freigegebenen Fensters ändert.

Die videoDimensionsChanged Ereignis hat die folgenden Eigenschaften:

newValue - Ein Objekt mit den Eigenschaften Breite und Höhe, die die neue Breite und Höhe des Videos definieren.
oldValue - Ein Objekt mit den Eigenschaften Breite und Höhe, die die vorherige Breite und Höhe des Videos definieren.
target - Das Objekt Publisher oder Subscriber.

Sie können die newValue.width und newValue.height Eigenschaften, um die Größe des Publishers im HTML-DOM anzupassen:

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

Feststellen, wann der Benutzer die gemeinsame Nutzung des Bildschirms beendet

Wenn der Benutzer die Freigabe des Bildschirms beendet, sendet das Publisher-Objekt eine mediaStopped Veranstaltung.

Wenn der Publisher den Stream auch in einer Sitzung veröffentlicht hat, sendet er auch ein streamDestroyed-Ereignis mit dem reason Eigenschaft eingestellt auf "mediaStopped". Außerdem sendet das Session-Objekt auf allen Clients, die mit der Session verbunden sind, eine streamDestroyed Ereignis mit dem reason Eigenschaft eingestellt auf "mediaStopped".

Das Standardverhalten sowohl für die mediaStopped Ereignis und das streamDestroyed ist das Löschen des Verlegers (oder des Abonnenten im Falle eines abonnierten Streams). Rufen Sie die preventDefault() Methode des Ereignisobjekts, um zu verhindern, dass der Herausgeber oder Abonnent gelöscht wird.

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

Bildschirmfreigabe in Electron aktivieren

In Electron wird die Bildschirmfreigabe unterstützt, wenn die webPreferences.contextIsolation des Elektronen-Browser-Fensters ist auf false oder wenn die Anwendung ein Preload-Skript für den Zugriff auf den Desktop-Capturer verwendet. Der Standardwert von webPreferences.contextIsolation Option ist true in Elektronen 12+ und false in früheren Versionen. In Electron 17+ wird ein Abwechslung wurde eingeführt, wodurch die gemeinsame Nutzung des Bildschirms nur nach Verwendung eines Preload-Skripts möglich war.

Aktivierung der Bildschirmfreigabe über das Preload-Skript in den Electron-Versionen 12-16

Um die Bildschirmfreigabe in den Electron-Versionen 12-16 mit einem Preload-Skript zu aktivieren, fügen Sie der Datei preload.js Folgendes hinzu:

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

Dann referenzieren Sie preload.js, wenn Sie ein BrowserWindow in Electron instanziieren:

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

Aktivieren der Bildschirmfreigabe über das Preload-Skript in den Electron-Versionen 17+

Um die Bildschirmfreigabe in den Electron-Versionen 17+ zu aktivieren, fügen Sie der Datei preload.js Folgendes hinzu:

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