Mozilla

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.

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!

40 comments

Comments are now closed.

  1. Anant Narayanan wrote on July 13th, 2012 at 10:41:

    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.

  2. paulo995 wrote on July 13th, 2012 at 11:17:

    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.

    1. Anant Narayanan wrote on July 13th, 2012 at 11:27:

      Thanks for the report! I’ve filed a bug: https://bugzilla.mozilla.org/show_bug.cgi?id=773736

  3. Alexandre wrote on July 13th, 2012 at 14:41:

    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

    1. Anant Narayanan wrote on July 13th, 2012 at 15:01:

      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!

  4. Alexandre wrote on July 13th, 2012 at 15:18:

    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.

    1. Anant Narayanan wrote on July 13th, 2012 at 15:22:

      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.

  5. Ashley wrote on July 13th, 2012 at 15:59:

    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.

    1. Vilson Vieira wrote on July 15th, 2012 at 22:54:

      The same here. I imagine it is not ready yet, right?

  6. Francisco Jordano wrote on July 14th, 2012 at 12:30:

    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!

  7. Kedar wrote on July 14th, 2012 at 21:41:

    Good news ! everything gonna right as expected

  8. Bryan Clark wrote on July 16th, 2012 at 13:37:

    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!

    1. Anant Narayanan wrote on July 16th, 2012 at 13:46:

      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.

  9. thinsoldier wrote on July 17th, 2012 at 11:56:

    Nothing happening in Nightly.app on OS X

    1. thinsoldier wrote on July 17th, 2012 at 11:58:

      on the demo page.

      1. Anant Narayanan wrote on July 18th, 2012 at 09:37:

        Make sure to create and set the “media.navigator.enabled” pref to true.

  10. andri iswandi wrote on July 18th, 2012 at 00:13:

    thanks… good news.

  11. T-Bone wrote on July 18th, 2012 at 04:04:

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

    1. Anant Narayanan wrote on July 18th, 2012 at 09:39:

      This is currently not possible, but we are working on a feature that will enable this. Stay tuned!

  12. Fabricio C Zuardi wrote on July 18th, 2012 at 18:42:

    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: “0×80004005 (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

    1. Anant Narayanan wrote on September 27th, 2012 at 09:54:

      Sorry, no mobile support yet. We’ll start working on it as soon as we finish up the desktop implementation.

  13. shaz wrote on July 22nd, 2012 at 11:51:

    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

  14. T-Bone wrote on July 22nd, 2012 at 14:14:

    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

  15. ackgg wrote on July 23rd, 2012 at 22:34:

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

    1. Anant Narayanan wrote on September 27th, 2012 at 09:56:

      Not currently, but we are working on implementing the web audio API that will let you process data received via getUserMedia.

  16. Vaidik Kapoor wrote on September 17th, 2012 at 06:52:

    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

  17. Joao wrote on September 27th, 2012 at 02:37:

    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?

    1. Anant Narayanan wrote on September 27th, 2012 at 10:02:

      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.

  18. joao wrote on September 27th, 2012 at 10:39:

    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)

  19. Maisondouf wrote on October 2nd, 2012 at 22:02:

    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 ?

  20. Prasanna Venkadesh wrote on October 8th, 2012 at 02:50:

    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 ?

    1. Anant Narayanan wrote on October 8th, 2012 at 08:34:

      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!

  21. Alexandre wrote on October 8th, 2012 at 11:23:

    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/

  22. david wrote on October 9th, 2012 at 07:08:

    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 :)

  23. Alexander Karlstad wrote on October 11th, 2012 at 06:40:

    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 :-/

    1. Laxminarayan Kamath wrote on December 15th, 2012 at 21:58:

      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)

  24. Robert O’Callahan wrote on October 23rd, 2012 at 15:43:

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

  25. Andor Salga wrote on December 18th, 2012 at 18:33:

    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.

  26. Eibriel wrote on January 21st, 2013 at 22:21:

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

    (The Demo link is broken :( )

    1. Robert Nyman wrote on January 22nd, 2013 at 01:45:

      Thanks!
      I recommend going to a newer article for the latest information, demos and more.

Comments are closed for this article.