Working with metadata for live Flash video streaming
Created
17 March 2008
Requirements
Prerequisite knowledge
Basic video production skills (capture card, video camera, etc.) and experience with the Flash CS3 Professional authoring environment.
User level
Intermediate
Required products
- Flash Media Server (Download trial)
- Flash Media Live Encoder (Download trial)
- Flash Professional (Download trial)
Sample files
- live_video_data_events.zip (19 KB)
Additional Requirements
Note: Install Flash Media Live Encoder on the same machine on which you've just installed Flash Media Server Developer Edition to minimize the delay between live video encoding and data injection.
Video source
Make sure you have an appropriate video source connected to the machine: USB webcam, DV camera, or video capture card with live video signal.
Live Flash video capabilities have improved significantly in the last year, and with the support of major content delivery networks (CDNs) and new encoding tools, it is becoming an affordable solution to reach viewers efficiently across platforms with the best possible user experience.
To improve this even more, and to afford better monetization of content, Flash Media Server enables you to add metadata to the live stream—for instance, for clip information, slides, advertisement, or closed captioning. This article is intended to help you understand the current metadata options and show you how to create your own custom broadcast application using metadata injection.
Setting up Flash Media Server and Flash Media Live Encoder
This section explains which version of Flash Media Server you require and what live Flash video encoding options are available to you.
About Flash Media Server
To enable live Flash video streaming with live data events, you need one of the editions of Flash Media Server 3 (see Table 1). Because this sample application requires a server-side script, FMSS is not an option. The remaining options are FMIS or FMS Developer Edition in combination with FVSS (Flash Video Streaming Service). FMIS offers unlimited connections and bandwidth, and therefore is the best solution if you have your own data center and want to use your own servers. As an alternative, you can use Flash Media Server Developer Edition to inject the events into the stream and leverage an FVSS partner for the content distribution.
Table 1. Available Flash Media Server editions
| Flash Media Streaming Server (FMSS) | Flash Media Interactive Server (FMIS) | Flash Media Server Developer Edition | |
|---|---|---|---|
Live video support |
Yes | Yes | Yes |
Connections |
Unlimited | Unlimited | 10 concurrent |
Server-side scripting |
No | Yes | Yes |
Price |
$995 | $4500 | Free |
For this tutorial, install the free Flash Media Server Developer Edition and create the folder liveevent in the application directory.
About Flash Media Live Encoder
Adobe Flash Media Live Encoder 2 offers high-quality live video encoding capabilities with the On2 video codec, and the MP3 audio codec (see Table 2). As an alternative, Adobe Flash Player has built-in encoding capabilities that you can leverage for browser-based live encoding. Unfortunately, Flash Player supports only the older Sorenson Spark codec, which is great for social media applications but doesn't provide the same quality that On2 VP6 offers.
Table 2. Comparing Flash Media Live Encoder with Flash Player–based encoding
| Need | Examples | Solution |
|---|---|---|
| Real-time communications | Webcam chat, dating, video weblog, social media live webcast | SWF (Spark) capture app |
| Live event broadcasts | Live events with high-quality requirement | Flash Media Live Encoder |
| Webcasting | Investor relations, distance learning/training, symposiums | Flash Media Live Encoder |
Besides user-operated encoding via a visual interface, Flash Media Live Encoder 2 supports 24/7 encoding environments by offering an optional command interface for remote access, an auto-restart feature, and timecode support.
A variety of encoding partners in the Flash Media Solution Provider Program also support live Flash video encoding. The data injection application I demonstrate in this article works with those third-party encoders. To learn more about the encoding partners, visit the Adobe Flash Media Solution Providers directory.
For this tutorial, install Flash Media Live Encoder on the same machine on which you've just installed Flash Media Server Developer Edition to minimize the delay between live video encoding and data injection. Please also make sure that you have an appropriate video source connected to the machine—for instance, a USB webcam, a DV camera, or a video capture card with a live video signal.
Building a custom application to inject synchronized metadata
This section shows you how to create your own application to inject live Flash video metadata. It will allow you to connect events to specific video timecode, and therefore garantee the synchronization of video and content. It requires a custom video player, a data injection application, and an FMS server-side script.
Creating the Flash video player
To play the live stream, you need a Flash-based video player.
Step 1: The video object
Create an empty ActionScript 2.0 Flash file with Flash CS3. Right-click the Library panel and select New Video from the pop-up menu; then move the video object onto the Stage. Name this instance videoarea in the Properties tab. Create a dynamic text field below the image and name it display_txt (see Figure 1).
Step 2: The script
Add the following ActionScript code to the first frame:
var my_nc:NetConnection = new NetConnection();
my_nc.connect("rtmp://localhost/liveevent/");
my_ns = new NetStream(my_nc);
my_ns.setBufferTime(5);
my_ns.play("livestream",-1,-1);
videoarea.attachVideo(my_ns);
my_ns.onDataEvent = function(str) {
_root.display_txt.text = str;
};
This script connects to Flash Media Server and plays the live stream named "livestream." It also listens to onDataEvent of the NetStream object and displays the event data in the text field. Please note that there are five seconds of buffer time; therefore, there will be some delay between broadcast and playback. This demonstrates that the injected data is in sync with the video signal and doesn't depend on buffer time or network delays.
Broadcasting the Flash video feed
The next step is to broadcast video to Flash Media Server, which requires a video source and Flash Media Live Encoder (see Figure 2).
Follow these steps to set up a stream:
- Confirm that Flash Media Server is up and running.
- Select the appropriate video and audio source in FME.
- Select 320×240 and 30fps for this example.
- Configure the server as follows:
FMS URL: rtmp://localhost/liveevent/
Backup URL: optional
Stream: livestream
- Click Start to connect to the server and publish the feed.
Creating the data injection application
Here comes the fun part. The actual application to inject the data events requires two components: a Flash-based application that connects to Flash Media Server with a visual interface, and a server-side script to do the actual injection (see Figure 3).
As I mentioned before, you can either use your own FMIS server to broadcast the video directly to your customer or leverage a CDN partner to do the heavy lifting.
The interface for this application is very basic. It has a video area to display the video stream and a text field to inject and send data (see Figure 4). This can easily be modified to suit your specific requirements, such as synchronized slides, synchronized banner advertisements, closed captioning, and others.
Create a new ActionScript 2.0 Flash CS3 project. Create a video object with the instance name videoarea, a text field named inputfield_txt, and simple button object with the name sync_btn.
Add the following script to the first frame:
var video_nc:NetConnection = new NetConnection();
video_nc.connect("rtmp://localhost/liveevent/");
var video_ns:NetStream = new NetStream(video_nc);
video_ns.setBufferTime(0);
video_ns.play("livestream");
videoarea.attachVideo(video_ns);
sync_btn.onRelease = function() {
video_nc.call("sendDataEvent",null,inputfield_txt.text);
};
This script is very similar to the player application. It connects to Flash Media Interactive Server (FMIS), sets the buffer time to 0 (since you don't want any buffer delays during the injection), displays the live stream and defines a button action.
This line uses the established NetConnection to call the server-side function sendDataEvent and passes in the data to be associated with the event (for example, the URL for a banner ad or text for closed captioning):
video_nc.call("sendDataEvent",null,inputfield_txt.text);
Now you actually need to define the server-side script. Flash Media Interactive Server uses the concept of applications. Since you've already created the application folder liveevent, you now need to define a script by creating a new text file with the name main.asc, containing the following code:
Client.prototype.sendDataEvent = function(data) {
this.newStream = Stream.get("livestream");
this.newStream.send("onDataEvent",data);
}
This code defines the function sendDataEvent on the server side, which utilizes the NetStream.send() function to inject the event, including the associated data synchronized with the current timecode of the video.
Note: If you record the video on the server side (a functionality of FMIS), the injected events are also being triggered by the recorded file.
This is all the code you need to make this sample work. Start Flash Media Live Encoder, publish the feed, and start the injection and the viewer application. Both the injection and the viewer application now display the live video.
If you enter data into the injection application's text field and click Send, the text field in the viewer application becomes populated after a short delay (see Figure 5). The event is still in sync with the video despite the long buffer time and potential network delays.
Using one-time metadata
You can now try to define and retrieve live video header metadata. Compared to the previous case, this is one-time metadata retrieved upon connection to the stream.
Defining nonsynchronized metadata in FME
Flash Media Live Encoder has a panel option that enables you to assign metadata on the live video event. You can also add or remove custom metadata based on your requirements. In this case, I've added the metadata value pair location (see Figure 6). Again, this is one-time, nonsynchronized metadata.
Retrieving metadata with the video player
You can easily receive the metadata on the client side by adding the following script to your existing player:
my_ns.onMetaData = function(metadata:Object) {
trace(metadata.location);
}
This displays the location value defined in Flash Media Live Encoder in the Flash output window. You can use the metadata values to populate text fields or trigger specific events.
Where to go from here
With synchronized and nonsynchronized metadata, you can efficiently improve the user experience by, for instance, providing these and other features:
- Closed captioning
- Information about the clip, such as location and description
- Banner advertisements
- Announcements
- Overlays
- Synchronized slides
- Additional information, such as URLs to websites
Additionally, you can combine this with an FMIS-based live video switcher application in case you want to leverage multiple live video sources or on-demand video and create a seamless experience for the user.
With the powerful features of the Flash/Flex platform and the new live Flash video improvements, you now have a tool set to build the live Flash video experience of tomorrow with the best possible cross-platform user experience, stunning video quality, interactivity, and professional scalability.
Tutorials & Samples |
