25:["$","title",null,{"children":"Untitled | Paolo Andrenacci | Observable"}] 4b:T746,realTimeVideoRecorder = function(canvas) { var div = html`

` $('').text('RT Video Rec').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(){ console.log('prog intv'); 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; }4c:[] 47:{"id":"199b19a786fababd","slug":"pixor","title":"","thumbnail":"77b3e02c037450fe48e428d9f0f2c220e5c802285cd9e87552bf5954e1cb8b4d","access_level":"public","create_time":"$D2023-04-23T08:08:29.911Z","update_time":"$D2023-04-23T09:57:32.160Z","view_time":null,"first_public_time":"$D2023-04-23T08:08:29.911Z","has_unpublished_edits":null,"fork":{"id":"e4160b105d8688e2","slug":"prova-camera-2d-4","title":"prova camera 2d 4","owner":{"id":"3b42508407aca5a3","login":"zawinul","name":"Paolo Andrenacci"}},"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":1599,"publish_version":null,"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":"","cells":[{"id":0,"value":"pixor","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"show= {\n let canvas = html`\n

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":25,"value":"canvas = {\n let ret = {\n in: canvasFactory('canvas_in'),\n out:canvasFactory('canvas_out')\n }\n //$(div).append(ret.out);\n return ret;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1490,"value":"outbuffer = {\n let outdata = canvas.out.ctx.createImageData(size,size);\n let outpx = outdata.data;\n return { outpx, outdata };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1493,"value":"function transfer() {\n let tstart = new Date().getTime()-t0;\n let sz = size*size;\n let { outpx, outdata } = outbuffer;\n let indata = canvas.in.ctx.getImageData(0,0,size,size);\n let inpx = indata.data;\n for(let adrin=0;adrin`;\n let ctx = c.getContext('2d');\n c.ctx = ctx;\n return c;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":757,"value":"function pt() {\n let x=Math.random();\n let y=Math.random();\n let tx=Math.random();\n let ty=Math.random();\n\n function next() {\n if (Math.random()*400<1) {\n tx=Math.random();\n ty=Math.random();\n }\n x += (tx-x)*.013;\n y += (ty-y)*.013;\n return {x,y};\n }\n function cur() {\n return {x,y};\n }\n return {next,cur}\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1078,"value":"video.videoWidth","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1074,"value":"video=html `

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1076,"value":"initvideo = {\n const constraints = { video: { width: 1280, height: 720, facingMode: 'user' } };\n function onStream(stream) {\n video.srcObject = stream;\n video.play(); \n }\n function onError(error) {\n\t\tconsole.error( 'Unable to access the camera/webcam.', error ); \n }\n navigator.mediaDevices.getUserMedia( constraints ).then(onStream, onError);\n return \"ok\";\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":891,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":336,"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":1304,"value":"import {Panel} from '@zawinul/panel_exp_viewof'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1570,"value":"_ = (await import(\"https://unpkg.com/underscore@1.10.1/modules/index-all.js\"))\n .default","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1333,"value":"PanelCss = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":334,"value":"$4b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4c","stdlib":"1"}} 24:null