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

Figure 1. Creating a video object

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

Figure 2. Flash Media Live Encoder

Follow these steps to set up a stream:

1. Confirm that Flash Media Server is up and running.
2. Select the appropriate video and audio source in FME.
3. Select 320×240 and 30fps for this example.

4. Configure the server as follows:

   FMS URL: rtmp://localhost/liveevent/

   Backup URL: optional

   Stream: livestream

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

Figure 3. Architecture of the data injection application

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.

Figure 4. Data injection application interface

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.

Figure 5. Video player with received message

Page 3 of 4

Previous Page

Next Page