Last Updated: February 25, 2016
·
1.871K
· leemachin

Say Cheese! - getUserMedia made simple

getUserMedia is a relatively new browser API that allows you to access the user's webcam and microphone. Getting it set up in a cross-browser compatible way isn't easy, though, due to the amount of vendor specific functions required, as well as their difference in implementation.

Say Cheese! is a small library that allows you to make use of webcams in your app, and also take pictures. It works in Chrome, Firefox*, and Opera.

Q: So, why use it, then?

A: Because it spares you the pain of having to deal with the set up yourself. You don't have to faff about with feature detection and all that:

window.URL = (window.URL || window.webkitURL);
if (window.URL && window.URL.createObjectURL) {
  return window.URL.createObjectURL(this.stream);
} else {
  return this.stream;
}
... blah blah blah...

When you can do this:

// the container element is where the video is appended
var webcam = new SayCheese('#container-element', { snapshots: false });

webcam.on('start', function() { 
  // do something
});

webcam.on('error', function() {
  // gets fired when not supported, or user denies access
});

webcam.start();

That's basically it. Give it a shot and help improve it :)

* A bug in the current version of stable Firefox prevents the snapshot functionality from working correctly, however this has been fixed in Aurora and Nightly.

Have a fresh tip? Share with Coderwall community!

Post
Post a tip
Did you know?

JavaScript on a page runs with the privileges of that origin. One altered library, tag manager, or snippet can read inputs, change what people see, and call your APIs as the user.

Security insights from Cside