OpenTok JS Plugins – Widget

I have began to create a set of OpenTok JavaScript plugins to provide boilerplate solutions for some common use cases.

The first plugin is the _OT.widget, which makes it simple to create a videochat widget similar to the HTML embed widget seen here.


The widget pictured above is produced by the following code:

<div id=’widgetContainer’></div>

<script type=’text/javascript’>

// Set OpenTok variables
var sessionId = ‘28757622dbf26a5a7599c2d21323765662f1d436’;
var api_key = ‘1127’;
var token = ‘devtoken’;

// Get OpenTok objects
var session = TB.initSession(sessionId);
var widget = _OT.widget;

// Initialize the widget
widget.init(session, ‘widgetContainer’);

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


When initialized, the widget will subscribe to all sessions in the stream, publish the users stream to the session, and automatically re-position streams as they are added or removed. You can also pass in a list of properties (e.g. size, name, auto publish, etc.) to change how the widget should behave.

To use the _OT.widget plugin, head over to the GitHub repo where full documentation and more sample code is available.