DesarrolloLibre

Desarrollo Web, Android, juegos y mucho más

Categorias
¡Actualizado el 02-04-2014!

Esta es una características fascinante que trae el API de HTML5 consigo y consiste en la posibilidad de acceder a la camara y microfono (con previa aprobación del usuario) de la computadora o dispositivo móvil sin la necesidad de utilizar ningún plugin; en este artículo aprenderemos cómo acceder a la cámara de un dispositivo y dirigir este flujo de datos (stream) dentro de un tag <video>; básicamente vamos a tomar una captura o imagen a través de la cámara del usuario.

El objeto navigator.getUserMedia de HTML5

Lo primero que debemos hacer es configurar el JavaScript; el código que accede a la cámara de la computadora o dispositivo empleando los prefijos correspondientes para mantener la compatibilidad entre los navegadores web más utilizados (Google Chrome, Mozilla Firefox e Internet Explorer):

  navigator.getUserMedia = (navigator.getUserMedia ||
                            navigator.webkitGetUserMedia ||
                            navigator.mozGetUserMedia || 
                            navigator.msGetUserMedia);

Ya creado el objeto getUserMedia en el paso anterior, lo siguiente es inicializarlo con los siguientes parámetros:

Puedes probar el ejemplo completo dando click aquí.

Consideraciones


Publicidad

Give me for a beer!

Algunos recursos que te pueden interesar

Eye Candy

Eye Candy

Creando un péndulo con Canvas en JavaScript

Creando un péndulo con Canvas en JavaScript

Árbol arcoíris creciente

Árbol arcoíris creciente

Algunos artículos que te pueden interesar

La API de Reconocimiento de Voz en JavaScript: speechRecognition()

La API de Reconocimiento de Voz en JavaScript: speechRecognition()

La API de Reconocimiento de Voz da la capacidad a nuestras aplicaciones de reconocer la voz según el idioma configurado a través del micrófono de la PC o dispositivo móvil.

Andrés Cruz 10-10-2017

El secreto de las animaciones en JavaScript (requestAnimationFrame())

El secreto de las animaciones en JavaScript (requestAnimationFrame())

En esta entrada veremos cómo realizar algunas simples animaciones en JavaScript mediante requestAnimationFrame() cuya API se encuentra integrada con Canvas.

Andrés Cruz 21-07-2015

Escalado y recortando imágenes con Canvas

Escalado y recortando imágenes con Canvas

Con Canvas es posible escalar e incluso recortar imágenes dibujadas en el lienzo (en el Canvas) todo con sólo una función llamada drawImage().

Andrés Cruz 05-05-2014