Now showing: Your own online MPEG-4 cinema

Explore the ready-to-use Java components in the IBM Toolkit for MPEG-4 SDK

Sing Li (westmakaha@yahoo.com), Author, Wrox Press

Sing Li is co-author of Professional Apache Tomcat 5, Pro JSP, Third Edition, Early Adopter JXTA, Professional Jini, and numerous other books with Wrox Press. He is a regular contributor to technical magazines and an active evangelist of the P2P evolution. Sing is a consultant and freelance writer and can be reached at westmakaha@yahoo.com.

Summary: Think it's impossible to deliver an interactive multimedia experience over a network to a large audience? Think again! Widespread broadband connectivity and the availability of powerful PCs make delivery of video and multimedia content over a network a reality. Add in the IBM alphaWorks Toolkit for MPEG-4 and you can create your own Web cinema today. Follow along with popular author and Java developer Sing Li as he shows you how to code a custom Java MPEG-4 player using the SDK libraries, how to use an applet to create a download-on-demand MPEG-4 player, and how to prepare the content for delivery.

Tag this!

Date: 02 Nov 2004
Level: Introductory
Activity: 3522 views

Delivery of an interactive multimedia experience over a network to a large audience is no longer a dream. Early attempts were plagued by sky-high communications costs and the inability of most PCs to decode highly compressed video in real time. Now, the wide availability of broadband Internet, coupled with the ever-increasing power of PC microprocessors, has eliminated all hurdles.

MPEG-4 is a set of international standards for the storage, authoring, encoding, and delivery of interactive multimedia content over a network (see the sidebar, More about MPEG-4). Until recently, accessibility to the MPEG-4 core technology has been highly restricted. Most MPEG-4 experimenters have been compression-algorithm researchers, consumer-electronics design engineers, and developers of proprietary software.

The IBM Toolkit for MPEG-4 and its associated software development kit (SDK), available from IBM alphaWorks, give access to MPEG-4 technology to anyone with a PC supporting the Java 2 Platform. The toolkit provides a pragmatic set of reusable Java software components and tools for creating MPEG-4 players and working with MPEG-4 content. You can put this production-quality set of tools to work immediately.

This article takes you on a bullet-train tour of what can you can accomplish with the SDK and toolkit. First, you'll code a custom Java MPEG-4 player using the SDK libraries. Then you'll use an applet to create a download-on-demand MPEG-4 player. Finally, you'll learn about the different ways of delivering MPEG-4 content and about the tools in the toolkit that can help you prepare the content for delivery.

Creating a customized MPEG-4 player

Creating a customized MPEG-4 movie player using the MPEG-4 Toolkit SDK is straightforward, requiring very little additional Java coding. Figure 1 shows the "developerWorks Cinema," a customized MPEG-4 player:

More about MPEG-4

The Moving Picture Experts Group (MPEG) is a working group within the International Organization for Standardization (ISO). This group created the MPEG-1 specifications, resulting in the popular video CD (VCD) format, and MPEG-2, resulting in the now popular digital versatile disc (DVD) format and the MP3 audio format. The MPEG-4 international standard addresses the creation, authoring, encoding, and delivery of interactive multimedia content over a network or on a storage medium.

New devices from major consumer-electronics manufacturers, including many DVD players, support MPEG-4 playback. Digital camera and digital-video (DV) camcorders often feature MPEG-4 movie capture capabilities. A new generation of MPEG-4 based, combination digital camera/camcorder devices is about to make its appearance on the market. These new devices are totally solid state and fit in the palm of your hand.

Figure 1. A customized MPEG-4 player
A customized developerWorks MPEG-4 player

You can try out this player by running the player.bat file in the code distribution (see the Download section). You'll also find a surf.mp4 MPEG-4 video file, so you can start playing movies right away. Remember to copy the required IBMMpeg4SDKL1 JAR files into the lib directory before starting the player (see the sidebar IBM Toolkit for MPEG-4 SDK downloads for information on downloading the toolkit.)

IBM Toolkit for MPEG-4 downloads

A myriad of downloadable binaries are available at the IBM Toolkit for MPEG-4 download site (see Resources). For the code in this article, you need to download only the IBMToolkitForMpeg4L1SDKxxxx.zip and IBMAppletForMpeg4xxxx.zip files. (The xxxx represents the file's release date.) However, you're also likely to need the tools from IBMToolkitForMpeg4xxxx.zip to prepare your own MPEG-4 content. The code in this article is based on the 1.2.3 version of the toolkit. See the README.TXT file in the code distribution on where to place library JAR files from the downloads (see the Download section).

In Figure 1, notice the title of the movie player's window, as well as the custom logo above the cinema screen. You supply these titles to the player through a properties file called player.prop, shown in Listing 1:

Listing 1. Customizing the MPEG-4 Player using player.prop

movie=surf.mp4
ttitle=developerWorks Cinema
htitle=<html><font size=+1 color=white>developer</font><font size=+2
   color=white>Works</font><font size=+1 color=yellow> Cinema</font></html>
width=320
height=340

In Listing 1, the htitle property is an HTML string that is passed into a Java Swing JLabel component. The JLabel can render the HTML directly, resulting in the "developerWorks Cinema" logo in Figure 1.

You can completely reconfigure this player, without recompiling the player's source code, by changing the properties in the player.prop file. Table 1 describes the properties:

Table 1. Properties in player.prop

Property	Description
`movie`	File location or URL of the MPEG-4 movie to play
`ttitle`	Text title to be displayed at the title bar of the player's window
`htitle`	HTML-based title to be displayed above the cinema screen
`width`, `height`	Width and height of the player window

The source code consists of a class called com.ibm.dw.mpeg4.MoviePlayer, shown in Listing 2:

Listing 2. Source code of the customizable MoviePlayer

package com.ibm.dw.mpeg4;

import java.awt.*;
import java.awt.event.*;
import javax.swing.*;
import java.util.*;
import java.io.*;
import player.*;


public class MoviePlayer extends JFrame {
    private static final String PROP_FILE_NAME = "player.prop";
    private static final String MOVIE_PROP_NAME= "movie";
    private static final String TEXTTITLE_PROP_NAME = "ttitle";
    private static final String HTMLTITLE_PROP_NAME = "htitle";
    private static final String WIDTH_PROP_NAME = "width";
    private static final String HEIGHT_PROP_NAME = "height";
    private JPanel logoPanel;
    private PlayerControl Player;
    
    public MoviePlayer(String txtName, String htmlName, int Width, int Height) {
        Player = PlayerFactory.createMPEG4Player();
        logoPanel = new JPanel();
        
        addWindowListener(new WindowAdapter() {
            public void windowClosing(WindowEvent e) {exit();}
        });
        
        getContentPane().setLayout(new BorderLayout());
        
        Player.setAutoSize(false);
        logoPanel.setBackground(Color.BLACK);
        logoPanel.add( new JLabel( htmlName));
        
        getContentPane().add( BorderLayout.NORTH, logoPanel);
        setTitle(txtName);
        setSize(Width , Height);
        show();
    }
    
    
    
    public static void main(String[] args) throws Exception {
        Properties prop = new Properties();
        FileInputStream fis =
        new FileInputStream(PROP_FILE_NAME);
        prop.load(fis);
        String movieName =
        prop.getProperty(MOVIE_PROP_NAME);
        
        MoviePlayer app = new MoviePlayer(
        prop.getProperty(TEXTTITLE_PROP_NAME), 
        prop.getProperty(HTMLTITLE_PROP_NAME),
        getIntProp(prop, WIDTH_PROP_NAME, 300),
        getIntProp(prop, HEIGHT_PROP_NAME, 200)
        );
        
        if (movieName != null)
            app.playMovie(movieName);
    }
    
    
    private  void playMovie(String loc)  throws Exception {
        getContentPane().add(BorderLayout.CENTER, Player.getRendererComponent());
        validate();
        Player.open(loc);
        Player.start();
    }
    
    
    private void exit() {
        Player.stopUrl();
        remove(Player.getRendererComponent());
        dispose();
        System.exit(0);
    }
    
    private static int getIntProp(Properties prop, String name, int defaultVal) {
        String tmpValue = prop.getProperty( name);
        int retval = defaultVal;
        if (tmpValue != null) {
            try {
                retval = Integer.parseInt(tmpValue);
            }
            catch (Exception ex) {
             /* fall through with retval=0 */
            }
        }
        return retval;
    }
    
}

In Listing 2, MoviePlayer is constructed out of Swing components. The com.ibm.dw.mpeg4.MoviePlayer is a JFrame. Figure 2 shows the layout of components in MoviePlayer:

Figure 2. MoviePlayer's Swing components layout
Swing components layout of MoviePlayer

Two SDK library classes/interfaces are required:

Player.PlayerFactory obtains an instance of an MPEG4 player.
Player.PlayerControl is the interface you use to access the player instance.

Figure 3 illustrates how the code in Listing 2 creates and composes the custom MPEG-4 player:

Figure 3. Creating the custom MPEG-4 Player

You can see in Figure 3 that the library's MPEG-4 player instance is accessed exclusively through the PlayerControl interface. To obtain the player instance, you must call a static factory method of the PlayerFactory class in the first line of MoviePlayer's constructor:

Player = PlayerFactory.createMPEG4Player();

The PlayerControl interface has many methods to control the player's behaviors. It is also the interface from which you obtain a GUI component for displaying the movie. Table 2 shows some of the most frequently used methods in the PlayerControl interface:

Table 2. Methods of the PlayerControl interface

Method	Description
`setAutoSize()`	Determines if the player will force the container to resize. This is set to false in the example.
`getRendererComponent()`	Obtains a `java.awt.Component`-based object that can be used to display the movie.
`open()`	Opens MPEG-4 content, gets ready for playback.
`start()`	Starts playback of the content. Movie is shown on the renderer component.

Consult the SDK Javadoc for more-detailed descriptions and for other methods of the PlayerControl interface.

To show the MPEG-4 movie on the cinema screen, you must call the PlayerControl interface's getRendererComponent(). This call returns a java.awt.Component. The following code, which is inside the playMovie() method in Listing 2, makes the java.awt.Component a child component of the MoviePlayer JFrame:

getContentPane().add(BorderLayout.CENTER, Player.getRendererComponent());

Creating an applet-based player

The standalone player can play video from a hard disk or over the network, but the player software must first be available on the user's PC. If you're distributing your show on a multimedia DVD or CD-ROM, this won't be a problem. But if most of your users will access your show through the Internet, you can opt for a thin-client, download-on-demand solution instead.

In a thin-client solution, the user needs only a browser to view the video. When the browser reaches your cinema Web page, this sequence occurs:

A small, stripped down version of the viewer -- an applet -- is downloaded to the user's machine.
The JVM on the user's machine starts, and the viewer applet executes.
The viewer connects back to the Web server (or a streaming server on the same machine) to access the networked video.

To create a thin-client solution, you need the two JAR files from the IBMAppletForMpeg4xxxx.zip download (see the sidebar IBM Toolkit for MPEG-4 SDK downloads). Using the SDK, it is possible to create a custom applet solution; however, this article will make use of the applet package:

RTSP/RTP

Real Time Streaming Protocol (RTSP) is IETF (Internet Engineering Task Force) Proposed Standard RFC 2326, developed jointly by Columbia University, Netscape Communications, and RealNetworks. It is a control protocol for multimedia streaming over IP networks. RTSP can be used to negotiate media types, audio/video codecs, and transport protocol. It also provides time-based seek control of the stream during playback. Typically, RTSP is used in conjunction with RTP (Realtime Transport Protocol) as the transport protocol. RTP is specified by IETF RFC 1889, and is also ITU standard H.255.0.

IBMAppletForMpeg4.jar contains a lightweight applet player for MPEG-4 files that are served using the HTTP protocol. The MPEG-4 files should be in the IBM interleaved format (see Web server based delivery over HTTP, later in this article).
IBMISMAAppletForMpeg4.jar contains a lightweight applet player for MPEG-4 files that are served through an Internet Streaming Media Alliance (ISMA) compliant streaming server, typically using Real Time Streaming Protocol (RTSP) and the Realtime Transport Protocol (RTP) (see the sidebar, RTSP/RTP).

The example I'll show you uses the HTTP protocol applet from the IBMAppletForMpeg4.jar file. You embed this applet within a Web page -- the dwcinema.html file, shown in Listing 3:

Listing 3. A thin-client player implementation using M4Applet

<html>
<head>
  <title>developerWorks Cinema</title>
  <style>
  h1 { 
     color:white;   
     font-weight:normal; 
     font-size:20pt; 
     font-family:arial,helv,helvetica,sans-serif;
     }
  </style>
</head>
<body bgcolor="black">
  <h1>
    developer<b>Works</b> <font color="yellow">Cinema</font>   
  </h1>
  <applet code="M4Applet.class" archive="IBMAppletForMpeg4.jar"
    width="320" height="300">
    <param name="url"  value="surf.m4x" />   
    <param name="panel"  value="None" />
  </applet>
</body>
</html>

In Listing 3, you use the <applet> tag to embed the Java applet on the page. Several attributes of the <applet> tag tell the browser and Java plug-in (see Resources) how to display the applet:

code:The Java class to execute. This class must be a subclass of java.applet.Applet. In the example in Listing 3, the M4Applet player is the class to run.
archive:The JAR file used to locate the executable applet class. Listing 3 uses IBMAppletForMpeg4.jar.
width, height: The width and height, in pixels, in the browser's display to reserve for showing the MPEG-4 movie player applet.

You pass the following parameters for configuring the applet in the body of the <applet> tag, and the applet uses them during initialization:

url: A URL pointing to the movie to be played. In Listing 3, it points to the interleaved MPEG-4 movie.
panel: Configuration of the control panel. Can have a value of None, Mini, Basic, or Default. The control panel, when visible, enables the user to control the playback (start, stop, pause, mute, and so on).

Follow these steps to try out the applet player:

Transfer, via binary FTP, the surf.m4x MPEG-4 video and the IBMAppletForMpeg4.jar library to your Web server.
Transfer, via ASCII FTP, the dwcinema.html file to the same directory on your Web server.
Using a Web browser on a client machine, access the dwcinema.html file through the Web server.

Figure 4 shows the applet player accessed from Internet Explorer:

Figure 4. Applet on-demand player on Internet Explorer

Figure 5 shows the same applet player from a client using the Netscape 7 browser:

Figure 5. Applet on-demand player on Netscape 7

ISMA and 3GPP

The Internet Streaming Media Alliance (ISMA) is an industry committee that creates and promotes standards in the streaming of audio, video, and data over IP networks (see Resources). 3GPP is the 3rd Generation Partnership Project, an international telecommunications standards body that creates specification for mobile cellular phone and PDA rendering/playback of rich media via "3G" mobile phone networks.

Preparing MPEG-4 content for delivery

The source for MPEG-4 movies can be:

A storage medium, such as a CD-ROM, DVD-ROM, or hard disk
A network connection served by a Web server, such as Apache (see Resources)
A network connection served by a specialized streaming media server, such as Darwin (Resources)

MPEG-4 content played back from storage media doesn't require any special preparation. But MPEG-4 content played back over a network needs preparation that depends on the method of transmission.

Web server based delivery over HTTP

If you use a Web server to serve the MPEG-4 content, you should first convert the content to an interleaved format. The toolkit supports an IBM-specific interleave format, based on the MPEG-4 standard M4Mux interleaving, that works well over HTTP delivery. Files in this format have the .m4x extension, as you saw with the surf.m4x video in the applet example. You can use the toolkit's AVgen tool to convert regular MPEG-4 files into this interleaved format.

Using a Web server to deliver the MPEG-4 content has the following advantages:

The cost is low.
No special streaming server is required.
Even an inexpensive shared hosting service will work.
HTTP can go through most firewalls, providing a larger audience for your content.
It's easy to setup and operate, as the applet example demonstrates.

BIFS and XMT

Binary Format for Scenes (BIFS) can describe a time-varying scene composed of video, image, 2D graphics, and 3D graphical objects. Creating a BIFS stream in conjunction with your audio and video can provide the user with a rich multimedia experience, including user interactions.

BIFS is almost impossible to code by hand. You can use Extensible MPEG-4 Textual Format in XML (XMT) to work with BIFS content. XMT-A, sort of an assembly language for BIFS, is expressed as XML and therefore easier to maintain and create. But the one-to-one mapping between XMT-A and BIFS keeps XMT-A at a very low level. XMT-O (O stands for Omega) is an easy-to-learn, high-level language for creating 2D graphics, animation, and interactive elements within MPEG-4 presentations. XMT-O is also expressed as XML. Its high-level concepts for positioning, synchronization, animation, and user interaction are similar to Synchronized Multimedia Integration Language (SMIL) 2.0, a popular standard from the World Wide Web Consortium. XMT-O compiles down to XMT-A and can then be translated into a BIFS stream. The IBM Toolkit for MPEG-4 supports content created in the high-level XMT-O format as well as the low-level XMT-A format.

Streaming server delivery over RTSP/RTP

If you use a streaming-media server, chances are it's an ISMA-compliant server for delivering the MPEG-4 content over the RTSP/RTP protocol (see the sidebars RTSP/RTP and ISMA and 3GPP) In this case, you must first prepare the MPEG-4 file through hinting. Hinting adds indexing and other information necessary for streaming of the content by the server. The original MPEG-4 video and audio content must also conform to one of the ISMA standard profiles (see the sidebar, ISMA and 3GPP). You can use the toolkit's AVgen tool to hint an MPEG-4 file for playback over a streaming server.

The RTSP and RTP protocols are especially designed for media streaming over IP networks and have the following advantages:

The media stream can be fast-forwarded or rewound, and playback can start at any point in the media.
They enable more efficient bandwidth usage than HTTP-based delivery.
You can use them with a content stream that's compressed on-the-fly, for example in a live-event broadcast.

The toolkit's AVgen tool -- in addition to creating .m4x interleaved files for HTTP delivery and hinting ISMA complaint files for streaming delivery -- also lets you hint MPEG-4 files for 3GPP delivery over mobile networks (see the sidebar ISMA and 3GPP).

MPEG-4 content beyond video and audio

Even though MPEG is typically associated with video and audio compression, the MPEG-4 standard encompasses many more elements (streams):

2D graphics, including presentation-quality text in multiple fonts
3D graphics (limited implementation in the current toolkit)
Animations
Elements for user interaction
Embedded Java code (not implemented in the current toolkit)

The XMT-O high-level scene-creation language lets you add transition effects, 2D graphics, text, animations, and user interaction to your MPEG-4 show (see the sidebar BIFS and XMT). You can use the XMTBatch tool from the IBM Toolkit for MPEG-4 as a development environment for XMT programs. Consult the toolkit documentation for more details.

Conclusion

The Java components from the alphaWorks MPEG-4 Toolkit SDK make it easy to add MPEG-4 video to any project. You can create either a customizable standalone player or a lightweight applet that alleviates the need for users to install a player on their machines. You can store the MPEG-4 content in the .m4x interleaved format, allowing a regular Web server to deliver MPEG-4 over HTTP. Or you can use an ISMA-compliant server for high-quality, randomly accessible, RTSP/RTP streaming delivery. At long last, the delivery of video over a network is within easy reach of most Java developers.

Download

Name	Size	Download method
j-mpeg4-source.zip	2MB	HTTP

Information about download methods

Resources

Download the evaluation software components and tools of the IBM Toolkit for MPEG-4 to try out the code in this article.
You can find the latest MPEG news at the Moving Picture Experts Group's official Web site.
See the Internet Streaming Media Alliance (ISMA) site for streaming-media profiles and information on compliant servers.
The 3rd Generation Partnership Project Web site has up-to-date information on 3GPP media requirements.
You can use the Apache HTTP Server, a open source Web server, to deliver MPEG-4 content over HTTP.
The Darwin Streaming Server is an open source streaming-media server that supports RTSP/RTP delivery of MPEG-4 content.
You can add applet-execution capabilities to the latest versions of the leading browsers by installing the Java Plug-in.
Visit the IBM Research IBM MPEG-4 Technologies Web site to learn more about cutting-edge MPEG-4-related projects at IBM.
You'll find articles about every aspect of Java programming in the developerWorks Java technology zone.
Browse for books on these and other technical topics.

About the author

Comments (Undergoing maintenance)

Trademarks | My developerWorks terms and conditions

Close [x]

Help: Update or add to My dW interests

What's this?

This little timesaver lets you update your My developerWorks profile with just one click! The general subject of this content (AIX and UNIX, Information Management, Lotus, Rational, Tivoli, WebSphere, Java, Linux, Open source, SOA and Web services, Web development, or XML) will be added to the interests section of your profile, if it's not there already. You only need to be logged in to My developerWorks.

And what's the point of adding your interests to your profile? That's how you find other users with the same interests as yours, and see what they're reading and contributing to the community. Your interests also help us recommend relevant developerWorks content to you.

View your My developerWorks profile

Return from help

Close [x]

Help: Remove from My dW interests

What's this?

Removing this interest does not alter your profile, but rather removes this piece of content from a list of all content for which you've indicated interest. In a future enhancement to My developerWorks, you'll be able to see a record of that content.

View your My developerWorks profile

Return from help

static.content.url=http://www.ibm.com/developerworks/js/artrating/

SITE_ID=1

Zone=Java technology

ArticleID=31745

ArticleTitle=Now showing: Your own online MPEG-4 cinema

publish-date=11022004

author1-email=westmakaha@yahoo.com

author1-email-cc=