Guest Post: Do-it-yourself Videos on Causes!

Update: March 13, 2014 – Please note that this blog post references the archiving functionality in our OpenTok 1.0 platform. This feature is no longer being supported. Learn more about archiving using our OpenTok 2.0 platform.

Guest Post written by Kristján Pétursson, Senior Engineer at Causes

While we were redesigning the Causes Wish last year, we very much wanted to let everyone personalize their wish with a video message. Imagine if instead of a big block of text to read, you could see your friend right there and they told you face-to-face why they care about the charity they’re supporting. If a mere picture is worth a thousand words, then 24 frames/second would surely melt the heart of even cynical Uncle Jake who never donates to anything. Sadly, no one offered a recording API that we could drop into a page. YouTube doesn’t expose it, Facebook rolled their own, and building one here would just be too much of a departure from our goals.

But eventually the community provides, and TokBox just announced their archiving API! It’s an addition to their streaming API that lets users record and save videos for playback later. You can drop it anywhere you like, and it Just Works™.

We got to start playing with the API a couple of weeks ago and already have it happily running in production. Now anyone who creates a wish can record a video message, and when you leave someone a card, you can also do it in video form. Within a day there were some fantastic results, and we can’t wait to see what else everyone thinks up. The best features are the ones people can use to do something unexpected, and this one seems ripe for delight.

So how does it work? Like this:

<script type="text/javascript"
<div id="recorder_container"></div>
<script type="text/javascript">
  var manager  = TB.initRecorderManager(API_KEY);  var recorder = manager.displayRecorder(TOKEN, 'recorder_container');</script>

That’s it. Now there’s a recording widget ready to go anywhere you want it. When the videographer is finished, you hear about it:

recorder.addEventListener(TB.ARCHIVE_SAVED, function(evt) {
  var archiveID = evt.archives[0].archiveId;

And then to use the recording elsewhere:

<div id="player_container"></div>
<script type="text/javascript">
  var player = manager.displayPlayer(ARCHIVE, TOKEN, 'player_container');</script>

Tada! Crazy simple, and so far the API has been nothing but fast and reliable In fact, the longest delay (from a user’s perspective) happens while we upload a preview image to S3 (did I mention you can grab screenshots?), which I plan to move to a background task.

If you want to play around with these widgets yourself, check out TokBox’s documentation, and I’ve thrown together a minimal Gist to get you started, which contains a fully functional recorder and player in fewer than 25 lines of HTML and JavaScript.

We’re psyched to see how Causes supporters start to use video, and more generally what people come up with using TokBox’s new API. Do you have any entertaining or clever ideas? Let us know in the comments.

  • Pabloacastillo

    An option to have the interface in spanish to collect histories would be nice.