Teilen Sie:
){kind=small}
Ehemaliger Developer Advocate bei Vonage, wo seine Aufgabe darin bestand, die lokale Tech-Community in London zu unterstützen. Er ist ein erfahrener Veranstaltungsorganisator, Brettspieler und Vater eines süßen kleinen Hundes namens Moo. Er ist auch der Hauptorganisator von You Got This - einem Netzwerk von Veranstaltungen zu den Kernkompetenzen, die für ein glückliches, gesundes Arbeitsleben erforderlich sind.
Mit der Vonage Video API Überlagerungen zu Videos hinzufügen
Lesedauer: 2 Minuten
Bei der Erstellung eines Vonage Video-Publishers kann der Videostream direkt von einer Benutzerkamera, von einem Element oder einem HTML-Element bezogen werden. Sobald die Pixel auf die Leinwand gezeichnet wurden, können sie leicht manipuliert werden, bevor sie in einer Video API-Sitzung verwendet werden.
In diesem Tutorial erfahren Sie, wie Sie Ihrem Kamerabild ein Text- oder Bild-Overlay hinzufügen, das Sie in Ihre Videoanrufe einbinden können.
Damit das Projekt funktioniert, sind mehrere Komponenten erforderlich. Erstens wird ein Element einen Stream von der Kamera des Benutzers aufnehmen. Bei jedem Bild wird das Video-Element auf eine Leinwand gezeichnet, wo wir dann Text oder ein Bild hinzufügen. Mit der gewünschten Ausgabe auf einer Leinwand können wir die Leinwand als Quelle für einen Vonage Video API-Publisher verwenden, den wir in unseren Videositzungen mit Freunden einsetzen können.
Wenn Sie sich den fertigen Code ansehen möchten, finden Sie ihn unter https://github.com/nexmo-community/video-overlay.
Legen Sie einen neuen Projektordner an, gefolgt von einer neuen Datei index.html, und füllen Sie diese Datei mit dem folgenden Code:
<!DOCTYPE html>
<html>
<head></head>
<body>
<video id="v1" width="320" height="240" autoplay></video>
<canvas id="c1" width="320" height="240"></canvas>
<canvas id="c2" width="320" height="240"></canvas>
<div id="vonage-publishers"></div>
<div id="vonage-subscribers"></div>
<script>
// Create references to the video and canvas elements
const v1 = document.getElementById('v1')
const c1 = document.getElementById('c1')
const c2 = document.getElementById('c2')
// Get canvas contexts
const c1Ctx = c1.getContext('2d')
const c2Ctx = c2.getContext('2d')
</script>
</body>
</html>
In diesem Tutorial werden Sie der ersten Leinwand Text hinzufügen c1 und ein Bild-Overlay auf der zweiten Leinwand c2.
Setzen Sie die <video> Element auf den Stream von der Webcam des Benutzers. Dieses Snippet wählt die Standardkamera:
navigator.mediaDevices.getUserMedia({ video: true })
.then(stream => { v1.srcObject = stream })
Erstellen Sie eine leere addText() Funktion. Sobald das Videogerät des Benutzers bereit ist und "abspielt", führen Sie die Funktionen bei jedem Bild aus:
v1.addEventListener('play', () => {
setInterval(addText, 0)
setInterval(addImage, 0)
})
function addText() {
}
function addImage() {
}
Aktualisierung addText():
function addText() {
// User Video
c1Ctx.drawImage(v1, 0, 0, 320, 240)
// Rectangle
c1Ctx.beginPath();
c1Ctx.fillStyle = "#584fa8";
c1Ctx.rect(0, 190, 155, 40); // x, y of top-left, width, height
c1Ctx.fill();
// Text
c1Ctx.font = "20px Monospace";
c1Ctx.fillStyle = "white";
c1Ctx.fillText("Kevin Lewis", 10, 215); // x, y of top-left
}Aktualisieren Sie Ihren Browser und Sie sollten nun sehen, dass der Text auf der Leinwand überlagert wird.
Zuerst laden Sie oben in Ihrem <script> Tags das Bild ein, das Sie für das Overlay verwenden möchten:
const overlayImg = new Image()
overlayImg.src = 'vonage.png'Dann aktualisieren Sie addImage():
function addImage() {
// User Video
c2Ctx.drawImage(v1, 0, 0, 320, 240)
// Overlay Image
c2Ctx.drawImage(overlayImg, 10, 10, 35, 30) // x, y of top-left, width, height
}Ihre Seite sollte wie folgt aussehen:
Erstellen Sie ein neues Projekt in Ihrem Vonage Video Dashboard. Scrollen Sie nach der Erstellung nach unten zu Projekttools und erstellen Sie eine neue geroutete Sitzung. Nehmen Sie die Sitzungs-ID und erstellen Sie ein neues Token.
Am Anfang Ihrer <script>erstellen Sie drei neue Variablen mit Daten aus dem Projekt-Dashboard:
const sessionId = 'YOUR_SESSION_ID'
const apiKey = 'YOUR_PROJECT_API_KEY'
const token = 'YOUR_TOKEN'Als nächstes kopieren Sie das <script> Tag von der Vonage Video API Client SDK Seite und fügen Sie es über Ihr bestehendes <script> Tag ein.
Am unteren Ende Ihres <script> Tags wird Ihre grundlegende Vonage Video API-Sitzung initialisiert und im zweiten Canvas veröffentlicht:
// Initialize session
const session = OT.initSession(apiKey, sessionId)
// Create publisher
const publisher = OT.initPublisher("vonage-publishers", {
// c1 is the text canvas. Substitute c2 if you want to use the overlay canvas.
videoSource: c1.captureStream().getVideoTracks()[0],
width: 320,
height: 240
})
// Once connected to session, publish the publisher
session.connect(token, () => {
session.publish(publisher)
})
// Show other users' streams
session.on('streamCreated', event => {
session.subscribe(event.stream, "vonage-subscribers")
})
Die <video> und <canvas> Elemente sind erforderlich, damit dies funktioniert, aber Sie wollen sie wahrscheinlich nicht auf Ihrer Webseite sehen. In Ihrer <head>fügen Sie das folgende CSS ein, um sie auszublenden:
<style>
#v1, #c1, #c2 { display: none }
</style>
Wir hoffen, dass Sie diesen Blogbeitrag nützlich fanden und nun nach Herzenslust benutzerdefinierte Overlays erstellen können. Sie können die Größe und Position der Bilder ändern oder Ihren Nutzern erlauben, sie selbst zu bearbeiten.
Das Abschlussprojekt finden Sie unter https://github.com/nexmo-community/video-overlay.
Wie immer, wenn Sie Unterstützung benötigen, können Sie sich gerne an die Vonage Entwickler-Community Slack. Wir hoffen, Sie dort zu sehen.
Teilen Sie:
Ehemaliger Developer Advocate bei Vonage, wo seine Aufgabe darin bestand, die lokale Tech-Community in London zu unterstützen. Er ist ein erfahrener Veranstaltungsorganisator, Brettspieler und Vater eines süßen kleinen Hundes namens Moo. Er ist auch der Hauptorganisator von You Got This - einem Netzwerk von Veranstaltungen zu den Kernkompetenzen, die für ein glückliches, gesundes Arbeitsleben erforderlich sind.