44:["$","title",null,{"children":"mix 2 video in a canvas | Paolo Andrenacci | Observable"}] 4c:T739,realTimeVideoRecorder = function(canvas) { var div = html`

` $('').text('Real Time Canvas Video Recorder').appendTo(div); var startButton = $('').appendTo(div).css({margin:"0 14px"}).click(onStart); var stopButton = $('').appendTo(div).css({margin:"0 14px"}).hide().click(onStop); var progress = $('progress...').appendTo(div).hide(); var link = $('').appendTo(div).hide(); var recordedChunks = []; var mediaRecorder; var t0; var progressInterval=-1; const now = ()=> new Date().getTime(); function onStart(){ startButton.hide(); stopButton.show(); progress.show(); link.hide(); recordedChunks=[]; var fps = 25; var stream = canvas.captureStream(fps); mediaRecorder = new MediaRecorder(stream, { mimeType: "video/webm; codecs=vp9" }); mediaRecorder.start(); mediaRecorder.ondataavailable = function (event) { //console.log({ondataavailable:event.data}); recordedChunks.push(event.data); }; mediaRecorder.onstop = function (event) { //console.log({onstop:recordedChunks.length}); var blob = new Blob(recordedChunks, { type: "video/webm" }); var url = URL.createObjectURL(blob); link.text("download video").attr('href', url); }; t0=now(); progressInterval = setInterval(function(){ var t=((now()-t0)/1000).toFixed(1); progress.text("time: "+t+" sec"); }, 250); } function onStop(){ startButton.show(); stopButton.hide(); progress.hide(); link.show(); mediaRecorder.stop(); clearInterval(progressInterval); } return div; }4d:[{"id":"34d003d24892da416bbb8bfa0d6e1b0cac2230e385636043ac73ebd51e198030456de9275fe0b45a13210a11192d9ff5e4d3ea3640f344de5d6e5e7ed84b0459","href":"https://static.observableusercontent.com/files/34d003d24892da416bbb8bfa0d6e1b0cac2230e385636043ac73ebd51e198030456de9275fe0b45a13210a11192d9ff5e4d3ea3640f344de5d6e5e7ed84b0459","name":"pano.mp4","type":"video/mp4","lastModified":1625933589999.427,"size":962456},{"id":"b53b065d1cf749fc157450c6cfbcc314b86ee9694ae823493e79ec5da84f0963ee552b1b856819cfca732c6758803cbed2b06c62c51e062863301c73848ca139","href":"https://static.observableusercontent.com/files/b53b065d1cf749fc157450c6cfbcc314b86ee9694ae823493e79ec5da84f0963ee552b1b856819cfca732c6758803cbed2b06c62c51e062863301c73848ca139","name":"StartMenu_Win10.mp4","type":"video/mp4","lastModified":1625934236393.139,"size":125179}] 48:{"id":"5bb90feb020d1bf4","slug":"mix-2-video-in-a-canvas","title":"mix 2 video in a canvas","thumbnail":"8082cc1b36238b4c70db6a9752eff215c951ca12eb68e6af05086edcdb424f21","access_level":"public","create_time":"$D2021-07-10T15:54:33.467Z","update_time":"$D2021-07-10T17:39:17.165Z","view_time":null,"first_public_time":"$D2021-07-10T16:49:00.979Z","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":117,"publish_version":117,"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":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"mix 2 video in a canvas","cells":[{"id":0,"value":"md`# mix 2 video in a canvas`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"canv={\n var h = html`