From f69f2fc6fa9346672e2e669f9ef8c9ae81d114f4 Mon Sep 17 00:00:00 2001 From: Neale Pickett Date: Sat, 7 Mar 2020 19:44:54 -0700 Subject: [PATCH] icon, okay to not allow camera or screengrab --- convulse.css | 3 --- convulse.html | 1 + convulse.js | 61 +++++++++++++++++++++++++++++++------------------- convulse.png | Bin 0 -> 2038 bytes 4 files changed, 39 insertions(+), 26 deletions(-) create mode 100644 convulse.png diff --git a/convulse.css b/convulse.css index 3bf59dc..3ba7407 100644 --- a/convulse.css +++ b/convulse.css @@ -7,9 +7,6 @@ body { canvas { width: 100vw; } -canvas.recording { - filter: initial; -} .hidden { display: none; diff --git a/convulse.html b/convulse.html index ce4e5ed..5c45d27 100644 --- a/convulse.html +++ b/convulse.html @@ -2,6 +2,7 @@ Convulse + diff --git a/convulse.js b/convulse.js index 7b98487..c422b2b 100644 --- a/convulse.js +++ b/convulse.js @@ -49,37 +49,42 @@ class Convulse { document.querySelector("#desktop-pos").addEventListener("click", e => this.setDesktopPos(e)) this.desktopPos = localStorage.desktopPos || 0 - this.init() - } - - async init() { - this.webcamVideo.muted = true - this.webcamVideo.srcObject = await navigator.mediaDevices.getUserMedia({video: true, audio: true}) - this.webcamVideo.play() - - this.desktopVideo.srcObject = await navigator.mediaDevices.getDisplayMedia({video: {cursor: "always"}}) - this.desktopVideo.play() + this.recorder = {state: "unstarted"} - document.querySelector("#hello").classList.add("hidden") - this.mediaStream = new MediaStream() + + navigator.mediaDevices.getUserMedia({video: true, audio: true}) + .then(media => { + console.log(media) + document.querySelector("#hello").classList.add("hidden") + this.webcamVideo.muted = true + this.webcamVideo.srcObject = media + this.webcamVideo.play() + for (let at of media.getAudioTracks()) { + this.mediaStream.addTrack(at) + console.log("Adding audio track", at) + } + }) + .catch(err => { + toast("Couldn't open camera!") + }) + + navigator.mediaDevices.getDisplayMedia({video: {cursor: "always"}}) + .then(media => { + document.querySelector("#hello").classList.add("hidden") + this.desktopVideo.srcObject = media + this.desktopVideo.play() + }) + .catch(err => { + toast("Couldn't open screen grabber!") + }) + let canvasStream = this.canvas.captureStream(30) for (let vt of canvasStream.getVideoTracks()) { this.mediaStream.addTrack(vt) console.log("Adding video track", vt) } - for (let at of this.webcamVideo.srcObject.getAudioTracks()) { - this.mediaStream.addTrack(at) - console.log("Adding audio track", at) - } - this.recorder = new MediaRecorder(this.mediaStream, {mimeType: "video/webm"}) - this.recorder.addEventListener("dataavailable", event => { - if (event.data && event.data.size > 0) { - this.chunks.push(event.data) - } - }) - this.frame() toast("Click anywhere to start and stop recording") @@ -114,14 +119,24 @@ class Convulse { document.querySelector("#indicator").classList.add("hidden") button.textContent = "⏺️" toast("Stopped") + document.title = "Convulse: stopped" this.save() } else { // Start + this.chunks = [] + this.recorder = new MediaRecorder(this.mediaStream, {mimeType: "video/webm"}) + this.recorder.addEventListener("dataavailable", event => { + if (event.data && event.data.size > 0) { + this.chunks.push(event.data) + } + }) + this.recorder.start(10) this.canvas.classList.add("recording") document.querySelector("#indicator").classList.remove("hidden") button.textContent = "⏹️" toast("Recording: click anywhere to stop") + document.title = "Convulse: recording" } } diff --git a/convulse.png b/convulse.png new file mode 100644 index 0000000000000000000000000000000000000000..0057a274c1a72b6ee7eb117812a83eeed844876f GIT binary patch literal 2038 zcmb7EeK?fq9)5?RMxkDkO*U!B(XiQ*eAb4+prhH0gGh|bNNj{y+RV--i-tkIE}Wz^ zHebn6%k&{@8m(GvV?Nf5ZyME(l=Qj1`@HYW{<+t6&UHQWd!G0AyYKsVKhOKTlSd8o z)z{mg2SJd&ABDUh%zfx@r8bDKGfstp374|p*ApkZPs)ZMEq&@YT7L71c18f2s>3@u@ls6mt)uO?!6jR>{|B`{({s30nfu~51MNd$r; z2vdqMWayePq5+_EzycVxB|woPu_CkzzzLXa9Hs{H0H!vKngI&HiCmLG^(6@70rm(y zV>&=VqYPkT)JD`e!UXoPYCPxyl0a%0%Zz9a1ZZj+Vco%w7}!9qVs6zQ)SCqgXbaF< zrrCm~3b;TSYpOmCH5W7muE1WvBib75LW&&4%mWb!(YzWI15QAUB;WfBDMDf~14-i; zQGFWN+hG8t1PQ*Pu?<*&8?Qbz%<#csG@~A%i~6XU;y8Fk4!96)srv(ipig7&h@K$i zYxd{&%-TM_9^M~V`*e+!>-hZ_OFt|6;&;QAd(-L<{c{D2W@F$Kb+Lr>Hc4`FetS;Q z=GlY1=Pu2!Ivonl-@V+Jp!ZAfR{FjYXOj~LR#GZzP0MObf;|)O5vx*$J{+SaWiBUY zEAo}0U1yBR-OmOFr<4V|Vmn5NSISsN|1IApyoUS!EoEkq&_H#wzPqM^o#;7c_h0SQ z_x^K^!xlGJUGjav_-Qh-dgoIiuue##grz``0l4`FeYmo124)b17y6MsXc;xX*D^zl zJdDqLM%2|gXT6+X!m6cvc+>Fsb>4!)Td&!-UXNuh-1^`%z35d^>&EXORCl>O-o43X z;o0qd$DQ3uJKR>Wiiz*I1-7cn z183%(U6rkk?C-qyDgF>Ck31a;NZ;j{DGQsK|BC1TANl4(=}u`c8epC7rXPYVQfx$u z2l_d1o~1${rxJ^mE&NKe%xMEbcUIR$(=z2ne!1JbI{2G3$#LI9wBGfPE}Oo==Ue@1 z7(o5js<8*AMGNajQ1Pj& z!@uBC>#eJ+EeCX9!%f`Tc$glLykTind(Xw%g^qhhzQzDdVAOuff3y$ z^K2f=%5$0OIpagjmFsfG?s447R8=SWQN-cH9hF`SY#-IMy)WJFrF(g05huc8?m&A) zQ)PIg&1eH$Fmz#Rq+Y+EGfxah?w*J&X&=cd#q<pYk_~Ynj~bWm*&JO&=g=y6Suv8|Gw0cM-IuoI@CH0AFR!?SDadL_N zN!RJ3$i*!c&j$y}J$J&q4QU}kzP30XI@w=%gSXd7Al7-My97TY*2UaXWyVYW$&SA$ z?ZKCW-*exd-L|@O!lrnqUMbS3r0h|IX%i=E9!^K!E@nAA*5^V$MzQe`J3O@Pt1NI8 zBg^^qb~u-i)m&DS1O$OZpUW~+jq&}1v?eYSVCi+EkEN{n8=y3r4nqGyZK8!&@_DUa z;iQGzI2dxYrt}yX5oxCa8$QDs7Mfb%3~QH3i{IhhGZR>NcMm6nS5^3)AS2>L6#;%O z#}lOEhgtZW8Am{Pa*TygEjC}a@k_IM7n))H?rm0g-y53bnJ73V zlhZu>iu<}k(c2GJk@S3(tKW-P;Wd5fio_D@6NW=+is1bgh%h^MQ+L6odxMAWczvA> bBg^YQ&m4TlFe^0z|8tO^cObddGm8Bu32`*8 literal 0 HcmV?d00001