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

From VideoLAN Wiki
Jump to navigation Jump to search
m (remove sortkey, demote headings, silence {{howto}})
m (Layout, markup)
 
(5 intermediate revisions by the same user not shown)
Line 1: Line 1:
{{howto}}
+
{{howto|integrate with Google Web Toolkit}}
== GWT ==
+
{{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 6: Line 7:
 
(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.)
 
(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 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]]
 
* ActiveX 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 31: 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 81: Line 82:
  
 
}
 
}
</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:
 
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:
<pre><nowiki>
+
<syntaxhighlight lang="html5">
 
<table><tr><td id="browserElementInHTMLCode">
 
<table><tr><td id="browserElementInHTMLCode">
  
 
</td></tr></table>
 
</td></tr></table>
</nowiki></pre>
+
</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). Below a couple of examples.
 
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">
 
/**
 
/**
 
* stop VLC plugin
 
* stop VLC plugin
Line 106: Line 107:
 
$doc[targetId].playlist.play();
 
$doc[targetId].playlist.play();
 
}-*/;
 
}-*/;
</nowiki></pre>
+
</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();
	 }-*/;