Como desarrolladores de software, en algunas ocasiones es necesario crear aplicaciones web que capturan audio o video y administrar dispositivos multimedia como cámara web, micrófono y altavoces. Por lo tanto, el propósito de este artículo es brindar un resumen de cómo capturar secuencias de video y audio utilizando la interfaz de programación de aplicaciones (API por sus siglas en inglés) de WebRTC. Ésta nos permite desarrollar aplicaciones web rápidamente incluyendo funcionalidades multimedia de fácil mantenimiento.
¿Qué es WebRTC?
WebRTC (Web Real-Time Communication) es un proyecto gratis de código abierto que le otorga capacidades de comunicación en tiempo real a navegadores web o aplicaciones móviles por medio de APIs simples. Permite la comunicación en audio y video dentro de páginas web. Es compatible con Apple, Google, Microsoft, Mozilla y Opera. WebRTC está siendo estandarizado por el Consorcio World Wide Web (W3C) y el Grupo de Trabajo de Ingeniería de Internet (IETF por sus siglas en inglés).
Capacidad de Audio
WebRTC ofrece un ‘stack’ completo para comunicaciones de voz. No solo trae los codecs necesarios, sino que también incluye otros componentes para brindar una gran experiencia de usuario. Entre estos encontramos la cancelación de eco acústico basada en software, reducción de ruido, acceso y control del hardware en múltiples plataformas.
Capacidad de Video
WebRTC crea proyectos basándose en el codec VP8. Incluye componentes que ocultan la pérdida de paquetes y limpian imágenes con mucho ruido; además, tiene capacidades de captura y reproducción en múltiples plataformas.
¿Por Qué WebRTC?
WebRTC nos permite administrar comunicaciones multimedia dentro de páginas web por medio de la comunicación ‘peer-to-peer’, eliminando la necesidad de instalar plugins o descargar apps nativas. Por lo tanto, no necesitamos plugins como Flash y Silverlight:
Es compatible con la mayoría de los navegadores, excepto Internet Explorer:
Existen muchos tipos de aplicaciones WebRTC: multivideoconferencias, transmisiones, compartir pantallas, chats en tiempo real, discusiones basadas en video, tours virtuales, grabación de vídeo, tomar fotografías con una cámara web, etc.
Desarrollando con WebRTC
El método MediaDevices.getUserMedia() de WebRTC solicita permiso para utilizar una entrada multimedia que produce una secuencia multimedia con ‘tracks’. Ésta secuencia puede incluir un ‘track’ de video (producido por una cámara web, un dispositivo de grabación de video, dispositivos para compartir pantalla, etc.) y/o un ‘track’ de audio (producido por un micrófono).
El método MediaDevices.getUserMedia() devuelve una promesa que se resuelve en un objeto MediaStream. Si el usuario no da permiso o si no se encuentra alguna entrada multimedia que coincida, entonces la promesa se rechaza con NotAllowedError o NotFoundError respectivamente.
Captura de Video
Para capturar una secuencia de video producida por una cámara web, creamos un elemento Video HTML <video> con el atributo ‘autoplay’ para reproducir el video automáticamente:
<video autoplay></video><script>
const constraints = {
video: true
};
function handleSuccess(stream) {
document.querySelector('video').srcObject = stream;
}
function handleError(error) {
console.log('getUserMedia error: ', error);
}
navigator.mediaDevices.getUserMedia(constraints)
.then(handleSuccess)
.catch(handleError);
</script> Entonces, cuando el usuario permite el acceso a la cámara web, el elemento Video HTML mostrará la secuencia de video producida por la cámara web:
Captura de Audio
Para capturar una secuencia de audio producida por un micrófono, creamos un elemento Audio HTML <audio> con el atributo ‘autoplay’ para reproducir el audio automáticamente y el atributo ‘controls’ para mostrar los controles de sonido, como el volumen.
<audio autoplay controls></audio> <script>
const constraints = {
audio: true
};
function handleSuccess(stream) {
document.querySelector('audio').srcObject = stream;
}
function handleError(error) {
console.log('getUserMedia error: ', error);
}
navigator.mediaDevices.getUserMedia(constraints)
.then(handleSuccess)
.catch(handleError);
</script> Así, cuando el usuario da acceso a su micrófono, el elemento Audio HTML mostrará la secuencia de audio producida por el micrófono:
Captura de Pantalla
Si queremos capturar una secuencia de video producida por una pantalla, creamos un elemento Video HTML <video> con el atributo ‘autoplay’ para reproducir el video automáticamente. Se incluye el atributo ‘loop’ ya que el video no posee una duración y además se incluye el atributo ‘muted’ porque la pantalla compartida no posee audio:
<autoplay loop muted></video><script>
const constraints = {
video: true
};
function handleSuccess(stream) {
document.querySelector('video').srcObject = stream;
}
function handleError(error) {
console.log('getDisplayMedia error: ', error);
}
navigator.mediaDevices.getDisplayMedia(constraints)
.then(handleSuccess)
.catch(handleError);
</script>
Todos los navegadores mostrarán el diálogo de permisos cuando se llama a MediaDevices.getUserMedia(); éste muestra las distintas pantallas y le brinda la opción al usuario de dar o negar acceso a su pantalla. El siguiente es el diálogo de permisos de Chrome:
Entonces, cuando el usuario da permiso para compartir su pantalla, el elemento Video HTML mostrará la secuencia de video producida por la pantalla seleccionada:
Conclusión
¡Eso es todo! Utilizando la API de WebRTC y un poco de HTML/JS, aplicamos el método MediaDevices.getUserMedia() para desarrollar aplicaciones web con funcionalidades multimedia con las cuales es posible capturar secuencias de video y audio producidas por una cámara web y un micrófono. Además, con este mismo método, fue posible capturar secuencias de video producidas por una pantalla.
.png)
