VLC HowTo/Integrate with Google Web Toolkit

From VideoLAN Wiki
Jump to navigation Jump to search

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:

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

It is possible to integrate the VLC plugin in GWT web applications. It's not pretty though.

The integration of the VLC plug-in in dynamically generated HTML code is through DOM calls and some JavaScript. For some reason(s), GWT API calls do not work for integrating the VLC plug-in. Below a snipplet which should contain all the necessary DOM calls and JavaScript code: 

{
	{

		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
		//	Solution found here: http://forum.videolan.org/viewtopic.php?f=16&t=33736&p=104306&hilit=innerHTML#p104306
		vlcSetWidth("320");
		vlcSetHeight("160");
	}

	/**
	 * set width of VLC ActiveX control
	 * 
	 * @param width
	 */
	native static void vlcSetWidth(String width) /*-{
		$doc.all.vlc.style.width=width;
	}-*/;

	/**
	 * set height of VLC ActiveX control
	 * 
	 * @param height
	 */
	native static void vlcSetHeight(String height) /*-{
	$doc.all.vlc.style.height=height;
}-*/;

}

Note 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>
Retrieved from "https://wiki.videolan.org/index.php?title=VLC_HowTo/Integrate_with_Google_Web_Toolkit&oldid=10172"