Realizar capturas con la webcam con JavaScript

Say cheese! es una estupenda biblioteca JavaScript para que podamos utilizar la webcam en nuestros proyectos web. Por medio de unas pocas lineas de código podemos brindarle la posibilidad a nuestros usuario de integrar la webcam para realizar capturas de manera sencilla.

como usar la webcam con javascript

Un ejemplo de uso seria el que un usuario pueda tomarse una fotografía para colocar en el perfil de nuestra aplicación, esto sin una librería sencilla no seria tan fácil como lo es ahora con Say cheese!.

La biblioteca solo requiere jQuery para funcionar.

Ejemplo de uso:

Agregamos a nuestro proyecto la biblioteca:

<script src='/assets/js/say-cheese.js'></script>

El API es muy minimalista y fácil de utilizar:

var sayCheese = new SayCheese('#element', { snapshots: true });

sayCheese.on('start', function() {
 // do something when started
 this.takeSnapshot();
});

sayCheese.on('error', function(evt, error) {
 // handle errors, such as when a user denies the request to use the webcam,
 // or when the getUserMedia API isn't supported
});

sayCheese.on('snapshot', function(evt, snapshot) {
  // do something with a snapshot canvas element, when taken
});

sayCheese.start();

Tomamos la captura:

sayCheese.on('snapshot', function(evt, snapshot) {
  // do something with the snapshot
});

sayCheese.takeSnapshot();

Compatibilidad:

Testeado y funcionando en:

  • Firefox Nightly and Aurora
  • Google Chrom
  • Opera

En Firefox hay un pequeño bug que afecta la resolución máxima que se puede obtener, pero no es muy grave. Sin embargo puede afectar a una porción de usuario por lo que hay que tenerlo en cuenta.

Sin lugar a duda esta biblioteca es una de las mejores alternativas a la hora de utilizar e integrar la funcionalidad de capturas con la webcam a un proyecto web.

Web: Say cheese!

Categorizado en: