improve size of video

README.md

@@ -4,6 +4,10 @@ A work-in-progress project for 35C3 (from an idea by itec)
 
 Still not much to see here: the UI still sucks and very little feedback is given.
 
+# Requirements
+
+* Python 3
+* Mastodon.py: https://github.com/halcy/Mastodon.py
 
 # Run
 

static/css/sb.css

@@ -1,4 +1,6 @@
 #canvas-container {
+    min-width: 640px;
+    min-height: 480px;
     position: relative;
     display: none;
 }
@@ -8,15 +10,13 @@
 }
 
 #sb-video {
-    width: 640px;
-    height: 480px;
-    position: relative;
+    position: absolute;
+    top: 0px;
+    left: 0px;
     z-index: 100;
 }
 
 #sb-canvas {
-    width: 640px;
-    height: 480px;
     position: absolute;
     top: 0px;
     left: 0px;
@@ -26,14 +26,9 @@
 
 #sb-message {
     visibility: hidden;
-}
-
-/*
-#sb-message-text {
-    position: absolute;
-    left: 10px;
-    bottom: 20px;
     z-index: 10000;
 }
-*/
 
+.btn {
+    margin-right: 10px;
+}

static/index.html

@@ -32,13 +32,13 @@
             </div>
 
             <div class="row">
+                <div id="sb-message">
+                    <span id="sb-message-text">will be gone in few seconds!</span>
+                </div>
                 <div id="canvas-container">
                     <video id="sb-video" autoplay="true" muted="muted"></video>
                     <canvas id="sb-canvas"></canvas>
                 </div>
-                <div id="sb-message">
-                    <span id="sb-message-text">will be gone in few seconds!</span>
-                </div>
             </div>
         </div>
     </body>

static/js/sb.js

@@ -52,7 +52,8 @@ var countdown = {
 function runCamera(stream) {
     console.log("initialize the camera");
     var video = document.querySelector("#sb-video");
-    video.width = video.offsetWidth;
+    var container = document.querySelector("#canvas-container");
+    container.width = video.videoWidth;
     video.onloadedmetadata = function() {
         video.play();
     };
@@ -134,8 +135,12 @@ function takePhoto() {
     document.querySelector("#sb-message").style.visibility = "visible";
     var video = document.querySelector("#sb-video");
     var canvas = document.querySelector("#sb-canvas");
-    var tmpCanvas = document.createElement("canvas");
+    var context = canvas.getContext("2d");
+    canvas.width = video.offsetWidth;
+    canvas.height = video.offsetHeight;
  
+    /*
+    var tmpCanvas = document.createElement("canvas");
     tmpCanvas.width = video.offsetWidth;
     tmpCanvas.height = video.offsetHeight;
 
@@ -146,10 +151,11 @@ function takePhoto() {
     canvas.width = canvas.offsetWidth;
     canvas.height = canvas.offsetHeight;
     canvas.style.height = parseInt(canvas.offsetWidth * tmpRatio);
-    var context = canvas.getContext("2d");
     var scale = canvas.width / tmpCanvas.width;
     context.scale(scale, scale);
     context.drawImage(tmpCanvas, 0, 0);
+    */
+    context.drawImage(video, 0, 0, video.offsetWidth, video.offsetHeight);
     document.querySelector("#send-photo-btn").classList.remove("disabled");
     document.querySelector("#cancel-photo-btn").classList.remove("disabled");
     countdown.start(5, cancelPhoto, updateSendCountdown);