Capturando Audio & Video con WebRTC

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:

Screen Shot 2020-05-22 at 10.47.57 AM

Es compatible con la mayoría de los navegadores, excepto Internet Explorer:

Screen Shot 2020-05-22 at 10.49.13 AM

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>

Luego, utilizando JavaScript, creamos una restricción (‘constraint’) con el parámetro de video equivalente a “true” para capturar la secuencia de video. Se llama al navigator.mediaDevices.getUserMedia para solicitar permiso para utilizar la cámara web; éste recibe la restricción y devuelve una promesa que llama a la función “handleSuccess” en caso de éxito; de lo contrario, llama la función “handleError”. Se llama la función “handleSuccess” cuando se encuentra la secuencia de video producida por la cámara web y luego se alimenta el elemento Video HTML con la secuencia de video; de lo contrario, se llama la función “handleError”, donde se muestran los errores de captura de 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>

Todos los navegadores mostrarán el diálogo de permisos cuando se llama a MediaDevices.getUserMedia(); éste le brinda la opción al usuario de dar o negar acceso a su cámara web. El siguiente es el diálogo de permisos de Chrome:

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>

Utilizando JavaScript, creamos una restricción (‘constraint’) con el parámetro de audio equivalente a “true” para capturar la secuencia de audio. Se llama al navigator.mediaDevices.getUserMedia para solicitar permiso para utilizar el micrófono; éste recibe la restricción y devuelve una promesa que llama a la función “handleSuccess” en caso de éxito; de lo contrario, llama la función “handleError”. Se llama la función “handleSuccess” cuando se encuentra la secuencia de audio producida por el micrófono y luego se alimenta el elemento Audio HTML con la secuencia de audio; de lo contrario, se llama la función “handleError”, donde se muestran los errores de captura de 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>

Todos los navegadores mostrarán el diálogo de permisos cuando se llama a MediaDevices.getUserMedia(); éste le brinda la opción al usuario de dar o negar acceso a su micrófono. El siguiente es el diálogo de permisos de Chrome:

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>

Utilizando JavaScript, creamos una restricción (‘constraint’) con el parámetro de video equivalente a “true” para capturar la pantalla. Se llama al navigator.mediaDevices.getUserMedia para solicitar permiso para compartir la pantalla; éste recibe la restricción y devuelve una promesa que llama a la función “handleSuccess” en caso de éxito; de lo contrario, llama la función “handleError”. Se llama la función “handleSuccess” cuando se encuentra la secuencia de video producida por la pantalla y luego se alimenta el elemento Video HTML con la secuencia de video; de lo contrario, se llama la función “handleError”, donde se muestran los errores de captura de pantalla.

<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.