Software engineer at Hugging Face. Prototyping here with JS, d3, three.js.
Published
Edited
Apr 16, 2020
3 stars
Hello ffmpeg.wasmHello SheetJSInteger To English Wordsuuid and nanoidUsing Less.js in Observable [Sync Version]object-fitHello geo2rectHello pepjsHello Cloudinary UploadHello interact.jsHello d3-gridding layoutsHello pixelitHello vidvid-infoHello deep-weak-mapHello Picture-in-PictureHello preserveAspectRatioHello AutomergeHello socket.ioHello lz-stringHello tableschema
Hello frameAt
Also listed in…
Video
// Frame at time 5s
frameAt(
"https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4",
5
)
// If no time is provided, t=0 is used
frameAt(
"https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4"
)
{
// If you need various frames, call frameAt several times
// Reload the cell: it should be instantaneous because the images are cached (memoized)
const src =
"https://raw.githubusercontent.com/mdn/interactive-examples/master/live-examples/media/cc0-videos/flower.mp4";
const canvasArr = await Promise.all(
new Array(50)
.fill(0)
.map((_, i) => frameAt(src, i / 5, { crossOrigin: 'anonymous' }))
);
return html`${canvasArr.map(
canvas => html`<img width='100' src="${canvas.toDataURL("image/jpeg")}" />`
)}`;
}
// Should error because archive.org does not allow CORS ({ crossOrigin: 'anonymous' })
// But CORS is necesary to use toDataURL, so no luck here if we want to include the canvas into images
{
const src =
"https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4";
const canvasArr = await Promise.all(
new Array(50)
.fill(0)
.map((_, i) => frameAt(src, i / 5, { crossOrigin: 'anonymous' }))
);
return html`${canvasArr.map(
canvas => html`<img width='100' src="${canvas.toDataURL("image/jpeg")}" />`
)}`;
}
// frameAt does not give any hint about the video, such as its duration.
// You have to obtain it from elsewhere
{
const src =
"https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4";
const { duration } = await vidvid.info(src); // <- this will generate a new partial request to the video
const tEvery5Second = new Array(Math.floor(duration / 5))
.fill(0)
.map((_, i) => i);
const canvasArr = await Promise.all(tEvery5Second.map(t => frameAt(src, t)));
return html`
<style>
.smallcanvas canvas {
width: 80px;
}
</style>
<div class="smallcanvas">${canvasArr}</div>
`;
}
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.
