Introduction

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>
<html>
<head>
<link rel="stylesheet" href="style.css" />
<script type="text/javascript" src="script.js" >
</script>
</head>
<body>
<script>
var t = new initApp("div","siddDiv",
"siddClass",true);  //ElementType,eleID,eleClass, 
		//true/false  if true then output on browser
    t.applyDimension();
    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
</script>
</body>
</html>

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:

What kind of element to use
Element ID
Style classes to be applied
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 3^rd 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 4^th function initVideo() adds video capability to the viewport. It has parameters such as:

// videoID,videoClass,width,Height,ShowControls

VideoID: The ID of the video
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.
It tells whether to show video control or not (true or false)

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

POINTS

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.

Firefox OS Browser Simulator