WIP canvas

group.go

@@ -285,7 +285,6 @@ func matchUser(user, pass string, users []groupUser) bool {
 	for _, u := range users {
 		if (u.Username == "" || u.Username == user) &&
 			(u.Password == "" || u.Password == pass) {
-			log.Printf("true")
 			return true
 		}
 	}

static/sfu.css

@@ -165,6 +165,10 @@ h1 {
     min-width: 4em;
 }
 
+.whiteboard {
+    border: 1px solid;
+}
+
 .label {
     text-align: center;
     height: 2em;

static/sfu.html

@@ -32,6 +32,9 @@
         <input id="presenterbox" type="checkbox"/ disabled>
         <label for="sharebox">Share screen:</label>
         <input id="sharebox" type="checkbox"/ disabled>
+        <label for="boardbox">Whiteboard:</label>
+        <input id="boardbox" type="checkbox"/>
+        </form>
       </div>
     </div>
 

static/sfu.js

@@ -106,6 +106,11 @@ document.getElementById('sharebox').onchange = function(e) {
     setShareMedia();
 }
 
+document.getElementById('boardbox').onchange = function(e) {
+    e.preventDefault();
+    setBoardMedia();
+}
+
 let localMediaId = null;
 
 async function setLocalMedia() {
@@ -179,7 +184,38 @@ async function setShareMedia() {
     }
 }
 
-function setMedia(id) {
+let boardMediaId = null;
+
+async function setBoardMedia() {
+    if(!getUserPass())
+        return;
+
+    if(!document.getElementById('boardbox').checked) {
+        if(boardMediaId) {
+            up[boardMediaId].close();
+            delete(up[boardMediaId]);
+            delMedia(boardMediaId)
+            boardMediaId = null;
+        }
+        return;
+    }
+    if(!boardMediaId) {
+        let canvas = document.createElement('canvas');
+        canvas.classList.add('whiteboard');
+        canvas.width = 600;
+        canvas.height = 400;
+        let stream = canvas.captureStream(12);
+        boardMediaId = await newUpStream();
+        let c = up[boardMediaId];
+        c.stream = stream;
+        let track = stream.getTracks()[0];
+        c.pc.addTrack(track, stream);
+        await setMedia(boardMediaId, canvas);
+        setupCanvas(canvas);
+    }
+}
+
+function setMedia(id, originalMedia) {
     let mine = true;
     let c = up[id];
     if(!c) {
@@ -199,17 +235,29 @@ function setMedia(id) {
         peersdiv.appendChild(div);
     }
 
-    let media = document.getElementById('media-' + id);
-    if(!media) {
-        media = document.createElement('video');
+    let media;
+    if(originalMedia) {
+        let oldmedia = document.getElementById('media-' + id);
+        if(oldmedia)
+            div.removeChild(oldmedia);
+        media = originalMedia;
         media.id = 'media-' + id;
         media.classList.add('media');
-        media.autoplay = true;
-        media.playsinline = true;
-        media.controls = true;
-        if(mine)
-            media.muted = true;
         div.appendChild(media);
+    } else {
+        media = document.getElementById('media-' + id);
+        if(!media) {
+            media = document.createElement('video');
+            media.id = 'media-' + id;
+            media.classList.add('media');
+            media.autoplay = true;
+            media.playsinline = true;
+            media.controls = true;
+            if(mine)
+                media.muted = true;
+            div.appendChild(media);
+        }
+        media.srcObject = c.stream;
     }
 
     let label = document.getElementById('label-' + id);
@@ -220,7 +268,6 @@ function setMedia(id) {
         div.appendChild(label)
     }
 
-    media.srcObject = c.stream;
     setLabel(id);
 }
 
@@ -229,7 +276,12 @@ function delMedia(id) {
     let peer = document.getElementById('peer-' + id);
     let media = document.getElementById('media-' + id);
 
-    media.srcObject = null;
+    if(media instanceof HTMLMediaElement)
+        media.srcObject = null;
+
+    if(media instanceof HTMLCanvasElement)
+        setupCanvas(null);
+
     mediadiv.removeChild(peer);
 }
 
@@ -284,6 +336,8 @@ function serverConnect() {
             document.getElementById('sharebox').checked = false;
             document.getElementById('sharebox').disabled = true;
             setShareMedia();
+            document.getElementById('boardbox').checked = false;
+            setBoardMedia();
             reject(new Error('websocket close ' + e.code + ' ' + e.reason));
         };
         socket.onmessage = function(e) {
@@ -681,6 +735,69 @@ function chatResizer(e) {
 
 document.getElementById('resizer').addEventListener('mousedown', chatResizer, false);
 
+let canvasCtx = null;
+let canvasDragging = false;
+let canvasUpdater = null;
+const canvasWidth = 4;
+
+function setupCanvas(canvas) {
+    if(canvas == null) {
+        if(canvasUpdater) {
+            clearInterval(canvasUpdater);
+            canvasUpdater = null;
+        }
+        canvasCtx = null;
+        return;
+    }
+    if(canvasCtx)
+        throw new Error('Canvas setup multiple times');
+    canvasUpdater = setInterval(function() {
+        let ctx = canvas.getContext('2d');
+        ctx.fillStyle = 'white';
+        ctx.fillRect(0, 0, 1, 1);
+    }, 1000);
+
+    canvasDragging = false;
+
+    canvasCtx = canvas.getContext('2d');
+    canvasCtx.fillStyle = 'white';
+    canvasCtx.fillRect(0, 0, canvas.width, canvas.height);
+
+    canvasCtx.lineWidth = canvasWidth;
+
+    canvas.onmousedown = canvasStart;
+    canvas.onmousemove = canvasMove;
+    canvas.onmouseup = canvasStop;
+    canvas.onmouseleave = canvasStop;
+}
+
+function canvasStart(e) {
+    if(!canvasCtx)
+        return;
+    canvasDragging = true;
+    canvasCtx.fillStyle = 'black';
+    canvasCtx.beginPath();
+    canvasCtx.arc(e.offsetX, e.offsetY, canvasWidth / 2, 0, Math.PI * 2);
+    canvasCtx.fill();
+    canvasCtx.beginPath();
+}
+
+function canvasStop(e) {
+    if(!canvasCtx)
+        return;
+    canvasCtx.stroke();
+    canvasDragging = false;
+}
+
+function canvasMove(e) {
+    if(!canvasCtx)
+        return;
+    if(!canvasDragging)
+        return;
+    canvasCtx.lineTo(e.offsetX, e.offsetY);
+    canvasCtx.stroke();
+}
+
 async function newUpStream() {
     let id = randomid();
     if(up[id])
@@ -772,6 +889,7 @@ async function doConnect() {
     await serverConnect();
     await setLocalMedia();
     await setShareMedia();
+    await setBoardMedia();
 }
 
 document.getElementById('userform').onsubmit = async function(e) {