Part 4 Beginner’s guide to security features in Flash Media Server 3.5

They don’t call it the “wild, wild web” for nothing. It is not uncommon, for example, for you to post a video to your site and to have it appear somewhere else in what seems like mere minutes. In fact, if there is a valid reason for hobbling the use of video on the web, it’s that it is unsecure.

Let me be really clear about the purpose of this article. The approach I want to take here is not to wrap my video inside a security cordon that approximates the protection level of a head of state. Instead, I want to make it freely available—just not easily stolen.

Let me explain by way of analogy. Recently I needed to buy a mouse for my laptop. What struck me about this simple purchase was the mouse’s packaging: it was encased in that hard plastic shell that requires a chain saw to open. The purpose of the packaging is to prevent theft. It takes an awfully long time to open, and the odds are really good that, if you were to attempt to open the package and swipe the mouse, there would be a security guard looking over your shoulder asking you what the heck you were doing.

Delivering your video with progressive download—that is, downloading the FLV into Adobe Flash Player using an HTTP connection—is the equivalent (in my store analogy) of simply dangling the computer mouse from its USB cord on the shelf. It is totally unsecure and relatively easy to swipe. The reason is that the FLV file is downloaded to the browser cache. It takes no effort whatsoever to move that FLV file from the cache to the desktop.

If you are a hobbyist and post videos of your children for the grandparents or shoot stuff through your cell phone, security is not a huge concern. Progressive download probably makes the most sense for you. If, on the other hand, you have paid for the content itself or paid some serious money to have it professionally produced, you probably have a reasonable need to protect that investment. This is where Flash Media Server comes in.

You see, when a video is streamed through FMS, nothing hits the browser cache. Flash Player does all the heavy lifting to translate the bits flowing into the player into the video you see in the FLVPlayback component (or custom player) on the web page. Streaming through FMS adds a major upgrade in the security cordon around the video. It’s as if the retailer has chained the computer mouse to the display or moved it into a locked display case.

Note: Read the section “Delivery options for Flash video” in the Flash Video Learning Guide to find out more about the options available to you when delivering video on the web. Also check out the short video, “Delivering video on the web,” in the Video Technology Center to hear more about the differences between progressive download and streaming delivery of FLV files.

Flash Media Server 3.5 has two built-in features that allow you to put that mouse back on the shelf, and not get swiped: encryption and SWF verification. This article shows you how to apply each of these security features to a streaming video.

Encryption, or the “cone of silence”

Don’t you just hate it when you’re having a conversation with someone and you just know the guy leaning on the wall over there is listening in? This is quite common on the Internet, where third-party applications have been developed that listen to what’s going on between the server and your client. When they detect a data stream that interests them, they grab it—without asking.

Flash Media Server 3.5 actually has data encryption built in, and here’s the best thing about it: you don’t need a doctorate in advanced quantum physics to use it. In fact, it is added by a simple press on your keyboard.

Here’s how:

1. Download the files that are used in this example. When you unzip the download, drag the two files (Vultures.flv and Vultures.mp4) to the media folder in the vod folder. The path is C:\Program Files\Adobe\Flash Media Server 3.5\applications\vod\media.Note: I would like the thank William Hanna, dean of the School of Media Studies and Information Technology at the Humber Institute of Advanced Learning and Technology in Toronto, for permission to use these clips, produced by the students at the School of Media Studies at Humber.
2. Open a new Flash CS4 Professional document. When the document opens, drag a copy of the FLVPlayback component to the Stage.
3. In the Parameters tab of the Component inspector, double-click the source parameter to open the Content Path dialog box (see Figure 1).
4. Enter the following path: rtmpe://localhost/vod/Vultures
5. Click OK. The dialog box will close after Flash gets the metadata into the FLV file.
6. Save and test the movie.

Figure 1. Encrypting an FLV simply by adding an “e” to the rtmp path

The video that plays is an encrypted version of the FLV file. By adding that letter “e” into the path, you tell FMS 3.5 to add real-time encryption to the FLV file in the vod folder. The file is encrypted as it moves from the server to the client, Flash Player. Best of all, no keys are required by Flash Player to decrypt it.

Your only indication that the stream is encrypted is if you open the FMS 3.5 Administration Console. If you click View Applications and then click the Clients tab, you will see in the Protocol column that your stream is actually streaming out of the server using the RTMPE protocol (see Figure 2).

Figure 2. Administration Console showing an encrypted FLV stream in the Protocol column

Theft-proofing a SWF file

If you have been around the web for any length of time, you know how easy it is to grab a SWF file. In fact, a very common discussion around this practice is, “Hey, I have a SWF file I have grabbed. How do I decompile it to get at the source code?” I am not going to get into the morality of this discussion because there are very specific and valid cases for this practice, but, on the whole, decompiling a SWF file is not regarded as acceptable.

This raises a rather interesting question: “I have invested a lot of time and money into the development of the SWF file. How do I stop it from being decompiled?” If you use the Flash Media Server 3.5, this is extremely easy.

Here’s how:

1. Create a new Flash CS4 Professional document.
2. Add an FLVPlayback component to the stage and set its source parameter to rtmpe://localhost/vod/mp4:Vultures
3. In the skin parameter, select SkinUnderPlaySeekFullscreen.swf.
4. Add a new layer and add some text to the top of the stage or draw a simple shape into this layer. This text or shape will become massively important at the end of this exercise.
5. Go ahead, test the movie. Everything works well and the text is above the video (see Figure 3).
   

   

   Figure 3. The video playing as expected

   Note: Remember, as I pointed out in a previous installment of this series, you link to MP3 and MP4 files in the vod folder by adding the media type followed by a colon and the file name, without the extension. If the file doesn’t work, check to be sure that you have not added a space between the colon and the file name.

   Protecting the SWF file from theft or decompiling is a really nifty feature of the Flash Media Server 3.5. The thing about this feature is, it is not enabled by default. You are going to need to make a couple of changes to enable it.

   The first change is to the XML file that drives this feature. If you are not terribly comfortable with playing with application files, feel free to copy the file you’ll be changing to the desktop beforehand. This way, if you make any mistakes, you can simply replace the changed file with the original on the desktop.

6. Save the file and navigate to C:\Program Files\Adobe\Flash Media Server 3.5\conf\_defaultRoot_\_defaultVHost_ and open the Application.xml document in the _defaultVHost_ folder.Note: I will be using Dreamweaver CS4 to display the XML. Feel free to use this application or any other text editor to make the changes.
7. Scroll down to line 726. If you don’t have line numbering, simply use swf as the search term and you will be taken to this section.
8. All you need to do now is to change the word false to true, as shown in Figure 4, in the <SWFVerification enabled="false"> tag.
   

   

   Figure 4. Changing the value to true to turn on SWF verification

   Don’t save the file just yet. There is another aspect of this process you need to know.

   You can’t just merrily turn on SWF Verification and expect it to work. You also need to place a copy of the SWF file in a very specific location. If you scroll down through the XML document you will notice there is a <SWFFolder></SWFFolder> tag. If you read the commented text in front of the tag (see Figure 5), you will realize you need to create a folder—the suggested name is SWFs—and place the SWF file you will create into this folder. What will happen is, the server will first go to the folder containing the SWF file and validate that it is, indeed, the correct one.

   

   Figure 5. “Locking down” a SWF file by putting it in a specific folder

9. If you scroll down to the next section of the XML file, you will discover that you can also specify the Flash Player version to be used. Don’t play around here. The only version that can be used is Flash Player 9,0,115 or later. This feature is here in order to accommodate future versions of the Player.
10. Scroll down to the <Cache> tag area. You will see that the SWF file will live—the TTL tag actually means Time To Live—in the cache for 1440 minutes, which is 24 hours. If you think this is a tad long or you are overly paranoid, you can change the value. In fact, change the value to 5. What you have done is to say the SWF file will only live in memory for five minutes (see Figure 6).
    

    

    Figure 6. SWF living in the cache for only five minutes

11. Save the file and quit the application used to edit it.

Having changed the server configuration, you are going to need to restart your FMS 3.5 server. Here’s how:

1. Launch the Flash Media Server Admin Console and, when it opens, click the Manage Servers button.
2. At the bottom of the servers pane are five buttons. The one in the middle, (it looks like a circular arrow; see Figure 7) is the one you need. It is the Restart server or vhost button. Click it. You will be asked if you want to restart the server. Click Restart. This will turn on SWF Verification.
   

   

   Figure 7. Clicking the middle button to restart the server

3. Return to Flash CS4 and publish the Vultures movie. Open the HTML file in a browser. The video won’t play. In fact, what you are supposed to see is the bars. What you are seeing (as shown in Figure is exactly what happens when a SWF file can’t be validated and the server denies the stream.
   

   

   Figure 8. What you see when the SWF file can’t be validated (you’ve done nothing wrong)

4. Now, to get this thing working, you need to copy and paste the SWF file from this project into the folder you pointed to when you were enabling SWFVerification in the Application.xml file. To create that folder, navigate to C:\Program Files\Adobe\Flash Media Server 3.5\applications\vod and create a new folder in the vod folder named SWFs.
5. Get yourself back to the folder containing the HTML file you published and open the HTML file in a browser. The video plays!
6. To really see how this feature rocks the house, return to the Flash project and move the object in layer 2 to another location on the stage, as shown in Figure 9. What you have just done is simulate a “burglar” swiping your SWF file, decompiling it, and otherwise playing with it.
   

   

   Figure 9. The burglar in the house

7. Publish the file using the same name and open the HTML file in a browser. What you will see is shown in Figure 10. Essentially, FMS 3.5 has looked at the current SWF file, headed over to the SWFs folder and asked a simple question: “Does the SWF file in this folder match the SWF file that is currently playing?” The answer is a resounding “No,” and the result is the denial of the connection request.
   

   

   Figure 10. Stream denied because the two SWF files don’t match and can’t be verified

Finally, here are a few details you need to know:

• If you set the <SWFVerification enabled="true"> tag, then you have turned on this feature and all SWF files you create locally will need to be verified. If you don’t think you will ever use this feature, set the value back to false when you finish this tutorial.
• If you leave the verification feature turned on, make sure that every SWF file that uses FMS 3.5 is copied to the SWFs folder. If you don’t, nothing will work—and I suspect Adobe tech support is in for a few irate phone calls.

I have shown you in this article how to work locally. If these two features are critical to you, talk about them with your ISP or FVSS providers regarding what you need to do in order to keep the “burglars out of the house.”

Diedit dan dimodifikasi dari http://www.adobe.com.

Part 3 Using ActionScript 3.0 with Flash Media Server 3.5

Streaming from the vod folder

First, I’ll show you how to stream H.264 video from the vod folder using ActionScript:

1. Download the files used in this article. The MP4 file is one created by the Film and Television Production students at the college where I work.
2. When you unzip the file, copy the Vultures.mp4 file to the Clipboard.
3. Navigate to C:\Program Files\Adobe\Flash Media Server 3.5\applications. Inside this folder you will see a folder named vod. Open it.
4. Open the media folder and paste the video on the clipboard into this folder.
5. Close the open window.

Nothing new here. If you have been following this series, you know the vod folder is seen as a publishing point. To date, all we have done is to simply set the Content Path of the FLVPlayback component to rtmp://localhost/vod/mp4:Vultures and the video plays.

In this tutorial we are going to skip using the FLVPlayback component and, instead, feed the video from the vod folder into a video object on the Stage. Here’s how:

1. Open the H264_StreamVOD.fla file in the sample download. For those of you who have migrated to Flash CS4 Professional, the FLA files can be found in the FlashCS4 folder.
2. When the file opens, you will see I have created the interface for you.
3. The video object with the instance name of “myVideo” is found in the video layer. All you need to do now is to “wire this project up” with ActionScript 3.0. Select the first frame in the actions layer and press the F9 key to open the Actions panel.Note: The video object you use should match the dimensions and/or aspect ratio of the FLV or MP4 file it plays. The default size for a video object on the stage is 160 × 120. This is a 4:3 aspect ratio and works with FLV files that use this ratio. If you are using HD content that uses the common 16:9 aspect ratio, failing to resize the video object will result in a distorted video when it appears in the video object.
4. Click once in the Script pane and enter the following:

   var nc:NetConnection = new NetConnection();
   nc.connect("rtmp://localhost/vod");
   
   var ns:NetStream = new NetStream(nc);

The first line sets up the NetConnection and the second line tells Flash the NetConnection is to the vod folder in FMS 3.5. If you have been using a video object to progressively download a file, you will notice the connection string is the path to the vod folder on the FMS 3.5 server and not a “null” string. In this example, you are working locally with the developer version of FMS 3.5. If you have a commercial account, localhost will be replaced with an actual RTMP address (which is a series of numbers) and there might, or might not, be a path to the vod folder, depending upon your ISP’s unique requirements.

With the connection made and the NetStream established, it’s time to do a little bit of housekeeping and make sure you have successfully connected to the server—also to increase the amount of the video that will be buffered before it streams. Here’s how:

1. Press the Return/Enter key twice and enter the following code:

   nc.onStatus = function(ncObj:Object) {
     trace(ncObj.code);
     if (ncObj.code == "NetConnection.Connect.Success") {
       ns.setBufferTime(2);

   The code starts by using an onStatus event to check if you have successfully connected to FMS 3.5. You do this by by capturing the code string ("NetConnection.Connect.Success") sent to Adobe Flash Player when the SWF connects to FMS 3.5. The trace statement will open the Output panel and actually display that code (see Figure 1) if there has been a successful connection.

   

   Figure 1. Connection code in the Output panel

   If the connection is successful, the setBufferTime() method of the NetStream class is used to put two seconds of video into the buffer. The default buffer value is 0.1 seconds; it’s up to you how big a buffer to set.

2. Press the Return/Enter key and enter the remaining code:

    myVideo.attachVideo(ns);
         ns.play("mp4:Vultures");
       }
   };

   The first line attaches the NetStream to the video object with the instance of myVideo on the Stage. The second uses the NetStream play() method to actually play the video. It is important to note that you need to include the media type, mp4: (including the colon), in the string. Also, because you are using FMS 3.5, you don’t need to add the extension to the video’s name.

   Note: If you were using an FLV file instead, the play string would be "Vultures". You don’t need to add the media type for FLV files.

3. Save and test the movie. There will be a slight delay as two seconds of the video is added to the buffer. When it finishes buffering, you get to visit a nest of baby turkey vultures, as shown in Figure 2.
   

   

   Figure 2. Cute little critters, aren’t they?

Creating a streaming video application

So far, in this series, you have essentially been operating on autopilot and letting FMS 3.5 automatically feed a video stream from the vod folder into the FLVPlayback component or a video object on the Stage. There will come a time when the vod folder is more of a hindrance than an asset, however. Also, the vod folder is a feature of Flash Media Streaming Server. If you are using Flash Media Interactive Server, you will need to know how to create an application that plays from this server.

Actually, it is not terribly mysterious to use, but if you are new to FMS 3.5 it can be a bit confusing. To start with, your publishing point is not a vod folder; it is your applications folder. This folder is placed in the applications folder of FMS 3.5 but it is named by you.

The next big difference is the use of an instance. This has nothing to do with ActionScript. An instance is a specific folder named _definst_ that you must create and into which you place the video or audio files.

In addition, there is usually an .as file in the application folder that contains some relatively simple server-side code. Take a look at what I am talking about:

1. Inside the download folder is a folder called Exercise. Open it. Inside is a folder named BabyVultures. This is the application you will be using.
2. Open this folder and you will see a folder named streams and a file named main.asc (see Figure 3). This file must be named main.asc; it contains the server-side code that makes stuff work.Note: I would like to thank my colleague Lisa Larson-Kelley for the use of this particular main.asc file.
   

   

   Figure 3. Basic folder structure for an FMS application

   An .asc file is created by selecting ActionScript Communication File from the Flash Start Panel in Flash CS4 Professional (see Figure 4) or by selecting File > New and selecting ActionScript Communication File in the New Document dialog box.

   

   Figure 4. Creating an ActionScript communication file in the Flash CS4 start screen

3. Open the main.asc file and you will see how simple this server-side code really is:

   application.onConnect = function(p_client)
   {
     this.acceptConnection(p_client);
   }

   All that this code says is that when the movie start playing, the FMS 3.5 server is ready to accept the connection. This is an extremely simple example of a main.asc file. As you start moving into the realm of shared objects and even the use of custom components, this code can become very complex and run hundreds of lines.

4. Close the open Flash document and open the streams folder. Inside the streams folder is the _definst_ folder. This is where the media gets placed. In this case, if you open _definst_, you will find a copy of the Vultures.mp4 file.

Now that you know how these things are structured, it’s time to put your new knowledge to good use and stream the video:

1. Open the applications folder, C:\Program Files\Adobe\Flash Media Server 3.5\applications, and copy the BabyVultures folder from the Exercise folder to the applications folder. You have just created an application named BabyVultures whose path is C:\Program Files\Adobe\Flash Media Server 3.5\applications\BabyVultures. Now all you need to do is to “wire up” the application.
2. Double-click the H264_StreamApp.fla file in the Exercise folder to open it in Flash CS4 Professional.
3. Click once in the first frame of the actions layer and open the Actions panel.
4. When the Actions panel opens, click once in the Script pane and enter the following code:

   var nc:NetConnection = new NetConnection();
   nc.connect("rtmp://localhost/BabyVultures");
   
   var ns:NetStream = new NetStream(nc);

   The big difference from the previous example is in the NetConnection string in line 2. The publishing point has changed from the vod folder, which you have used in all examples in this series, to BabyVultures, which is the application.

   Note: If you want to add a degree of security or digital rights management (DRM) to this file, change rtmp to rtmpe and you will automatically encrypt the stream.

5. Press the Return/Enter key twice and enter the remaining code:

   nc.onStatus = function(ncObj:Object) {
     trace(ncObj.code);
     if (ncObj.code == "NetConnection.Connect.Success") {
       ns.setBufferTime(2);
       myVideo.attachVideo(ns);
       ns.play("mp4:Vultures");
     }
   };

If you test the movie in Flash at this point (see Figure 5), the video will play. The great thing about the Flash Media Server is that it is “smart.” When the connection is made, it automatically looks for a streams folder. When it finds the folder it then thinks, “Ha! The video found in the ns.play() method is in the _definst_ folder!” It immediately scoots into that folder, finds the video, and tosses it onto the stream.

Figure 5. The code and the application it runs

Diedit dan dimodifikasi dari http://www.adobe.com.