Render canvas buffer copy of video tag

danielbwatson · danielbwatson · commit 02daddec663e · 2012-03-26T14:32:33.000-06:00
diff --git a/src/main/webapp/demo.html b/src/main/webapp/demo.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+  <head>
+      <link rel="stylesheet" type="text/css" href="style/main.css" />
+  </head>
+  <body>
+    <video controls>
+        <source src="video/video.webm" type='video/webm; codecs="vp8, vorbis"' />
+    </video>
+    <br/>
+    <canvas id="buffer"></canvas>
+    <canvas id="primary"></canvas>
+    <canvas id="secondary"></canvas>
+
+    <script src="js/jquery.js"></script>
+    <script src="js/main.js"></script>
+  </body>
+</html>
+
diff --git a/src/main/webapp/js/jquery.js b/src/main/webapp/js/jquery.js
diff --git a/src/main/webapp/js/main.js b/src/main/webapp/js/main.js
@@ -0,0 +1,26 @@
+
+(function() {
+	var $video, $buffer, $primary, $secondary, video, buffer, primary, secondary, bufferCtx, primaryCtx, secondaryCtx;
+	$video = $('video');
+	$buffer = $('#buffer');
+	$primary = $('#primary');
+	$secondary = $('#secondary');
+	video = $video[0];
+	buffer = $buffer[0];
+	primary = $primary[0];
+	secondary = $secondary[0];
+
+	$video.bind('canplay', function() {
+		bufferCtx = buffer.getContext('2d');
+		primaryCtx = primary.getContext('2d');
+		secondaryCtx = secondary.getContext('2d');
+		buffer.height = video.videoHeight;
+		buffer.width = video.videoWidth;
+		setInterval(function() {
+			bufferCtx.drawImage(video, 0, 0);
+		}, 30);
+	});
+
+	video.play();
+
+})();
diff --git a/src/main/webapp/style/main.css b/src/main/webapp/style/main.css
@@ -0,0 +1 @@
+video { display: none; }
