Skip to content

Instantly share code, notes, and snippets.

@Solomko2

Solomko2/opentok_multiple_sessions.html

Forked from doomhz/opentok_multiple_sessions.html
Created October 18, 2018 09:05
Show Gist options
  • Save Solomko2/f82416ff440ca0fbda86ab0b63588ef7 to your computer and use it in GitHub Desktop.
Save Solomko2/f82416ff440ca0fbda86ab0b63588ef7 to your computer and use it in GitHub Desktop.
Download ZIP
OpenTok Multiple sessions and one publisher example
Raw
opentok_multiple_sessions.html
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>OpenTok API Sample &#8212; Basic Tutorial</title>
<link href="samples.css" type="text/css" rel="stylesheet" >
<script src="http://staging.tokbox.com/v0.91/js/TB.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<script type="text/javascript" charset="utf-8">
var apiKey = ''; // Replace with your API key. See http://www.tokbox.com/
var sessionId = ''; // Replace with your own session ID. See http://www.tokbox.com/opentok/api/tools/generator
var token = ''; // Replace with a generated token. See http://www.tokbox.com/opentok/api/tools/generator
var session;
var publisher;
var subscribers = {};
function setupSessionData() {
sessionId = document.getElementById("session-id").value;
token = document.getElementById("session-token").value;
}
// Un-comment either of the following to set automatic logging and exception handling.
// See the exceptionHandler() method below.
TB.setLogLevel(TB.DEBUG);
TB.addEventListener("exception", exceptionHandler);
function initSession() {
if (TB.checkSystemRequirements() != TB.HAS_REQUIREMENTS) {
alert("You don't have the minimum requirements to run this application."
+ "Please upgrade to the latest version of Flash.");
} else {
setupSessionData();
session = TB.initSession(sessionId); // Initialize session
// Add event listeners to the session
session.addEventListener('sessionConnected', sessionConnectedHandler);
session.addEventListener('sessionDisconnected', sessionDisconnectedHandler);
session.addEventListener('connectionCreated', connectionCreatedHandler);
session.addEventListener('connectionDestroyed', connectionDestroyedHandler);
session.addEventListener('streamCreated', streamCreatedHandler);
session.addEventListener('streamDestroyed', streamDestroyedHandler);
}
}
function destroySession() {
session.removeEventListener('sessionConnected', sessionConnectedHandler);
session.removeEventListener('sessionDisconnected', sessionDisconnectedHandler);
session.removeEventListener('connectionCreated', connectionCreatedHandler);
session.removeEventListener('connectionDestroyed', connectionDestroyedHandler);
session.removeEventListener('streamCreated', streamCreatedHandler);
session.removeEventListener('streamDestroyed', streamDestroyedHandler);
session = null;
}
//--------------------------------------
// LINK CLICK HANDLERS
//--------------------------------------
/*
If testing the app from the desktop, be sure to check the Flash Player Global Security setting
to allow the page from communicating with SWF content loaded from the web. For more information,
see http://www.tokbox.com/opentok/build/tutorials/helloworld.html#localTest
*/
function connect() {
initSession();
session.connect(apiKey, token);
}
function disconnect() {
session.disconnect();
//stopPublishing();
}
function reconnect() {
disconnect();
setTimeout(function () {
destroySession();
}, 3000);
setTimeout(function () {
connect();
}, 5000);
}
// Called when user wants to start publishing to the session
function startPublishing() {
if (!publisher) {
var parentDiv = document.getElementById("myCamera");
var publisherDiv = document.createElement('div'); // Create a div for the publisher to replace
publisherDiv.setAttribute('id', 'opentok_publisher');
parentDiv.appendChild(publisherDiv);
publisher = TB.initPublisher(apiKey, publisherDiv.id); // Pass the replacement div id
session.publish(publisher);
} else {
session.publish(publisher);
}
}
function stopPublishing() {
if (publisher) {
session.unpublish(publisher);
}
//publisher = null;
}
//--------------------------------------
// OPENTOK EVENT HANDLERS
//--------------------------------------
function sessionConnectedHandler(event) {
// Subscribe to all streams currently in the Session
for (var i = 0; i < event.streams.length; i++) {
addStream(event.streams[i]);
}
}
function streamCreatedHandler(event) {
// Subscribe to the newly created streams
for (var i = 0; i < event.streams.length; i++) {
addStream(event.streams[i]);
}
}
function streamDestroyedHandler(event) {
// This signals that a stream was destroyed. Any Subscribers will automatically be removed.
// This default behaviour can be prevented using event.preventDefault()
event.preventDefault();
for (var i = 0; i < event.streams.length; i++) {
console.log("streamDestroyedHandler");
console.log(event.streams[i]);
if (event.streams[i].connection.connectionId == session.connection.connectionId) {
// Our publisher just stopped streaming
event.preventDefault(); // Don't remove the Publisher from the DOM.
}
}
}
function sessionDisconnectedHandler(event) {
// This signals that the user was disconnected from the Session. Any subscribers and publishers
// will automatically be removed. This default behaviour can be prevented using event.preventDefault()
//publisher = null;
event.preventDefault();
if (event.streams) {
for (var i = 0; i < event.streams.length; i++) {
console.log("sessionDisconnectedHandler");
console.log(event.streams[i]);
removeStream(event.streams[i]);
}
}
}
function connectionDestroyedHandler(event) {
// This signals that connections were destroyed
}
function connectionCreatedHandler(event) {
// This signals new connections have been created.
}
/*
If you un-comment the call to TB.addEventListener("exception", exceptionHandler) above, OpenTok calls the
exceptionHandler() method when exception events occur. You can modify this method to further process exception events.
If you un-comment the call to TB.setLogLevel(), above, OpenTok automatically displays exception event messages.
*/
function exceptionHandler(event) {
console.log("Exception: " + event.code + "::" + event.message);
}
//--------------------------------------
// HELPER METHODS
//--------------------------------------
function addStream(stream) {
// Check if this is the stream that I am publishing, and if so do not publish.
if (stream.connection.connectionId == session.connection.connectionId) {
return;
}
var subscriberDiv = document.createElement('div'); // Create a div for the subscriber to replace
subscriberDiv.setAttribute('id', stream.streamId); // Give the replacement div the id of the stream as its id.
document.getElementById("subscribers").appendChild(subscriberDiv);
subscribers[stream.streamId] = session.subscribe(stream, subscriberDiv.id);
}
function removeStream(stream) {
//var subscriberDiv = document.getElementById(stream.streamId); //
//subscriberDiv.parentNode.removeChild(subscriberDiv)
session.unsubscribe(stream)
subscribers[stream.streamId] = null;
}
function show(id) {
document.getElementById(id).style.display = 'block';
}
function hide(id) {
document.getElementById(id).style.display = 'none';
}
</script>
<div id="links">
<input type="button" value="Connect" id ="connectLink" onClick="javascript:connect()" />
<input type="button" value="Leave" id ="disconnectLink" onClick="javascript:disconnect()" />
<input type="button" value="Start Publishing" id ="publishLink" onClick="javascript:startPublishing()" />
<input type="button" value="Stop Publishing" id ="unpublishLink" onClick="javascript:stopPublishing()" />
<input type="button" value="Reconnect" id ="reconnectLink" onClick="javascript:reconnect()" />
</div>
<div id="myCamera" class="publisherContainer"></div>
<div id="subscribers"></div>
<div>
<label>Session ID</label>
<textarea id="session-id"></textarea>
<br />
<label>Token</label>
<textarea id="session-token"></textarea>
</div>
<script type="text/javascript" charset="utf-8">
show('connectLink');
</script>
<div id="opentok_console"></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment