25:["$","title",null,{"children":"prova camera 2d 4 | Paolo Andrenacci | Observable"}] 4b:T762,realTimeVideoRecorder = function() { 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(){ console.log('start rec'); startButton.hide(); stopButton.show(); progress.show(); link.hide(); recordedChunks=[]; var fps = 25; var stream = canvas[10].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":"e4160b105d8688e2","slug":"prova-camera-2d-4","title":"prova camera 2d 4","thumbnail":"5eb4d259e69f386e0d5078198594ef2b63a59bb827751d50a5d53fe73f216ae5","access_level":"public","create_time":"$D2023-04-22T18:47:23.255Z","update_time":"$D2023-04-23T10:52:00.560Z","view_time":null,"first_public_time":"$D2023-04-22T18:47:23.255Z","has_unpublished_edits":null,"fork":{"id":"2da8a22207d927ae","slug":"prova-camera-2d-3","title":"prova camera 2d 3","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":1503,"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":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"prova camera 2d 4","cells":[{"id":0,"value":"# prova camera 2d 4","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"div= {\n const div = html`

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1480,"value":"pts(3)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"canvas = {\n let c = [];\n for(var i=0; i<11;i++)\n c[i] = canvasFactory('c'+i);\n $(div).append(c[10]);\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":909,"value":"ctx = canvas.map(x=>x.getContext('2d'))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":877,"value":"function canvasFactory(id) {\n return 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":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":1216,"value":"palette = {let x=html `

`;\n for(var i=0;i<10;i++) {\n let child=html `

`\n $(child).append(canvas[i]);\n $(x).append(child);\n }\n return x; \n}","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}","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":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":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":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