Firefox 24 for Android gets WebRTC support by default

WebRTC is now on Firefox for Android as well as Firefox Desktop! Firefox 24 for Android now supports mozGetUserMedia, mozRTCPeerConnection, and DataChannels by default. mozGetUserMedia has been in desktop releases since Firefox 20, and mozPeerConnection and DataChannels since Firefox 22, and we’re excited that Android is now joining Desktop releases in supporting these cool new features!

What you can do

With WebRTC enabled, developers can:

  • Capture camera or microphone streams directly from Firefox Android using only JavaScript (a feature we know developers have been wanting for a while!),
  • Make browser to browser calls (audio and/or video) which you can test with sites like appspot.apprtc.com, and
  • Share data (no server in the middle) to enable peer-to-peer apps (e.g. text chat, gaming, image sharing especially during calls)

We’re eager to see the ideas developers come up with!

For early adopters and feedback

Our support is still largely intended for developers and for early adopters at this stage to give us feedback. The working group specs are not complete, and we still have more features to implement and quality improvements to make. We are also primarily focused now on making 1:1 (person-to-person) calling solid — in contrast to multi-person calling, which we’ll focus on later. We welcome your testing and experimentation. Please give us feedback, file bug reports and start building new applications based on these new abilities.

If you’re not sure where to start, please start by reading some of the WebRTC articles on Hacks that have already been published. In particular, please check out WebRTC and the Early API, The Making of Face to GIF, and PeerSquared as well as An AR Game (which won our getUserMedia Dev Derby) and WebRTC Experiments & Demos.

An example of simple video frame capture (which will capture new images at approximately 15fps):

navigator.getUserMedia({video: true, audio: false}, yes, no);
video.src = URL.createObjectURL(stream);

setInterval(function () {
  context.drawImage(video, 0,0, width,height);
  frames.push(context.getImageData(0,0, width,height));
}, 67);

Snippet of code taken from “Multi-person video chat” on nightly-gupshup (you can try it in the WebRTC Test Landing Page — full code is on GitHub)

function acceptCall(offer) {
    log("Incoming call with offer " + offer);

    navigator.mozGetUserMedia({video:true, audio:true}, function(stream) {
    document.getElementById("localvideo").mozSrcObject = stream;
    document.getElementById("localvideo").play();
    document.getElementById("localvideo").muted = true;

    var pc = new mozRTCPeerConnection();
    pc.addStream(stream);

    pc.onaddstream = function(obj) {
      document.getElementById("remotevideo").mozSrcObject = obj.stream;
      document.getElementById("remotevideo").play();
    };

    pc.setRemoteDescription(new mozRTCSessionDescription(JSON.parse(offer.offer)), function() {
      log("setRemoteDescription, creating answer");
      pc.createAnswer(function(answer) {
        pc.setLocalDescription(answer, function() {
          // Send answer to remote end.
          log("created Answer and setLocalDescription " + JSON.stringify(answer));
          peerc = pc;
          jQuery.post(
            "answer", {
              to: offer.from,
              from: offer.to,
              answer: JSON.stringify(answer)
            },
            function() { console.log("Answer sent!"); }
          ).error(error);
        }, error);
      }, error);
    }, error);
  }, error);
}

function initiateCall(user) {
    navigator.mozGetUserMedia({video:true, audio:true}, function(stream) {
    document.getElementById("localvideo").mozSrcObject = stream;
    document.getElementById("localvideo").play();
    document.getElementById("localvideo").muted = true;

    var pc = new mozRTCPeerConnection();
    pc.addStream(stream);

    pc.onaddstream = function(obj) {
      log("Got onaddstream of type " + obj.type);
      document.getElementById("remotevideo").mozSrcObject = obj.stream;
      document.getElementById("remotevideo").play();
    };

    pc.createOffer(function(offer) {
      log("Created offer" + JSON.stringify(offer));
      pc.setLocalDescription(offer, function() {
        // Send offer to remote end.
        log("setLocalDescription, sending to remote");
        peerc = pc;
        jQuery.post(
          "offer", {
            to: user,
            from: document.getElementById("user").innerHTML,
            offer: JSON.stringify(offer)
          },
          function() { console.log("Offer sent!"); }
        ).error(error);
      }, error);
    }, error);
  }, error);
}

Any code that runs on Desktop should run on Android. (Ah, the beauty of HTML5!) However, you may want to optimize for Android knowing that it could now be used on a smaller screen device and even rotated.

This is still a hard-hat area, especially for mobile. We’ve tested our Android support of 1:1 calling with a number of major WebRTC sites, including talky.io, apprtc.appspot.com, and codeshare.io.

Known issues

  • Echo cancellation needs improvement; for calls we suggest a headset (Bug 916331)
  • Occasionally there are audio/video sync issues or excessive audio delay. We already have a fix in Firefox 25 that will improve delay (Bug 884365).
  • On some devices there are intermittent video-capture crashes; we’re actively investigating (Bug 902431).
  • Lower-end devices or devices with poor connectivity may have problems decoding or sending higher-resolution video at good frame rates.

Please help us bring real-time communications to the web: build your apps, give us your feedback, report bugs, and help us test and develop. With your help, your ideas, and your enthusiasm, we will rock the web to a whole new level.

About Robert Nyman [Editor emeritus]

Technical Evangelist & Editor of Mozilla Hacks. Gives talks & blogs about HTML5, JavaScript & the Open Web. Robert is a strong believer in HTML5 and the Open Web and has been working since 1999 with Front End development for the web - in Sweden and in New York City. He regularly also blogs at http://robertnyman.com and loves to travel and meet people.

More articles by Robert Nyman [Editor emeritus]…


13 comments

  1. tumira

    Hi

    Still no support for Web Audio api ?

    September 17th, 2013 at 08:06

    1. Robert Nyman [Editor]

      Please read more in Web Audio API comes to Firefox.

      September 17th, 2013 at 10:10

  2. Laura Forrest

    Congrats – this is a very exciting development!

    September 17th, 2013 at 10:18

  3. Adrian

    Just tested between firefox beta for Android (1Mbit connection) and firefox 23 for Linux on a netbook (4Mbit connection). The quality was okay (a bit of audio jitter) but it was very laggy, with different amounts of lag for video and audio. Very exciting, but looking forward to it getting a bit more polished.

    September 17th, 2013 at 14:36

  4. Tumira

    Hi Robert, that article is more than 3 months old already. I was hoping that it is released in firefox24 . But i guess i have to wait maybe firefox 25.

    September 17th, 2013 at 17:24

  5. Pryka

    They are developing new things. Why they are still displaying 16 bit images on Android?

    September 18th, 2013 at 06:56

  6. song zheng

    I am very excited about this release because I love WebRTC. Recently I built a demo project that lets you do multiparty video, audio, and text chat using WebRTC and all code is open sourced on github. If you’d like to see the superb quality of WebRTC on firefox feel free to check it out: http://opentokRTC.com

    September 18th, 2013 at 14:06

  7. Galaxy

    This is awesome! o/

    September 19th, 2013 at 00:32

  8. Kataskeui Istoselidon Thessaloniki

    That is a really nice development!! :D

    September 22nd, 2013 at 06:14

  9. Ian

    How does the user prevent maliciois javascript from turning on the camera and microphone without permission?

    September 25th, 2013 at 14:44

    1. Robert Nyman [Editor]

      It needs user approval to get any access to camera and microphone, i.e. without that, there is no access.

      September 26th, 2013 at 01:27

      1. dobberx

        that is 1 step. but it matters mainly after 1st time permission to use cam mic, if users get feedback for requests notified but mostly silently. or every connect needs an id. displayed who got the perm.

        October 4th, 2013 at 07:14

  10. Bashir Ahmed

    Hi,

    Congratulation for good move. I’m going to download FireFox for my Samsung galaxy Android device because I’m using default browser.

    I’m big fan of Desktop Firefox and I don’t use any other Browser you know why? Because FireFox is fast, secure and user-friendly browser.

    Thanks!

    October 5th, 2013 at 19:40

Comments are closed for this article.