brianng/opentok-harness.html

## opentok-harness.html
<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script src="http://staging.tokbox.com/v0.91/js/TB.min.js"></script>
    <script type="text/javascript">

    function log(message) {
      console.log(message);
      $("#console").append("<p>" + message + "</p>");
    }

    $(document).ready(function() {

      TB.addEventListener("exception", function(e) {
        log("TB:exception");
        log(e);
      });

      var apiKey = 2422442;
      deviceManager = TB.initDeviceManager(apiKey);
      deviceManager.addEventListener("devicesDetected", function(e) {
        var cameras = [];
        for (var i = 0; i < e.cameras.length; i++) {
          cameras.push(e.cameras[i].name);
        }
        log("deviceManager:devicesDetected:[" + cameras + "]");
        console.log(e.cameras);
      });
      deviceManager.detectDevices();

      var sessionId = "15aec656536dd7bdb020743054b0e658d6584d13";
      var session = TB.initSession(sessionId);

      session.addEventListener("archiveClosed", function(e) {
        log("session:archiveClosed");
      });

      session.addEventListener("archiveCreated", function(e) {
        log("session:archiveCreated");
      });

      session.addEventListener("archiveLoaded", function(e) {
        log("session:archiveLoaded");
      });

      session.addEventListener("connectionCreated", function(e) {
        log("session:connectionCreated");
      });

      session.addEventListener("connectionDestroyed", function(e) {
        log("session:connectionDestroyed");
      });

      session.addEventListener("sessionConnected", function(e) {
        log("session:sessionConnected");
        log("session.connection.quality.downBandwith: " + session.connection.quality.downBandwidth + " kbps");
        log("session.connection.quality.latency: " + session.connection.quality.latency + " ms");
        log("session.connection.quality.upBandwidth: " + session.connection.quality.upBandwidth + " kbps");
      });

      session.addEventListener("sessionDisconnected", function(e) {
        log("session:sessionDisconnected");
        session.cleanup();
      });

      session.addEventListener("sessionRecordingInProgress", function(e) {
        log("session:sessionRecordingInProgress");
      });

      session.addEventListener("sessionRecordingStarted", function(e) {
        log("session:sessionRecordingStarted");
      });

      session.addEventListener("sessionRecordingStopped", function(e) {
        log("session:sessionRecordingStopped");
      });

      session.addEventListener("sessionRecordingNotRecording", function(e) {
        log("session:sessionRecordingNotRecording");
      });

      session.addEventListener("signalReceived", function(e) {
        log("session:signalReceived");
      });

      session.addEventListener("streamCreated", function(e) {
        log("session:streamCreated");
      });

      session.addEventListener("streamDestroyed", function(e) {
        log("session:streamDestroyed");
        $("#video").append('<div id="tokbox">');
      });

      session.addEventListener("streamPropertyChanged", function(e) {
        log("session:streamPropertyChanged");
      });

      session.addEventListener("streamRecordingInProgress", function(e) {
        log("session:streamRecordingInProgress");
      });

      session.addEventListener("streamRecordingStarted", function(e) {
        log("session:streamRecordingStarted");
      });

      session.addEventListener("streamRecordingStopped", function(e) {
        log("session:streamRecordingStopped");
      });

      log("Calling session.connect...");
      session.connect(apiKey, "devtoken", { detectConnectionQuality: 1 });

      var publisher;

      $("#publish").click(function() {
        log("Calling session.publish...");
        publisher = session.publish('tokbox');

        publisher.addEventListener("accessAllowed", function(e) {
          log("publisher:accessAllowed");
        });

        publisher.addEventListener("accessDenied", function(e) {
          log("publisher:accessDenied");
        });

        publisher.addEventListener("deviceInactive", function(e) {
          log("publisher:deviceInactive");
        });

        publisher.addEventListener("echoCancellationModeChanged", function(e) {
          log("publisher:echoCancellationModeChanged: " + publisher.getEchoCancellationMode());
        });

        publisher.addEventListener("resize", function(e) {
          log("publisher:resize");
        });

        publisher.addEventListener("settingsButtonClick", function(e) {
          log("publisher:settingsButtonClick");
        });
      });

      $("#unpublish").click(function() {
        session.unpublish(publisher);
      });

    });

    </script>
    <style type="text/css">
      #video, #tokbox { background: #eeeeee; width: 264px; height: 198px; }
      #console { font-family: monospace; }
    </style>
  </head>
  <body>
    <div id="video">
      <div id="tokbox"></div>
    </div>
    <div id="publish">[ publish ]</div>
    <div id="unpublish">[ unpublish ]</div>
    <div id="console"></div>
  </body>
</html>
	<html>
	<head>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
	<script src="http://staging.tokbox.com/v0.91/js/TB.min.js"></script>
	<script type="text/javascript">

	function log(message) {
	console.log(message);
	$("#console").append("<p>" + message + "</p>");
	}

	$(document).ready(function() {

	TB.addEventListener("exception", function(e) {
	log("TB:exception");
	log(e);
	});

	var apiKey = 2422442;
	deviceManager = TB.initDeviceManager(apiKey);
	deviceManager.addEventListener("devicesDetected", function(e) {
	var cameras = [];
	for (var i = 0; i < e.cameras.length; i++) {
	cameras.push(e.cameras[i].name);
	}
	log("deviceManager:devicesDetected:[" + cameras + "]");
	console.log(e.cameras);
	});
	deviceManager.detectDevices();

	var sessionId = "15aec656536dd7bdb020743054b0e658d6584d13";
	var session = TB.initSession(sessionId);

	session.addEventListener("archiveClosed", function(e) {
	log("session:archiveClosed");
	});

	session.addEventListener("archiveCreated", function(e) {
	log("session:archiveCreated");
	});

	session.addEventListener("archiveLoaded", function(e) {
	log("session:archiveLoaded");
	});

	session.addEventListener("connectionCreated", function(e) {
	log("session:connectionCreated");
	});

	session.addEventListener("connectionDestroyed", function(e) {
	log("session:connectionDestroyed");
	});

	session.addEventListener("sessionConnected", function(e) {
	log("session:sessionConnected");
	log("session.connection.quality.downBandwith: " + session.connection.quality.downBandwidth + " kbps");
	log("session.connection.quality.latency: " + session.connection.quality.latency + " ms");
	log("session.connection.quality.upBandwidth: " + session.connection.quality.upBandwidth + " kbps");
	});

	session.addEventListener("sessionDisconnected", function(e) {
	log("session:sessionDisconnected");
	session.cleanup();
	});

	session.addEventListener("sessionRecordingInProgress", function(e) {
	log("session:sessionRecordingInProgress");
	});

	session.addEventListener("sessionRecordingStarted", function(e) {
	log("session:sessionRecordingStarted");
	});

	session.addEventListener("sessionRecordingStopped", function(e) {
	log("session:sessionRecordingStopped");
	});

	session.addEventListener("sessionRecordingNotRecording", function(e) {
	log("session:sessionRecordingNotRecording");
	});

	session.addEventListener("signalReceived", function(e) {
	log("session:signalReceived");
	});

	session.addEventListener("streamCreated", function(e) {
	log("session:streamCreated");
	});

	session.addEventListener("streamDestroyed", function(e) {
	log("session:streamDestroyed");
	$("#video").append('<div id="tokbox">');
	});

	session.addEventListener("streamPropertyChanged", function(e) {
	log("session:streamPropertyChanged");
	});

	session.addEventListener("streamRecordingInProgress", function(e) {
	log("session:streamRecordingInProgress");
	});

	session.addEventListener("streamRecordingStarted", function(e) {
	log("session:streamRecordingStarted");
	});

	session.addEventListener("streamRecordingStopped", function(e) {
	log("session:streamRecordingStopped");
	});

	log("Calling session.connect...");
	session.connect(apiKey, "devtoken", { detectConnectionQuality: 1 });

	var publisher;

	$("#publish").click(function() {
	log("Calling session.publish...");
	publisher = session.publish('tokbox');

	publisher.addEventListener("accessAllowed", function(e) {
	log("publisher:accessAllowed");
	});

	publisher.addEventListener("accessDenied", function(e) {
	log("publisher:accessDenied");
	});

	publisher.addEventListener("deviceInactive", function(e) {
	log("publisher:deviceInactive");
	});

	publisher.addEventListener("echoCancellationModeChanged", function(e) {
	log("publisher:echoCancellationModeChanged: " + publisher.getEchoCancellationMode());
	});

	publisher.addEventListener("resize", function(e) {
	log("publisher:resize");
	});

	publisher.addEventListener("settingsButtonClick", function(e) {
	log("publisher:settingsButtonClick");
	});
	});

	$("#unpublish").click(function() {
	session.unpublish(publisher);
	});

	});

	</script>
	<style type="text/css">
	#video, #tokbox { background: #eeeeee; width: 264px; height: 198px; }
	#console { font-family: monospace; }
	</style>
	</head>
	<body>
	<div id="video">
	<div id="tokbox"></div>
	</div>
	<div id="publish">[ publish ]</div>
	<div id="unpublish">[ unpublish ]</div>
	<div id="console"></div>
	</body>
	</html>