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.

🛡 Los ataques informáticos crecen cada día
YouTube IconProtege tus Dispositivos - Usa Kaspersky Antivirus.
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

4 comentarios

  1. Lord Streaming Contestar

    hola, no se si es que estoy haciendo algo mal porque he seguido tu tutorial y el resultado no es el esperado. Me explico, he montado mi propio servidor web y en la pagina he introducido tu codigo esperando que los clientes al conectarse viesen lo que emite mi webcam, pero no es asi, sino que lo que se les activa es su propia webcam. Si este es el funcionamiento correcto no le veo la utilidad, porque para que vale que se conecten a mi web y se vean ellos mismos en la pantalla a traves de su webcam, suponia que lo que verian seria mi propia webcam.

    Podrias decirme si es que he hecho algo ,mal.

    Un saludo

    • Luis Eduardo Autor de la entradaContestar

      Hola, amigo un saludo, básicamente este ejemplo es para saber como acceder a la cámara y micrófono de una Pc o mobile, con unas lineas de código extra puede grabar audio, vídeo y tomar fotos pero solo de la persona que ejecuta el code pero para el objetivo que tienes en mente no aplica.

      Saludos.

    • Luis Eduardo Contestar

      Hola, amigo un saludo, básicamente este ejemplo es para saber como acceder a la cámara y micrófono de una Pc o mobile, con unas lineas de código extra puede grabar audio, vídeo y tomar fotos pero solo de la persona que ejecuta el code pero para el objetivo que tienes en mente no aplica.

      Saludos.

  2. Jhon S Contestar

    quiero complementarlo, para que funcione hay que crear un mini servidor de archivos estaticos, yo lo hice en linux asi desde la consola python -m SimpleHTTPServer

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *