3. Firefox and the release channels

    • by Robert Nyman • Aurora, Firefox • 9 comments

    When we meet and talk to people, there are often questions about Firefox, how the release shedule works and what different channels we have for testing. Therefore, I’d like to introduce you to/remind you about them and also let you know where the most important testing is, both for you and for us.

    Firefox release channels

    Basically, we have four different Firefox release channels:

    Firefox Release
    The official release of Firefox.
    Firefox Beta
    Testing the next version of Firefox befire it becomes the official release.
    Firefox Aurora
    For web/platform developers and early adopters.
    Firefox Nightly
    Nightly releases that contains experimental features. (covered regularly on Twitter from @firefoxnightly)

    Firefox release timeline

    Firefox is released on a six week schedule, meaning that every sixth week there will be new versions of Firefox Release, Firefox Beta and Firefox Aurora. Nightly is, naturally, released every night.

    Running multiple versions of Firefox at the same time

    There are many different ways of running multiple versions of Firefox at the same time. What it all comes down to is setting up different profiles that you have per each web browser instance. The easiest way is most likely to use the Profile Manager, as described on MDN.

    If you are on Mac OS X, it’s easy to use the automated version of setting up multiple profiles of Firefox.

    Another option, in plain code and as outlined in Multiple Firefox Instances, is to just launch the Profile manager directly:

    # On Windows click Start > Run then:
"C:\Program Files\Mozilla Firefox\firefox.exe" -no-remote -ProfileManager
 
# Mac OS X and Linux, in Terminal
firefox -ProfileManager
 
# Depending on system/setup, you might need to do this from the directory
./firefox -ProfileManager

    Testing Firefox Aurora

    The version of Firefox that is the best version to test for web developers is Firefox Aurora. It is in a stable enough condition to use, but also has features at their latest stage before they become approved. Therefore, your chance to affect implementations, find bugs, improve features is when it has become Firefox Aurora – likewise, it gives us a better chance to ensure that when Firefox is officially released, all the things are in place in the best possible manner.

    Therefore, please take the time to test out Firefox Aurora and new features, so we can together help Firefox and the web better!

  8. Taking pictures with the Camera API – part of WebAPI

    • by Robert Nyman • WebAPI • 2 comments

    Through the Camera API, part of WebAPI, it becomes possible to take pictures with your device’s camera and upload them into the current web page. This is achieved through an input element with type="file" and an accept attribute to declare that it accepts images.

    The HTML looks like this:

    <input type="file" id="take-picture" accept="image/*">

    When the users choose to activate this HTML element, they are presented with an option from where they want to choose a file, where the device’s camera is one of the options. If the camera is selected, it goes into picture taking mode.

    After the picture has been taken, the user is presented with a choice to accept or discard it. If accepted, it gets sent to the <input type="file"> element and its onchange event is triggered.

    Get a reference to the taken picture

    With the help of the File API you can then access the taken picture/chosen file:

    var takePicture = document.querySelector("#take-picture");
takePicture.onchange = function (event) {
    // Get a reference to the taken picture or chosen file
    var files = event.target.files,
        file;
    if (files && files.length > 0) {
        file = files[0];
    }
};

    Presenting the taken picture in the web page

    Once we have a reference to the taken picture (i.e. file) we can then use createObjectURL to create a URL referencing the picture and setting it to the src of an image:

    // Image reference
var showPicture = document.querySelector("#show-picture");
 
// Get window.URL object
var URL = window.URL || window.webkitURL;
 
// Create ObjectURL
var imgURL = URL.createObjectURL(file);
 
// Set img src to ObjectURL
showPicture.src = imgURL;
 
// For performance reasons, revoke used ObjectURLs
URL.revokeObjectURL(imgURL);

    If createObjectURL isn’t supported, an alternative is to fallback to FileReader:

    // Fallback if createObjectURL is not supported
var fileReader = new FileReader();
fileReader.onload = function (event) {
    showPicture.src = event.target.result;
};
fileReader.readAsDataURL(file);

    Complete example demo and code

    If you want a complete working example page, I’ve created a Camera API demo. Here is the code for the HTML page and its accompanying JavaScript file:

    HTML page

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Camera API</title>
        <link rel="stylesheet" href="css/base.css" type="text/css" media="screen">
    </head>
 
    <body>
 
        <div class="container">
            <h1>Camera API</h1>
 
            <section class="main-content">
                <p>A demo of the Camera API, currently implemented in Firefox and Google Chrome on Android. Choose to take a picture with your device's camera and a preview will be shown through createObjectURL or a FileReader object (choosing local files supported too).</p>
 
                <p>
                    <input type="file" id="take-picture" accept="image/*">
                </p>
 
                <h2>Preview:</h2>
                <p>
                    <img src="about:blank" alt="" id="show-picture">
                </p>
 
                <p id="error"></p>
 
            </section>
 
            <p class="footer">All the code is available in the <a href="https://github.com/robnyman/robnyman.github.com/tree/master/camera-api">Camera API repository on GitHub</a>.</p>
        </div>
 
 
        <script src="js/base.js"></script>
 
 
    </body>
</html>

    JavaScript file

    (function () {
    var takePicture = document.querySelector("#take-picture"),
        showPicture = document.querySelector("#show-picture");
 
    if (takePicture &amp;&amp; showPicture) {
        // Set events
        takePicture.onchange = function (event) {
            // Get a reference to the taken picture or chosen file
            var files = event.target.files,
                file;
            if (files && files.length > 0) {
                file = files[0];
                try {
                    // Get window.URL object
                    var URL = window.URL || window.webkitURL;
 
                    // Create ObjectURL
                    var imgURL = URL.createObjectURL(file);
 
                    // Set img src to ObjectURL
                    showPicture.src = imgURL;
 
                    // Revoke ObjectURL
                    URL.revokeObjectURL(imgURL);
                }
                catch (e) {
                    try {
                        // Fallback if createObjectURL is not supported
                        var fileReader = new FileReader();
                        fileReader.onload = function (event) {
                            showPicture.src = event.target.result;
                        };
                        fileReader.readAsDataURL(file);
                    }
                    catch (e) {
                        //
                        var error = document.querySelector("#error");
                        if (error) {
                            error.innerHTML = "Neither createObjectURL or FileReader are supported";
                        }
                    }
                }
            }
        };
    }
})();

    Web browser support

    • Camera API is currently supported in Firefox and Google Chrome on Android devices.
    • createObjectURL is supported in Firefox, Google Chrome and Internet Explorer 10+.
    • FileReader is supported in Firefox, Google Chrome, Internet Explorer 10+ and Opera 11.6+.

    The future

    With WebRTC – which is support for real time, audio, video & data communications between two browsers – and a navigator.getUserMedia approach we will see much more of this in the near future, in a number of the major web browsers. For more information, please see our Web Platform Roadmap for Firefox.

    But for now, you can enjoy taking/capturing pictures!