25:["$","title",null,{"children":"prova 2d 3 | 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":"16b5227216ab193f","slug":"prova-2d-3","title":"prova 2d 3","thumbnail":"a6a85660751d329a8fbabfd803b628601b0271c1f6d1ac20f5597ae17168157e","access_level":"public","create_time":"$D2023-02-01T17:27:22.438Z","update_time":"$D2023-02-10T11:39:34.181Z","view_time":null,"first_public_time":"$D2023-02-01T17:27:22.438Z","has_unpublished_edits":null,"fork":{"id":"cb2e7b9c06165de0","slug":"prova-2d-2","title":"prova 2d 2","owner":{"id":"3b42508407aca5a3","login":"zawinul","name":"Paolo Andrenacci"}},"stars":0,"starred":false,"owner":{"type":"team","id":"8f312c34120e2497","login":"paoloandrenacci","name":"Paolo Andrenacci","avatar_url":"https://avatars-next.observableusercontent.com/6afb12025151f7f643997ab2f4d1b47d21d89c84205415400758c66fd4058382","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":1261,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"00e56cf4dcae3d7a","login":"paoloandrenacci","name":"Paolo Andrenacci","avatar_url":"https://avatars-next.observableusercontent.com/6afb12025151f7f643997ab2f4d1b47d21d89c84205415400758c66fd4058382","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"00e56cf4dcae3d7a","login":"paoloandrenacci","name":"Paolo Andrenacci","avatar_url":"https://avatars-next.observableusercontent.com/6afb12025151f7f643997ab2f4d1b47d21d89c84205415400758c66fd4058382","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"titling":"auto","title":"prova 2d 3","cells":[{"id":0,"value":"# prova 2d 3","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"{\n const div = html`

`\n function f() {\n render();\n requestAnimationFrame(f);\n }\n div.append(canvas[0]);\n f();\n return div;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1024,"value":"function quad(src, dst) {\n let {w,h} = cfg;\n let c = dst.getContext('2d');\n c.clearRect(0,0,w,h);\n c.save();\n c.scale(.5*w, .5*h);\n c.drawImage(src,0,0,w,h,0,0,1,1);\n c.scale(-1, 1);\n c.drawImage(src,0,0,w,h,-2,0,1,1);\n c.scale(-1, -1);\n c.drawImage(src,0,0,w,h,0,-2,1,1);\n c.scale(-1, 1);\n c.drawImage(src,0,0,w,h,-2,-2,1,1);\n c.restore();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1216,"value":"{let x=html `

`;\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":true,"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}","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":781,"value":"import {adobe} from \"@makio135/give-me-colors\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":849,"value":"import {colorhunt} from \"@makio135/give-me-colors\"","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