Compartir:
){kind=small}
Manik es ingeniero de software sénior. Le gusta trabajar con desarrolladores y crear API. Cuando no está construyendo APIs o SDKs, se le puede encontrar hablando en conferencias y meetups.
Publicación de flujos de Video personalizados con la API de OpenTok
Tiempo de lectura: 4 minutos
Cuando era pequeño, siempre quería estar cerca de la nieve durante las vacaciones, pero por desgracia vivo cerca de San Francisco y nunca nieva. Para que parezca que está nevando, vamos a crear una aplicación de chat de vídeo utilizando la API de OpenTok ¡con copos de nieve en movimiento en nuestro flujo de Video!
Antes de empezar, por favor asegúrese de que tiene un TokBox y la API Key y Secret de un proyecto API.
Crea un directorio y ponle el nombre que quieras:
Vamos a seguir adelante y crear un par de archivos dentro del directorio utilizando el siguiente comando:
La estructura de nuestro proyecto debería ser la siguiente:
publisher-with-snowflakes
├── index.js
├── index.htmlAhora que hemos creado nuestro proyecto vamos a añadir algo de código OpenTok a nuestro archivo index.js archivo.
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}`);
}
});
En el código anterior, hemos inicializado Sesión y Publisher utilizando OT.initSession y OT.initPublisher respectivamente. A continuación, procedemos a establecer escuchadores de eventos en el objeto de sesión para los métodos streamCreated y sessionConnected donde nos suscribimos a un flujo cuando se crea y publicamos nuestro flujo cuando estamos conectados a la sesión. Después de configurar los escuchadores de eventos de sesión, intentamos conectarnos a la sesión utilizando un Token OpenTok.
Sigamos adelante y añadamos el archivo index.js al archivo index.html junto con el 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>
Ahora que sabemos cómo crear un editor y publicar en una sesión, tenemos que crear una fuente de vídeo personalizada utilizando la API de Canvas y el archivo snowflake-greenscreen.mp4 archivo de Video.
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;
}
};
};
En el código anterior, utilizamos OT.getUserMediauna envoltura de navigator.mediaDevices.getUserMediapara obtener un objeto MediaStream objeto . A continuación, utilizamos el vídeo MediaStreamTrackdel objeto MediaStream para dibujar una imagen en el lienzo. Después de adjuntar el Video MediaStreamTrackmodificamos la imagen del lienzo aplicando el filtro copo de nieve.
Ahora que hemos creado un mecanismo para capturar el flujo de la cámara y añadirle un filtro de copo de nieve, establezcamos la propiedad videoSource para el editor.
const canvasStream = getCanvasStream();
const publisher = OT.initPublisher('publisher', {
videoSource: canvasStream.canvas.captureStream(30).getVideoTracks()[0],
});Obsérvese que en el código anterior hemos utilizado el método captureStream del objeto canvas para obtener el objeto MediaStream resultante y llamamos a getVideoTracks()[0] sobre ese objeto para obtener el objeto MediaStreamTrack objeto.
Para empezar a publicar su Video personalizado en la sesión, añada el botón apiKey, sessionIdy token y
Cuando cargues la aplicación, deberías ver el vídeo de tu cámara con el filtro de copo de nieve en movimiento:
Video stream with snowflakes
La API de streaming personalizada funciona en Chrome 51+, Firefox 49+ y Safari 11+. No funciona en los navegadores IE o Edge.
Si la ventana del navegador pierde el foco -por ejemplo, al abrir una nueva pestaña-, el vídeo se detendrá o se volverá lento.
Puede encontrar todo el código de esta aplicación de ejemplo aquí. Para ver más ejemplos del uso de OpenTok con Canvas, por favor visita la página OpenTok-Web-Muestras repo.