getUserMedia is ready to roll!

We blogged about some of our WebRTC efforts back in April. Today we have an exciting update for you on that front: getUserMedia has landed on mozilla-central! This means you will be able to use the API on the latest Nightly versions of Firefox, and it will eventually make its way to a release build.

getUserMedia is a DOM API that allows web pages to obtain video and audio input, for instance, from a webcam or microphone. We hope this will open the possibility of building a whole new class of web pages and applications. This DOM API is one component of the WebRTC project, which also includes APIs for peer-to-peer communication channels that will enable exchange of video steams, audio streams and arbitrary data.

We’re still working on the PeerConnection API, but getUserMedia is a great first step in the progression towards full WebRTC support in Firefox! We’ve certainly come a long way since the first image from a webcam appeared on a web page via a DOM API. (Not to mention audio recording support in Jetpack before that.)

We’ve implemented a prefixed version of the “Media Capture and Streams” standard being developed at the W3C. Not all portions of the specification have been implemented yet; most notably, we do not support the Constraints API (which allows the caller to request certain types of audio and video based on various parameters).

We have also implemented a Mozilla specific extension to the API: the first argument to mozGetUserMedia is a dictionary that will also accept the property {picture: true} in addition to {video: true} or {audio: true}. The picture API is an experiment to see if there is interest in a dedicated mechanism to obtain a single picture from the user’s camera, without having to set up a video stream. This could be useful in a profile picture upload page, or a photo sharing application, for example.

Without further ado, let’s start with a simple example! Make sure to create a pref named “media.navigator.enabled” and set it to true via about:config first. We’ve put the pref in place because we haven’t implemented a permissions model or any UI for prompting the user to authorize access to the camera or microphone. This release of the API is aimed at developers, and we’ll enable the pref by default after we have a permission model and UI that we’re happy with.

%CODEgum%

There’s also a demo page where you can test the audio, video and picture capabilities of the API. Give it a whirl, and let us know what you think! We’re especially interested in feedback from the web developer community about the API and whether it will meet your use cases. You can leave comments on this post, or on the dev-media mailing list or newsgroup.

We encourage you to get involved with the project – there’s a lot of information about our ongoing efforts on the project wiki page. Posting on the mailing list with your questions, comments and suggestions is great way to get started. We also hang out on the #media IRC channel, feel free to drop in for an informal chat.

Happy hacking!

@anantn is a hacker at Mozilla Labs who specializes in generalism. He has previously worked on Weave, Jetpack, Account Manager, and Rainbow among other projects. He is currently fiddling with Open Web Apps and Real-time communication for the Web.

kix.in/

40 comments

Anant Narayanan

There are a few known issues with this first implementation, please see http://mozillamediagoddess.org/2012/07/13/navigator-mozgetusermedia-has-just-landed-in-firefox-desktop-nightly-builds/ for more details.

July 13th, 2012 at 10:41
paulo995

Hello. I tested the video, it works great but for the audio the firewall of Win 7 popped-up to ask me if I wanted to add an exception about Firefox.

July 13th, 2012 at 11:17
1. Anant Narayanan
  
  Thanks for the report! I’ve filed a bug: https://bugzilla.mozilla.org/show_bug.cgi?id=773736
  
  July 13th, 2012 at 11:27
Alexandre

Great :-)
However:

* My webcam image is upside-down (fine with Opera 12 and Chrome 21);

* Snapshots do not seem to work with the following code that works in Opera 12 and Chrome 21: canvas.getContext(‘2d’).drawImage(video, 0, 0);

Test: http://alexandre.alapetite.fr/doc-alex/html5-webcam/

Shortcut: a80.fr/cam

Best regards,
Alexandre

July 13th, 2012 at 14:41
1. Anant Narayanan
  
  Hi Alexandre, thanks for the reports. The upside down image is a new issue that I haven’t encountered before, so we should file a bug.
  
  As to the snapshot code, that’s a known issue: https://bugzilla.mozilla.org/show_bug.cgi?id=771833 we will address shortly. In the meantime you can try mozGetUserMedia{picture:true, …} to obtain a snapshot!
  
  July 13th, 2012 at 15:01
Alexandre

Ok, bug submitted https://bugzilla.mozilla.org/show_bug.cgi?id=773824

By the way, the draft says “video.src = URL.createObjectURL(stream);” but this is not what Firefox does (Opera does just like Firefox, but unlike Chrome).

Alexandre.

July 13th, 2012 at 15:18
1. Anant Narayanan
  
  Thanks!
  
  Yes, we implement video.src = stream for now as we’re still in discussion at the W3C about the appropriate syntax. We believe there are certain drawbacks of assigning a URL to a stream. The API should stabilize as we make more progress on the “Media Captures and Streams” specification.
  
  July 13th, 2012 at 15:22
Ashley

Fails with “NS_ERROR_NOT_AVAILABLE: Component is not available” if you try to draw the video to a 2D canvas, and “NS_ERROR_FAILURE: Failure” if you try to pass the video to a WebGL texture with texImage2D.

July 13th, 2012 at 15:59
1. Vilson Vieira
  
  The same here. I imagine it is not ready yet, right?
  
  July 15th, 2012 at 22:54
Francisco Jordano

Excellent news guys!

I’ve been trying the test page and everything works as expected (taking into account the know issues) but the capturing a picture.

Will open a bug in bugzilla to track it.

Thanks and congratulations for the hard work!

July 14th, 2012 at 12:30
Kedar

Good news ! everything gonna right as expected

July 14th, 2012 at 21:41
Bryan Clark

This is awesome!! Video and audio are both working for me (separately of course)

I’m not, however, getting any pictures from the picture call. Even on your test page. I’m seeing a File Object come through the success function but I’m not able to use it in any meaningful way. The size is coming through as zero and no matter how I try loading it (via the File Object or converting to object URLs) it doesn’t seem to show.

Any tips or bugs filed? Thanks!

July 16th, 2012 at 13:37
1. Anant Narayanan
  
  I’ve been able to reproduce the issue intermittently, but haven’t filed a bug yet – feel free to do so! Try deleting the temporary files created by the images – they’re in /tmp on Linux, ~/Library/Caches/TemporaryItems on Mac named “webrtc-snapshot-*.jpeg”. The first snapshot always succeeds, and the rest of them sometimes return empty images even though the temporary files reflect the correct image.
  
  July 16th, 2012 at 13:46
thinsoldier

Nothing happening in Nightly.app on OS X

July 17th, 2012 at 11:56
1. thinsoldier
  
  on the demo page.
  
  July 17th, 2012 at 11:58
  1. Anant Narayanan
    
    Make sure to create and set the “media.navigator.enabled” pref to true.
    
    July 18th, 2012 at 09:37
andri iswandi

thanks… good news.

July 18th, 2012 at 00:13
T-Bone

Is it possible to get the data from the stream to create a video or audio file on the server side ?

July 18th, 2012 at 04:04
1. Anant Narayanan
  
  This is currently not possible, but we are working on a feature that will enable this. Stay tuned!
  
  July 18th, 2012 at 09:39
Fabricio C Zuardi

Does it work on firefox mobile?

I’ve set the preference on my nightly and none of the tests from your demo worked, the first 2 crashed the browser and the last one, picture, gave me this error:

[Exception… “Component returned failure code: 0x80004005 (NS_ERROR_FAILURE) [nsIDOMNavigatorUserMedia.mozGetUserMedia]” nsresult: “0x80004005 (NS_ERROR_FAILURE)” location: “JS frame :: https://people.mozilla.com/~anarayanan/gum_test.html :: startMedia :: line 139″ data: no]

I’ve tested on a samsung galaxy tab 10.1 runing android 3.2

July 18th, 2012 at 18:42
1. Anant Narayanan
  
  Sorry, no mobile support yet. We’ll start working on it as soon as we finish up the desktop implementation.
  
  September 27th, 2012 at 09:54
shaz

i get this error when trying the demo

TypeError: window.navigator.mozGetUserMedia is not a function

i added the the pref media.navigator.enabled in channel-prefs.js file and set it to true .
where am i going wrong

July 22nd, 2012 at 11:51
T-Bone

Remove the “window.” and try again. In the example Code above they used
navigator.mozGetUserMedia.
If it doesnt work, type “about:config” in the adressbar and add a new value with right click -> new -> boolean

Preference name : media.navigator.enabled
value : true

July 22nd, 2012 at 14:14
ackgg

Can it possible to get audio data from webrtc and process it by audio data api?

July 23rd, 2012 at 22:34
1. Anant Narayanan
  
  Not currently, but we are working on implementing the web audio API that will let you process data received via getUserMedia.
  
  September 27th, 2012 at 09:56
Vaidik Kapoor

This is awesome! Can’t believe I didn’t check this earlier. It will definitely enable developers to make Flash free stuff! :)

The first time when I ran it, everything worked fabulously – audio, video, pic. But, I noticed that even after stopping the video, it left my laptop’s webcam on (noticed it because my webcam has a small light for signalling when it is running). So, I had to quit the page to stop my camera.

Also, this particular demo worked perfectly for the first time. But when I clicked on the Video button again, it said “HARDWARE_UNAVAILABLE”. Could have been because this is just a demo and not a complete fully functional app dealing with all kinds of common bugs.

But, this is awesome! Looking forward to using this soon for a college project! :D

September 17th, 2012 at 06:52
Joao

I also get the HARDWARE_UNAVAILABLE.
The demo never worked for me though.

Using firefox nigthly build 18.0a1 (2012-09-26).
And the flag is set to true on about:config.
Windows 7 machine.

So I’m thinking it might be some environment/user restriction, but, that doesn’t make much sense since it worked fine on chrome and opera.
(and both browsers are shut down to prevent concurrency on the hardware).

any ideas anyone?

September 27th, 2012 at 02:37
1. Anant Narayanan
  
  Hmm, could you file a bug with the details of your configuration and any messages from the error console? The demos work on my Windows computer, so we’ll have to figure out under what circumstances does the call fail.
  
  September 27th, 2012 at 10:02
joao

I just got the problem “solved”.
It seems that on Firefox we need to completely shut down the webcam before using it.
Or you get the “error”.

Anyway, I managed to take pictures, I am not able to turn on the video stream.
Yet.

(thanks for the feedback though)

September 27th, 2012 at 10:39
Maisondouf

I try to test all browsers to use GetUserMedia…
Because on the web, somebody says this and other says the opposite, I have write a little test HTML to report what kind of function is supported.

About GetUserMedia, the rules are simple, but for assigning the video stream, it’s really a jungle…

Some uses ‘window.URL.createObjectURL(stream)’ but mozilla use directly the stream.
Where is the truth ?

October 2nd, 2012 at 22:02
Prasanna Venkadesh

Hi, The demo page works for me. But I tried the same code by putting the above sample code inside apache server running fedora 16. I am getting Video / Mime type not supported error in Nightly 18 whereas it works in Chrome 22. So from this I get that the problem is associated with Apache server’s Mime type. I also haven an LED indicator near my webcam lens, which is on when i visit the page in firefox, but the problem is the Mime type. Also I have entries for ogg, webm formats in mime.type files. How do I make this work on Firefox ?

October 8th, 2012 at 02:50
1. Anant Narayanan
  
  Prasanna, the problem is not with Apache – we recently changed the syntax by which you assign a MediaStream to a element, so instead of doing:
  
  video.src = stream;
  
  you should instead use:
  
  video.mozSrcObject = stream;
  
  Hope this helps!
  
  October 8th, 2012 at 08:34
Alexandre

Thanks Anant for these news.
In case it might be of interest to some, I have updated my cross-browser demo accordingly, keeping compatibility with previous Firefox approaches, as well as the code to start and stop the video and to take screenshots:
http://alexandre.alapetite.fr/doc-alex/html5-webcam/

October 8th, 2012 at 11:23
david

Hi, I was reading the webRTC working draft here: http://www.w3.org/TR/webrtc/#rtciceserver-type and there is an error in this line:
[ { url:”stun:stun.example.net”] } , { url:”turn:user@turn.example.org”, credential:”myPassword”} ]

] –> is obsolete after stun.example.net

Sorry didn’t know where to report and it’s bothering me :)

October 9th, 2012 at 07:08
Alexander Karlstad

I can’t seem to get this to work in Ubuntu. I’m using Firefox 16 through the LP PPA, but I’ve also tested FF16 by downloading the .tar.bz file. Even though I’ve set the media.navigator.enabled to true in about:config :-/

October 11th, 2012 at 06:40
1. Laxminarayan Kamath
  
  If you launch firefox from the terminal, do you see any error messages there?
  
  Also try keeping the firefox’s js console open (ctrl-shift-k)
  
  December 15th, 2012 at 21:58
Robert O’Callahan

This example is slightly obsolete. Instead of “video.src = stream;”, use “video.mozSrcObject = stream”.

October 23rd, 2012 at 15:43
Andor Salga

I created a small demo that uses the video media stream: http://BitCam.me The demo uses Processing.js to filter and ‘pixelate’ what it captures with the webcam.

December 18th, 2012 at 18:33
Eibriel

Amazing!! I really want to see this working :D

(The Demo link is broken :( )

January 21st, 2013 at 22:21
1. Robert Nyman
  
  Thanks!
  I recommend going to a newer article for the latest information, demos and more.
  
  January 22nd, 2013 at 01:45

Comments are closed for this article.

Hacks

By Anant Narayanan

About Anant Narayanan

40 comments

getUserMedia is ready to roll!

By Anant Narayanan

About Anant Narayanan

Discover great resources for web development

Thanks! Please check your inbox to confirm your subscription.