From 3d0c2857a99d96d5e50a2f79d119243664a7972f Mon Sep 17 00:00:00 2001
From: Florian Echtler <floe@butterbrot.org>
Date: Thu, 2 Feb 2023 09:50:49 +0100
Subject: [PATCH] screenshare (mostly) working, closes #19

---
 {assets => webclient}/placeholder.jpg | Bin
 webclient/stream.html                 |   3 +--
 webclient/stream.js                   |  12 +++---------
 3 files changed, 4 insertions(+), 11 deletions(-)
 rename {assets => webclient}/placeholder.jpg (100%)

diff --git a/assets/placeholder.jpg b/webclient/placeholder.jpg
similarity index 100%
rename from assets/placeholder.jpg
rename to webclient/placeholder.jpg
diff --git a/webclient/stream.html b/webclient/stream.html
index f16b51f..0cec36c 100644
--- 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
index 2f7661e..bd1a566 100644
--- 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");