PandaStream is a great new open source video sharing project. It’s still relatively new, but I’ve been having a great time hacking on it and making a couple of video sites for various projects. None of them are done yet, but I did give a workshop on Pandastream today as part of the Electrosmog festival at Eyebeam, so I thought I’d put up a little tutorial.
From the Panda site:
Unlike other video platforms, Panda is not just a service for encoding your videos for the web; Panda handles the whole process. From the upload form to streaming, Panda takes control.
Requirements
You’ll need a few things to get up and running. These instructions are specifically for using the new Beta service that Panda is offering, and storing your videos on AmazonS3. If you aren’t familiar with S3, it’s basically ridiculously cheap dumb (as a bucket) storage. “Dumb”, because it doesn’t run PHP or any other applications or do any of the cool stuff that other web hosts do. It’s just a shitload of storage space in the cloud that costs about 30 cents a month if you are moderately active. So, here is what you should make sure you have before you get started:
- A PandaStream beta account. The signup for this should be right on the front page. This account will provide you with 1 “encoding cloud” – the thing that is going to take care of all of the converting and uploading and stuff. This is a new service, but they are being pretty generous with the beta accounts, so it’s not too tough to get one.
- Amazon S3 account. Here is a tutorial about setting up an S3 account. It is a pretty typical typical signup process. S3 is a protocol LIKE FTP, but it’s NOT FTP. So, there is a chance that your FTP client will support connecting to your S3 account, but you might need to download an app like S3Hub or BucketExplorer.
- An Amazon s3 bucket: Here is a tutorial about creating a bucket. You must give your bucket a unique name.
- A web server running PHP. If you are going to do more complicated stuff like storing views and stuff you will probably want MySQL too — but that is not covered in this tutorial.
keep reading after the break!
Gathering Materials
PandaStream is an open source project that uses a lot of common open source stuff. Gathering this stuff together is an annoying but necessary step. Your panda directory should look like the image on the right after you are done.
- panda_uploader (direct link to zip from github) Unzip the archive – We are only interested in the ‘panda_uploader’ folder, so drag that into your Panda folder and trash the rest.
- panda_client_php (direct link to zip from github) Unzip the archive – we are only interested in ‘panda.php’, so drag that into your Panda folder and trash the rest.
- JWPlayer – the Flash animation that is going to actually play your video. It is equivalent to the “chrome” around a YouTube video – the buttons and stuff that let you stop, play, jump around with the playhead, and even gives you embed code and lets you mail the video to a friend.
- swfobject_2_2.zip – Some JavaScript that generates the embed code for the JWPlayer.
- panda_starter_kit.zip To save you the trouble of creating the files I describe below, I’ve zipped them all up into an archive so you can just download them. Move all of the files inside into your Panda folder. If you don’t care what they do, just skip the “The Files” section and go right down to “Setup”
The Files
header.php
This file connects to the Panda API so that you can upload, get information about your videos, and other good stuff. It also imports the javascript and CSS that is used by PandaStream.
<?php
require_once("panda.php"); // include the Panda API
$panda = new Panda(array(
'api_host' => 'api.pandastream.com',
'cloud_id' => 'your-panda-cloud-id',
'access_key' => 'your-access-key',
'secret_key' => 'your-secret-key',
));
$s3_bucket_name = "your-bucket-name";
?>
<html>
<head>
<title>my.tv</title>
<script src="swfobject/swfobject.js" type="text/javascript"></script>
<script src="http://code.jquery.com/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="panda_uploader/jquery.panda-uploader.min.js" type="text/javascript"></script>
<link href="styles.css" media="screen" rel="stylesheet" type="text/css" />
</head>
<body>
upload.php
You will access this file to upload new videos to your S3 account.
<?php
include("header.php");
$signed_params = $panda->signed_params('POST', '/videos.json');
$json = json_encode($signed_params);
?>
<form action="" method="post">
<span id="upload_button"></span>
<div id="upload_progress" class="panda_upload_progress"></div>
<input type="text" id="upload_filename" class="panda_upload_filename" disabled="true" />
<input type="hidden" name="panda_video_id" id="returned_video_id" />
<input type="submit" value="Upload video" />
<script>
$("#returned_video_id").pandaUploader(<?=$json?>, {
upload_button_id: 'upload_button',
upload_filename_id: 'upload_filename',
upload_progress_id: 'upload_progress',
uploader_dir: 'panda_uploader'
});
</script>
</form>
<?php include("footer.php"); ?>
add_profile.php
<?php
require_once("api.php");
$panda->post('/profiles.json', array(
'title' => 'My custom profile',
'category' => 'desktop',
'extname' => 'mp4',
'width' => 320,
'height' => '240',
'command' => 'ffmpeg -i $input_file$ -f mp4 -b 128k $resolution_and_padding$ -y $output_file',
));
$profiles = $panda->get('/profiles.json');
print_r($profiles);
?>
index.php
<?php
include("header.php");
$videos = json_decode($panda->get('/videos.json'));
foreach($videos as $video):
$panda_encodings = json_decode(@$panda->get("/videos/{$video->id}/encodings.json"));
$encoding = $panda_encodings[0];
?>
<div class="vid_container">
<b><?php echo $video->original_filename; ?></b>
<div id="flash_container_<?php echo $encoding->id ?>">
<?php if($video->status =='success'): ?>
<a href="http://www.macromedia.com/go/getflashplayer">Get the latest Flash Player</a> to watch this video.
<script type="text/javascript">
swfobject.embedSWF(
"mediaplayer-viral/player-viral.swf",
"flash_container_<?php echo $encoding->id ?>",
"<?=$encoding->width ?>",
"<?=$encoding->height ?>",
"9.0.115",
"swfobject/expressInstall.swf", {
file: "http://<?=$s3_bucket_name?>.s3.amazonaws.com/<?=$encoding->id?><?=$encoding->extname?>",
width: <?php echo $encoding->width ?>,
height: <?php echo $encoding->height ?>,
fullscreen: true,
controllbar: 'over'},
{wmode:"transparent",allowfullscreen:"true"},
{align: "top"}
);
</script>
<?php else: ?>
<p><?=$video->status?></p>
<?php endif; ?>
</div>
</div>
<?php endforeach; // end foreach(videos) ?>
<?php include("footer.php"); ?>
Setup
The only thing you really need to do is edit header.php and replace
-
your-panda-cloud-id your-access-keyyour-secret-keyyour-bucket-name
You will find this information on account.pandastream.com.
Once you have inserted your info into header.php, upload everything to your server! Let’s say, for argument, this is http://www.yourdomain.com/panda
Adding an Encoding Profile
In order to upload a video, you have to add at least one encoding profile. This will tell Panda how to re-encode your videos once you upload. There is a full explanation of encoding profiles by the PandaStream guys. If you want to customize the way your videos are encoded, edit your add_profile.php file.
If you are okay with the default, just point your browser to http://yourdomain.com/panda/add_profile.php This will add a profile to your Panda account. You should see some text that looks like this:
[{"created_at":"2010/03/19 17:49:33 +0000","command":"ffmpeg -i $input_file$ -ar 22050 -ab 64k -f flv -b 256k $resolution_and_padding$ -y $output_file$","title":"Flash FLV (Medium)","updated_at":"2010/03/19 17:49:33 +0000","extname":".flv","id":"f9bb8f4f840bb4f4d335ea620b25ad0d","height":240,"width":320}]
Start Uploading!
If all has gone well, you should be able to go to http://www.yourdomain.com/panda/upload.php and see this:
After you have finished uploading a few test videos, head to http://www.yourdomain.com/panda and you should see something like this:
What Next?
If this was useful to you, leave a comment and I will make some more tutorials as I get further with my own Panda projects. This will include:
- using the auto-generated thumbnails
- creating sub-pages for videos
- deleting videos
- adding custom titles
- comments
- view tracking
- what to do if you don’t have CURL installed on your server
2 Comments
Great post.
This was a great tutorial to get started. Thank you for posting.
Im trying to learn how to create a more dynamic video solution, where users can control their own video and set permissions (friends, private, public). I also read that Panda handles streaming across platforms (old browsers, html5, mobile video). Any knowledge you have in these areas would be very helpful.
Hey Wade,
Making a full-fledged video sharing site will require some kind of server-side scripting that goes beyond what the Panda API offers. AFAIK, the panda team has no plans to add user authentication and the like into their codebase. I would recommend looking into basic PHP CMS systems.
Good luck!