Render two canvas slices from one video

Author: danielbwatson

build.gradle

@@ -1,2 +1,4 @@
 apply plugin: 'war'
 apply plugin: 'jetty'
+
+jettyRun.contextPath = '/'

src/main/webapp/demo.html

@@ -8,10 +8,9 @@
         <source src="video/video.webm" type='video/webm; codecs="vp8, vorbis"' />
     </video>
     <br/>
-    <canvas id="buffer"></canvas>
     <canvas id="primary"></canvas>
+    <br/>
     <canvas id="secondary"></canvas>
-
     <script src="js/jquery.js"></script>
     <script src="js/main.js"></script>
   </body>

src/main/webapp/js/main.js

@@ -1,26 +1,49 @@
 
 (function() {
-	var $video, $buffer, $primary, $secondary, video, buffer, primary, secondary, bufferCtx, primaryCtx, secondaryCtx;
+	var $video, $buffer, $primary, $secondary, video, buffer, primary, secondary, bufferCtx, primaryCtx, secondaryCtx,
+			initializeCanvases, config;
+
+//    var getResult = $.getJSON('/video/video.json');
+//
+//
+//    console.log(getResult);
+//    var configText = getResult.responseText;
+//    console.log(configText);
+//    config = jQuery.parseJSON(configText);
+
+
+    config = { "primary": { "x": 0, "y": 0, "w": 1200, "h": 720 }, "secondary": { "x": 1200, "y": 480, "w": 320, "h": 240 } };
 	$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();
+    initializeCanvases = function () {
+        var renderFrame;
+        primaryCtx = primary.getContext('2d');
+        secondaryCtx = secondary.getContext('2d');
+
+        primary.height = config.primary.h;
+        primary.width = config.primary.w;
+        secondary.width = config.secondary.w;
+        secondary.height = config.secondary.h;
+
+        renderFrame = function() {
+
+            // Render a slice into the primary canvas.
+            primaryCtx.drawImage(video, config.primary.x, config.primary.y, config.primary.w, config.primary.h, 0, 0,
+                    config.primary.w, config.primary.h);
+
+            secondaryCtx.drawImage(video, config.secondary.x, config.secondary.y, config.secondary.w,
+                    config.secondary.h, 0, 0, config.secondary.w, config.secondary.h);
+        };
+        setInterval(renderFrame, 30);
+
+    };
+    $video.bind('canplay', initializeCanvases);
+
+    video.play();
 
 })();