Compartir:
){kind=small}
Misha es ingeniero de soluciones para clientes en Vonage, donde se centra en el desarrollo de la Video API. Después de cambiar el ajetreo de San Francisco por el encanto de Milwaukee, Wisconsin, ahora pasa su tiempo libre descubriendo las joyas ocultas del Medio Oeste.
Comparte pantallas con tus amigos y compañeros de trabajo
Tiempo de lectura: 1 minuto
En ciertos escenarios, puede ser necesario compartir varias pantallas al mismo tiempo. Con Vonage Video API, tienes la oportunidad de hacer exactamente eso.
Esta publicación del blog mostrará cómo crear una aplicación Javascript simple que utilice la Video API de Vonage y que permita tener múltiples transmisiones de pantalla compartida al mismo tiempo. Esto puede ser útil para los esfuerzos de colaboración o para la diversión simple, como jugar un juego de tres en raya junto con amigos o familiares.
Para desarrollar este proyecto, vas a necesitar lo siguiente:
Cuenta API de Video de Vonage
Conocimientos básicos de JavaScript
Documentación de la Video API
Clonar determinados repositorios de GitHub
Usaremos un ejemplo de Video Chat Básico del directorio Github de Opentok como punto de partida para este tutorial. Por favor, descarga el siguiente repositorio - https://github.com/opentok/opentok-web-samples y trabajaremos con la parte de Video Chat Básico de este repositorio.
Utilizaremos un ID de sesión y un token generados a través de tu cuenta de Video API de Vonage. Visita tokbox.com/account para hacerlo y copia y pega la información en el config.js del repositorio. Para una aplicación implementada, se recomienda que generes ID de sesión y tokens a través del servidor backend.
En la aplicación de ejemplo Basic Video Chat, navega hasta index.html, y vamos a añadir un botón para la pantalla compartida.
Añada el siguiente código en la sección <body> de la página HTML:
<button onclick=”screenShare()”>Share your screen </button>
Ahora vaya a la parte js/app.js de la base de código y añade lo siguiente screenShare() función:
function screenShare() {
OT.checkScreenSharingCapability(function(response) {
if(!response.supported || response.extensionRegistered === false) {
console.log("screen sharing is not supported")
} else if (response.extensionInstalled === false) {
console.log("older browser like IE might require a plugin")
} else {
// Screen sharing is available. Publish the screen.
var publisher = OT.initPublisher('screenshare',
{videoSource: 'screen'},
function(error) {
if (error) {
console.log(error);
} else {
session.publish(publisher, function(error) {
if (error) {
console.log(error);
}
});
}
}
);
}
});
}Después de esto, vuelva al archivo index.html y añada el <div> para el flujo de pantalla compartida:
<div>
<div id=”subscriber”></div>
<div id=”publisher”></div>
<div id=”sceenshare”></div>
</div>
Nos gustaría mantener separados los flujos de editores, suscriptores y pantallas compartidas para asegurarnos de que los usuarios también pueden verse entre sí durante la actividad de pantalla compartida. Puede actualizar el archivo css/app.css para añadir un estilo de diseño adicional; sin embargo, sin ningún cambio, los flujos de pantalla compartida aparecerán en la esquina superior izquierda.
Para probarlo, abra el archivo index.html en tu navegador (por ejemplo, Google Chrome), publica tu vídeo y haz clic en el botón "Comparte tu pantalla" situado debajo de tu secuencia de vídeo. Después, conéctate desde otro dispositivo o navegador para probarlo.
En conclusión, este artículo le mostró una manera sencilla de mejorar la aplicación básica de Video Chat con capacidades de pantalla compartida que permiten a los usuarios compartir sus pantallas simultáneamente. Esto se hizo a través de mejoras en los archivos HTML y JavaScript del repositorio OpenTok GitHub existente.
Compartir:
Misha es ingeniero de soluciones para clientes en Vonage, donde se centra en el desarrollo de la Video API. Después de cambiar el ajetreo de San Francisco por el encanto de Milwaukee, Wisconsin, ahora pasa su tiempo libre descubriendo las joyas ocultas del Medio Oeste.