Developing a mobile portlet to stream video content

This article describes the process in streaming windows media video based content to mobile devices through mobile portlets. It uses Windows Media Services 9 series which is an end-to-end platform for streaming live or on-demand video or audio content.

Mobile Portal Accelerator (MPA), based on device-independency, enables providers to create Web-based applications to a limitless range of mobile devices. It helps extend the capabilities of WebSphere Portal to mobile devices through device-independent Web authoring for virtually any mobile device. It uses a device independent markup language called XML-based Device Independent Markup Extensions (XDIME). Using Windows Media Services users can broadcast live or pre recorded video to mobile devices.

This article requires the following development environment:

• WebSphere Portal 6.1.0.1
  
• Mobile Portal Toolkit 6.1
  
• Rational Application Developer 7.1.0.2
  

For a media streaming server following test environment would be required:

• Windows Server 2003
  
• Windows Media Services 9 Series
  

Let us start by creating a portlet project. We'll use mobile portal toolkit wizard to create the mobile XDIME portlet:

1. Select File => New => Portlet Project.
2. Specify the following attributes in the New Portlet Project wizard:

• Project Name: StreamTest
  
• Portlet API: JSR 168 Portlet
  
• Portlet Type: Mobile Portlet
  

An image component can refer to a set of image files, or variants that individually fit the profiles of several different devices. Here it is used to display a thumbnail preview of the video clip.

1. In the StreamTest project, right-click the mcs-policies folder
2. Select New => Other to launch the wizard
3. Select MCS => Image Component
4. Click Next

5. Specify a name for the component such as "thumbnail"
6. Click Next

7. Browse to the location of the device repository file
Ex: \MobilePortalToolkit6.0.1\DeviceRepository\devices.mdpr
8. Click Next
9. Enter the location of the image root directory, here a folder called "images" is created under "WebContent". This directory will contain an image preview of the video
10. Click Next

11. Set the variant selection criteria to default
12. Click Finish.

13. In the editor for the component created, select the variant and set the URL for the image content

Targeted layout variants will be used to render video content for windows mobile phones via the object player control. For non-windows mobiles that support windows media video the content is viewed by launching the URL to the stream.

Additionally, a theme variant can be created to set the style of the page. In this portlet the theme named
“sample_theme.mthm” sets the font color to white.

The content now needs to be referenced in the XDIME view.

1. Open jsp => xdime => StreamTestPortletView.jsp in the source editor
2. Modify the pane tag to reference the new layout. Update the code as shown:

<%@ page session="false" contentType="x-application/vnd.xdime+xml;

charset=UTF-8" pageEncoding="ISO-8859-1" %>

<canvas layoutName="/sample_layout.mlyt" theme="/sample_theme.mthm"

type="portlet">

<pane name="header"><strong class="white">

<br/>

Clip: Race Car <br/>

Duration: 5 mins <br/></strong>

<br/>

</pane>

<pane name="player">

<select>

<nativemarkup targetLocation="pane" pane="player">

<object id="video" width="320" height="240" classid="CLSID:6BF52A52-

394A-11d3-B153-00C04F79FAA6"

type="application/x-oleobject">

<param NAME="URL" VALUE="http://wpmls11.in.ibm.com/racecar"/>

<param NAME="AutoStart" VALUE="false"/>

<param NAME="ShowControls" VALUE="true"/>

<param name="ShowStatusBar" value="true"/>

</object>

</nativemarkup>

</select>

</pane>

<pane name="footer">

<strong class="white">

<br/>

Powered by: Windows Media<br/>

Type: WMV <br/></strong>

<br/>

</pane>

<pane name="thumbnail">

<a href="http://wpmls11.in.ibm.com/racecar" >

<img src="/thumbnail.mimg" style="display: block; margin-left: auto;

margin-right: auto; border-style: none;"/></a>

</pane>

</canvas>

1. In the console tree for windows media services, expand the server to which you want to add the publishing point, and
then click Publishing Points
2. On the Action menu, click Add Publishing Point (Wizard)
3. The Add Publishing Point Wizard appears; follow the instructions in the wizard to add a publishing point
4. The name of a publishing point is used in the URL to connect to the content, specify the name as shown below:

5. As the content streamed is an on demand video, specify the content and publishing point type as below:

6. Identify the location of the archived file and then click Finish
7. To enable HTTP streaming, set the WMS HTTP Server Control Protocol. Click the server for which you want to enable
HTTP streaming
* In the details pane, click the Properties tab
* In Category, click Control protocol
* In Plug-in, click WMS HTTP Server Control Protocol
* Click the Enable button

For windows mobile devices the video can be viewed through the player that is embedded in the page. The video is launched externally for other devices by clicking the image preview of the stream.