Partager:
){kind=small}
Ancien Developer Advocate pour Vonage, où son rôle était de soutenir la communauté technologique locale à Londres. Il est un organisateur d'événements expérimenté, un joueur de jeux de société et le père d'un adorable petit chien appelé Moo. Il est également l'organisateur principal de You Got This - un réseau d'événements sur les compétences de base nécessaires pour une vie professionnelle heureuse et saine.
Ajouter une superposition à la vidéo avec l'API Video de Vonage
Temps de lecture : 2 minutes
Lors de la création d'un éditeur Video de Vonage, le flux vidéo peut provenir directement d'une caméra d'utilisateur, d'un élément ou d'un élément HTML. Une fois que les pixels sont dessinés sur la toile, ils peuvent être facilement manipulés avant d'être utilisés dans une session Video API.
Dans ce tutoriel, vous apprendrez à ajouter une superposition de texte ou d'image à l'image de votre caméra que vous pourrez inclure dans vos appels vidéo.
Plusieurs éléments sont nécessaires pour faire fonctionner le projet. Tout d'abord, un élément prendra un flux de la caméra de l'utilisateur. À chaque image, l'élément Video sera dessiné sur un canevas, où nous ajouterons ensuite du texte ou une image. Avec la sortie souhaitée sur un canevas, nous pouvons utiliser le canevas comme source pour un éditeur Video API de Vonage, que nous pouvons utiliser dans nos sessions vidéo avec des amis.
Si vous souhaitez consulter le code final, vous pouvez le trouver à l'adresse suivante https://github.com/nexmo-community/video-overlay.
Créez un nouveau dossier de projet suivi d'un nouveau fichier index.html, en remplissant ce fichier avec le code suivant :
<!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>
Dans ce tutoriel, vous ajouterez du texte au premier canevas c1 et une image superposée au second canevas c2.
Définir la source de l'élément <video> à la source de la webcam de l'utilisateur. Cet extrait sélectionnera la caméra par défaut :
navigator.mediaDevices.getUserMedia({ video: true })
.then(stream => { v1.srcObject = stream })
Créer une fonction addText() vide. Une fois que le dispositif vidéo de l'utilisateur est prêt et "en cours de lecture", exécutez les fonctions à chaque image :
v1.addEventListener('play', () => {
setInterval(addText, 0)
setInterval(addImage, 0)
})
function addText() {
}
function addImage() {
}
Mise à jour 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
}Rafraîchissez votre navigateur et vous devriez maintenant voir le texte se superposer au canevas.
Tout d'abord, en haut de votre balise <script> chargez l'image que vous souhaitez utiliser pour la superposition :
const overlayImg = new Image()
overlayImg.src = 'vonage.png'Ensuite, mettre à jour 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
}Votre page devrait ressembler à ceci :
Créez un nouveau projet dans votre tableau de bord Video de Vonage. Une fois créé, faites défiler vers le bas jusqu'à Outils de projet et créez une nouvelle session acheminée. Prenez l'ID de la session et créez un nouveau jeton.
En haut de votre <script>créez trois nouvelles variables avec les données du tableau de bord du projet :
const sessionId = 'YOUR_SESSION_ID'
const apiKey = 'YOUR_PROJECT_API_KEY'
const token = 'YOUR_TOKEN'Ensuite, copiez la balise <script> de la page Video API Client SDK de Vonage et placez-la au-dessus de votre balise <script> existante.
Au bas de votre balise <script> initialisez votre session Video API de base et publiez-la à partir du deuxième canevas :
// 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")
})
Les <video> et <canvas> sont nécessaires pour que cela fonctionne, mais vous ne voulez probablement pas qu'ils soient visibles dans votre page web. Dans votre <head>ajoutez la feuille de style CSS suivante pour les masquer :
<style>
#v1, #c1, #c2 { display: none }
</style>
Nous espérons que cet article de blog vous a été utile et que vous pouvez désormais créer des superpositions personnalisées à votre guise. Vous pouvez choisir de modifier la taille et la position des images, ou permettre à vos utilisateurs de les modifier eux-mêmes.
Vous trouverez le projet final à l'adresse suivante https://github.com/nexmo-community/video-overlay.
Comme toujours, si vous avez besoin d'aide, n'hésitez pas à nous contacter dans le Slack de la communauté des développeurs de Vonage. Communauté des développeurs de Vonage Slack. Nous espérons vous y voir.
Partager:
Ancien Developer Advocate pour Vonage, où son rôle était de soutenir la communauté technologique locale à Londres. Il est un organisateur d'événements expérimenté, un joueur de jeux de société et le père d'un adorable petit chien appelé Moo. Il est également l'organisateur principal de You Got This - un réseau d'événements sur les compétences de base nécessaires pour une vie professionnelle heureuse et saine.