Streaming Video Player - Web Science

CSCI 470
Web Science
Spring 2012

Final project - Streaming Video Player

Due: start of class, Wed 5/2.
This assignment can be done individually or in pairs.
You may NOT use late days for this final project.

You will develop a web-based streaming video player. The player needs to adapt to network conditions, changing its playback rate and quality as necessary to achieve an aesthetically pleasing playback experience.

Overview. We need to develop a web-based streaming video player. The exact technology you employ is up to you, though a Java applet is probably the easiest choice. Other possibilities include HTML 5 and JavaScript or Flash. My applet solution is available here.

Video details. We will do video playback using a simple scheme of flashing a series of JPEG image files. The original paddling video we will be using is 2 minutes and 41 seconds long. The video has a resolution of 640x480 and was shot at 30 frames-per-second (FPS). I have extracted JPEG images for each frame in the video. These frames are located on katie at the base URL http://katie.mtech.edu/~vertanen/videos/lakes. Below this directory are 8 subdirectories: q10, q20, ..., q80. These correspond to JPEG quality levels of 10, 20, ..., 80 respectively. The higher the quality level, the bigger the frame size is. There is also a lower resolution 320x240 set of frames located at http://katie.mtech.edu/~vertanen/videos/lakes320 My applet running at 320x240 is available here.

Playback details. You are allowed an initial small (e.g. 3 seconds) buffering period before playback starts. After the playback commences, you must continue at the video's recorded FPS regardless of network conditions. You are NOT allowed to pause playback to do any further buffering. You may not be able to display every single frame in the source video. You may also need to reduce the quality of the image frames delivered to the player if the network can't keep up. The exact policies you implement is up to you, but you will need to justify your choices in the report for the project. Your player should adapt intelligently degrading or improving playback quality as conditions warrant. Your player should look aesthetically pleasing as possible given the network realities (e.g. you shouldn't flash blank white frames).

Be aware memory is limited in browser plugins, so keeping frames that are prior to the current playback point is probably a bad idea. You can use my Stats class to track your heap usage as well as Java's maximum heap size. Here is a simple applet that displays current and maximum heap space.

Interface details. Your player's interface needs to have a Play button and a Stop button. Playback should automatically start when the page loads. The Play button should be disabled while playback is active. During playback, the Stop button stops all playback and frame retrieval activity and also purges all loaded frames. When playback is not active, only the Play button is enabled. Playback always restarts from the very beginning. The interface should adapt its size based on the target video's resolution.

Your interface needs to display the following details:

Current frame number and total number of frames
A moving average showing the FPS the client is experiencing. That is, over say the last second, how many of the target video's actual frames were loaded and playable when they were needed.
A list of numbers showing the percent of frames in 9 classes: not available, available at quality 10, available at quality 20, ..., available at quality 80.

My applet has a visualization of the playback location, the loaded frames (top), the quality of loaded frames (middle), the present location of my worker threads (green lines), and the player's requested FPS (bottom, yellow line). This is completely optional. Though I found the visualization was very helpful in debugging and tuning my player. If you want to see System.out.println debug messages, run your applet in the appletviewer.

Player configuration. You should be able to embed a player for a specific video into an HTML page. This embedding should support configuration options that specify the location of the video, the video FPS, the number of frames in the video, and the width and height of the video. For example, my applet supports the following video configuration options via applet param tags:

<param name="fps"        value="30.0" />
<param name="base_name"  value="http://katie.mtech.edu/~vertanen/videos/lakes" />
<param name="num_frames" value="4845" />
<param name="width"      value="640" />
<param name="height"     value="480" />

You may include other optional configuration options if it is helpful for testing or fine-tuning the player. For example, I had additional parameters controlling the starting FPS, starting quality, starting buffering amount, and the number of frame retrieval threads.

Deliverables. Along with your source code, you should send me URLs that use your player to display the higher and low resolution versions of the paddling video. You also need to fill out this project report, answering the questions and providing some benchmark results.

Submission. Submit your source code to the Moodle dropbox. The Moodle timestamp is the completion time for the assignment. I will be testing your program using both Chrome and the Java appletviewer. I will test it both from the wired Tech network and using my home cable Internet connection.