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
Como acceder a la cámara web desde HTML5 (Version en desarrollo de Chrome)

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.

Como acceder a la cámara web desde HTML5 (Version en desarrollo de Chrome)

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

Como acceder a la cámara web desde HTML5 (Version en desarrollo de Chrome)

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.

Luis Antonio Gomez Prieto

Luis Antonio Gomez Prieto

Co-founder and Fullstack developer at @wavecodela

25 comentarios en “Cómo acceder a la cámara web desde HTML5 (versión en desarrollo de Chrome)

  1. 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.

  2. 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?

  3. 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

    1. 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.

  4. 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í)

  5. 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

  6. 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

    1. 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.

Deja un comentario

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

Cerrar