add basic video recording on F10 in web runtime

web/src/index.html

@@ -13,8 +13,10 @@
             <a href="https://exoticorn.github.io/microw8">MicroW8</a> 0.1.0
         </div>
         <div id="centered">
-            <canvas id="screen" width="320" height="240"></canvas>
-            <div id="message"></div>
+            <canvas id="screen" width="320" height="240">
+            </canvas>
+        <div id="timer" hidden="true"></div>        
+        <div id="message"></div>
             <button id="cartButton" style="visibility:hidden">Load cart...</button>
         </div>
         <div id="footer">

web/src/main.js

@@ -54,6 +54,12 @@ let keyHandler = (e) => {
                 runModule(currentData);
             }
             break;
+        case 'F10':
+            if(isKeyDown) {
+                recordVideo();
+            }
+            e.preventDefault();
+            break;
     }
 
     if (isKeyDown) {
@@ -220,6 +226,55 @@ async function runModule(data, keepUrl) {
     }
 }
 
+let videoRecorder;
+let videoStartTime;
+function recordVideo() {
+    if(videoRecorder) {
+        videoRecorder.stop();
+        videoRecorder = null;
+        return;
+    }
+
+    videoRecorder = new MediaRecorder(screen.captureStream(), {
+        mimeType: 'video/webm',
+        videoBitsPerSecond: 5000000
+    });
+
+    let chunks = [];
+    videoRecorder.ondataavailable = e => {
+        chunks.push(e.data);
+    };
+
+    let timer = document.getElementById("timer");
+    timer.hidden = false;
+    timer.innerText = "00:00";
+
+    videoRecorder.onstop = () => {
+        timer.hidden = true;
+        let a = document.createElement('a');
+        a.href = URL.createObjectURL(new Blob(chunks, {type: 'video/webm'}));
+        a.download = 'microw8_' + new Date().toISOString() + 'webm';
+        a.click();
+        URL.revokeObjectURL(a.href);
+    };
+
+    videoRecorder.start();
+    videoStartTime = Date.now();
+
+    function updateTimer() {
+        if(!videoStartTime) {
+            return;
+        }
+
+        let duration = Math.floor((Date.now() - videoStartTime) / 1000);
+        timer.innerText = Math.floor(duration / 60).toString().padStart(2, '0') + ':' + (duration % 60).toString().padStart(2, '0');
+
+        setTimeout(updateTimer, 1000);
+    }
+
+    setTimeout(updateTimer, 1000);
+}
+
 async function runModuleFromURL(url, keepUrl) {
     let response = await fetch(url);
     let type = response.headers.get('Content-Type');

web/src/style.css

@@ -48,6 +48,16 @@ a:hover {
     cursor: none;
 }
 
+#timer::before {
+    content: '';
+    display: inline-block;
+    width: 12px;
+    height: 12px;
+    border-radius: 6px;
+    background-color: red;
+    margin-right: 3px;
+}
+
 #message {
     margin-bottom: 8px;
 }