Difference between revisions of "VLC HowTo/Integrate with Google Web Toolkit"

From VideoLAN Wiki
Jump to navigation Jump to search
(Google Web Toolkit (GWT))
 
Line 36: Line 36:
  
 
== Embedding in dynamically generated HTML code ==
 
== 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:
+
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:
 
<pre><nowiki>
 
<pre><nowiki>
DOM.appendChild(targetPanel.getElement(), htmlCode.getElement());
+
{
 +
{
 +
 
 +
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;
 +
}-*/;
 +
 
 +
}
 
</nowiki></pre>
 
</nowiki></pre>
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.
+
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 ==
 
== User interaction ==

Revision as of 00:29, 7 November 2007

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>