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

From VideoLAN Wiki
Jump to navigation Jump to search
m (Layout, markup)
 
(15 intermediate revisions by 3 users not shown)
Line 1: Line 1:
= GWT =
+
{{howto|integrate with Google Web Toolkit}}
 +
{{Example code}}
 +
__FORCETOC__
 
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:
 
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)
 
* Static integration in the main HTML file (MyProject.html as generated by GWT/applicationCreator)
Line 7: Line 9:
 
== Static integration in MyProject.html ==
 
== Static integration in MyProject.html ==
 
Static integration is straightforward and based on methods described in two separate articles:
 
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
+
* Mozilla/Firefox plug-in: [[Documentation:Play HowTo/Advanced Use of VLC#Use the Mozilla plugin]]
* ActiceX Control: [[ActiveX/HTML]]  
+
* ActiveX 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):
 
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):
<pre><nowiki>
+
<syntaxhighlight lang="html4strict">
 
<OBJECT classid="clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921"  
 
<OBJECT classid="clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921"  
 
codebase="http://downloads.videolan.org/pub/videolan/vlc/latest/win32/axvlc.cab"  
 
codebase="http://downloads.videolan.org/pub/videolan/vlc/latest/win32/axvlc.cab"  
Line 30: Line 32:
 
</EMBED>
 
</EMBED>
 
</OBJECT>  
 
</OBJECT>  
</nowiki></pre>
+
</syntaxhighlight>
Internet Explorer (IE6) responds to the code in the <OBJECT> tag, while Mozilla/Firefox uses the settings inside the <EMBED> tag.
+
Internet Explorer (IE6) responds to the code in the {{Tag|OBJECT}} tag, while Mozilla/Firefox uses the settings inside the {{Tag|EMBED}} tag.
Replace parameters as appropriate, e.g. $mri with the [[Multimedia Resource Identifier]] of your incoming stream.
+
Replace parameters as appropriate, e.g. $mri with the [[Media resource locator|Multimedia Resource Identifier]] of your incoming stream.
  
 
== Embedding in dynamically generated HTML code ==
 
== 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.
 
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:
+
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. <code>Panel.add()</code> 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:
<pre><nowiki>
+
<syntaxhighlight lang="javascript">
 
{
 
{
 
{
 
{
Line 56: Line 58:
 
// 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.
 
// 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
 
// Solution found here: http://forum.videolan.org/viewtopic.php?f=16&t=33736&p=104306&hilit=innerHTML#p104306
vlcSetWidth(DOM.getElementById("vlc"), "320"); // "vlc" is the element ID as defined in streamerCode to identify the plugin.
+
// Bindings for different browsers explained here: http://www.permadi.com/tutorial/flashGetObject/
vlcSetHeight(DOM.getElementById("vlc"), "160");
+
vlcSetWidth("vlc", "320");
 +
vlcSetHeight("vlc", "160");
 
}
 
}
  
 
/**
 
/**
* set width of VLC plugin.
+
* set width of VLC plugin  
 
*  
 
*  
 
* @param width
 
* @param width
 
*/
 
*/
native static void vlcSetWidth(com.google.gwt.user.client.Element target, String width) /*-{
+
native static void vlcSetWidth(String targetId, String width) /*-{
target.style.width=width;
+
$doc[targetId].style.width=width;
 
}-*/;
 
}-*/;
 
+
 
/**
 
/**
* set height of VLC plugin.
+
* set height of VLC plugin
 
*  
 
*  
 
* @param height
 
* @param height
 
*/
 
*/
native static void vlcSetHeight(com.google.gwt.user.client.Element target, String height) /*-{
+
native static void vlcSetHeight(String targetId, String height) /*-{
target.style.height=height;
+
$doc[targetId].style.height=height;
 
}-*/;
 
}-*/;
  
 
}
 
}
</nowiki></pre>
+
</syntaxhighlight>
 +
 
 +
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:
 +
<syntaxhighlight lang="html5">
 +
<table><tr><td id="browserElementInHTMLCode">
  
Note that it might not be possible to overlay controls on top of streaming video, as the VLC plugin might directly write to the video engine, depending on the target platform. This is the case for Windows XP, for example.
+
</td></tr></table>
 +
</syntaxhighlight>
  
 
== User interaction ==
 
== 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). 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:
+
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.
<pre><nowiki>
+
<syntaxhighlight lang="javascript">
<table><tr><td id="browserElementInHTMLCode">
+
/**
 +
* stop VLC plugin
 +
*/
 +
native static void vlcStop(String targetId) /*-{
 +
$doc[targetId].playlist.stop();
 +
}-*/;
  
</td></tr></table>
+
/**
</nowiki></pre>
+
* play VLC plugin
 +
*/
 +
native static void vlcPlay(String targetId) /*-{
 +
$doc[targetId].playlist.play();
 +
}-*/;
 +
</syntaxhighlight>

Latest revision as of 08:04, 9 June 2019

This page describes how to integrate with Google Web Toolkit. Other "how to" pages
This page contains example code.

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:

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();
	 }-*/;