Skip navigation

Today We’ll implement a javascript callback interface in C++.

We’re targetting a browser plugin (Which already has a “one way” js interface).
The idea : we want the plugin to trigger javascript methods, and ultimately we want to be able to link any js code to our plugin events loop.

Note:This article requires some c++/Win32 api/netscape api skills as well as a tiny clue of what is discussed here…

When coding cross platform software , you’ll often have to write some parts of your plugin twice. (sometimes more than twice)
In this case, MS activex com objects aren’t handled the way nsi controls are, so we need to split the code.

our method(s) should have an input parameter, “name” that we will use to store our javascript function name we want to trigger.

so something like : return Our_JS_CallBack(const char * name)

when called from the plugin, this method will send client’s browser a js event that will spawn our function which name is has been inputed at call.

Please be carefull here : ClientSite and ClientInstance are declared and initialised out of this 2 functions.
both of these pointers should have a correct value before using ::Our_JS_CallBack

MicroSoft CODE: m_spClientSite is a pointer to oleclientsite of your plugin ( type : ComPtr )
NetScape CODE: ClientInstance is the netscape NPP object pointer for your plugin (type : NPP);

Microsoft style:

HRESULT Plugin::Our_JS_CallBack(const char * name)
IOleClientSite *m_spClientSite = (IOleClientSite *)GetCClientSite();

IServiceProvider* isp;
IWebBrowser2* ppBrowser;

HRESULT hr = m_spClientSite->QueryInterface(IID_IServiceProvider, reinterpret_cast(&isp));
if(FAILED(hr)) return FALSE;

hr = isp->QueryService(IID_IWebBrowserApp, IID_IWebBrowser2, reinterpret_cast(&ppBrowser));
if(NULL==ppBrowser) return S_FALSE;

IDispatch *m_ppDispDoc;
hr = ppBrowser->get_Document(&m_ppDispDoc);
if(FAILED(hr)) return S_FALSE;

IHTMLDocument2 *ppDocument2;
hr = m_ppDispDoc->QueryInterface(IID_IHTMLDocument2 ,reinterpret_cast(&ppDocument2));
if(FAILED(hr)) return S_FALSE;

CComPtr scriptEngine;

DISPID callid;
OLECHAR FAR* szCallMember = T2OLE(name);
HRESULT hr3 = scriptEngine->GetIDsOfNames(IID_NULL, &szCallMember, 1, LOCALE_USER_DEFAULT, &callid);
DISPPARAMS callParameters = { 0 };
int nargs = 0;
callParameters.cArgs = nargs + 1;

CComPtr win;

VARIANT *vargs= new VARIANT[nargs + 1];
VARIANT result;

vargs[nargs] = CComVariant(win);
long index;
callParameters.rgvarg = vargs;
EXCEPINFO exception;

HRESULT hr4 = scriptEngine->Invoke(callid, IID_NULL, LOCALE_USER_DEFAULT, DISPATCH_METHOD, &callParameters, &result, &exception, 0);

return S_OK;

NetScape Style:

NPBool NSPlugin::Our_JS_CallBack(const char *name)
NPObject *window;
NPN_GetValue(ClientInstance, NPNVWindowNPObject, &window);
NPIdentifier methodName;
methodName= NPN_GetStringIdentifier(name);
uint32_t argCount=0;
NPVariant result;
NPN_Invoke( NsInstance,
return TRUE;

You ‘ll have to declare both methods in your plugin class and be carefull not to call Our_JS_CallBack in a loop !

ie (c++ code): instance->Our_JS_CallBack(“JSEvent”);

you can then go to your HTML code after plugin’s instanciation, and write down the body of your callback

function JSEvent()
alert(“well done!”)

when the plugin executes instance->Our_JS_CallBack(“JSEvent”), a nice alert box should appear on client side, validating the javascript callback.

The hard part was understanding the concept and digging msdn 🙂


A crucial question for all frontend developers is building both a clean and strong user interface.

This article will be usefull if you want to submit a new StreamPlug skin for a later integration.

A StreamPlug skin is made of several images that will be used by the player to render an interactive player controler. A C++ Class is then used to handle the skin’s controls positions/events.
We’ll first concern on the graphics involved, then we will see how they are used in the code

Final result:

Note:Streamplug player is required, you can download it here

We will be happy to see user submitted skins added to streamplug’s next releases, please send us a message !

STEP 1: Create a background set of images:

This part of the skin is divided in three parts as follow:

– Left part

– Middle 1 pixel part

– Right part

The 1 pixel part will be copied several times by the player when necessary to follow the skin ‘s width,
So that you can keep control’s and border’s integrity.
In this skin, both seek bar and volume bar are resized along with the skin, they should appear in the 1 pixel part.
Note that the background set is used to save static buttons.
Static Controls never need to be removed or hidden, so keeping them here is safe.

STEP 2 : Create a controls set of images:

Keep in mind these controls’ colors and sizes should respect the overall design

– Play button

– Pause button

An empty square must have been reserved in the background part to accept these 2 pictures

– Buffer image

This picture will be blitted on the background , accordingly to current streaming buffering state

– Seek button

This will be displayed in the seek bar and follow current media’s play position.

– Volume button

As for Seek button, this is a dragable control. It will overlay the volume bar.

– Volume label

One sample optionnal picture used in this skin to clarify the volume control’s position.

– Loop mode button

– Record button

STEP 4: Set absolute controls positions:

At this point we have all the graphics in hand but the player also needs to know the position of each element so that our flat bitmap becomes an interactive skin.
(For example, the pause button needs to be displayed at a very x,y coordinates on the skin, when the player is playing something.)

Here are some raw coordinates values for our black skin:

Syntax:Element={x, y, width, height}//comments
Back = {0 ,0 ,194 ,32} //size of the background’s left part
Play = {6 ,18 ,11 ,11} //position of the play-pause control
Stop = {21 ,17 ,10 ,10} //position of the stop control
Prev = {37 ,17 ,8 ,10} //position of the previous control
Next = {51 ,17 ,8 ,10} //position of the next control
Rec = {65,17 ,11 ,11} //position of the record
FullScren = {82 ,17 ,10 ,10} //position of the fullscreen control
Open = {100,16 ,11 ,11} //position of the open control
Buffer = {203,21 ,12 ,6} //position of the buffer control
PosBut = {5 ,5 ,19 ,8} //position of the seek cursor control (initial position)
VolBut = {128,19 ,11 ,8} //position of the volume cursor control (initial position)
LoopBut = {111,18 ,15 ,10} //position of the loop control
Vol = {130,14 ,47 ,6} //position of the volume label

STEP 5: Code and Release

This last and final part is up to us, that means you willl need to send us a mail if you want the dev team to take care of your request.

If we like your work, here’s a quick view of what’s done next :

The .bmp images files are converted to .h files with a batch script using bin2hc, then the new skin’s c++ class is added to the player’s core, including the new .h bitmaps.

This class is instanciated as the player launches, so changes have to be done here, as well as the skin selection parts of the code.

After a clean rebuild, the player can be launched and the new player can be used, as shown on top of this page for the black skin. 🙂

StreamPlug is an advanced media player for the web : It decodes MPEG4 video streams such as h264, and vorbis audio from a remote file using a simple http server.
This JQuery plugin will help you add a streamplug player on your website/blog, a single line is sufficient to display the player to the right size, and play the media on the fly, without any buffering time !

Streamplug installer:click here
Demo:click here
Download source: click here
Plugin Homepage:click here

Here is a demonstration on how to use it in your web contents:


– Jquery
– JStreamPlug plugin
– StreamPlug


<script type=’text/javascript’ src=’jquery.min.js’></script>
<script type=’text/javascript’ src=’jquery.JStreamPlug.js’></script>


<div class=”player”></div>



Syntax : $(element).StreamPlug(url,width,height,skin_name);

Here are described some key functionalities you can run after calling the plugin:

//Get Attributes

//Get Plugin Window Width

//Get Plugin Window Height

//Get Plugin Skin Width

//Get Plugin Skin Height

//Get Plugin Version Number

//Get current volume

//Get current play position in kb

//Get current play position in ms

//Get current received stream kb amount

//Get current file lenght in kb

//Get Current File Url

//Test if StreamPlug is Playing


//Add an url in the playlist

//Add pls to the Playlist

//Add An Url With Name

//Add Crypted Playlist

//Add Subtitle File/Url

//Add Saveable url to playlist

//Add .plc to the Playlist

//Empty the Playlist

//Load specified skin

//Move Playlist Window

//Pause Current Stream

//Play An Url

//Play Item # in Playlist

//Play Current Stream

//Play and Save Url

//Play Prev Item

//Play Next Item

//Start After n Kb

//Stop Current Stream

//Play Item From db

//Play a cgi sec file

//Play a cgi file

//Play Multiple (audio/video separated)

//Set Video Size

//Set Original Size

//Set Loop mode

//Set BackGround Color

//Set Video Ratio

//Set Volume

//Set Play-on-Start Attribute

//Set Full Screen

//Set if user Can Resize

//Set if user Can Download

//Set Border Size

//Set Border Color

//Set Active Srt (-1 none)

//Reset Srt

//Set playmode

//Set Video Url

//Set Video Url Ms

//Set Video Url Ms +ID

//Set Event Grid Pos

//Set Event Grid Size

//Set Event Js

//Set pos kb

//Set pos ms

//Set color of A/V buffers


//Show Pluggle Version

//Show the playlist window

//Show Option Window

//Show Server Version