How I built Minute Grams: 3 Minute Tutorial

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:

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

You can download the completed file on github