Cómo acceder a la cámara de un dispositivo con la API de HTML5

Desde la llegada de HTML5 tenemos cada vez más control y acceso sobre los dispositivos; todo desde el lado del cliente. Existen dos API’s muy interesantes getUserMedia y MediaStream, que nos sirven para dar acceso a la cámara o micrófono y poder hacer streamings; mediante JavaScript. En este artículo te enseñaré cómo implementarlas. Antes de continuar, es importante mencionar que recientemente, los navegadores decidieron que algunas API’s (entre ellas getUserMedia) sólo deben trabajar con el protocolo http. Esto significa que debes tener un certificado SSL para usarla en tu sitio web. Como desarrollador puedes usarla en local sin ningún problema. Las API’s aún no son totalmente compatibles con todos los navegadores. Así que te recomiendo siempre consultar antes el soporte. Aunque no lo creas, el uso es muy sencillo y sólo necesitarás de unas cuantas líneas de código. No debes ser un gran experto para entender cómo funciona.

HTML

Antes de empezar, tenemos que definir dos etiquetas en nuestro HTML. Estas nos ayudarán a que todo salga perfecto: [html] <button id=“boton”>Encender</button> [/html] Definimos una etiqueta video con un ancho de 720px y un alto de 480px, también tenemos un botón que nos va a servir para acceder a la cámara y stremear.

JavaScript

Ahora que ya tenemos nuestro HTML, vamos a empezar definiendo tres variables en nuestro JavaScript. [js] var botonGrabar = document.getElementById(“boton”), video = document.getElementById(“video”), error = function(error) { console.log(“Error:”, error.name); }; [/js] La variable botonGrabar representa nuestra etiqueta button. La variable video representa nuestra etiqueta video. La variable error representa una función para mostrar un mensaje en la consola si algo no sale bien. Ahora que ya tenemos nuestras variables, vamos a crear nuestra función. [js] function grabar(){ navigator.getUserMedia({ “video”: true}, function(stream) { video.src = stream; video.play(); }, error); }; [/js] En nuestra función tenemos navigator.getUserMedia que recibe tres parámetros. [js] navigator.getUserMedia ( constraints, successCallback, errorCallback ); [/js] constraints: Este parámetro es un objeto booleano ya sea de video o audio. Describe los tipos de multimedia soportados por el objeto MediaStream. [js] { video: true } [/js] successCallBack: Este parámetro es una función con el objeto MediaStream que contenga la secuencia multimedia. En este caso, nuestra variable video. [js] function(stream) { video.src = stream; video.play(); } [js] errorCallBack: Este parámetro es una función que es llamada cuando hay un error. En nuestro caso, esta función la guardamos en la variable error. [js] error = function(error) { console.log(“Error:”, error.name); }; [/js] Para asegurarnos de que nuestra función pueda ser usada en diferentes navegadores, agregamos un poco más de código: [js] function grabar(){ // Estándar if(navigator.getUserMedia) { navigator.getUserMedia({ “video”: true}, function(stream) { video.src = stream; video.play(); }, error); } // prefijo WebKit else if(navigator.webkitGetUserMedia) { navigator.webkitGetUserMedia({ “video”: true}, function(stream){ video.src = window.URL.createObjectURL(stream); video.play(); }, error); } // prefijo Moz else if(navigator.mozGetUserMedia) { navigator.mozGetUserMedia({ “video”: true}, function(stream){ video.src = window.URL.createObjectURL(stream); video.play(); }, error); } // Navegadores no compatibles else { alert(“Tu navegador no es compatible con getUserMedia”); } }; [/js] Ahora nuestra función tiene un if que entra en acción cuando el navegador es compatible con getUserMedia. De no ser así, tenemos otras dos opciones para navegadores con prefijos webkit y moz. Finalmente, si el navegador no es compatible (Safari u Opera Mini), lanza una alerta. Para terminar, sólo falta agregar un evento a nuestro botón par que al dar click, nuestra función sea activada. [js] botonGrabar.addEventListener(“click”, grabar); [/js] Nuestro código JavaScript completo se debe ver de la siguiente manera: [js] var botonGrabar = document.getElementById(“boton”), video = document.getElementById(“video”), error = function(error) { console.log(“Error:”, error.name); }; function grabar(){ // Estándar if(navigator.getUserMedia) { navigator.getUserMedia({ “video”: true}, function(stream) { video.src = stream; video.play(); }, error); } // prefijo WebKit else if(navigator.webkitGetUserMedia) { navigator.webkitGetUserMedia({ “video”: true}, function(stream){ video.src = window.URL.createObjectURL(stream); video.play(); }, error); } // prefijo Moz else if(navigator.mozGetUserMedia) { navigator.mozGetUserMedia({ “video”: true}, function(stream){ video.src = window.URL.createObjectURL(stream); video.play(); }, error); } // Navegadores no compatibles else { alert(“Tu navegador no es compatible con getUserMedia”); } }; botonGrabar.addEventListener(“click”, grabar); [/js] Como puedes ver, el acceder a la cámara y stremear desde ella, es bastante fácil y nos proporciona distintas opciones para interactuar con nuestros usuarios. Por ejemplo, tomar una foto y aplicarle distintos filtros con CSS. Todo depende de qué tanta imaginación tengas. Recuerda que en Platzi tenemos el curso de JavaScript y jQuery donde aprenderás más acerca de este maravilloso lenguaje y las herramientas que te pueden ayudar a interactuar con tus usuarios.