framesMap = eachFrame(src, framerate, -1, 0, {
crossOrigin: 'anonymous',
debug: true
})
every5FramesMap = eachFrameArray(src, framerate, [0, 5, 10, 15], {
crossOrigin: 'anonymous'
})
framesMap.get(frameIdx)
eachFrame = async (src, framerate, limit = -1, start = 0, options = {}) => {
const debugLabel = `eachFrame on ${JSON.stringify({
src,
framerate,
limit,
start,
options
})}`;
if (options.debug) console.time(debugLabel);
// To gain some time, the duration can be passed in the options
const duration =
options.duration === undefined
? await vidvid.info(src, options).then(info => info.duration)
: options.duration;
const numFrames = limit == -1 ? duration * framerate - start : limit;
const framesArray = new Map();
for (let i = start; i < numFrames; i++) {
const t = i / framerate;
framesArray.set(i, await frameAt(src, t, options));
}
if (options.debug) console.timeEnd(debugLabel);
return framesArray;
}
async function eachFrameArray(src, framerate, indexesArray, options = {}) {
const debugLabel = `eachFrameArray on ${JSON.stringify({
src,
framerate,
indexesArray,
options
})}`;
if (options.debug) console.time(debugLabel);
const framesArray = new Map();
for (let i = 0; i < indexesArray.length; i++) {
framesArray.set(
indexesArray[i],
await frameAt(src, indexesArray[i] / framerate, options)
);
}
if (options.debug) console.timeEnd(debugLabel);
return framesArray;
}
d3 = require("d3@5")
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.
