Shows you your webcam and records a window or screen

2020-03-06 14:10:30 -07:00 · 2020-03-06 14:10:30 -07:00 · 69bf1c0de6
commit 69bf1c0de6
1 changed files with 131 additions and 0 deletions
--- a/convulse.html
+++ b/convulse.html
@ -0,0 +1,131 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Convulse</title>
+    <style>
+      body {
+        background-color: #000;
+        color: #fff;
+        margin: 0;
+        font-family: sans-serif;
+      }
+      video {
+        height: 100vh;
+        width: 100vw;
+      }
+      #download {
+        display: none;
+      }
+      #toasts {
+        position: fixed;
+        z-index: 2;
+        top: 0;
+        background-color: blue;
+        width: 100%;
+        opacity: 0.3;
+        text-align: center;
+      }
+      video {
+        filter: grayscale(100%);
+      }
+      video.recording {
+        filter: initial;
+      }
+    </style>
+    <script>
+function toast(text, timeout=8000) {
+  let toasts = document.querySelector("#toasts")
+  if (! text) {
+    while (toasts.firstChild) {
+      toasts.firstChild.remove()
+    }
+  } else {
+    let p = document.querySelector("#toasts").appendChild(document.createElement("p"))
+    p.textContent = text
+    if (timeout) {
+      setTimeout(() => p.remove(), timeout)
+    }
+  }
+}
+
+class Convulse {
+  constructor() {
+    this.video = document.querySelector("video")
+    this.dllink = document.querySelector("#download")
+    this.init()
+    this.chunks = []
+  }
+  
+  
+  download(event) {
+    let recording = window.URL.createObjectURL(new Blob(this.chunks, {type: this.recorder.mimeType}))
+    let now = new Date().toISOString()
+    
+    this.dllink.addEventListener('progress', event => console.log(event))
+    this.dllink.href = recording
+    this.dllink.download = "convulse-" + now + ".webm"
+    this.dllink.click()
+  }
+  
+  start() {
+    toast(null)
+    this.chunks = []
+    this.recorder.start(10)
+    this.video.classList.add("recording")
+  }
+  
+  stop() {
+    toast("stopped and downloaded")
+    this.recorder.stop()
+    this.video.classList.remove("recording")
+  }
+  
+  toggle() {
+    if (this.recorder.state == "recording") {
+      this.stop()
+      this.download()
+    } else {
+      this.start()
+    }
+  }
+  
+  async init() {
+    document.querySelector("h1").remove()
+  
+    this.webcam = await navigator.mediaDevices.getUserMedia({video: true})
+    this.video.srcObject = this.webcam
+    this.video.play()
+    this.video.addEventListener("click", event => this.toggle())
+
+    this.desktop = await navigator.mediaDevices.getDisplayMedia({video: {cursor: "always"}})
+    this.recorder = new MediaRecorder(this.desktop, {mimeType: "video/webm"})
+    this.recorder.addEventListener("dataavailable", event => {
+      if (event.data && event.data.size > 0) {
+        this.chunks.push(event.data)
+      }
+    })
+    
+    toast("Click anywhere to start and stop recording")
+  }
+}
+
+function init() {
+  window.app = new Convulse()
+}
+
+if (document.readyState === "loading") {
+  document.addEventListener("DOMContentLoaded", init)
+} else {
+  init()
+}
+    </script>
+  </head>
+  <body>
+    <h1>Convulse: it's sorta like Twitch!</h1>
+    <video>
+      It's too bad about your browser.
+    </video>
+    <div id="toasts"></div>
+    <a id="download"></a>
+  </body>
+</html>