VLC HowTo/Integrate with Google Web Toolkit

This page describes how to integrate VLC with Google Web Toolkit (GWT).

Other "how to" pages

GWT

VLC can be integrated in Google Web Toolkit (GWT) web applications. The easiest way is to embed the VLC browser plugin in your web application. This also ensures that no question arises whether your web application is derivative work or not, as a clean separation between the web application and VLC exists. Alternatively, a build of VLC can be integrated in a web app, using applicable bindings. This article discusses integration based on the VLC plugin. There are two levels of integration:

• Static integration in the main HTML file (MyProject.html as generated by GWT/applicationCreator)
• Dynamic integration in HTML code, which is generated at web application runtime

(In any case, remember that VLC treats the browser plugin for Firefox/Mozilla only as an installation option. You might have to go back and install this option and also point out in your documentation that this option needs to be installed if users run your web application with Mozilla/Firefox.)

Static integration in MyProject.html

Static integration is straightforward and based on methods described in two separate articles:

• Mozilla/Firefox plug-in: http://wiki.videolan.org/Documentation:Play_HowTo/Advanced_Use_of_VLC#Use_the_mozilla_plugin
• ActiceX Control: ActiveX/HTML

Following the description in the ActiveX/HTML article, you can include some code based on the following snippet in your main HTML file (MyProject.html):

<OBJECT classid="clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921" 
	codebase="http://downloads.videolan.org/pub/videolan/vlc/latest/win32/axvlc.cab" 
	width="320" 
	height="240" 
	id="vlc" events="True"> 
	<param name="Src" value="$mri" /> 
	<param name="ShowDisplay" value="True" /> 
	<param name="AutoLoop" value="False" /> 
	<param name="AutoPlay" value="True" /> 
	<EMBED pluginspage="http://www.videolan.org" 
		type="application/x-vlc-plugin" progid="VideoLAN.VLCPlugin.2" 
		width="320" 
		height="240" 
		autoplay="yes" 
		loop="no" 
		target="$mri" 
		name="vlc"> 
	</EMBED>
</OBJECT> 

Internet Explorer (IE6) responds to the code in the <OBJECT> tag, while Mozilla/Firefox uses the settings inside the <EMBED> tag. Replace parameters as appropriate, e.g. $mri with the Multimedia Resource Identifier of your incoming stream.

Embedding in dynamically generated HTML code

It is possible to integrate the VLC plugin in dynamically generated HTML code, based on the GWT classes HTML, HTMLPanel and HTMLTable.

The integration of the VLC plugin in dynamically generated HTML code is based on DOM calls and some JavaScript as opposed to GWT API calls. For some reason(s), the GWT API calls do not support the integration of the VLC plugin, although other plugin's might work just fine. Panel.add() for example is a key method which does not hook the plugin into the DOM as expected by the VLC plugin. This is not necessarily a fault of the VLC plugin, but rather browser-specific differences in Javascript implementation, and how GWT works. Below a snippet which should contain all the necessary DOM calls and JavaScript code which worked for me for Mozilla/Firefox and IE6:

{
	{

		streamerCode = ".............."; // Use example code above as a starting point

		// IE6: Wrap VLC plugin in an HTML block element. Needed to work around known "quirk" in IE6's implementation of innerHTML
		//	Does not hurt Mozilla/Firefox
		//	http://support.microsoft.com/kb/276228
		com.google.gwt.user.client.Element newdiv = DOM.createElement("div");
		DOM.setInnerHTML(newdiv, streamerCode);

		// Append div block on DOM level. Needed for all browsers; GWT Panel.add() does not work for VLC
		//	Mozilla Firefox is OK with appendChild() to any GWT Panel; IE6 works only if appended to RootPanel
		DOM.appendChild(RootPanel.get("browserElementInHTMLCode").getElement(), newdiv);
		
		// Set width and height in VLC's style. Needed and has effect for IE6. Alternatively, this could probably be accomplised through setting the style of the VLC plugin as well.
		//	Solution found here: http://forum.videolan.org/viewtopic.php?f=16&t=33736&p=104306&hilit=innerHTML#p104306
		//	Bindings for different browsers explained here: http://www.permadi.com/tutorial/flashGetObject/ 
		vlcSetWidth("vlc", "320");
		vlcSetHeight("vlc", "160");
	}

	/**
	 * set width of VLC plugin 
	 * 
	 * @param width
	 */
	native static void vlcSetWidth(String targetId, String width) /*-{
		$doc[targetId].style.width=width;
	}-*/;
	
	/**
	 * set height of VLC plugin
	 * 
	 * @param height
	 */
	native static void vlcSetHeight(String targetId, String height) /*-{
		$doc[targetId].style.height=height;
	}-*/;

}		

It does not make a difference whether the VLC lugin is integrated on the static or dynamic level; a handle to the VLC plugin is obtained through the RootPanel method RootPanel get(java.lang.String id) which returns the browser element that embeds the VLC plugin. Code must be added to the HTML code to create a browser element with an ID which can be captured by the RootPanel mathod get(java.lang.String id), e.g. as follows:

<table><tr><td id="browserElementInHTMLCode">

</td></tr></table>

User interaction

The VLC plugin has a Javascript API which allows the implementation of user interactions like Play or Pause on the web application level. The plug-in can be called through Javascript as described in the ActiveX/HTML article. GWT/Java wrappers for these calls are not available (yet). Below a couple of examples.

	/**
	 * stop VLC plugin
	 */
	native static void vlcStop(String targetId) /*-{
		$doc[targetId].playlist.stop();
	}-*/;

	/**
	 * play VLC plugin
	 */
	native static void vlcPlay(String targetId) /*-{
		$doc[targetId].playlist.play();
	 }-*/;