Software engineer at Hugging Face. Prototyping here with JS, d3, three.js.
Public
Edited
Dec 26, 2022
9 stars
video = html`<video controls src="${bbb}"/>`
fetch(bbb) // 🌶
fetch(
'https://ia600301.us.archive.org/7/items/BigBuckBunnyProjectile/big_buck_bunny_projectile_512kb.mp4'
) // 🌶
canvas = {
await ready(video, invalidation); // to be sure the video is ready to provide a frame
const canvas = DOM.canvas(video.videoWidth, video.videoHeight);
canvas.getContext('2d').drawImage(video, 0, 0);
return canvas;
}
canvas.getContext('2d').getImageData(0, 0, canvas.width, canvas.height) // 🌶
blob = new Promise((resolve, reject) => {
try {
canvas.toBlob(resolve);
} catch (e) {
reject(e);
}
}) // 🌶
dataURL = canvas.toDataURL() // 🌶
response = await fetch(bbb, { mode: 'no-cors' })
response.status
response.body
opaqueBlob = response.blob()
opaqueBlob.size
opaqueUrl = URL.createObjectURL(opaqueBlob)
html`<video controls src="${opaqueUrl}" />` // 🌶
caches
cache = caches.open('videos')
wait = {
const response2 = await fetch(bbb, { mode: 'no-cors' });
await cache.put(bbb, response2);
}
{
wait; // to be sure response2 has been cached
const r = await cache.match(bbb);
return {
status: r.status,
headersArray: [...r.headers.entries()],
type: r.type,
url: r.url
};
}
proxiedResponse = await fetch(corsProxy + bbb) // no more 'no-cors' mode
({
status: proxiedResponse.status,
headersArray: [...proxiedResponse.headers.entries()],
type: proxiedResponse.type,
url: proxiedResponse.url
})
proxiedBlob = proxiedResponse.blob()
proxiedSize = (proxiedBlob.size / 1024 / 1024).toFixed(1) + ' MB'
proxiedUrl = {
const url = URL.createObjectURL(proxiedBlob);
invalidation.then(() => URL.revokeObjectURL(url));
return url;
}
html`<video controls src="${proxiedUrl}">`
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.
