Compartilhar:
){kind=small}
Manik é engenheiro de software sênior. Ele gosta de trabalhar com desenvolvedores e criar APIs. Quando não está desenvolvendo APIs ou SDKs, é possível encontrá-lo palestrando em conferências e encontros.
Publicação de transmissões de vídeo personalizadas com a API do OpenTok
Tempo de leitura: 4 minutos
Quando era criança, sempre quis estar perto da neve durante as festas de fim de ano, mas, infelizmente, moro perto de São Francisco, então nunca neva por aqui. Para dar a sensação de que está nevando, vamos criar um aplicativo de videochamada usando a API do OpenTok com flocos de neve em movimento na nossa transmissão de Video!
Antes de começarmos, certifique-se de ter um conta no TokBox e a chave e o segredo da API do Account de um projeto de API.
Crie uma pasta e dê a ela o nome que quiser:
Vamos criar alguns arquivos dentro do diretório usando o seguinte comando:
A estrutura do nosso projeto agora deve ficar assim:
publisher-with-snowflakes
├── index.js
├── index.htmlAgora que criamos nosso projeto, vamos adicionar um pouco de código do OpenTok ao nosso index.js arquivo.
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}`);
}
});
No código acima, inicializamos a sessão e Publisher usando OT.initSession e OT.initPublisher métodos, respectivamente. Em seguida, definimos ouvintes de eventos no objeto de sessão para streamCreated e sessionConnected onde nos inscrevemos em um stream quando ele é criado e publicamos nosso stream quando estamos conectados à sessão. Após definir os ouvintes de eventos da sessão, tentamos nos conectar à sessão usando um token do OpenTok.
Vamos lá, vamos adicionar o index.js arquivo ao index.html juntamente com o SDK do OpenTok.js.
<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>
Agora que sabemos como criar um editor e publicar em uma sessão, precisamos criar uma fonte de Video personalizada usando a API do Canvas e o snowflake-greenscreen.mp4 arquivo de vídeo.
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;
}
};
};
No código acima, usamos OT.getUserMedia, um wrapper de navigator.mediaDevices.getUserMedia, para obter um MediaStream objeto. Em seguida, usamos o Video MediaStreamTrack, a partir do MediaStream objeto para desenhar uma imagem na tela. Depois de anexar o Video MediaStreamTrack, modificamos a imagem da tela aplicando o filtro de floco de neve.
Agora que criamos um mecanismo para capturar o fluxo da câmera e adicionar um filtro de flocos de neve a ele, vamos definir a videoSource propriedade do publisher.
const canvasStream = getCanvasStream();
const publisher = OT.initPublisher('publisher', {
videoSource: canvasStream.canvas.captureStream(30).getVideoTracks()[0],
});Observe que, no código acima, utilizamos o captureStream método do canvas objeto para obter o MediaStream e chamar getVideoTracks()[0] esse objeto para obter o objeto de Video MediaStreamTrack .
Para começar a publicar seu Video personalizado na sessão, adicione o apiKey, sessionId, e token valores!
Ao abrir seu aplicativo, você deverá ver o Video da sua câmera com o filtro do floco de neve em movimento:
Video stream with snowflakes
A API de streaming personalizada funciona no Chrome 51 ou superior, no Firefox 49 ou superior e no Safari 11 ou superior. Ela não funciona nos navegadores IE ou Edge.
Se a janela do navegador perder o foco — por exemplo, ao abrir uma nova aba —, o Video será pausado ou ficará lento.
Você pode encontrar todo o código deste aplicativo de exemplo aqui. Para ver mais exemplos de uso do OpenTok com o Canvas, acesse a repositório OpenTok-Web-Samples .