Share:
){kind=small}
Misha ist Software Engineer 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
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.
Dieser Blog-Beitrag zeigt, wie man eine einfache Javascript-Anwendung erstellt, die die Vonage Video-API nutzt und die es ermöglicht, mehrere Screen-Share-Streams gleichzeitig zu haben. 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.
Um dieses Projekt zu entwickeln, benötigen Sie Folgendes:
Vonage Video-API-Konto
Grundkenntnisse in JavaScript
Video-API-Dokumentation
Klonen bestimmter GitHub-Repositories
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 Ihr Vonage Video API-Konto generiert werden. Bitte besuchen Sie tokbox.com/account und fügen Sie die Informationen per Copy-Paste in die 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 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 Videostream. 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 gezeigt, die Basic Video Chat App mit Screen-Sharing-Funktionen zu erweitern, die es Benutzern ermöglichen, ihre Bildschirme gleichzeitig zu teilen. Dies geschah durch Erweiterungen der HTML- und JavaScript-Dateien des bestehenden OpenTok-GitHub-Repositorys.
Share:
Misha ist Software Engineer 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.