Visualization toolmaker. Founder @observablehq. Creator @d3. Former @nytgraphics. Pronounced BOSS-tock.
Published
Edited
Feb 20, 2022
2 forks
21 stars
video = {
const video = htl.html`<video crossorigin muted autoplay playsinline controls loop src=${await FileAttachment("harriet_n-0-Enhanced-Animated.mp4").url()}>`;
await new Promise(resolve => video.oncanplay = resolve); // wait for the video to be playable
video.width = video.videoWidth; // seems necessary for OpenCV?
video.height = video.videoHeight; // seems necessary for OpenCV?
return video;
}
canvas = {
const canvas = document.createElement("canvas");
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
return canvas;
}
import {cv} from "@mootari/opencv-js"
src = new cv.Mat(video.videoHeight, video.videoWidth, cv.CV_8UC4)
dst = new cv.Mat(video.videoHeight, video.videoWidth, cv.CV_8UC1)
cap = new cv.VideoCapture(video)
function TimeObserver(video) {
return Generators.observe(notify => {
let time, frame;
if (video.requestVideoFrameCallback) {
function tick() {
if (time !== video.currentTime) notify(time = video.currentTime);
frame = video.requestVideoFrameCallback(tick);
}
if (video.paused) notify(video.currentTime);
frame = video.requestVideoFrameCallback(tick);
return () => video.cancelVideoFrameCallback(frame);
} else {
(function tick() {
if (time !== video.currentTime) notify(time = video.currentTime);
frame = requestAnimationFrame(tick);
})();
return () => cancelAnimationFrame(frame);
}
});
}
time = TimeObserver(video)
render = {
time; // whenever the time changes…
cap.read(src);
cv.cvtColor(src, dst, cv.COLOR_RGBA2GRAY, cv.CV_8UC1)
cv.Canny(dst, dst, tmin, tmax, 3);
cv.imshow(canvas, dst);
}
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.
