Click here to Skip to main content
12,953,937 members (48,085 online)
Click here to Skip to main content
Add your own
alternative version

Tagged as


Posted 3 Dec 2013

Firefox OS Browser Simulator

, 3 Dec 2013 CPOL
Rate this:
Please Sign up or sign in to vote.
FireFox OS Browser Simulator

Hello friends. Lately we have seen a lot of vendors coming out with new OS, but what is really going to change is HTML5. Mozilla has done a groundbreaking work for creating an HTML5-based OS where any can submit app based on HTML5. HTML5 is something new which is changing the internet landscape and in time it will challenge Android and Apple operating systems since HTML5 is not clumsy and makes app development as easy as a cool breeze.

So what I have done is a written custom API specifically for Upcoming Mozilla Firefox OS. It works great in the Firefox Simulator and also as a standalone browser. You can couple it up if you want to test on a 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 controls all aspect of the application. This API helps users create Viewport/Audio/Video Support, Video Playback, Camera/Mic Control with just a call to few function and modular control over all aspect of the elements created with through error checking. (Kindly use logs to check whats 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
    t.initVideo("siddVideo","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 its loop self explanatory.

But let's take a loop 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 four parameters such as :

  1. What kind of element to use
  2. Element ID
  3. Style classes to be applied
  4. This parameters 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 the case it is False then the display will not be output on a browser (but can still be seen in a Firefox Simulator). Please refer to Logs data to understand whats happening in each steps.

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 make the 360x460 browser display. This could be changed by calling mozDev.maxWidth / mozDev.maxHeight.

The third function, testDraw(), checks if the current viewport (depending on eleType such as "canvas") supports 2D drawing. The results would be output on console and also on viewport with debug info.

The fourth 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 the video control whether or not to show (true or false)

The fifth function is initLive() which helps get a stream from the camera/mic and output to userSpace such as videoPlayer (canvas display is under development);


Please note that all references are added to the 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 determining the current state of the 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 still 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 references 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 in-built CSS controls is also under development (do provide your feedback on it).

This Sets OF API enables users to set up html5 core exciting features by just calling few function.

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 any you find.


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.170525.1 | Last Updated 3 Dec 2013
Article Copyright 2013 by Siddharth Chandra
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid