How to embed the nanoStream web plugin into a web page

  • -

How to embed the nanoStream web plugin into a web page

Embedding the nanoStream web plugin into a web page is as simple as using other plugins such as the Flash player. nanoStream is a plugin object which can be controlled by Javascript. There are helper scripts available with a high level API and sample user interface commands.

Preparing a web page

In your HTML code, add a div tag at the location where you would like to see your live camera. Name it “liveEncoder”.

<html>

<div id = "liveEncoder">liveCam here</div>

The liveEncoder element will be replaced by Javascript with the nanoStream plugin.

Embedding with jQuery

Generally you should access plugins only when the web page is fully loaded. You can ensure this by using the jQuery.ready function:


jQuery(document).ready(function($) {

// embed the plugin at div "liveEncoder" and name it "nanovid1"
liveembed('liveEncoder', { id: 'nanovid1' });

// get access to the plugin and make it a Javascript object "live"
var live = $('#nanovid1')[0];

};

 

Run the encoder broadcast


// init the encoder
live.InitEncoder();

//stream to an RTMP publishing point and stream name
live.DestinationURL = "rtmp://ws2.nanocosmos.de:80/live+myStream";

//run the encoder broadcast
live.StartBroadcast();

 

See the example web page at our demo site for a full example including user interface elements.