jonmumm / OpenTok-Plugins

Javascript plug-ins for the OpenTok video chat API

OpenTok Plugins

This is a set of Javascript plugins for the OpenTok API.

_OT.widget

The widget class makes it simple to create a videochat widget similar to the the HTML embed widget seen here.

Here is a basic example that uses the _OT.widget class to create a simple videochat widget in less than a dozen lines of code (open that link in multiple tabs to see how it would work with multiple users).

<div id='widgetContainer' style='background: #222'></div>

<script type='text/javascript'>

	// Set OpenTok variables
	var session = TB.initSession('28757622dbf26a5a7599c2d21323765662f1d436');
	var api_key = '1127';
	var token = 'devtoken';

	var widget = _OT.widget;

	// Initialize the widget and pass it properties
	widget.init(session, 'widgetContainer', { width: '500', height: '400', publisherSize: 'medium', name: 'OpenTok User 123' });

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

</script>

Browse the Samples directory to see how to use the _OT.widget class.

Methods

• init(session, divId, properties)
  Initializes the widget, publishes the users stream, and subscribes to all other streams. This should be called before Session.connect() is called.

  session: OpenTok Session object.
  divId: ID of the DIV that will contain the widget.
  properties: List of properties for changing the display of the widget.

  • width: Width in pixels of the widget (default: 640).
  • height: Height in pixels of the widget (default: 480).
  • publisherSize: Size that the publisher is displayed at. Accepts values 'small', 'medium', and 'large' (default: 'medium').
  • name: String name of the publisher (default: '').
  • autoPublish: Boolean value on whether the widget should start publishing as soon as the session connects (default: true).
  • publishFull: Boolean value on whether the publisher should be shown at full size (true) or in a smaller window in the top left corner (default: false).

• publish(properties)
  Publishes the users stream to the session. You only need to call this if you pass { autoPublish: false } as a property in init().

  properties: List of properties for changing the display of the widget.

  • publisherSize: Size that the publisher is displayed at. Accepts values 'small', 'medium', and 'large' (default: 'medium').
  • name: String name of the publisher (default: '').
  • publishFull: Boolean value on whether the publisher should be shown at full size (true) or in a smaller window in the top left corner (default: false).

• unpublish()
  Unpublishes the users stream.

• destroy()
  Removes all streams from the widget.