Flash Media Server Article

Creating a video sharing web application using Flex 2 and Flash Media Server 2

Companies like YouTube, MySpace, and Photobucket have made a significant impact on the way we consume and socialize video. These sites enable anyone to be the director of his or her own videos, upload them to the web, and become a new online video celebrity. The web is the video distribution channel of the twenty-first century.

This article demonstrates how to create your own social media application in just a few steps. This project provides you with the foundation and will perhaps inspire you to build your own video sharing site.

The goal of this article is to demonstrate how to create a video sharing application as follows:

• In Adobe Flex, display video thumbnails of videos
• In Flex, select a video file from the user's local hard drive
• In Flex and PHP, upload the file to the web server
• In PHP and with Carbon Coder, transcode the video
• In PHP and Flex, wait until the file is encoded
• In Flex and with Adobe Flash Media Server, update the video thumbnail list
• In Flex and with Flash Media Server, enable the user to click on a thumbnail and play it in the video player

Figure 1 provides an architectural diagram of the application that I demonstrate in this article.

Figure 1. Video sharing application architecture

In this article I use Flex 2 to create the visual client interface. I chose this technology because you can leverage its prebuilt UI components and reduce the amount of code required for building the application. If you are an advanced Flash developer, you can leverage the Flex 2 AS 3.0 code and create your own Flash-based version. Adobe Flash CS3 Professional offers the same core functionality, including the upload feature, the NetConnection and NetStream objects to connect and communicate with Flash Media Server, as well as the FLVPlayback component for video playback.

I use Flash Media Server for its streaming and data communication features. It streams the video files and video thumbnails to the user and provides the data required for building the video thumbnail list. It eliminates the need for a database in this case and streamlines the video, audio, and data communication.

Requirements

In order to make the most of this article, you need the following software and files. Please make sure that this software is installed before continuing.

Flex 2

• Try
• Buy

Flash Media Server 2

• Try
• Buy

PHP-enabled web server

• Example: XAMPP

Rhozet Carbon Coder (on the server)

• Try
• Buy (PDF, 72K)

Note: Although I chose Rhozet Carbon Coder as the server-side video encoding solution for this article, alternative encoding solutions are available from vendors like On2, Telestream, and Anystream. FFmpeg is a free solution using the lower-quality Sorenson Spark codec. You can easily exchange the server-side encoder in this tutorial with another solution.

Sample files:

• video_sharing_web_app.zip (ZIP, 208K)

Prerequisite knowledge

This article targets intermediate to experienced web developers. Knowledge of Flex and server configuration is recommended.

Page 1 of 6

Next Page

About the author