Simple OpenTok Publisher Widget

A few months ago I made an OpenTok JavaScript plug-in that created a simple widget that publishes and subscribes to. Essentially it creates a stripped down version of the basic html embed that allows you to customize things further however you’d like. You can try that widget live here.

This past week Pasha from PuppetSmith.com wanted to create a simple way for the admins on his site to publish a stream and have all non-admins as viewers. You could certainly build this functionality yourself with the full API, but it would be nice to have a quick solution for this common scenario.

As a result, I built in some features to the _OT.widget JavaScript plugin that will handle this scenario. Now, it will handle all publisher/subscriber logic depending on what token you pass it. You can also pass it the publishFull property that will show the publisher in full screen rather than in the corner of the window. With one publisher, this is what the widget looks like:

You can visit the GitHub repo for the plug-in here.

Here is a sample implementation in PHP that generates a token, passes it down to the widget, then initializes.

[sourcecode lang=”php”]

<?php

require_once ‘SDK/API_Config.php’;
require_once ‘SDK/OpenTokSDK.php’;

$apiObj = new OpenTokSDK(API_Config::API_KEY, API_Config::API_SECRET);

// In this case this sessionId is pre-generated and inserted here.
// Alternatively you could generate one and store it in your database.
$sessionId = ‘142d24bb826a0e65ecd4c93b57d0d99f8c4fb3ce’;

// Some logic here to determine who is a publisher
$moderator = true;

// Generate token depending on user permissions
if ($moderator) {
$token = $apiObj->generate_token($sessionId, RoleConstants::PUBLISHER);
} else {
$token = $apiObj->generate_token($sessionId, RoleConstants::SUBSCRIBER);
}
?>
<div id=’widgetContainer’ style=’background: #222′></div>

<script type=’text/javascript’>

// Set OpenTok variables
var session = TB.initSession(‘<?php print $sessionId; ?>’);
var api_key = ‘<?php print API_Config::API_KEY; ?>’;
var token = ‘<?php print $token; ?>’;

var widget = _OT.widget;

// Initialize the widget and pass it properties
widget.init(session, ‘widgetContainer’, { width: ‘500’, height: ‘400’, publishFull: true });

// Connect to the session
session.connect(api_key, token);

</script>

[/sourcecode]

If you have questions on how this works or suggestions on how to improve it, email me at mumm at tokbox.com
Or tweet @jonmumm

GitHub repo here.