https://d226lax1qjow5r.cloudfront.net/blog/blogposts/share-screens-together-with-your-friends-and-co-workers/sharescreens_1200x600.png

Teilen Sie:

Misha BeheiIngenieur für Kundenlösungen

Misha ist ein Ingenieur für Kundenlösungen bei Vonage, wo er sich auf die Entwicklung der Video API konzentriert. Nachdem er den Trubel von San Francisco gegen den Charme von Milwaukee, Wisconsin, eingetauscht hat, verbringt er nun seine Freizeit damit, die versteckten Schätze des Mittleren Westens zu entdecken.

Gemeinsame Nutzung von Bildschirmen mit Ihren Freunden und Arbeitskollegen

Zuletzt aktualisiert am March 11, 2021

#video-api

#javascript

Lesedauer: 1 Minute

In bestimmten Szenarien kann es erforderlich sein, dass mehrere Bildschirme gleichzeitig freigegeben werden. Mit der Vonage Video API haben Sie die Möglichkeit, genau das zu tun.

In diesem Blogbeitrag wird gezeigt, wie man eine einfache Javascript-Anwendung erstellt, die die Video API von Vonage nutzt und die es ermöglicht, mehrere Streams zur gleichen Zeit zu teilen. Dies kann für die Zusammenarbeit oder einfach nur zum Spaß nützlich sein, z. B. um mit Freunden oder der Familie eine Partie Tic-Tac-Toe zu spielen.

Voraussetzungen

Um dieses Projekt zu entwickeln, benötigen Sie Folgendes:

Vonage Video API-Konto
Grundkenntnisse in JavaScript
Video API-Dokumentation
Klonen bestimmter GitHub-Repositories

Umsetzung

Wir werden ein Basic Video Chat Beispiel aus dem Opentok Github Verzeichnis als Ausgangspunkt für dieses Tutorial verwenden. Bitte laden Sie das folgende Repository herunter - https://github.com/opentok/opentok-web-samples und wir werden mit dem Basic Video Chat Teil dieses Repositorys arbeiten.

Wir verwenden eine Sitzungs-ID und ein Token, die über Ihren Vonage Video API Account generiert werden. Bitte besuchen Sie tokbox.com/account und fügen Sie die Informationen in die Datei config.js Datei des Repositorys ein. Für eine bereitgestellte Anwendung wird empfohlen, dass Sie Sitzungs-IDs und Token über den Backend-Server.

Navigieren Sie in der Beispielanwendung Basic Video Chat zur Datei index.html und fügen Sie eine Schaltfläche für die Bildschirmfreigabe hinzu.

Fügen Sie den folgenden Code in der <body> der HTML-Seite ein:

<button onclick=”screenShare()”>Share your screen </button>

Navigieren Sie nun zu dem js/app.js Teil der Codebasis und fügen Sie die folgende screenShare() Funktion:

function screenShare() {
    OT.checkScreenSharingCapability(function(response) {
    if(!response.supported || response.extensionRegistered === false) {
      console.log("screen sharing is not supported")
    } else if (response.extensionInstalled === false) {
      console.log("older browser like IE might require a plugin")
    } else {
      // Screen sharing is available. Publish the screen.
      var publisher = OT.initPublisher('screenshare',
        {videoSource: 'screen'},
        function(error) {
          if (error) {
            console.log(error);
          } else {
            session.publish(publisher, function(error) {
              if (error) {
                console.log(error);
              }
            });
          }
        }
      );
    }
  });
}

Danach gehen Sie zurück zur index.html Datei und fügen die <div> für den Bildschirmfreigabe-Stream hinzu:

<div>
	<div id=”subscriber”></div>
	<div id=”publisher”></div>
	<div id=”sceenshare”></div>
</div>

Wir möchten Verleger-, Abonnenten- und Bildschirmfreigabe-Streams getrennt halten, um sicherzustellen, dass sich die Benutzer auch während der Bildschirmfreigabe sehen können. Sie können die css/app.css Datei aktualisieren, um zusätzliches Layout-Styling hinzuzufügen; ohne Änderungen werden die Screen-Sharing-Streams jedoch in der oberen linken Ecke angezeigt.

Um dies zu testen, öffnen Sie die index.html Datei in Ihrem Browser (z. B. Google Chrome), veröffentlichen Sie Ihr Video und klicken Sie auf die Schaltfläche "Bildschirm freigeben" unter Ihrem Video-Stream. Treten Sie anschließend von einem anderen Gerät oder Browser aus bei, um dies auszuprobieren!

Abschließend wurde in diesem Artikel eine einfache Möglichkeit vorgestellt, die Basic Video Chat-App mit Screen-Sharing-Funktionen zu erweitern, die es den Benutzern ermöglichen, ihre Bildschirme gleichzeitig zu teilen. Dies geschah durch Erweiterungen der HTML- und JavaScript-Dateien des bestehenden OpenTok-GitHub-Repositorys.

Teilen Sie:

Misha BeheiIngenieur für Kundenlösungen