Adobe is changing the world through digital experiences. Our creative, marketing and document solutions empower everyone — from emerging artists to global brands — to bring digital creations to life and deliver them to the right person
at the right moment for the best results.

Preorder Estimated Availability Date. Your credit card will not be charged until the product is shipped. Estimated availability date is subject to change.Preorder Estimated Availability Date. Your credit card will not be charged until the product is ready to download. Estimated availability date is subject to change.

User level

Required products

Sample files

Adobe Flash has revolutionized the way people consume video today, and traditional media is just a small part of it. The revolution started with user-generated content—the dancing bird, the barking puppy, the latest news from the person who just happened to be at an event. The key for success of user-generated content is the ability to offer a very user-friendly experience to upload, share videos, and watch them without hassle. All of this makes the Adobe Flash platform—with Adobe Flash Player penetration at 99%—an ideal choice for video sharing web applications.

This article demonstrates how to create your own social media application in just a few steps, hopefully providing you with a sound foundation to build your own experience. It's important to note that Adobe Flash Media Server allows capturing directly from your webcam while you're online. Instead of focusing on this feature, however, this article describes an easy-to-use upload/transcode/playback workflow.

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

Using Flex and Flash Media Server, enable the user to click on a thumbnail to play the video in the video player.

Figure 1 provides an architectural diagram of the application discussed in this article.

Figure 1. Video sharing application architecture

It's possible to combine the web server, Flash Media Encoding Server, and Flash Media Server on a single machine, but it can affect performance. Ideally the Flash Media Server is on a dedicated machine to allow maximum throughput.

Note: I chose to build the front end using Flex Builder, but it is also possible to build this in Adobe Flash.

Creating the video upload component

You can use Flex or Flash technology (or even an HTML web form) to build a front end for uploading files to a web server. Either way, you'll need a server-side script to receive and save the files. In this case, I'll use a simple PHP script.

Please note that PHP limits the upload capacity to 2MB in the default configuration. If you plan to use this example to build and deploy your own application, I recommend changing the PHP configuration to increase the maximum upload limit to allow users to upload larger files if desired.

Building the upload interface in Flex

As a first step, you'll create a Flex-based upload interface using Flex UI components and the built-in upload feature of the FileReference class. Open your Flex authoring environment and create a new project; name it videoshare. Use the code below to display a simple upload interface with a progress bar:

The ActionScript code above creates a FileReference object, which allows the user to select the file with the browse dialog box and upload the file to the server. Since video files can be large, an important visual indicator is the progress bar. The code above already added progressHandler() as an event listener, which displays the upload progress with the progress bar:

Writing the server-side PHP script

To receive the files on a web server, you'll need a server-side component. In this case, you'll use a PHP script for this purpose. Create an upload.php file and save it at a path that is accessible through HTTP at http://[MY_SERVER_DNS]/videoscript/upload.php. Add the following script to the file:

The script receives the uploaded files and moves them to the folder C:\videoshare\uploaded.

Note: The path is Windows specific; another OS might follow a different file path pattern.

Setting up video encoding

For this part you will use the Flash Media Encoding Server, which operates as the encoding engine on the server side. There are multiple ways to add jobs to the encoding queue including simple file-based watch folders, a watch folder for XML-based jobs, a command line interface, and a socket connection for advanced communication and interaction. For this application, you will use the socket connection.

Important note: To establish a connection between a Flex application and a socket server, even on the same domain, you'll need to run a policy server on port 843 to return a socket policy file on request. It sounds complicated, but there are existing scripts that support an easy setup. For more information on this required step, see Setting up a socket policy file server.

Flash Media Encoding Server

You can use Flash Media Encoding Server to set up your own preset. To set up a preset that fits your needs, choose Tools > Preset Editor and create a preset (see Figure 3) with 800 kbps H.264 encode and 720 × 480 resolution (480p).

Figure 3. List of encoding profiles

To identify the preset when submitting the job through the socket connection, find the GUID in the preset editor. The GUID will be a string of hexadecimal values, for example: "{85DCCE70-0B4F-4328-86D1-5FC7756D9777}".

Set up the socket connection

The socket connection logic requires additional code on the Flex side to ensure appropriate visual feedback, which includes a progress bar to display the progress of the encode and updated status messages. You may want to open the sample source code to follow the next steps.

Flash Media Encoding Server requires a valid XML command, in this case sent through a socket connection, to add a job to the rendering queue. For better maintainability, I have externalized the commands in the submit.xml and checkstatus.xml files with placeholders for the file to encode. Please also make sure you replace the PresetGUID value in the XML below with the GUI of your encoding profile.

The submit command encodes the file and then moves to it the Flash Media Server application folder to allow the playback of the file. The filename is a unique placeholder. The Flex code will replace this value with the filename of the current job.

checkstatus.xml

The checkstatus XML triggers the JobStatusList command. This Flash Media Encoding Server command normally returns all jobs. In this case you want to limit it to the active job initiated by the active user; therefore it contains limitation criteria with the <filter> tag.

The following code establishes the socket connection and sends commands through it. It first loads the XML submission files via loadFMESAPIConfig() (for details on this method, see the sample source code), establishes a connection to Flash Media Server (I'll cover this in more detail below), and then, once the user has successfully uploaded a video file, triggers the encoding process.

To better understand the flow of the application, here are the steps that follow a successful file upload:

I won't explain the source line by line, since the concept is relatively simple and with comments the code should be fairly self-explanatory.

I have defined socket connection event handlers for I/O and security issues. If, for example, a security error occurs, the security handler will be triggered. This can happen when the security policy server on port 843 is not properly set up.

Since it employs the same socket connection for both commands with a single data handler, the application uses an activecommand state to differentiate between submitting the encoding call and querying the current status of the encoding process.

Configuring Flash Media Server

The next step is to configure Flash Media Interactive Server or Flash Media Development Server to stream the content to the audience and to generate thumbnails of the video clips in real-time.

This application will use the following features:

Playback of recorded video files

Server-side functionality to gather a list of all uploaded videos and send it to the Flex client

Seek and pause functionality to display thumbnails of the video files

It's also possible to use the Flash Media Streaming Server for this application. However, since it doesn't support custom server-side scripts, generating the list of uploaded videos would have use a different approach, such as a PHP script for example.

Flash Media Development Server provides all the features in Flash Media Interactive Server, but with a limit of ten simultaneous users. You can start with the free developer edition during development and then upgrade to the full version without a reinstall once the system moves into production.

Flash Media Server enables you to host several applications with multiple instances each. An instance of an application has its own memory space and executes independently. An example would be a chat application with multiple rooms. The shared logic of the application could be located in the folder of the application, while users would be able to create different, independent rooms of the chat application. When there is no instance specified, it will automatically default to _definst_, the default instance of the application. Streams need to be located in the folder \[MYAPPLICATION]\streams\[MYINSTANCENAME]\.

In this application example, the application logic is located in the videoshare application folder: C:\Program Files\Adobe\Flash Media Server 3.5\applications\videoshare\

Since instances are not required, the encoded F4V files are located in the default instance folder of the application: C:\Program Files\Adobe\Flash Media Server 3.5\applications\videoshare\streams\_definst_\

Writing the application script

Flash Media Server scripts are defined in the main.asc file of the application folder. Create a main.asc file (ASCII text file) and place it here: C:\Program Files\Adobe\Flash Media Server 3.5\applications\videoshare\main.asc

The first function automatically accepts incoming connections. The getFiles() function reads all the filenames of the encoded files in the /streams/_defInst_/ folder and returns it to the client as an array. This data allows the Flex application to display thumbnails of the video files.

Building the thumbnail browser

There are several ways to display video thumbnails. The sample application for this article connects to Flash Media Server, starts playing the video, waits until the buffer fills up, seeks to a certain position, and then pauses.

As an alternative approach, you can use Flash or Flex to build an application that captures bitmap data of visual elements; with the appropriate Flash Media Server configuration the application can capture a thumbnail of the video. You could send this data to a server script and create a JPEG file on the server side. Another option would be to configure the encoder to create an additional JPEG file of the encoded video file.

Building the Flex application: data

Now you'll create a dynamic data structure in Flex and connect it to the Flash Media Server data source to display the video list. The video grid updates when the application starts up and whenever the server finishes encoding a file. Both events trigger the refreshVideos() function:

In the code above shows how init()establishes aconnection to Flash Media Server. A successful connection triggers a call tothe onConnect() function, which then calls the refreshVideos() function. The samefunction gets called once the socket connection script determines that the encodingis complete. The refreshVideos() function calls the getFiles() function onFlash Media Server using the existing NetConnection object and then populatesthe movieThumbnailList ArrayCollection once the data returns.

Building the Flex application: user interface

Now the application needs to connect the data source to theuser interface. Along the way, I'll demonstrate how to build a new component todisplay the video thumbnail.

Each time the refreshVideos() function is called, movieThumbnailList is updated with the latest video paths. You could display this data in adatagrid, but in this case you'll create and populate a grid of moviethumbnails.

To show the thumbnails in the grid, you need to add newvisual elements to the interface:

The application uses the Tile element of Flex and a new custom component called ThumbnailViewer, which requires the active NetConnection and the video path as arguments. It fires a thumbsClicked event, which then triggers onThumbsClicked(event) to display the selected video in the not-yet-defined video player.

The component has a standard behavior pattern once it initializes. The event handler creationComplete() builds the user interface by connecting a new NetStream object to the existing NetConnection object. You need to attach the NetStream to a new Video object to display the video. It then pauses and once the buffer is filled up, seeks to the third second.

Additionally, it creates a text object to display the name of the video file. The onClick() function is defined to fire an event to the main application to display the actual video.

And there you go–video thumbnails appear below the upload component (see Figure 4). Of course, the main component is missing; you'll add the actual video player next.

Figure 4. The application showing video thumbnails

Adding the video player

For simplicity's sake, the application uses the Flex-based VideoDisplay component. The advantage of this is much simpler code, but a drawback is the need for a second connection to the server. If you want, you can create your own custom video player component and share a global NetConnection.

This code adds another panel to the HBox with a VideoDisplay object, a Play/Pause button, and a Zoom button. Additionally a full-screen button will appear once the user switches to the zoom mode. A couple of additional functions are being triggered by the new buttons and need to be defined:

The PlayPause() function toggles the playback. The zoom button switches the Flex application to a different state and resizes the video area. The full screen button displays the video area in full screen mode. Note that the full screen mode requires the allowFullScreen tag to be set to true in the publish template. See the sample source code for more details.

To define the regular and the zoom state, the following code at the top of the MXML file repositions the elements accordingly. The video area grows to a 720 × 480 region, the zoom button becomes a zoom out button and the UI has an additional Fullscreen button.

Where to go from here

Targeted at intermediate to experienced web developers, this tutorial shows how powerful the combination of Flash Media Encoding Server, Flash Media Server, and Flex can be.

As a next step, you could extend the application with a management component to delete, filter, or rate submitted videos. The opportunities to add more features are almost endless. Flash Media Encoding Server delivers the scalable backbone (you can even use a grid rendering setup) to completely streamline your encoding process (for example, with a workflow to create different bitrates for dynamic streaming) and become the next Web 2.0 video superstar—or at least provide your company an easy way to store, manage, and deliver video on the web.