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»]
🌟 ¡Visita Nuestra Tienda para Programadores! 🌟Descubre Códigos Fuente, Cursos, Software, Computadoras, Accesorios y Regalos Exclusivos. ¡Todo lo que necesitas para llevar tu programación al siguiente nivel!
[/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 🙂 .
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
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.
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.
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