VLC HowTo/Integrate with Google Web Toolkit

GWT

VLC can be integrated in Google Web Toolkit (GWT) web applications. The easiest way is embedding the VLC browser plugin in your web application. There are two levels of integration:

• Static integration in the main HTML file (MyProject.html)
• 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 is based on methods described in 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 code based on the following snipped in your main HTML file:

<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 in 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

Web applications which dynamically generate HTML code, e.g. through the GWT class HTML, can integrate the VLC plugin within a GWT Panel. The HTML code itself is based on the static code above, while the integration in the dynamic web application is accomplished through GWT API calls. For some reason, the Panel method add() (GWT version 1.4.60) does not correctly handle the VLC plugin. It is necessary to use the DOM method appendChild(Element parent, Element child), as follows:

DOM.appendChild(targetPanel.getElement(), htmlCode.getElement());

Unfortunately there is no known method for the VLC ActiveX control to show in Internet Explorer (IE 6). Audio will play, but the streaming video does not show in the GWT Panel.

Note also that it might not be possible to superimpose controls over streaming video, as the VLC plugin might directly write to the video adapter, depending on the target platform. This is the case for Windows XP, for example.

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 plugin can be called through Javascript as described in the ActiveX/HTML article. GWT/Java wrappers for these calls are not available (yet). It does not make a difference whether the plugin 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="MyID">
<OBJECT 
      ... 
</OBJECT>
</td></tr></table>