Compartilhar:
){kind=small}
Ex-representante de desenvolvedores da Vonage, onde sua função era apoiar a comunidade tecnológica local em Londres. Ele é um experiente organizador de eventos, jogador de jogos de tabuleiro e pai de um cachorrinho fofo chamado Moo. Ele também é o principal organizador do You Got This — uma rede de eventos sobre as habilidades essenciais necessárias para uma vida profissional feliz e saudável.
Adicionar sobreposição a um vídeo com a Video API da Vonage
Tempo de leitura: 2 minutos
Ao criar um editor de vídeo do Vonage, o fluxo de vídeo pode ser obtido diretamente da câmera do usuário, de um elemento ou de um elemento HTML. Depois que os pixels são desenhados na tela, eles podem ser facilmente manipulados antes de serem utilizados em uma sessão da Video API.
Neste tutorial, você aprenderá a adicionar uma sobreposição de texto ou imagem à imagem da câmera, que poderá ser incluída em suas videochamadas.
São necessários vários componentes para que o projeto funcione. Primeiramente, um elemento receberá um fluxo da câmera do usuário. A cada quadro, o elemento de vídeo será desenhado em uma tela, onde então adicionaremos texto ou uma imagem. Com o resultado desejado na tela, podemos usá-la como fonte para um publisher da Video API da Vonage, que poderemos utilizar em nossas sessões de vídeo com amigos.
Se você quiser dar uma olhada no código finalizado, pode encontrá-lo em https://github.com/nexmo-community/video-overlay.
Crie uma nova pasta de projeto e, em seguida, um novo arquivo chamado index.html, inserindo neste arquivo o seguinte código:
<!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>
Neste tutorial, você adicionará texto à primeira tela c1 e uma sobreposição de imagem à segunda tela c2.
Defina a <video> fonte do elemento para o fluxo da webcam do usuário. Este trecho de código selecionará a câmera padrão:
navigator.mediaDevices.getUserMedia({ video: true })
.then(stream => { v1.srcObject = stream })
Crie uma função vazia addText() função vazia. Assim que o dispositivo de vídeo do usuário estiver pronto e em “reprodução”, execute as funções a cada quadro:
v1.addEventListener('play', () => {
setInterval(addText, 0)
setInterval(addImage, 0)
})
function addText() {
}
function addImage() {
}
Atualização 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
}Atualize seu navegador e agora você deverá ver o texto sendo sobreposto na tela.
Primeiro, no início da sua <script> , insira a imagem que você deseja usar para a sobreposição:
const overlayImg = new Image()
overlayImg.src = 'vonage.png'Em seguida, atualize 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
}Sua página deve ficar assim:
Crie um novo projeto no seu Painel do Vonage Video. Após criá-lo, role a página até “Ferramentas do projeto” e crie uma nova sessão roteada. Anote o ID da sessão e crie um novo token.
Na parte superior do seu <script>, crie três novas variáveis com os dados do painel do projeto:
const sessionId = 'YOUR_SESSION_ID'
const apiKey = 'YOUR_PROJECT_API_KEY'
const token = 'YOUR_TOKEN'Em seguida, copie a <script> tag da página do Client SDK da Video API da Vonage e coloque-a acima da sua tag <script> .
Na parte inferior da sua <script> , inicialize sua sessão básica da Video API da Vonage e publique a partir da segunda tela:
// 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")
})
O <video> e <canvas> são necessários para que isso funcione, mas você provavelmente não vai querer que eles fiquem visíveis na sua página da web. No seu <head>, adicione o seguinte CSS para ocultá-los:
<style>
#v1, #c1, #c2 { display: none }
</style>
Espero que você tenha achado este post útil e que agora possa criar sobreposições personalizadas à vontade. Você pode optar por alterar o tamanho e a posição das imagens ou permitir que seus usuários as editem por conta própria.
Você pode encontrar o projeto final em https://github.com/nexmo-community/video-overlay.
Como sempre, se precisar de ajuda, sinta-se à vontade para entrar em contato na Slack da Comunidade de Desenvolvedores da Vonage. Esperamos vê-lo por lá.
Compartilhar:
Ex-representante de desenvolvedores da Vonage, onde sua função era apoiar a comunidade tecnológica local em Londres. Ele é um experiente organizador de eventos, jogador de jogos de tabuleiro e pai de um cachorrinho fofo chamado Moo. Ele também é o principal organizador do You Got This — uma rede de eventos sobre as habilidades essenciais necessárias para uma vida profissional feliz e saudável.