How I built Minute Grams: 3 Minute Tutorial

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.

Minutegrams is a webapp to send video messages via email.
In this tutorial, let’s build a video recorder with the Tokbox API.


Step 1: Include tokbox javascript file

  • Let’s start with our html document, and add jquery and tokbox javascript library.
  • We need ‘rElement’ div to put our recorder in, and ‘pElement’ div to put player in.
<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script src="http://staging.tokbox.com/v0.91/js/TB.min.js"></script>
</head>
<body>
    <div id="rElement"></div>
    <div id="pElement"></div>
</body>
</html>

Step 2: Create a Tokbox recorder Manager object

  • We’ll write this code right after the tokbox library loads.
  • We need our API key to create a recorder manager object, but let’s use ‘1127’ for now. It’s provided by Tokbox for testing.
<script src="http://staging.tokbox.com/v0.91/js/TB.min.js"></script>
<script type="text/javascript">
   $(function(){
     var rManager = TB.initRecorderManager('1127');
   });
</script>

Step 3: Using recorder Manager, display Recorder

  • To display the recorder, we need a token. Let’s use ‘moderator_token’ for now. It’s provided by Tokbox for testing.
$(function(){
  var rManager = TB.initRecorderManager('1127');
  var recorder = rManager.displayRecorder('moderator_token', 'rElement');
});

Run this code. Put it on a server and run it. If you run into any problems, email song@tokbox.com

Step 4: Add an event listener on archiveSaved

  • When the recording is saved, we need to retrieve the archiveId for future playback and download.
  • You would save archiveid into database, but right now let’s print this into console.
$(function(){
  var rManager = TB.initRecorderManager('1127');
  var recorder = rManager.displayRecorder('moderator_token', 'recorderElement');
  recorder.addEventListener( 'archiveSaved', function(event){
    console.log(event.archives[0].archiveId);
  } );
});

Step 5: Now add a player to play that archive.

  • Our player will be put into ‘pElement’ div
  • Call displayPlayer function of recorderManager, passing parameters: archiveId, token, pElement
  • Let’s use my archiveId for now. “3c33d990-e7bd-4fec-ba7a-6af1dfd3e062”
var rManager = TB.initRecorderManager('1127');
var archiveId = "3c33d990-e7bd-4fec-ba7a-6af1dfd3e062";
var player = rManager.displayPlayer( archiveId, "moderator_token" ,"pElement");

That is it for recording videos. Next steps:

  1. Apply for your own api key and generate your own tokens with the server side API.
  2. Store the archive id’s in your database.
  3. Retrieve the download link of the archiveId from your server, so users can download their archive.

You can download the completed file on github