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

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 Chrometiene, 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.
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: Accediendo a la camara web desde HTML5
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.

Fuente: Como acceder a la cámara web desde HTML5 (Versión en desarrollo de Chrome)

Para obtener información más completa sobre las optimizaciones del compilador, consulte nuestro Aviso de optimización.