https://d226lax1qjow5r.cloudfront.net/blog/blogposts/custom-video-streams-opentok-api-dr/Publishing-Custom-Video-Streams-with-the-OpenTok-API.png

Manik SachdevaAnciens de Vonage

Manik est ingénieur logiciel senior. Il aime travailler avec les développeurs et créer des API. Lorsqu'il ne construit pas d'API ou de SDK, vous pouvez le trouver en train de parler lors de conférences et de rencontres.

Publication de flux Video personnalisés avec l'API OpenTok

Publié le May 11, 2021

#javascript

#video-api

Temps de lecture : 4 minutes

En grandissant, j'ai toujours voulu être près de la neige pendant les fêtes de fin d'année, mais malheureusement, j'habite près de San Francisco, donc nous n'avons jamais de neige. Pour donner l'impression qu'il neige, créons une application de chat vidéo à l'aide de l'API OpenTok API avec des flocons de neige en mouvement dans notre flux vidéo !

Conditions préalables

Avant de commencer, assurez-vous que vous disposez d'une TokBox ainsi que la clé et le secret API d'un projet API.

Structure de l'application

Créez un répertoire et donnez-lui le nom que vous souhaitez :

mkdir publisher-with-snowflakes cd publisher-with-snowflakes

Nous allons créer quelques fichiers dans le répertoire à l'aide de la commande suivante :

touch index.html index.js

La structure de notre projet devrait maintenant ressembler à ceci :

publisher-with-snowflakes
├── index.js
├── index.html

Maintenant que nous avons créé notre projet, ajoutons du code OpenTok à notre fichier index.js fichier.

const apiKey = '';
const sessionId = '';
const token = '';

const session = OT.initSession(apiKey, sessionId);
const publisher = OT.initPublisher('publisher');

session.on({
 streamCreated: event => {
   session.subscribe(event.stream);
 },
 sessionConnected: event => {
   session.publish(publisher);
 },
});

session.connect(token, (error) => {
 if (error) {
   console.log(`There was an error connecting to the session ${error.message}`);
 }
});

Dans le code ci-dessus, nous avons initialisé la session et éditeur en utilisant les objets OT.initSession et OT.initPublisher respectivement. Nous définissons ensuite des récepteurs d'événements sur l'objet session pour les méthodes streamCreated et sessionConnected où nous nous abonnons à un flux lorsqu'il est créé et publions notre flux lorsque nous sommes connectés à la session. Après avoir défini les récepteurs d'événements de la session, nous essayons de nous connecter à la session en utilisant un jeton OpenTok.

Ajoutons le fichier index.js au fichier index.html avec le SDK OpenTok.js SDK.

<html>
  <head>
    <script src="https://static.opentok.com/v2/js/opentok.min.js"></script>
    <script src="index.js"></script>
  </head>
    <body>
    <div id="publisher"></div>
  </body>
</html>

Maintenant que nous savons comment créer un éditeur et publier dans une session, nous devons créer une source vidéo personnalisée à l'aide de l'API Canvas API Canvas et le fichier snowflake-greenscreen.mp4 Video.

Source vidéo personnalisée

const closeToGreen = (r, g, b) => {
 // 86, 246, 61
 if (g > (b * 1.4) && g > (r * 1.4)) {
   return true;
 }
 return false;
};

const getCanvasStream = () => {
 let canvas;
 let videoElement;
 let filterVideo;
 let ctx;
 let stopped = false;
 let filterCtx;
 let filterCanvas;
 let cameraCtx;
 let cameraCanvas;

 const drawFrame = () => {
   cameraCtx.drawImage(videoElement, 0, 0, cameraCanvas.width, cameraCanvas.height);
   filterCtx.drawImage(filterVideo, 0, 0, filterCanvas.width, filterCanvas.height);

   const cameraData = cameraCtx.getImageData(0, 0, cameraCanvas.width, cameraCanvas.height);
   const filterData = filterCtx.getImageData(0, 0, filterCanvas.width, filterCanvas.height);
   const res = new Uint8ClampedArray(cameraData.data.length);
   for (let i = 0; i < cameraData.data.length; i += 4) {
     let imgData = cameraData;
     if (!closeToGreen(filterData.data[i], filterData.data[i+1], filterData.data[i+2])) {
       imgData = filterData;
     }
     res[i] = imgData.data[i];
     res[i + 1] = imgData.data[i + 1];
     res[i + 2] = imgData.data[i + 2];
     res[i + 3] = imgData.data[i + 3];
   }
   ctx.putImageData(new ImageData(res, cameraData.width, cameraData.height), 0, 0);
   if (!stopped) {
     requestAnimationFrame(drawFrame);
   } else {
     ctx = null;
   }
 };

 canvas = document.createElement('canvas');
 ctx = canvas.getContext('2d');
 canvas.width = 640;
 canvas.height = 480;

 // Get the Camera video
 OT.getUserMedia({
   audioSource: null
 }).then((stream) => {
   videoElement = document.createElement('video');
   videoElement.srcObject = stream;
   videoElement.play();
   cameraCanvas = document.createElement('canvas');
   cameraCanvas.width = videoElement.width = 640;
   cameraCanvas.height = videoElement.height = 480;
   cameraCtx = cameraCanvas.getContext('2d');

   requestAnimationFrame(drawFrame);
 });

 // Get the filter video
 filterVideo = document.createElement('video');
 filterVideo.setAttribute('loop', true);
 filterCanvas = document.createElement('canvas');
 filterVideo.src = 'snowflake-greenscreen.mp4';
 filterCanvas.width = filterVideo.width = 640;
 filterCanvas.height = filterVideo.height = 480;
 filterVideo.play();
 filterCtx = filterCanvas.getContext('2d');

 return {
   canvas,
   stop: () => {
     stopped = true;
   }
 };
};

Dans le code ci-dessus, nous utilisons OT.getUserMediaun wrapper de navigator.mediaDevices.getUserMediapour obtenir un objet MediaStream pour obtenir un objet Nous utilisons ensuite le Video MediaStreamTrackde l'objet MediaStream pour dessiner une image sur le canevas. Après avoir attaché la Video MediaStreamTracknous modifions l'image du canevas en appliquant le filtre flocon de neige.

Maintenant que nous avons créé un mécanisme pour capturer le flux de la caméra et y ajouter un filtre flocon de neige, définissons la propriété videoSource pour l'éditeur.

const canvasStream = getCanvasStream();
const publisher = OT.initPublisher('publisher', {
  videoSource: canvasStream.canvas.captureStream(30).getVideoTracks()[0],
});

Notez que dans le code ci-dessus, nous avons utilisé la méthode captureStream de l'objet canvas pour obtenir l'objet MediaStream et nous avons appelé getVideoTracks()[0] sur cet objet pour obtenir l'objet Video MediaStreamTrack .

Pour commencer à publier votre vidéo personnalisée dans la session, ajoutez la balise apiKey, sessionId, et token et les valeurs !

Lorsque vous chargez votre appli, vous devriez voir la vidéo de votre caméra avec le filtre du flocon de neige en mouvement :

Video stream with snowflakes

Limites connues

L'API de diffusion en continu personnalisée fonctionne sur Chrome 51+, Firefox 49+ et Safari 11+. Elle ne fonctionne pas dans les navigateurs IE ou Edge.
Si la fenêtre du navigateur perd le focus, par exemple lorsque vous ouvrez un nouvel onglet, la vidéo s'interrompt ou devient lente.

Vous pouvez trouver tout le code de cet exemple d'application ici. Pour voir d'autres exemples d'utilisation d'OpenTok avec Canvas, veuillez consulter la page OpenTok-Web-Samples (en anglais).