Working cine.io implementation with timecode.

btweller · btweller · commit 8d3d72024e2a · 2014-09-30T17:41:47.000-04:00
diff --git a/cine.io/player.html b/cine.io/player.html
@@ -1,18 +1,53 @@
 <html>
 	<head>
 		<title>Cine.io Player</title>
-		<script src='//cdn.cine.io/cineio.js'>
+		<script src='//cdn.cine.io/cineio.js'></script>
+		<style>
+			#player-wrapper {
+				width: 640px;
+				height: 360px;
+			}
+		</style>
 	</head>
 	<body>
-		<div id="player-example">
+		<div id="player-wrapper">
+			<div id="player-example">
+			</div>
+		</div>
+		<div id="timecode-wrapper">
+			Timecode: <div id="timecode"></div>
+			Timestamp: <div id="timestamp"></div>
 		</div>
 		<script type="text/javascript">
 	  		CineIO.init('19b899e9401d8c2198de7f56f6d066b5');
 			var streamId = '5418ab2b5217670800fb65c3'
 			  , domId = 'player-example';
 
+
+			var without = function(arr, otherArray){
+			  return arr.filter(function(item){
+			    return otherArray.indexOf(item) == -1
+			  })
+			};
+			var knownKeys = ["bandwidth" , "bufferfill", "duration", "height", "qualitylevel", "screenwidth", "transitioning", "width"];
+
+
 			CineIO.play(streamId, domId, function(error, player) {
 				console.log("player ready", error, player);
+
+ 
+				player.onMeta(function(data){
+				  // console.log(without(Object.keys(data.metadata), knownKeys))
+				  // if (without(Object.keys(data.metadata), knownKeys).length > 0){
+				  //   console.log(data)
+				  // }
+				  if (data.metadata.type == 'textdata') {
+				  	document.getElementById('timecode').innerHTML = (data.metadata.timecode / 1000).toFixed(2);
+				  	document.getElementById('timestamp').innerHTML = new Date(data.metadata.timestamp).toString();
+
+				    console.log("TEXT", data.metadata)
+				  }
+				});
 			});
 		</script>
 	</body>
diff --git a/cine.io/publisher.html b/cine.io/publisher.html
@@ -1,11 +1,20 @@
 <html>
 	<head>
 		<title>Cine.io Publisher</title>
-		<script src='//cdn.cine.io/cineio.js'>
+		<script src='//cdn.cine.io/cineio.js'></script>
+		<style>
+		#publisher-example {
+		    width: 640px;
+		    height: 360px;
+		}
+		</style>
 	</head>
 	<body>
 		<div id="publisher-example">
 		</div>
+		<div id="controls">
+			<input id="btnStart" type="button" value="Start" onclick="startPublishing();" />
+			<input id="btnStop" type="button" value="Stop" onclick="stopPublishing();" />
 		<script type="text/javascript">
 	  		CineIO.init('19b899e9401d8c2198de7f56f6d066b5');
 			var streamId = '5418ab2b5217670800fb65c3'
@@ -16,7 +25,12 @@
 			  streamId, password, domId
 			);
 
-			publisher.start();
+			function startPublishing() {
+				publisher.start();
+			}
+			function stopPublishing() {
+				publisher.stop();
+			}
 		</script>
 	</body>
 </html>
