aleksandar-b/opentok_multiple_sessions.html

## 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>
	<!DOCTYPE HTML>
	<html lang="en">
	<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8">
	<title>OpenTok API Sample — 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>