Click here to Skip to main content
12,820,257 members (29,030 online)
Click here to Skip to main content
Add your own
alternative version


3 bookmarked
Posted 29 Nov 2013

Firefox OS Browser Simulator

, 29 Nov 2013 CPOL
Rate this:
Please Sign up or sign in to vote.
Firefox OS browser simulator using HTML5/JavaScript/CSS3


Lately, we have seen a lot of vendors coming out with new OSes.

But what is really going to change is HTML5. Mozilla has done a groundbreaking work for creating HTML5 based OS where anyone can submit an app based on HTML5. HTML5 is something new which is changing the landscape and in time it will challenge Android and Apple OS since it is not clumsy and app development is as easy as cool breeze.

Here, I have a written custom API specifically for the upcoming Mozilla Firefox OS.

It works great in Firefox Simulator and also as a standalone browser and you can couple it up if you want to test on browser+Firefox OS simulator.

This is a set of API specifically developed to complement the works done by Mozilla.

This Browser Simulator API helps users automatically set up a viewport ("DIV" OR "CANVAS") check media support.

Automatically create Audio/Video Element with precision position and exposes API call to control all aspects of the application. This API helps users create Viewport/Audio/Video Support, Video Playback, Camera/Mic Control with just a call to few functions and modular control over all aspects of the elements created with through error checking. (Kindly use logs to check what's happening.)

Please refer to the Mozilla Developers network on how to use Firefox OS and get some introduction towards HTML5.

This code has a modular approach and relies a lot on prototyping provided in JavaScript which is used to add functionalities/features in this API.

<!DOCTYPE html>
<link rel="stylesheet" href="style.css" />
<script type="text/javascript" src="script.js" >
var t = new initApp("div","siddDiv",
"siddClass",true);  //ElementType,eleID,eleClass, 
		//true/false  if true then output on browser
    t.testDraw();  //Test 2d Capabilities of a Viewport
    "siddVideoClass",360,480,true);  // videoID,videoClass,width,Height,ShowControls
    t.initLive(true,true,false,true);  //parameters for is Video ,
    			//Mic,DisplayControl on Video,Autoplay video

If you loop at the code above, the loop is self explanatory.

But let's take a look at how to work with this API. all users/dev who would like to use this code have to run from a <SCRIPT> inside a body, the main function here is initApp() which takes 4 parameters such as:

  1. What kind of element to use
  2. Element ID
  3. Style classes to be applied
  4. This parameter is used to display the simulator in a browser

If it is true, then a default viewport would be created simulating the FireFox OS simulator.

In either case, the output will always be shown in an actual FireFox OS Simulator.

In case it is False, then display will not be outputted on a browser (but can still be seen in a Firefox simulator). Please refer to Logs data to understand what's happening in each step.

The second function applyDimension() applies Width/height depending on the current Device type (if the Mozilla Firefox OS simulator comes with a bigger screen/size, then this will adapt and init the screen automatically. However a default value is used to 360x460 for browser display. This could be changed by calling mozDev.maxWidth / mozDev.maxHeight.

The 3rd function testDraw() checks if the current viewport (depending on eleType such as "canvas") supports 2D drawing. The results would be outputted on console and also on viewport with debug information.

The 4th function initVideo() adds video capability to the viewport. It has parameters such as:

// videoID,videoClass,width,Height,ShowControls 
  1. VideoID: The ID of the video
  2. videoClass: The stylesheet to be applied to this video width/height: the dimension to be applied. it cannot be greater than the screen size or else default values will get applied.
  3. It tells whether to show video control or not (true or false)

The 5th function is initLive() which helps get stream from camera/mic and output to userSpace such as videoPlayer (canvas display is under development).


Please note that all references are added to variables mozDev. You can use the "." dot to access sub variables under it. All references and states are assigned to under mozDev. from userMEdia,canvas context. It contains isDeviceReady or ScreenReady which helps in determining the current state of browser or simulator. Please explore. If you have any queries, then please provide your valuable feedback as this is still under development. This set of API was working fine on Chrome/Mozilla Firefox/Firefox Simulator.

Event management work is under development. But you can still add your own events while accessing mozDev.{ .... }. Events can be attached to it. mozDev is just a collection of reference of all the elements added with their properties and capabilities.

Note: Please do define CSS classes as it is required to pass a CSS class for elements.

You can link the classes using <link> in a separate file. It could help control the visual attributes.

For inbuilt CSS controls is also under development (do provide your feedback on it).

This set of API enables users to set up HTML5 core exciting features by just calling few functions.

For any error, please report back. use the manifest.webapp to load this into the Mozilla Firefox OS simulator. All done, enjoy! Stay posted for updates as this is still under development and might contain bugs. Please report bugs to me in case you come across any.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Siddharth Chandra
India India

Hope you all are doing great.
i have worked and have hands on exprience various technologies.
But the one i love most are HTML5,AngularJS,Cordova,Bootstrap.
i have 10+ yrs of experience in building Enterprise level applications
based on emerging technologies.
Currently i am mostly dedicated towards nodejs and as a mean stack developer.
I have also worked on embedded software and graphics technologies.

My interest is in simple Human Machine Interface.

Please feel to drop me an email
please do let me know of your valuable suggestion for improving articles
and feedback.

You may also be interested in...


Comments and Discussions

-- There are no messages in this forum --
Permalink | Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.170308.1 | Last Updated 29 Nov 2013
Article Copyright 2013 by Siddharth Chandra
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid