kdonaldson · August 29, 2015 14:06
diff --git a/tokbox.html b/tokbox.html
 <!DOCTYPE html>
 <html>
 	<head>
 	<title>OpenTok API Sample &#8212; Stand-Alone Archives</title>
 	<link href="/css/demos.css" type="text/css" rel="stylesheet" >
 	<script src="http://static.opentok.com/v1.1/js/TB.min.js" type="text/javascript" charset="utf-8"></script>
 	<script type="text/javascript" charset="utf-8">
 		var recorderManager;
 		var recorder;
 		var player;
 		var recImgData;

 		var API_KEY = ""; // Replace with your API key. See https://dashboard.tokbox.com/projects
 		var TOKEN = ""; // Replace with a generated token that has the moderator role. See https://dashboard.tokbox.com/projects
 		
 		var VIDEO_HEIGHT = 240;
 		var VIDEO_WIDTH = 320;
 		
 		// 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 init() {
 			recorderManager = TB.initRecorderManager(API_KEY);
 			createRecorder();
 		}

 		function createRecorder() {
 			var recDiv = document.createElement('div');
 			recDiv.setAttribute('id', 'recorderElement');
 			document.getElementById('recorderContainer').appendChild(recDiv);
 			recorder = recorderManager.displayRecorder(TOKEN, recDiv.id);
 			recorder.addEventListener('recordingStarted', recStartedHandler);
 			recorder.addEventListener('archiveSaved', archiveSavedHandler);
 		}

 		function getImg(imgData) {
 			var img = document.createElement('img');
 			img.setAttribute('src', 'data:image/png;base64,' + imgData);
 			return img;
 		}

 		function loadArchiveInPlayer(archiveId) {
 			if (!player) {
 				playerDiv = document.createElement('div');
 				playerDiv.setAttribute('id', 'playerElement');
 				document.getElementById('playerContainer').appendChild(playerDiv);
 				player = recorderManager.displayPlayer(archiveId, TOKEN, playerDiv.id);
 				document.getElementById('playerContainer').style.display = 'block';
 			} else {
 				player.loadArchive(archiveId);
 			}
 		}

 		//--------------------------------------
 		//  OPENTOK EVENT HANDLERS
 		//--------------------------------------

 		function recStartedHandler(event) {
 			recImgData = recorder.getImgData();
 		}
 		
 		function archiveSavedHandler(event) {
 			document.getElementById('archiveList').style.display = 'block';
 			var aLink = document.createElement('a');
 			aLink.setAttribute('href',
 								"javascript:loadArchiveInPlayer(\'" + event.archives[0].archiveId + "\')");
 			var recImg = getImg(recImgData);
 			recImg.setAttribute('style', 'width:80; height:60; margin-right:2px');
 			aLink.appendChild(recImg);
 			document.getElementById('archiveList').appendChild(aLink);
 		}

 		function archiveLoadedHandler(event) {
 			archive = event.archives[0];
 			archive.startPlayback();
 		}

 		/*
 		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) {
 			alert('Exception: ' + event.code + '::' + event.message);
 		}

 	</script>
 	</head>
 	<body onload="init()">
 		<div id="recorderContainer" style="float:left; height:340px; width 329px; margin-right:8px;">
 			<p>Recorder:</p>
 		</div>
 		<div id="playerContainer" style="float:left; height:340px; width 320px; display:none">
 			<p>Stand-alone player:</p>
 		</div>
 		<div style="clear:both; margin"></div>
 		<div id="archiveList" style="height:100px; display:none">
 			<p>Recordings (click to play):</p>
 		</div>
 	</body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>OpenTok API Sample — Stand-Alone Archives</title>
	<link href="/css/demos.css" type="text/css" rel="stylesheet" >
	<script src="http://static.opentok.com/v1.1/js/TB.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript" charset="utf-8">
	var recorderManager;
	var recorder;
	var player;
	var recImgData;

	var API_KEY = ""; // Replace with your API key. See https://dashboard.tokbox.com/projects
	var TOKEN = ""; // Replace with a generated token that has the moderator role. See https://dashboard.tokbox.com/projects

	var VIDEO_HEIGHT = 240;
	var VIDEO_WIDTH = 320;

	// 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 init() {
	recorderManager = TB.initRecorderManager(API_KEY);
	createRecorder();
	}

	function createRecorder() {
	var recDiv = document.createElement('div');
	recDiv.setAttribute('id', 'recorderElement');
	document.getElementById('recorderContainer').appendChild(recDiv);
	recorder = recorderManager.displayRecorder(TOKEN, recDiv.id);
	recorder.addEventListener('recordingStarted', recStartedHandler);
	recorder.addEventListener('archiveSaved', archiveSavedHandler);
	}

	function getImg(imgData) {
	var img = document.createElement('img');
	img.setAttribute('src', 'data:image/png;base64,' + imgData);
	return img;
	}

	function loadArchiveInPlayer(archiveId) {
	if (!player) {
	playerDiv = document.createElement('div');
	playerDiv.setAttribute('id', 'playerElement');
	document.getElementById('playerContainer').appendChild(playerDiv);
	player = recorderManager.displayPlayer(archiveId, TOKEN, playerDiv.id);
	document.getElementById('playerContainer').style.display = 'block';
	} else {
	player.loadArchive(archiveId);
	}
	}

	//--------------------------------------
	// OPENTOK EVENT HANDLERS
	//--------------------------------------

	function recStartedHandler(event) {
	recImgData = recorder.getImgData();
	}

	function archiveSavedHandler(event) {
	document.getElementById('archiveList').style.display = 'block';
	var aLink = document.createElement('a');
	aLink.setAttribute('href',
	"javascript:loadArchiveInPlayer(\'" + event.archives[0].archiveId + "\')");
	var recImg = getImg(recImgData);
	recImg.setAttribute('style', 'width:80; height:60; margin-right:2px');
	aLink.appendChild(recImg);
	document.getElementById('archiveList').appendChild(aLink);
	}

	function archiveLoadedHandler(event) {
	archive = event.archives[0];
	archive.startPlayback();
	}

	/*
	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) {
	alert('Exception: ' + event.code + '::' + event.message);
	}

	</script>
	</head>
	<body onload="init()">
	<div id="recorderContainer" style="float:left; height:340px; width 329px; margin-right:8px;">
	<p>Recorder:</p>
	</div>
	<div id="playerContainer" style="float:left; height:340px; width 320px; display:none">
	<p>Stand-alone player:</p>
	</div>
	<div style="clear:both; margin"></div>
	<div id="archiveList" style="height:100px; display:none">
	<p>Recordings (click to play):</p>
	</div>
	</body>
	</html>