add screenshot on F9, increase video rate + docs

site/content/docs.md

@@ -390,3 +390,23 @@ the first function in the file under the name `upd`.
 
 Same as version `01` except everything after the first byte is compressed
 using a [custom LZ compression scheme](https://github.com/exoticorn/upkr).
+
+# The web runtime
+
+[...]
+
+## Video recording
+
+Press F10 to start recording, press again to stop. Then a download dialog will open for the video file.
+The file might miss some metadata needed to load in some video editing tools, in that case you can run
+it through ffmpeg like this `ffmpeg -i IN_NAME.webm -c copy -o OUT_NAME.webm to fix it up.
+
+To convert it to 1280x720, for example for a lovebyte upload, you can use:
+
+```
+ffmpeg -i IN.webm -vf "scale=960:720:flags=neighbor,pad=1280:720:160:0" -r 60 OUT.mp4
+```
+
+## Screenshot
+
+Pressing F9 opens a download dialog with a screenshot.

web/src/main.js

@@ -54,6 +54,14 @@ let keyHandler = (e) => {
                 runModule(currentData);
             }
             break;
+        case 'F9':
+            if(isKeyDown) {
+                screen.toBlob(blob => {
+                    downloadBlob(blob, '.png');
+                });
+            }
+            e.preventDefault();
+            break;
         case 'F10':
             if(isKeyDown) {
                 recordVideo();
@@ -226,6 +234,14 @@ async function runModule(data, keepUrl) {
     }
 }
 
+function downloadBlob(blob, ext) {
+    let a = document.createElement('a');
+    a.href = URL.createObjectURL(blob);
+    a.download = 'microw8_' + new Date().toISOString() + ext;
+    a.click();
+    URL.revokeObjectURL(a.href);
+}
+
 let videoRecorder;
 let videoStartTime;
 function recordVideo() {
@@ -237,7 +253,7 @@ function recordVideo() {
 
     videoRecorder = new MediaRecorder(screen.captureStream(), {
         mimeType: 'video/webm',
-        videoBitsPerSecond: 5000000
+        videoBitsPerSecond: 25000000
     });
 
     let chunks = [];
@@ -251,11 +267,7 @@ function recordVideo() {
 
     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);
+        downloadBlob(new Blob(chunks, {type: 'video/webm'}), '.webm');
     };
 
     videoRecorder.start();