Hace tiempo que HTML5 está en boca de todos y ha demostrado hacer cosas interesantes con simple código, cosa que antes hacíamos con ayuda de plugins, por ejemplo Flash y la posibilidad de acceder a la cámara web, el micrófono y otros dispositivos, algo en lo cual a HTML5 le lleva mucha ventaja, de esto se ha dado cuenta Google y ha estado trabajando para conseguirlo en su navegador.
Gracias a que Google trabaja para tener esta tecnología disponible en su navegador, podemos probar los adelantos que han hecho y saber cómo puede funcionar, en este caso, solo la cámara web.
Como activar la posibilidad de acceder a nuestra cámara web desde el navegador
Para poder acceder a la cámara web desde el navegador, primero necesitamos habilitar ciertas capacidades de Chrome (La versión 18), en este caso son 2:
- Habilitar el API de fuente de medios en los elementos de <video>
- Habilitar MediaStream
Para poder habilitarlas escribe en la barra de direcciones “Chrome://flags” y aparecerán varias capacidades que Chrome tiene, busca las mencionadas ya que son necesarias para poder hacer esto o no podrás ver absolutamente nada.
Código HTML5 para el video
Vamos a escribir el código que va a permitir visualizar nuestra cámara web en el navegador.
<div>
<video id="live" width="320" height="240" autoplay></video>
</div>
En realidad no es tan difícil, es simplemente usar la etiqueta video pero sin una fuente de video ya establecida.
Código JavaScript para acceder al dispositivo, en este caso, la cámara web
Para realizar esto, vamos a guardar en una variable el elemento live del documento, con esto podremos mandar la captura de la cámara hacia nuestra etiqueta video mediante la nueva función navigator.webkitGetUserMedia(tipo de dispositivo, fuente, error); la cual tiene 3 parámetros (Noten que esta función tiene extensión propietaria como en CSS3).
En la variable stream de la función, estamos recibiendo el video de nuestro dispositivo, después de esta función, tenemos otra donde capturamos cualquier error que pueda suceder.
//Guardar el objeto video en una variable
video = document.getElementById("live");
//Acceder al dispositivo de camara web para mostrar el video
navigator.webkitGetUserMedia("video",
function(stream) {
video.src = webkitURL.createObjectURL(stream);//Obtenemos el video fuente de nuestra eitqueta video para mostrarlo
},
function(err) {
console.log("Unable to get video stream!");//obtenemos algun error posible al realizar esto
}
);
Les dejo el código completo:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Accediendo a la camara web desde HTML5</title>
</head>
<body>
<div>
<video id="live" width="320" height="240" autoplay></video>
</div>
<script>
//Guardar el objeto video en una variable
video = document.getElementById("live");
//Acceder al dispositivo de camara web para mostrar el video
navigator.webkitGetUserMedia("video",
function(stream) {
video.src = webkitURL.createObjectURL(stream);//Obtenemos el video fuente de nuestra eitqueta video para mostrarlo
},
function(err) {
console.log("Unable to get video stream!");//obtenemos algun error posible al realizar esto
}
);
</script>
</body>
</html>
Recuerden que esto no es posible usarlo aun en nuestros sitios o aplicaciones web, Google lo tiene como una prueba en desarrollo de nuestro navegador y por eso viene deshabilitado por defecto, solo nos dan una prueba de lo que puede venir.
No quiso funcionar. Ojala y se pueda pronto
Revisa que tengas Chrome 18, activadas las nuevas capacidades y claro reiniciar el navegador.
Pero que hijo de put… Lo probé con mi nueva web y se ve perfecto… Lo fácil que es. ¿Imaginate lo que se va a poder hacer con esto? in-cre-i-ble. Cada día amo más HTLM5 y CSS3.
Si es muy facil de implementar, me gusta la idea, pero en temas de seguridad aun esta muy pobre y tenemos que esperar las propuestas de los demás navegadores.
Si, yo en bien lo probé deshabilité de nuevo por el tema de los scripts. Cualquiera te podría ver sin autorización… Pero igual se zarpó Google.
estoy con chrome 19 bet ya , me pide permiso para acceder a la camara pero despues no me muestra nada,acaso es xk tengo la beta en funcionamiento?
Quizas sea por que tienes beta, en el caso de Chrome 18, no pide permisos para acceder a la cámara, quiere decir que están avanzando en el uso de esta misma.
Tengo la versión 19.0.1084.56 y tambien me pide permisos para acceder a la camara, se los doy pero se me va a la funcion de error y me imprime "Unable to get video stream!" :S
En esa versión es más difícil acceder a la cámara, por seguridad siempre pedira permisos, quizas el error es que ya da por default que la cámara esta lista pero en realidad no, ya que apenas sera activada, en ese caso usa un listener que escuche cuando la cámara este lista.
He estado estos últimos meses desarrollando en HTML5 y llegué al tema de la cámara y por más que intentaba ejecutar una página tan simple como la que muestras en este blog, no me funcionaba.
Finalmente me dio por subir dicha página a un servidor, desde ahí pude comprobar como mi cara aparecía en la página web.
Observando la captura de pantalla de tu ejemplo he visto que también lo ejecutas desde un servidor. ¿Te funciona en el Google Chrome abriendo la página desde el disco duro? ¿Y en Ópera? (a mi en Opera sí)
Local nunca lo probé pero muchos les sucedió lo mismo, al igual sucede con funciones de css3 en chrome
Ok, es bueno saber que también pasa con funciones CSS3, gracias por la info.
Ya de paso (si me lo permites xD) dejo un enlace a un artículo con un videotutorial sobre la cámara web en HTML5 por si a alguien le hace falta.
http://programmingheroes.blogspot.com/2012/08/captura-de-video-con-html5-webcam-camara-web.html
Un saludo amigo 😉
Sabes como activar los flatos en chrome para iPad.
Te refieres a ¿activar esto mismo para Chrome de iPad?
Las capacidades que hay que habilitar en chrome ya no aparecen , que puedo hacer ?
Actualiza Chrome e intentan probar el código sin habilitar nada, ultimamente ya están implementando todo en una versión estable
Hola:
Gracias por el articulo, muy interesante la verdad.
Estoy intentando probarlo pero al instalarme la v18 me dice que la versión es 27.0.1453.110 m. ¿Es la correcta? De ser asi en Chrome://flags no me sale la opcion de habilitar media stream. Quiza por ello no me funcione el código.
Un saludo
Si la versión es mayor, mejor aún, en la versión 27 ya viene habilitado.
mil gracias! de gran ayuda! Si es necesario que esté online, si no no funciona.
Existe alguna manera de meterle filtros a la captura de la web? (tipo poner en B/N o distorsionar?)
Mil gracias
Claro que es posible, todo se puede hacer con CSS3 al hacer una captura de la webcam.
ya active lo primero y lo del mediastream ya viene activado pero aun asi nome muestra nada 🙁 no se que pueda estar fallando 🙁
Puedes verificar que lo estes usando en un servidor local, aveces algunas funciones no trabajan igual que con un archivo .html abierto desde una carpeta. También toma en cuenta que esto ya tiene casi un año y Chrome ha cambiado varias cosas.
sera que puedo usar con una tablet android???, alguien sabe?
me parece un buen aporte me pregunto si funcionara tambien en los dispositivos moviles 🙂