45:["$","title",null,{"children":"canvas video recorder step by step | Paolo Andrenacci | Observable"}] 4d:Te2f,saveVideo = (renderCanvas) => { var stopRequest = false; var saveRequest = false; let frame = 0; let capturer; let animationFrame = 0; var started = false; var framerate; var div = html`

step by step recorder

type

framerate

wait...

`; Object.freeze(HTMLVideoElement.prototype); $('.start', div).click(startRecording); $('.sv', div).click(function () { saveRequest = true; }); $('.stop', div).click(function () { saveRequest = stopRequest = true; }); $('.rs', div).click(reset); $('.fr', div).change(function () { framerate = Math.floor($('.fr', div).val()); $('.frshow', div).text('f.rate: ' + framerate); }).trigger('change'); function save() { console.log('onsave'); var format = $('.ty', div).val(); var ext = { jpg: "jpge", png: "png", webm: "webm", "webm-mediarecorder": "webm" }[format]; capturer.save(function (blob) { console.log('on capture save'); var url = URL.createObjectURL(blob); $('.outlink', div).attr('href', url).attr('download', 'output.' + ext).text('download video at frame'+frame); }); } function setEnabled(sel, value) { if (value) $(sel, div).removeAttr('disabled'); else $(sel, div).attr('disabled', 'disabled'); } function stop() { capturer.stop(); started=false; setEnabled('.stop, .rs, .sv', true); setEnabled('.start', true); } function reset() { capturer=undefined; started=false; frame = 0; animationFrame = 0; stopRequest = false; saveRequest = false; setEnabled('.stop, .rs, .sv', false); setEnabled('.start', true); } async function startRecording() { if (started) return; var format = $('.ty', div).val(); var mainResolve; capturer = new ccapture({ format, framerate, verbose: false }); async function render() { if (stopRequest) { stopRequest = false; cancelAnimationFrame(animationFrame); stop(); mainResolve(); } if (saveRequest) { saveRequest = false; save(); } if (started) { const c = await renderCanvas(frame); capturer.capture(c); frame = frame + 1; $('.frame', div).text("F:" + frame); animationFrame = requestAnimationFrame(render); } }; setEnabled('.stop, .rs, .sv', true); setEnabled('.start', false); started = true; capturer.start(); render(); mainResolve = function(){}; // return new Promise((resolve, reject) => { // mainResolve = resolve; // capturer.start(); // return render(); // }); } reset(); return div; }4e:[] 49:{"id":"a1c02df29b90c189","slug":"canvas-video-recorder-step-by-step","title":"canvas video recorder step by step","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2021-01-15T11:20:58.806Z","update_time":"$D2021-01-16T19:40:30.433Z","view_time":null,"first_public_time":"$D2021-01-15T11:37:18.918Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"3b42508407aca5a3","login":"zawinul","name":"Paolo Andrenacci","avatar_url":"https://avatars-next.observableusercontent.com/5cf0f05427bb66405cd76829c2ade969967efb177b4ffefd635433c153ce8f46","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":262,"publish_version":262,"role":null,"authored":false,"authors":[{"type":"individual","id":"ed8740f4700202b7","login":"zawinul","name":"Paolo Andrenacci","avatar_url":"https://avatars-next.observableusercontent.com/5cf0f05427bb66405cd76829c2ade969967efb177b4ffefd635433c153ce8f46","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"ed8740f4700202b7","login":"zawinul","name":"Paolo Andrenacci","avatar_url":"https://avatars-next.observableusercontent.com/5cf0f05427bb66405cd76829c2ade969967efb177b4ffefd635433c153ce8f46","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"canvas video recorder step by step","cells":[{"id":0,"value":"md`# canvas video recorder step by step`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"function drawFrame(frame) {\n console.log('draw '+frame);\n let canvas = $('#the-canvas')[0];\n var w = canvas.width;\n var h = canvas.height;\n var ctx=canvas.getContext('2d');\n var v = (Math.abs(frame)%500)/500;\n ctx.clearRect(0,0,w,h);\n ctx.fillStyle='#ff0000';\n ctx.fillRect(v*(w-20), v*(h-25), 25, 25);\n ctx.fillStyle='#000080';\n ctx.font=\"24px sans-serif\";\n ctx.fillText(\" \"+frame, 10, 30);\n return Promise.resolve(canvas);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"drawLoop = {\n var button = html``;\n $(button).click(startstop);\n var started = false;\n function startstop() {\n started=!started;\n }\n var frame=-1000000;\n while(true) {\n if (started)\n drawFrame(frame++);\n yield button;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":113,"value":"saveVideo(drawFrame)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":111,"value":"$4d","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":93,"value":"ccapture = require('ccapture.js')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"import { jQuery as $ } from \"@ddspog/useful-libs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":188,"value":"html`libero adattamento di observablehq.com/@severo/asynchronous-canvas-recorder`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4e","stdlib":"1"}} 44:null