Bildschirmfreigabe - Web

Sie können einen Stream veröffentlichen, der eine Videoansicht Ihres Bildschirms (anstelle einer Kamera) als Quelle verwendet.

Ein mit der Sitzung verbundener Teilnehmer kann einen Bildschirmfreigabe-Stream abonnieren (und anzeigen), genauso wie er einen Stream abonnieren würde, der eine Kamera als Quelle nutzt. (Es ist keine Browser-Erweiterung erforderlich, um abonnieren zu einem Screen-Sharing-Stream).

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.

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. Für Details, siehe Bildschirmfreigabe in Electron aktivieren.

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.

Dieses Thema umfasst die folgenden Abschnitte:

Schnellstart

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. Weitere Informationen finden Sie im folgenden GitHub-Repository: https://github.com/opentok/screensharing-extensions.

Zum Abonnieren eines Videostreams zur Bildschirmfreigabe ist keine Erweiterung erforderlich; dies ist in allen Browsern möglich, die OpenTok unterstützen.

Entwicklung einer Erweiterung zur 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. Beispielcode für Erweiterungen zur Bildschirmfreigabe finden Sie im folgenden GitHub-Repository:

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

Überprüfen, ob die Bildschirmfreigabe unterstützt wird

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

Veröffentlichen eines Streams mit einer Bildschirmfreigabequelle

Die videoSource Eigenschaft des Parameters options des Befehls OT.initPublisher() Methode definiert die Videoquelle für den zu veröffentlichenden Stream. Für die Bildschirmfreigabe setzen Sie diese Eigenschaft auf "screen". In älteren Browser-Versionen konnten Sie auch in "application" oder "window" um eine Art von Bildschirmfreigabequelle anzugeben. In aktuellen Browsern, die die Bildschirmfreigabe unterstützen, führt die Übergabe eines dieser Werte jedoch zum gleichen Verhalten – der Browser zeigt ein Dialogfeld an, in dem der Endbenutzer die Bildschirmfreigabequelle 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. In Safari kann die Initialisierung eines Bildschirmfreigabe-Publishers ohne Benutzeraktions-Handler einen InvalidAccessError Fehler.

Der folgende Code zeigt, wie man einen Stream veröffentlicht, der die Bildschirmfreigabe als Quelle verwendet:

<div id="publisher"></div>
<div id="screen-preview"></div>

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

Im Fehlerfall wird der Beendigungshandler für die OT.initPublisher() Methode kann ein Fehlerobjekt mit einem der folgenden Fehlercodes übergeben werden:

  • 1550 - "Bildschirmfreigabe wird nicht unterstützt."
  • 1551 - "Bildschirmfreigabe erfordert eine Typ Erweiterung, aber es ist keine Erweiterung registriert für Typ."
  • 1552 - "Bildschirmfreigabe erfordert eine Typ Erweiterung, aber sie ist nicht installiert."

Wenn Sie einen Screen-Sharing-Stream veröffentlichen, werden die folgenden Standardwerte für die options Parameter des OT.initPublisher() Methode:

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

Darüber hinaus verwenden die Abonnenten des resultierenden Streams standardmäßig auch die "contain" fitMode Umgebung.

Für Informationen über maxResolution und fitModefinden Sie in den nächsten beiden Abschnitten.

Standardmäßig, skalierbares Video ist für Streams zur Bildschirmfreigabe deaktiviert. Sie können skalierbares Video für Screen-Sharing-Streams aktivieren, indem Sie die Option scalableScreenshare Option für die OT.initPublisher() Methode. Anmerkung: skalierbares Video für Screen-Sharing-Streams ist ein beta Funktion.

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

Videos bei der Bildschirmfreigabe zuschneiden oder mit Schwarzbalken versehen

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.

Festlegen des Videotyps ("Bildschirm" oder "Kamera") für einen Stream

Das Stream-Objekt enthält eine videoType Eigenschaft. Diese kann auf einen der folgenden Werte gesetzt werden

  • "camera" - ein Standard-Videostream, der eine Kamera als Videoquelle verwendet
  • "screen" - einen Video-Stream zur gemeinsamen Nutzung des Bildschirms
  • "custom" - ein von einem Web-Client veröffentlichter Stream, der ein HTML-VideoTrack-Element als Videoquelle verwendet
  • undefined - ein Stream ist rein sprachlich (siehe die Anleitung nur mit Stimme)

Diese Eigenschaft kann sich ändern, wenn ein von einem mobilen Gerät veröffentlichter Stream von einem Kamera- zu einem Bildschirmfreigabevideotyp wechselt. Wenn sich der Videotyp ändert, sendet das Sitzungsobjekt eine streamPropertyChanged Veranstaltung.

Der folgende Code abonniert Streams und fügt sie je nach Videotyp zu verschiedenen HTML-DIV-Containerelementen hinzu:

<div id="people"></div>
<div id="screens"></div>

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

Erkennen, wann sich die Abmessungen eines Videos ä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';
});

Ermitteln, wann der Benutzer die Bildschirmfreigabe 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.
  }
});

Abonnieren von Streams zur Bildschirmfreigabe

Sie können einen Stream, der eine Screen-Sharing-Videoquelle verwendet, auf dieselbe Weise abonnieren wie einen Stream, der eine Kamera als Quelle verwendet. Siehe Abonnieren von Streams.

Sie können erkennen, dass ein Stream ein Screen-Sharing-Stream ist, indem Sie die Option videoType Eigenschaft des Stream-Objekts. Bei einem Stream zur Bildschirmfreigabe ist diese Eigenschaft auf „screen“ gesetzt.

Der folgende Code abonniert Streams und fügt sie je nach Videotyp („screen“ oder „camera“) an verschiedene HTML-DOM-Containerelemente an:

session.on('streamCreated', function(event) {
  var subOptions = {
    appendMode: 'append'
  };

  var parentElementId = event.stream.videoType === 'screen' ?
    'sub-screen-sharing-container' :
    'sub-camera-container';
  subscriber = session.subscribe(event.stream, parentElement, subOptions);
});

Die Abmessungen eines Streams mit Bildschirmfreigabe können sich ändern, wenn der Nutzer, der den Stream veröffentlicht, die Größe des Fensters anpasst, das als Quelle für den Stream dient. Wenn sich die Videoabmessungen ändern, löst das „Subscriber“-Objekt ein videoDimensionsChanged Veranstaltung.

Der folgende Code passt die Größe eines Abonnenten an, wenn sich die Videoabmessungen des Streams ändern:

subscriber.on('videoDimensionsChanged', function(event) {
  subscriber.element.style.width = event.newValue.width + 'px';
  subscriber.element.style.height = event.newValue.height + 'px';
  // You may want to adjust other UI.
});

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.

Aktivieren der Bildschirmfreigabe über ein 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
  }
});

Bildschirmfreigabe über ein Preload-Skript in Electron-Versionen ab 17 aktivieren

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

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


// Event emitter to handle messages sent from the renderer process. This handler
// will be called whenever a renderer calls
// ipcRenderer.invoke('DESKTOP_CAPTURER_GET_SOURCES', ...args)
electron.ipcMain.handle(
  'DESKTOP_CAPTURER_GET_SOURCES',
  (event, opts) => electron.desktopCapturer.getSources(opts)
);

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

Optimierung der Videoleistung bestimmter Bildschirmfreigabe-Streams

Sie können einen Hinweis auf den Videoinhalt festlegen, um die Qualität und Leistung eines Videos zur Bildschirmfreigabe zu verbessern, das hauptsächlich Text- oder Videoinhalte enthält. Für Details, siehe Festlegen von Hinweisen zu Videoinhalten zur Verbesserung der Videoleistung in bestimmten Situationen.