Main Page Content
Hosting And Streaming Your Own Videos Securely Using Amazon S Simple Storage Service S3
There's more than one tutorial out there about creating your own Flash video, and a handful that show how to use Amazon's Simple Storage Service (S3) to host them. I discovered recently, rather painfully, that if you want to protect your bandwidth costs by restricting access to the video, the details are sketchy and often conflicting.
This is not the ultimate guide to online video, or even a fairly complete guide to hosting and streaming your own video online. It is, instead, the method I've found which works, start to finish, for me.
Some parameters: I've long ago forgotten my UNIX skills, and my Mac is nearly antique, so my process happens on a Windows XP box. If you'll check your religious preferences at the door, with a little analysis you can probably translate the video conversion process to your chosen temple.
Your hosting, though, must have at least PHP5. One hitch I ran into was that my current Windows hosting has PHP4, the and grief of their 'free' upgrade to a computer built this century isn't worth the hassle. I set up hosting at Charlottezweb.com for $4.99 a month, which comes with all the goodies you'll need, and Jason Saunders as your own personal djinn. That was a plug, a commercial of sorts, because Jason is, as they say, the bomb.
My Equipment
I don't have professional equipment; you don't need it for web video. My pair of JVC Everio GZ-MG130U Hard Disk camcorders have done just fine for me; I wish I had two more to make staging and scene cuts easier.
My computer is a tad underpowered; it's a Dell Precision Workstation 330 with 1GB of RAM; it should have about 4GB. I often work directly from my Cavalry external 1TB USB drive (on, believe it or not, USB, not USB2 or SATA since my computer is too old to offer the faster choices and I haven't been bothered enough by transfer speed to do anything about it.)
I connect to the internet with a 384/128 DSL line which I share with two other people in our office.
Processing the Video
Until I have a newer Mac and Final Cut, I'm using Sony Vegas to edit my video. It's inexpensive ($59) and so far hasn't disappointed me.
Occasionally I separate the video and audio using SUPER (more on that in a moment) and process the audio in Audacity, which is free, and which I've also used for recording all my music demos (I have exactly three professionally recorded tracks, and the real difference on those is the mixing and mastering, not the recording.)
I'm not going to teach you how to process your video from camera output to watchable video. We'll skip ahead to the point where you have the output; whether it's the Windows Movie file (WMV) you created with your software, a raw AVI from your camera, or whatever, SUPER will convert it to a Flash Video file (FLV.)
SUPER (Simplified Universal Player Encoder & Renderer)
You can download the impressively powerful file conversion tool SUPER (I highly recommend you carefully follow their download tutorial. I have no idea why they make it so hard that they need a tutorial just to download it, but it's free and it's good and it's theirs, so I'll live with it.)
Once SUPER opens (on my machine, it can take two full minutes) change selection box #1 to 'FLV/SWF (Flash) and don't touch any other settings.
Open Windows Explorer (I'll pause a moment for one of my favorite rants: since Microsoft named their operating system's navigation tool the same name as their internet navigation tool, this is, remarkably, the place you're most likely to get hung up. Do this: press the Windows key and the letter 'E' on your keyboard at the same time. That's Windows Explorer that pops up. The other one; the one you should never ever use for surfing the web [except when doing your online banking because banks seem to think IE is still the only browser] is Internet Explorer. Ah well.)
Find your video file, and drag it into the large window at the bottom of SUPER. Here's another confusion: it has a clearly labeled space that says in all caps 'Drop a valid multimedia file here'—but that's wrong. They don't mean drag it to where the instruction is written, you drag it to the box below the instruction, which has the headings 'Active', 'FileName', 'Streaming Link' and 'Output Status'
SUPER will now jump back to the center of your screen, no matter where you've dragged it trying to keep it out of the way. Get used to it. If you know a way to make it stay put, please tell me.
Press CTRL and 'T' on your keyboard. SUPER shows the file management window. Tell it where you want the FLV file to land when it's created.
Now, click the first button under the file window, 'Encode (Active Files)' and SUPER, after jumping to mid-screen again, pops up a window asking whether you want a Flash video file (FLV) or ShockWave Flash (SWF) and since I can't help you with processing, embedding, or even understanding ShockWave, we're going with FLV. You can also enter your customized meta tag for the FLV file, according to the instructions, but I never have since I only use this process for private videos and another meta tag wouldn't add much, as far as I can tell.
Now, we wait. SUPER does all kinds of things we'll never understand, and eventually, you have an FLV file.
Uploading to Amazon
Create your Amazon S3 account. Go to http://aws.amazon.com/s3/, follow the link in the upper right 'Create an AWS Account' and follow the instructions. If you really truly get stuck at this point, email me and I'll do my best to help.
Amazon has boundless storage space and bandwidth. There is no charge to create an account, they only charge to use their storage space and bandwidth. It's cheap. Really cheap. For example, I have a pretty high quality (for the web) video that's about 45 minutes long. The FLV file is about 140MB. It cost about once cent for the upload bandwidth. It costs about two cents per month for storage. It will cost almost two and a half cents every time someone streams the entire video.
So, one full cycle (upload, storage for a month, one view) would cost under six cents. And that's what they bill you; my first month, I played around a bit, and got a charge of eight cents on my credit card.
Control
When you stream video or audio on the web, it's pretty simple for the average geek to suss the location of the original file, and link directly to it, either to download or embed on their own site without your knowledge. While I think it's fruitless trying to protect the data itself (if someone can watch your video or listen to your audio, they can capture and copy it and there's nothing on earth you can do to stop them) you should be very concerned about protecting your costs, and here's where it gets sticky.
Most tutorials for using S3 to host video tell you to change the permissions to, essentially, wide open; visible to everyone. That's the easy route, and it's the normal security setting for web files since, y'know, you want to share them with everyone.
You get charged for the bandwidth as it's used. That means that if someone were to (accidentally or maliciously) download your video 1,000 times a day for a month, you'd have nearly $700 US in charges before you saw what was happening. Sure, that's very unlikely, but not impossible. Since a surprise charge of $700 would be tough on most small businesses, let's protect ourselves right up front.
We're in luck. Amazon provides something called Query String Authentication to allow us to essentially password protect our video files.
Please leave the security alone on your FLV files at Amazon. They're set, by default, to allow only you to touch them. That's okay; QSA lets you securely pass your credentials so that the web browser is allowed to touch the video file.
Here's where it gets ugly: implementing QSA is a bear. Despite my fairly strong background in technology and the web, I spent about 40 hours over a period of a month trying to sort it out.
You get to skip over the first 39 hours and just spend the one that actually does something. But first, let's set up our video player, so we have somewhere to send this locked-down video.
Flowplayer
There are quite a few pretty snappy FLV players you can use on your website. If you're not using them for business, that is. Most clearly tell you that they're for personal use only; if you want to use them for business, you pay.
Many people don't. I don't work that way. That's why I went with Flowplayer. As far as I can find, while they definitely have a commercial version, it's a choice, if you want to brand it with your logo and all, not a requirement. If you wanna use their free version for your business video, you're just sharing some free word of mouth advertising for them.
Download and unzip the player, and upload the whole enchilada to the folder you've chosen on your website. While you can share this player among many different folders all over your website, it is left to the reader to sort out pathing and linking and all that. We're just gonna dump it all in the same folder.
The Web Page
Here's the code I'm using; I'll explain it down below.
You can open the code and the walk-through in their own windows to compare them side-by-side.
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 2 "http://www.w3.org/TR/xhtml4/DTD/xhtml1-strict.dtd"> 3 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" > 4 <head> 5 <title>The Title of Your Page Should Be Meaningful to Search Engines & Humans Both</title> 6 <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> 7 <meta name="description" content="Of course, so should your meta description . . ." /> 8 <meta name="keywords" content=" . . . and your keywords." /> 9 <meta name="author" content="Joel D Canfield, Spinhead Web Design" />11 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />12 <meta http-equiv="imagetoolbar" content="no" />13 <link rel="stylesheet" type="text/css" href="yourstylesheet.css" />14 <link rel="shortcut icon" href="favicon.ico" />15 </head>16 <body>17 <?php 18 define("AWS_S3_KEY", "put your real S3 public key here"); 19 define("AWS_S3_SECRET", "put your real S3 secret key here"); 20 $expires = time()+60*60; 21 $bucket = "mybucket"; 22 $resource = "video.flv"; 23 $string_to_sign = "GET{$expires}/{$bucket}/{$resource}"; 24 $signature = urlencode(base64_encode(hash_hmac("sha1", utf8_encode($string_to_sign), AWS_S3_SECRET, TRUE))); 24a $string_to_sign), 24b utf8_encode( 24c "sha1", 24d AWS_S3_SECRET, 24e TRUE 24f hash_hmac( 24g ) 24h base64_encode( 24i ) 24j urlencode( 24k ) 24l ; 25 $authentication_params = "AWSAccessKeyId=".AWS_S3_KEY; 26 $authentication_params.= "&Expires={$expires}"; 27 $authentication_params.= "&Signature={$signature}"; 28 $link = "https://{$bucket}.s3.amazonaws.com/{$resource}?{$authentication_params}"; 29 ?> 30 31 <script type="text/javascript" src="flowplayer-3.1.4.min.js"></script> 32 33 <?php 34 echo "<a href=\"".urlencode($link)."\" id=\"player\"></a>"; 35 ?> 36 <script type="text/javascript"> 37 flowplayer("player", "flowplayer-3.1.3.swf", 38 { 39 clip: 40 { 41 autoPlay: false, 42 autoBuffering: true 43 } 44 }); 45 </script> 4647 </body>48 </html>
Lines 1-16 are pretty standard web stuff. If you're not using that type of header in your web pages, figure out why. The rest is discussed below, line by line:
17 Begins the PHP code
19 Tells the code what your private, never ever let anyone see this Amazon S3 secret key is. Do not type this; copy and paste from Amazon's tool.
20 Your link needs to expire at some point so folks can't just share the page forever. This sets the timeout to one hour from now, sixty seconds times sixty. Adjust as needed.
21 When you created your Amazon account, you created a unique bucket name. Put it here.
22 This is the name of the video file. Please don't use spaces. Spaces are evil on the web.
23 Don't touch this line. It tells the encryption tool important information.
24 This is where the magic happens; your password info is encrypted along with the timeout, so the resulting link is secure. I'll share the tiny bit I know about each step. It actually happens inside out, so we start in the middle and work towards both ends.
24a The magic text string we created in line 23, which is Amazon's required format.
24b To process the string, we first encode it as UTF-8. It's about using characters that won't break later in the process. Look it up.
24c The first parameter of the encryption function. Read painful amounts of info about cryptographic hash functions if you really must.
24d The next parameter of the encryption function, your super-secret Amazon S3 key.
24e Tells the encryption function to output raw binary data instead of, well, something else. I'm gonna have to ask you not to mess with the case, because, especially if you're a Windows user, you'll be amazed to discover that some things on the web are case sensitive. Really. Oh; fine, there's more if you want it.
24f The encryption function is called.
24g The closing paren of the encryption function.
24h And now we do character-encoding using base 64. I do not know why. I barely know what base 64 character-encoding is.
24i The closing paren of the base64 encoding function.
24j And finally, we use PHP's urlencode function to make sure all the characters in our string are web-ready. Don't use htmlentities.
24k The closing paren of the urlencode function, and
24l the magic closing semicolon without which PHP is reduced to a blank white page, driving me mad.
25 The next three lines string together the command S3 needs to see to allow access to the file.
26
27
28 This compiles the bits into a single link.
29 Thus endeth the PHP code.
30
31 This opens the Flowplayer code.
32
33 Back to PHP for a moment.
34 Tell Flowplayer where the file lives by passing it the encrypted secure link we've created. Here's where it got dodgy. Okay, it got downright ugly. Flowplayer chokes on the plus sign (+) when it really shouldn't. The plus sign is a perfectly viable symbol even in a web link, except somewhere along the line it became tradition for it to symbolize a blank space (please see 'Spaces Are Evil' above.) The original code I found used PHP's 'htmlentities' function to make the link web-ready, and it refused to work. Someone on the Flowplayer forum suggested PHP's 'urlencode' function instead, and it was a huge bingo.
35 End the PHP.
36 More Flowplayer code starts.
37 This is the unique ID of the link we created in line 34, and the location of the Flowplayer itself. Since we put it in the same folder as this web page, it's simply the name of the player's SWF file.
38 Opening the Javascript function.
39 Telling Flowplayer what to do with the video clip.
40
41 I hate audio or video that start yelling at me on a web page so I've set 'autostart' to 'false.' You are free to follow my fine example of courteous behaviour.
42 Streaming without buffering is goofy unless your visitors have optical fiber right to their computer.
43 Closing up the Flowplayer parameters
44 and the Flowplayer code
45 and the script that called it.
Lines 46-48 end the web page.
How's That Workin' for Ya?
I'd love to hear feedback on whether this resolved any issues, got you successfully through the process, or left you confused and frustrated. Send me email at joel@spinhead.com and I promise I'll read and respond. If I can help, I will.
© 2009 Joel D Canfield except for the Flowplayer code and the original PHP code; feel free to copy and share this all you like, but if you found it helpful, I'm a sucker for credit.
