2f:Tac1,md`# Extract a frame at time 't' from a video *update: better use https://observablehq.com/@severo/frameat* In this notebook, we show how to extract the video frame at time t. Note that the process of getting a video frame is *asynchronous*, that's why the accessor function is a Promise. To use it: ~~~js import {fetchExtracter} from '@severo/extract-a-frame-from-a-video' ~~~ ### Prepare the extracter ~~~js const extracter = await fetchExtracter(url, options) ~~~ It's asynchronous because we wait for the underlying video to have loaded some data. By default, CORS is not used. To enable it, specify \`crossOrigin\` in the options. See [HTML attribute: crossorigin](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin) for the list of accepted values: ~~~js const extracter = await fetchExtracter(url, {crossOrigin: 'anonymous'}) ~~~ Another option is \`loading\`, set to \`lazy\` by default: - \`lazy\` (default): the first argument (\`url\`) is used as the video src, which means that every frame fetching might imply a network request - \`eager\`: the video is fully downloaded, and all frames are fetched from a local copy of the video. Use this if the video is small, or if you will fetch a lot of frames. ~~~js const extracter = await fetchExtracter(url, {loading: 'eager'}) ~~~ With \`timeResolution\`, you can specify the extracter's time resolution, ie the time window during which the frames will return the same image. It can be related to the framerate of your video. By default, its value is 1ms, and you shouldn't modify it unless you have super high framerate videos (but it might be useless due to [browser adjustment of currentTime](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/currentTime#Usage_notes)): ~~~js const extracter = await fetchExtracter(url, {timeResolution: 0.00001}) ~~~ Option \`clamp\` keeps the extraction time t inside the video bounds. It defaults to \`true\`. If set to \`false\`, an exception will be thrown if the time is negative or greater than the video duration. ~~~js const extracter = await fetchExtracter(url, {clamp: false}) ~~~ ### Extract a frame To fetch a frame at time \`t\` ~~~js const canvas = await extracter.fetchFrame(t) ~~~ The time \`t\` is clampled between \`0\` and \`video.duration\`, and it's quantized depending on the \`timeResolution\` option (1ms by default). ### Synchronous access to frames *Caution: experimental* As the extracter maintains a cache of previously extracted frames, you can also ask for these frames synchronously: ~~~js extracter._cache.has(t) ~~~ and ~~~js extracter._cache.get(t) ~~~ Giving access to the \`._cache\` property is experimental, and this might be removed in a future version. `30:T42d,collage1 = { const interval = 1; const numFrames = await file.length; const width = 1600; const iw = await file[2].image.width; const ih = await file[2].image.height; const ow = iw; const oh = (ow * ih) / iw; const cols = Math.floor(width / ow); const rows = Math.ceil(numFrames / cols); const canvas = DOM.canvas(ow * cols, oh * rows); const context = canvas.getContext("2d"); const fetchAndDraw = async (i) => { const t = i * interval; const frame = await file[t].image; //await extracterFromVideo.fetchFrame(t); const x = (i % cols) * ow; const y = Math.floor(i / cols) * oh; context.drawImage(frame, 0, 0, iw, ih, x, y, ow, oh); //context.fillText(`${file[t].time}`, x + 35, y + 20); }; const times = new Array(numFrames).fill(0).map((_, i) => i); await Promise.all(times.map(fetchAndDraw)); context.canvas.originalWidth = ow; context.canvas.originalHeight = oh; context.canvas.cols = cols; context.canvas.rows = rows; context.canvas.URL = canvas.toDataURL("image/jpeg"); return context.canvas; }31:T40f,// Code by Ryan Murphy - https://observablehq.com/@rdmurphy/hurricane-laura-bolivar-peninsula-livestreams liveVideo = { const video = html`

Time-Lapse Seismic Data of CO2 Injected into an Aquifer - Sleipner CCS

Time-Lapse Seismic Data of CO₂ Injected into an Aquifer - Sleipner CCS