HTML5 Accediendo a la Webcam y micrófono

reproductor html5

html5-logo-pequeno  Aprendiendo HTML5     html5-logo-pequeno

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.

1
<video width="300" height="150" id="cam" controls="controls" autoplay="autoplay"></video>

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<script>

//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');  
       }
 }

</script>

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

Webcam desde Html5