HTML5

HTML5 Accediendo a la Webcam y micrófono

por Luis Eduardo

reproductor html5

  Aprendiendo HTML5     

Hola amigos en esta ocasión vamos a realizar un tutorial muy interesante, puesto que vamos hacer uso de la tecnología Html5 para interactuar con el hardware de nuestra computadora, mas exactamente con la webcam y el micrófono, para ello vamos a ser uso del lenguaje Javascript y de html5.

Inicialmente agregamos nuestro reproductor con la etiqueta de vídeo como ya lo hemos venido haciendo, ademas a dicha etiqueta le agregaremos un id, en mi caso lo llamaré cam.

[cc lang=»html»]

Ingresa a mi tienda para programadores. ¡Encuentra Códigos Fuente, Cursos, Software, Computadoras, Accesorios y Regalos exclusivos!.

[/cc]

Listo, ahora vamos a crear el script paso a paso que necesitamos para nuestro objetivo.

[cc lang=»javascript»]

//camara es el nombre de la función que vamos a implementar window.addEventListener('load',camara);

function camara(){

//creamos la variable vídeo, la cual invoca al elemento que tenga el id="cam" dentro del documento var video = document.getElementById('cam');

// getUserMedia es el método que permite acceder al hardware multimedia del pc, este metodo está contenido dentro del objeto navigator

navigator.getUserMedia = (navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.msGetUserMedia || navigator.mozGetUserMedia);

if(navigator.getUserMedia){ //como deseamos tener activado tanto audio, video, los ponemos en true, //el segundo parámetro será una función a la cual le pondremos videocam como parámetro, el cual recibe el video a visualizar navigator.getUserMedia({audio:true,video:true},function(videocam){

// ahora pasaremos la ruta de donde se va a tomar el video, para ello necesitamos convertir dicho video a una URL que pueda ser leida por la etiqueta de video. //para ello hacemos uso del método createObjectURL del objeto URL, el cual pertenece al objeto window y después le pasamos el vídeo a convertir como parámetro, en este caso videocam video.src = window.URL.createObjectURL(videocam);

//iniciamos la webcam de nuestro pc video.play(); },

//función que muestra por consola los errores ocurridos en caso de haberlos function (e){ console.log(e); }); }else{ alert('tu navegador no es compatible'); } }

[/cc]

Finalmente desde nuestro navegador le damos permiso, para poder acceder a la cámara web y al micrófono del ordenador 🙂 .