En este artículo te expondré una de las características de HTML5 más potentes: la capacidad de acceder a dispositivos como webcam y micrófono. El ejemplo que usaré es uno de los que expuse en uno de mis seminarios y que forma parte de los ejemplos de HTML5 y CSS3 para descargar aunque explicado en detalle.
Funciona 100% en Chrome
El ejemplo pretende que recojamos el audio y vídeo de nuestro dispositivo y los mostremos en un elemento video de HTML5. No es demasiado práctico pero servirá para comprender el funcionamiento. La única estructura necesaria en HTML es la siguiente:
<!DOCTYPE html> <html> <head> <title>getUserMedia</title> <meta charset="utf8"> </head> <body> <!-- En este objeto vídeo reproduciremos lo que vayamos grabando --> <video autoplay></video> </body> </html>
Acceso a dispositivos con HTML5
HTML5 nos permite acceder, siempre que el navegador lo permita, a dispositivos como webcam y micrófono a través del método getUserMedia. Antes de nada tendremos que comprobar la compatibilidad del navegador:
//Comprobamos la compatibilidad de nuestro navegador con User Media
if (tieneUserMedia()) {
console.log("Ok, el navegador soporta UserMedia");
} else {
throw new Error('Mala suerte: getUserMedia() no está soportado en tu navegador. ¿Conoces Chrome?');
}
//Comprueba los diferentes motores que dan soporte
function tieneUserMedia() {
return !!(navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia);
}
Como ves comprobamos que cada motor (webkit, microsoft, gecko) puede tener su propio método getUserMedia. Para evitarnos duplicar código definimos que navigator.getUserMedia sea igual al getUserMedia que exista en este navegador:
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
Perfecto, ahora pedimos acceso al dispositivo:
</pre>
if (navigator.getUserMedia) {
//Le pasamos un array con video y/o audio para acceder a webcam y micro respectivamente. Después una
//función que se ejecutará a modo de callback y otra a modo de fallback.
navigator.getUserMedia({video: true, audio: true}, exito, error);
//Llámamos getUserMedia, pedimos acceso a vídeo. Si tenemos éxito llamamos una función y si no lanzamos un error.
} else {
error();
}
Veamos en detalle la estructura de getUserMedia: “navigator.getUserMedia({dispositivo: verdadero o falso}, función en caso de éxito, función en caso de error)”
En caso de éxito la función recibe un parámetro correspondiente al stream de video/audio recibido a través de nuestros dispositivos. Nosotros lo convertiremos en un objeto URL y lo aplicaremos al atributo src de nuestro vídeo para que reproduzca:
window.URL = window.URL || window.webkitURL;
//Si soportamos getUserMedia y damos permiso, nuestro tag de video mostrará el stream que recogemos.
//esta función recibe un parámetro que es el stream de video y/o audio recogido por los dispositivos.
function exito(stream) {
video.src = window.URL.createObjectURL(stream);
}
//Nuestro error lanza un simple mensaje alert.
function error(e) {
throw new Error("No me dejaste mostrarte las maravillas de getUserMedia");
}
Finalizamos creando la función para el error, ya sea porque algo salga mal o bien el usuario no de permiso a compartir el dispositivo.
Funciona 100% en Chrome