diff --git a/site/content/docs.md b/site/content/docs.md index f06b001..dd48010 100644 --- a/site/content/docs.md +++ b/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. \ No newline at end of file diff --git a/web/src/main.js b/web/src/main.js index 2ba0f0b..80cf704 100644 --- a/web/src/main.js +++ b/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();