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

Creando un péndulo con Canvas en JavaScript

Creando un péndulo con Canvas en JavaScript

Unavoidable bullet

Unavoidable bullet

Librería para gestos

Librería para gestos

Algunos artículos que te pueden interesar

Creando partículas con JavaScript y Canvas

Creando partículas con JavaScript y Canvas

En esta entrada veremos cómo crear un sencillo sistema de partículas con JavaScript y Canvas y animarlo con requestAnimationFrame.

Andrés Cruz 10-11-2015

Cómo crear anillos de circulos en JavaScript y Canvas

Cómo crear anillos de circulos en JavaScript y Canvas

En esta entrada veremos cómo crear un sistema sencillo de anillos de círculos con Canvas y JavaScript; para esto se hará uso de la función requestAnimationFrame() y animar el Canvas.

Andrés Cruz 16-11-2015

Síntesis de voz con JavaScript nativo

Síntesis de voz con JavaScript nativo

En esta entrada se explicará cómo emplear la síntesis de voz en JavaScript que forma parte de la Web Speech API.

Andrés Cruz 10-12-2015