Merge pull request #3 from danielbwatson/master

Render two canvas slices from one video
JavaPosseRoundup · Mar 26, 2012 · d0aceb3 · d0aceb3
2 parents a28080f + 5c52d33
commit d0aceb3
Show file tree

Hide file tree

Showing 6 changed files with 74 additions and 0 deletions.
diff --git a/build.gradle b/build.gradle
@@ -1,2 +1,4 @@
 apply plugin: 'war'
 apply plugin: 'jetty'
+
+jettyRun.contextPath = '/'
diff --git a/src/main/webapp/demo.html b/src/main/webapp/demo.html
@@ -0,0 +1,18 @@
+<!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="primary"></canvas>
+    <br/>
+    <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,49 @@
+
+(function() {
+	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');
+	$primary = $('#primary');
+	$secondary = $('#secondary');
+	video = $video[0];
+	primary = $primary[0];
+	secondary = $secondary[0];
+
+    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();
+
+})();
diff --git a/src/main/webapp/style/main.css b/src/main/webapp/style/main.css
@@ -0,0 +1 @@
+video { display: none; }
diff --git a/src/main/webapp/video/video.json b/src/main/webapp/video/video.json