Home   Search Articles   All Articles   Submit an Article Random Article   Contact Us
  Tue Sep 02nd,2014 08:57 am Welcome Guest, Please LOGIN to your account or SIGNUP now
  Search Articles
Exact phrase
All words (AND)
Any word (OR)
  Media Server
  Action Script
  Basic Hosting...
  Flash and XML
  Flash Live Streaming
  Flash Media Server
  Flash Players - PC
  Flash Players - PHP...
  Flash Players -...
  Flash Players -...
  Flash Press Releases
  Flash Video (FLV)...
  FLV Coding
  FLV Encoding
  FLV Help
  FLV Hosting...
  FLV Software
  hosting unleashed
  charlton Ting
  flv player maker
  flash flv
  Kevin Kelleher
  peter adre
  Mark tailer
More Authors List 
  Subscribe Articles
Email Address
  Our Sponsors
 Creating a video sharing web application

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:

  1. Using Adobe Flex, display video thumbnails of videos.
  2. Using Flex, select a video file from the user's local hard drive.
  3. Using Flex and PHP, upload the file to the web server.
  4. Using Flash Media Encoding Server, transcode the video.
  5. Using Flex and Adobe Flash Media Server, update the video thumbnail list.
  6. 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.

Video sharing application architecture
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:

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> <mx:HBox id="mainui" height="330" autoLayout="false"> <mx:Form id="uploadform" horizontalScrollPolicy="off" verticalScrollPolicy="off"> <mx:FormItem label="Choose your file:" id="formitem"> <mx:TextInput id="videofile" editable="false" x="10" y="358"/> </mx:FormItem> <mx:FormItem id="browsearea" > <mx:Button label="Browse" click="onBrowse()" x="180" y="359" id="browse_btn"/> <mx:Button id="upload_btn" click="onUpload()" label="Upload" width="68" enabled="false" x="256" y="360"/> </mx:FormItem> </mx:Form> </mx:HBox> </mx:Application>

This MXML structure displays the upload component with a progress bar shown in Figure 2.

User interface for browsing and uploading a video file
Figure 2. User interface for browsing and uploading a video file

To enable the button functionality, you'll need to define the onBrowse() and onUpload() functions for handling the click events:

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:

<?php if(!is_dir("c:/videoshare/uploaded")) mkdir("c:/videoshare/uploaded", 0755); move_uploaded_file($_FILES['Filedata']['tmp_name'], "c:/videoshare/uploaded/".$_FILES['Filedata']['name']); ?>

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

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).

List of encoding profiles
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.

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.

Understanding the Flash Media Server application and instance architecture

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 FilesAdobeFlash Media Server 3.5applications ideoshare

Since instances are not required, the encoded F4V files are located in the default instance folder of the application: C:Program FilesAdobeFlash Media Server 3.5applications ideosharestreams_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 FilesAdobeFlash Media Server 3.5applications ideosharemain.asc

Copy the following code into the file:

application.onConnect = function(clObj) { this.acceptConnection(clObj); } Client.prototype.getFiles = function() { var fileList = new File("/streams/_defInst_/"); var temp = fileList.list(); return temp; }

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:

<mx:Tile autoLayout="true" id="videolist"> <mx:Repeater id="rp1" dataProvider="{movieThumbnailList}"> <local:ThumbnailViewer connection="{nc}" moviesource="{rp1.currentItem}" thumbClicked="onThumbClicked(event)" id="thumbnailviewer1"/> </mx:Repeater> </mx:Tile>

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.

The application showing video thumbnails
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.

You need to enhance the layout one more time:

<mx:HBox id="mainui" height="330" autoLayout="false"> <mx:Panel width="380" height="306" layout="absolute" scroll="false" id="panel1"> <mx:VideoDisplay id="mainVideo" x="0" y="0" width="360" height="240"/> <mx:Button label="Play" id="controls" click="PlayPause()" y="242" x="3"/> <mx:Button label="Zoom" id="controls0" click="zoom()" y="242" x="299"/> </mx:Panel> <mx:Form id="uploadform" horizontalScrollPolicy="off" verticalScrollPolicy="off"> <mx:FormItem label="Choose your file:" id="formitem"> <mx:TextInput id="videofile" editable="false" x="10" y="358"/> </mx:FormItem> <mx:FormItem id="browsearea" > <mx:Button label="Browse" click="onBrowse()" x="180" y="359" id="browse_btn"/> <!--<mx:Button label="refresh Videos" click="refreshVideos" x="436" y="10" enabled="true"/>--> <mx:Button id="upload_btn" label="Upload" click="onUpload()" width="68" enabled="false" x="256" y="360"/> </mx:FormItem> <mx:Text id="status"/> <mx:ProgressBar id="progressbar" width="277" enabled="true" indeterminate="false"/> </mx:Form> </mx:HBox>

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:

Read the full article here


Added By Admin Email Anonymous
Category Media Server Author flash flv
Click Here to add this article to your favorite list. Add To Favorites Click Here to print this article. Print This Article
Click Here to email this article to someone you think will like it. Email Article To A Friend Click Here to post some comments for this article. Post Comments
Rate This Article (6)
Added On Mon Jun 13th,2011 
  Login Here
Signup Now
Forgot password
  Top Rated
ESPN Chooses RTMP...
Adobe FLash Video...
Creating a video...
How to add add text...
Using FFMpeg to...
  Most Popular
Embed Flash FLV
Updated 2011 How to...
Free CCPlayer...
Choose Managed...
Free Online FLV...
Free Youtube Player...
  Editor's Pick
Free Youtube Player...
FLV Hosting...
How to add add text...
Free CCPlayer...
Creative Cloud, a...