vid = {
if(!isFileVid) {
videoSettings;
const vid = html`<video id="vid" autoplay playsinline muted style="visibility:hidden"></video>`;
vid.srcObject = stream;
vid.play(); //used when you have stopped tracks
return vid;
} else {
return html`<video src=${await visibility().then(() => FileAttachment("2024-08-06 19h 00m 53s~6.mp4").url())} autoplay playsinline loop width="360" crossorigin="anonymous" style="visibility:hidden"></video>`;
//FileAttachment("2024-08-06 18h 46m 08s~3.mp4").url())} autoplay playsinline loop width="360" crossorigin="anonymous" style="visibility:hidden"></video>`;
//2024-07-20 11h 13m 39s~2.mp4
//2024-07-20 17h 03m 32s~6.mp4
//2024-07-20 10h 39m 22s~2.mp4
//2024-08-06 18h 56m 10s~6.mp
}
}
h00m53s6 = FileAttachment("2024-08-06 19h 00m 53s~6.mp4")
h00m53s5 = FileAttachment("2024-08-06 19h 00m 53s~5.mp4")
h05m55s3 = FileAttachment("2024-08-06 19h 05m 55s~3.mp4")
h27m40s5 = FileAttachment("2024-08-06 19h 27m 40s~5.mp4")
h11m21s3 = FileAttachment("2024-08-06 19h 11m 21s~3.mp4")
h27m40s4 = FileAttachment("2024-08-06 19h 27m 40s~4.mp4")
h42m43s3 = FileAttachment("2024-08-06 19h 42m 43s~3.mp4")
h46m05s4 = FileAttachment("2024-08-06 19h 46m 05s~4.mp4")
h46m05s3 = FileAttachment("2024-08-06 19h 46m 05s~3.mp4")
h12m42s3 = FileAttachment("2024-08-06 20h 12m 42s~3.mp4")
h46m08s3 = FileAttachment("2024-08-06 18h 46m 08s~3.mp4")
viewof isRecording = Inputs.toggle({label: "Save visualisation", value: false})
tape = {
// webm2mp4;
if(isRecording) {
await vidAudioTrack;
vid.currentTime = 0;
return record(document.getElementById("canvas"), vidAudioTrack, vid.duration * 1000);
}
}
resize = vid.onplaying = function () {
var c = document.getElementById("canvas");
c.width = videoDimensions.width;//;
c.height = vid.videoHeight * (videoDimensions.width/vid.videoWidth);
canvasScale.x = (videoDimensions.width/vid.videoWidth);
canvasScale.y = (videoDimensions.width/vid.videoWidth);
}
function drawVideo() {
var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
//c.width = 360; //vid.videoWidth;
//c.height = vid.videoHeight * (360/vid.videoWidth);
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
ctx.drawImage(vid, 0, 0, ctx.canvas.width, ctx.canvas.height);
let trackerTask = window.tracking.track('#canvas', colors);
// Font options.
var font = "16px sans-serif";
ctx.font = font;
ctx.textBaseline = "top";
/*predictions.forEach(function (prediction) {
var x = prediction.bbox[0];
var y = prediction.bbox[1];
var width = prediction.bbox[2];
var height = prediction.bbox[3];
// Draw the bounding box.
ctx.strokeStyle = "#ffFFFF";
ctx.lineWidth = 1;
ctx.strokeRect(x, y, width, height);
// Draw the label background.
ctx.fillStyle = "#000000";
var textWidth = ctx.measureText(prediction.class + ' ' + Math.floor(prediction.score * 100) + '%').width;
var textHeight = parseInt(font, 10); // base 10
//ctx.fillRect(x, y, textWidth + 4, textHeight + 4);
});
predictions.forEach(function (prediction) {
var x = prediction.bbox[0];
var y = prediction.bbox[1];
// Draw the text last to ensure it's on top.
ctx.fillStyle = "#ffffff";
ctx.fillText(prediction.class + ' ' + Math.floor(prediction.score * 100) + '%', x + 3, y + 3);
});*/
}
//trackerTask = tracking.track('#canvas', colors);
eventsTrack = colors.on('track', function(event) {
if(recording) {
var context = document.getElementById("canvas").getContext("2d");
//context.scale(canvasScale.x, canvasScale.y);
context.globalCompositeOperation = "source-over" ;
event.data.forEach(function(rect) {
if( rect.height > (context.canvas.height/6)) {
context.beginPath();
context.fillStyle = "#00000033";
context.strokeStyle = "#00000033";
context.lineWidth = "12";
const pad = 0;
context.moveTo(rect.x - pad, rect.y + (rect.height/2)); // Create a starting point.
const maxRadius = (pad/2) +(rect.height/2 + rect.width/2)/2;
context.arcTo(rect.x -pad, rect.y -pad, rect.x + (rect.width/2), rect.y -pad, maxRadius); // Create an arc NW
context.arcTo(rect.x + rect.width +pad, rect.y -pad, rect.x + rect.width +pad, rect.y + (rect.height/2), maxRadius); // Create an arc NE
context.arcTo(rect.x + rect.width +pad, rect.y + rect.height +pad, rect.x + (rect.width/2), rect.y + rect.height +pad, maxRadius); // Create an arc SE
context.arcTo(rect.x - pad, rect.y + rect.height +pad, rect.x -pad, rect.y + (rect.height/2), maxRadius); // Create an arc SW
context.lineTo(rect.x - pad, rect.y + (rect.height/2)); // Create a closing point.
//context.fill();
//context.stroke();
}
});
context.globalCompositeOperation = "lighten";
//context.clearRect(0, 0, canvas.width, canvas.height);
event.data.forEach(function(rect) {
// if(recording) {
if( rect.height > (context.canvas.height/6)) context.drawImage(spectrogram, rect.x +(rect.width/2) - (rect.height/6), rect.y +(rect.height/2) - (rect.width * 1), rect.height/3, rect.width * 2);//rect.height/3, rect.width * 2);- (rect.width * 1.75)
// }
});
//context.scale(1, 1);
}
});
colors = {
if(vid) {
window.tracking.ColorTracker.registerColor('fluorescent green', function(r, g, b) {
if (r > 160 && g > 220 && b < 225) { // #E6FF2D (230, 255, 45) 230 245
return true;
}
return false;
});
return new window.tracking.ColorTracker(['fluorescent green']);
}
}
frequencyBins = {
if (!recording) {
//yield null;
return;
}
let audioCtx = new (window.AudioContext || window.webkitAudioContext)();
let an = audioCtx.createAnalyser();
an.fftSize = frequencyBinCount * 32; // just take the low frequencies
//an.smoothingTimeConstant = 0.6;
if(!isFileVid) {
// Turn on the microphone.
let mic = await navigator.mediaDevices.getUserMedia({ audio: {deviceId: audioSelect ? {exact: audioSelect} : undefined}, video: false });
// When this cell is invalidated, turn off the microphone so we stop recording.
// (The recording indicator in the tab should disappear.)
//invalidation.then(function () {
// mic.getTracks()[0].stop();
// });
let micNode = audioCtx.createMediaStreamSource(mic);
micNode.connect(an);
} else {
let vidNode = audioCtx.createMediaElementSource(vid);
vidNode.connect(an);
an.connect(audioCtx.destination);
}
invalidation.then(() => audioCtx.close());
// Return new frequency data once per animation frame.
let bins = new Float32Array(frequencyBinCount);
while(true) {
an.getFloatFrequencyData(bins);
yield bins;
}
}
//awaiter = require('webm-duration-fix@1.0.4/lib/index.js').catch(() => window["__awaiter"])
//generator = require('webm-duration-fix@1.0.4/lib/index.js').catch(() => window["__generator"])
//ebml_1 = require('webm-duration-fix@1.0.4/lib/index.js').catch(() => window["ebml_1"])
//fwmd = import('https://cdn.skypack.dev/webm-duration-fix@1.0.4?min')//require('webm-duration-fix@1.0.4/lib/index.js').catch(() => window["fixWebmDuration"])
//exports = window.exports = {}
//commonJs = import('https://cdn.skypack.dev/common-js@0.3.8?min')
//fwmd = require('webm-duration-fix@1.0.4/lib/index.js').catch(() => window["__awaiter"])
/*fwmd = {
var exports = window.exports = {"__esModule": true}; //await import('https://cdn.skypack.dev/exports@0.0.1?min');
return require('webm-duration-fix@1.0.4/lib/index.js').catch(() => window["__awaiter"])
}*/
webm2mp4 = require('webm2mp4-js@1.0.1/index.js').catch(() => window["webmtomp4"])
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
