screenshare (mostly) working, closes #19

floe · Feb 2, 2023 · 3d0c285 · 3d0c285
1 parent 94f80db
commit 3d0c285
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 11 deletions.
diff --git a/assets/placeholder.jpg → webclient/placeholder.jpg b/assets/placeholder.jpg → webclient/placeholder.jpg
diff --git a/webclient/stream.html b/webclient/stream.html
@@ -17,9 +17,8 @@
       <!-- button style="grid-column:1;grid-row:1;justify-self:end;height:20px;width:50px;z-index:20" id="wipe">Wipe</button -->
       <canvas style="grid-column:1;grid-row:1;justify-self:end;width:1280px;height:720px;z-index:-10" id="canvas2"></canvas>
       <canvas style="grid-column:1;grid-row:1;justify-self:end;width:640px;height:360px;z-index:-10" id="canvas3"></canvas>
-      <video style="grid-column:1;grid-row:2;justify-self:end;width:1280px;height:720px;z-index:-10" id="stream3"></video>
+      <video style="grid-column:1;grid-row:1;justify-self:end;width:1280px;height:720px;z-index:-20" id="stream3" poster="placeholder.jpg"></video>
     </div>
-    <input type="file" id="fileElem" accept="image/*">Pick me!</input>
     <button id="start">Start Capture</button>
   </body>
 </html>
diff --git a/webclient/stream.js b/webclient/stream.js
@@ -171,7 +171,9 @@ function updateAudioFeedback() {
 
 function drawVideo() {
   c2.drawImage( video3, 0, 0, 1280, 720 );
-  requestAnimationFrame(drawVideo);
+  c2.drawImage( canvas, 0, 0, 1280, 720 );
+  // 15 FPS rate-limiting, cf. https://stackoverflow.com/q/19764018
+  setTimeout( () => { requestAnimationFrame(drawVideo); }, 1000/15 );
 }
 
 function playStream(videoElement, hostname, port, path, configuration, reportErrorCB) {
@@ -280,14 +282,6 @@ window.onload = function() {
   c2.fillStyle = "rgba(0,255,0,255)";
   c2.fillRect(0, 0, canvas2.width, canvas2.height);
 
-  inputelem = document.getElementById("fileElem");
-
-  if (inputelem) inputelem.addEventListener("change", function(e) {
-    const img = new Image(); //document.getElementById("buffer");
-    img.src = URL.createObjectURL(e.target.files[0]);
-    img.onload = () => { URL.revokeObjectURL(img.src); context.drawImage(img,0,0); c2.drawImage(img,0,0); }
-  } );
-
   video3 = document.getElementById("stream3");
   startbtn = document.getElementById("start");