We have designed the OpenTok JavaScript library to be easy for all JavaScript developers to use. But the jQuery OpenTok plugin, created by jQuery developer Jose Torres, could make it even easier to use OpenTok audio-video sessions in your web-based apps.
The plugin is hosted at github.com:
https://github.com/jmtorres/jquery-opentok
Using the jQuery plugin, you can fully integrate OpenTok into your jQuery-based apps.
To use the plug-in, include the OpenTok, jQuery, and jquery.opentok scripts in your HTML page:
<script src="http://staging.tokbox.com/v0.91/js/TB.min.js"></script><br /> <script type="text/javascript" src="jquery-1.5.2.js"></script><br /> <script type="text/javascript" src="jquery.opentok.js"></script>
The most basic example has the OpenTok jQuery plugin create an OpenTok session when the document loads:
var openTokOptions =<br /> {<br /> apiKey: '1127',<br /> sessionId: '17dee92117dee00e96262432b4c6b66c0141150b',<br /> connectionToken: 'devtoken'<br /> }<br /> $(document).ready(function() {<br /> $('#opentok_container').openTok(openTokOptions);<br /> });
The page contains links to connect and publish to the session as well as DIV containers for the published stream and subscriber streams:
<div id="opentok_container" class="opentok-container"><br /> <div id="links"><br /> <a href="#" class="opentok-connect">Connect</a><br /> <a href="#" class="opentok-disconnect">Leave</a><br /> <a href="#" class="opentok-publish">Publish</a><br /> <a href="#" class="opentok-unpublish">Unpublish</a><br /> </div><br /> <div class="opentok-publisher"></div><br /> <div class="opentok-streams"></div><br /> </div>
That’s all the code you need to use the OpenTok jQuery plugin to publish and subscribe to audio-video streams in an OpenTok session.
However, this is the simplest example. The OpenTok jQuery plugin lets you customize the layout and interactions.
The OpenTok jQuery plugin has one method, openTok(). All customization is done in the options object you pass as a parameter to the openTok method. There are a number of settings available in this options object. For example you can use the default wrapper containers for OpenTok streams, and define styles using CSS. Or you can edit the actual HTML used by these containers.
For details, see the docs and basictutorial subdirectories of the OpenTok jQuery plugin project:
https://github.com/jmtorres/jquery-opentok
Thanks again to Jose for creating the jQuery plugin.