Commit 4dfffcb0 authored by Juliusz Chroboczek's avatar Juliusz Chroboczek

WIP canvas

parent a9eabe33
......@@ -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
}
}
......
......@@ -165,6 +165,10 @@ h1 {
min-width: 4em;
}
.whiteboard {
border: 1px solid;
}
.label {
text-align: center;
height: 2em;
......
......@@ -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>
......
......@@ -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) {
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment