Share:
){kind=small}
Mofizur Rahman (@moficodes) is a Senior Developer Advocate at Vonage. His favorite programming language these days is Go. He also tinkers with Node, Python and Java. He is also learning and teaching in the Go, Kubernetes, Docker and Microservice community. He is a strong believer of the power of open source and importance of giving back to the community. He is a self proclaimed sticker collecting addict and has collected several box full of stickers with no signs of stopping. He dabbles in photography sometimes.
He writes tech blogs sometimes which can be found on https://dev.to/moficodes.
Automatisches Layout für die Vonage-Videoanwendung
Lesedauer: 2 Minuten
Mit der Vonage Video API können wir unsere eigene Videochat-Anwendung mit nur 15 Zeilen Code erstellen. Damit es wie eine richtige Videochat-Anwendung aussieht und sich auch so anfühlt, müssen wir etwas mehr Arbeit leisten. Eine Herausforderung besteht darin, die Teilnehmer richtig auf dem Bildschirm zu platzieren. Anwendungen wie Zoom, Teams, Google Meet und Webex haben alle ihr eigenes Aussehen. Im Grunde verfolgen sie alle das gleiche Ziel: die Teilnehmer in einer Art Raster auf dem Bildschirm zu platzieren und sie je nach Bildschirmgröße neu anzuordnen. Genau das werden wir heute für unsere Vonage-Videoanwendung tun.
Hier ist ein Beispiel dafür, was wir bauen werden.
Screen recording of a demo application where multiple copies of a live webcam video are added to the screen, then the screen dimensions are changed to demonstrate video feeds resizing and layout shift. One video feed is selected and gets larger. Then video feeds are removed one by one.
Texteditor (z.B. VS Code)
Web-Browser
Der Quellcode für diese Demo befindet sich in diesem Repo.
Der Hauptbestandteil, der unser Auto-Layout zum Laufen bringt, ist Opentok Layout JS. Dies ist eine Open-Source-Bibliothek, die von Adam Ullman entwickelt wurde.
Der Code für diese Demo ist relativ kurz. Es gibt insgesamt 4 Dateien. Drei davon werden wir erstellen (index.html, style.css, script.js) und eine (opentok-layout.js), die heruntergeladen wird von Opentok Layout JS Repository heruntergeladen wird.
Im Abschnitt <head> Abschnitt unserer HTML-Datei fügen wir einen Verweis auf die Opentok Client Library ein. Sie wird verwendet, um Zugriff auf OT die uns den Zugriff auf die Kamera ermöglicht. Wir fügen auch opentok-layout.js und unsere style.css.
<script src="https://static.opentok.com/v2/js/opentok.min.js"></script>
<script src="js/opentok-layout.js"></script>
<link rel="stylesheet" href="css/style.css" />
In der <body>fügen wir ein leeres div mit id="layout". Dies ist der Container, in dem wir alle unsere Teilnehmervideos unterbringen werden. Außerdem gibt es zwei Schaltflächen zum Hinzufügen und Entfernen von Videos aus unserem Layout.
<div id="layout"></div>
<div id="buttons">
<input
type="button"
name="add"
value="Add"
id="add"
onclick="addElement()"
/>
<input
type="button"
name="remove"
value="Remove"
id="remove"
onclick="removeElement()"
/>
</div>
Schließlich fügen wir einen Verweis auf unsere script.js Datei direkt nach dem </body> Tag.
Der größte Teil der CSS-Datei wird verwendet, um die Schaltflächen am unteren Rand des Bildschirms zu platzieren, so dass der Rest des Bildschirms Platz für den layout Container. Der Container hat eine CSS-Übergangseigenschaft, um die Layout-Änderungen durch das Hinzufügen und Entfernen von Videos reibungslos aussehen zu lassen.
An dieser Stelle initialisieren wir die Opentok Layout JS-Bibliothek und nutzen sie. Zunächst erstellen wir einen Verweis auf unseren Layout-Container, layoutEl. Dann wird eine layout Variable initialisiert und auf eine Opentok Layout JS-Funktion gesetzt, die bei Übergabe von layoutEl und einigen Optionen zurückgibt.
var layoutEl = document.getElementById('layout');
var layout;function updateLayoutValues() {
const opts = {
maxRatio: 3 / 2,
minRatio: 9 / 16,
fixedRatio: false,
alignItems: 'center',
bigPercentage: 0.8,
bigFixedRatio: false,
bigMaxRatio: 3 / 2,
bigMinRatio: 9 / 16,
bigFirst: true,
scaleLastRow: true,
smallMaxWidth: Infinity,
smallMaxHeight: Infinity,
bigMaxWidth: Infinity,
bigMaxHeight: Infinity,
bigAlignItems: 'center',
smallAlignItems: 'center',
};
layout = initLayoutContainer(layoutEl, opts).layout;
}
updateLayoutValues();Es gibt eine Erklärung aller opts Eigenschaften und möglichen Werte in der Opentok Layout JS ReadMe.
layout wird jedes Mal aufgerufen, wenn das Layout der Anwendung neu organisiert werden muss, wenn Videos hinzugefügt oder entfernt werden oder die Größe des Fensters geändert wird.
Es gibt auch Ereignis-Listener für die Schaltflächen zum Hinzufügen und Entfernen. Ein weiterer Ereignis-Listener wird erstellt, wenn auf das Video eines Teilnehmers doppelgeklickt wird, wodurch das Video vergrößert oder verkleinert wird.
Dies war eine kurze Erklärung, um zu zeigen, wie Sie ein responsives Layout für Ihre Vonage Video-Anwendung erreichen können.
Für einen noch schnelleren Weg zur Erstellung einer Videoanwendung für mehrere Teilnehmer können Sie die folgenden Funktionen nutzen Vonage Video Express. Video Express verwendet opentok-layout-js und umschließt unser OpenTok Client SDK. Wie Sie Vonage Video Express verwenden können, erfahren Sie in diesem Artikel von Enrico.
Wenn Sie Fragen oder Kommentare haben, wenden Sie sich bitte an uns über Twitter oder Slack.
Share:
Mofizur Rahman (@moficodes) is a Senior Developer Advocate at Vonage. His favorite programming language these days is Go. He also tinkers with Node, Python and Java. He is also learning and teaching in the Go, Kubernetes, Docker and Microservice community. He is a strong believer of the power of open source and importance of giving back to the community. He is a self proclaimed sticker collecting addict and has collected several box full of stickers with no signs of stopping. He dabbles in photography sometimes.
He writes tech blogs sometimes which can be found on https://dev.to/moficodes.