Compartir:
){kind=small}
Antiguo defensor de los desarrolladores de Vonage, donde su función era apoyar a la comunidad tecnológica local de Londres. Es un experimentado organizador de eventos, jugador de mesa y padre de un precioso perrito llamado Moo. También es el principal organizador de You Got This, una red de eventos sobre las habilidades básicas necesarias para una vida laboral feliz y saludable.
Añadir superposición a Video con la API de Video de Vonage
Tiempo de lectura: 2 minutos
Al crear un editor de Vonage Video, el flujo de video puede provenir directamente de una cámara de usuario, de un elemento o de un elemento HTML. Una vez que los píxeles se dibujan en el lienzo, se pueden manipular fácilmente antes de utilizarlos en una sesión de la Video API.
En este tutorial, aprenderás a añadir una superposición de texto o imagen a la imagen de la cámara que puedes incluir en tus videollamadas.
Para que el proyecto funcione se necesitan varios componentes. En primer lugar, un elemento tomará una secuencia de la cámara del usuario. En cada fotograma, el elemento de Video se dibujará en un lienzo, donde luego agregaremos texto o una imagen. Con nuestra salida deseada en un lienzo, podemos utilizar el lienzo como fuente para un editor de la Video API de Vonage, que podemos utilizar en nuestras sesiones de vídeo con amigos.
Si desea ver el código terminado, puede encontrarlo en https://github.com/nexmo-community/video-overlay.
Cree una nueva carpeta de proyecto seguida de un nuevo archivo index.html, rellenando este archivo con el siguiente 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>
En este tutorial, añadirás texto al primer lienzo c1 y una imagen superpuesta al segundo lienzo c2.
Establece la <video> a la transmisión de la cámara web del usuario. Este fragmento elegirá la cámara predeterminada:
navigator.mediaDevices.getUserMedia({ video: true })
.then(stream => { v1.srcObject = stream })
Cree una función addText() vacía. Una vez que el dispositivo de vídeo del usuario esté listo y 'reproduciendo', ejecuta las funciones cada fotograma:
v1.addEventListener('play', () => {
setInterval(addText, 0)
setInterval(addImage, 0)
})
function addText() {
}
function addImage() {
}
Actualización 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
}Actualice su navegador y ahora debería ver el texto superpuesto en el lienzo.
En primer lugar, en la parte superior de la etiqueta <script> cargue la imagen que desea utilizar para la superposición:
const overlayImg = new Image()
overlayImg.src = 'vonage.png'A continuación, actualice 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
}Tu página debería tener este aspecto:
Crea un nuevo proyecto en tu Panel de Video de Vonage. Una vez creado, desplázate hasta Herramientas del proyecto y crea una nueva sesión enrutada. Toma el ID de sesión y crea un nuevo token.
En la parte superior de su <script>crea tres nuevas variables con los datos del cuadro de mandos del proyecto:
const sessionId = 'YOUR_SESSION_ID'
const apiKey = 'YOUR_PROJECT_API_KEY'
const token = 'YOUR_TOKEN'A continuación, copie la etiqueta <script> de la página página del Client SDK de la Video API de Vonage y colócala sobre tu etiqueta <script> existente.
En la parte inferior de tu etiqueta <script> obtén tu sesión básica de la Video API de Vonage inicializada y publícala desde el segundo lienzo:
// 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")
})
En <video> y <canvas> son necesarios para que esto funcione, pero probablemente no quieras que sean visibles en tu página web. En su <head>añade el siguiente CSS para ocultarlos:
<style>
#v1, #c1, #c2 { display: none }
</style>
Esperamos que esta entrada del blog te haya resultado útil y que ahora puedas crear superposiciones personalizadas a tu gusto. Puedes optar por modificar el tamaño y la posición de las imágenes, o permitir que tus usuarios las editen ellos mismos.
Puede encontrar el proyecto final en https://github.com/nexmo-community/video-overlay.
Como siempre, si necesitas ayuda, no dudes en ponerte en contacto con nosotros en la Slack de la comunidad de desarrolladores de Vonage. Esperamos verte allí.
Compartir:
Antiguo defensor de los desarrolladores de Vonage, donde su función era apoyar a la comunidad tecnológica local de Londres. Es un experimentado organizador de eventos, jugador de mesa y padre de un precioso perrito llamado Moo. También es el principal organizador de You Got This, una red de eventos sobre las habilidades básicas necesarias para una vida laboral feliz y saludable.