Published
Edited
Aug 29, 2019
1 fork
1 star
jsQR = require("jsqr")
image = {
if (camera) {
const stream = navigator.mediaDevices
? navigator.mediaDevices.getUserMedia({ video: true })
: new Promise((y, n) => navigator.getUserMedia({ video: true }, y, n));
const video = html`<video autoplay=true playsinline=true></video>`;
video.style.maxWidth = "100%";
yield stream.then(stream => {
if ("srcObject" in video) video.srcObject = stream;
else video.src = URL.createObjectURL(stream);
invalidation.then(() => {
stream.getTracks().forEach(t => t.stop());
URL.revokeObjectURL(video.src);
});
return video;
});
while (true) {
yield video;
}
} else {
yield new Promise((resolve, reject) => {
const image = new Image();
image.onload = () => resolve(image);
image.onerror = reject;
image.crossOrigin = "anonymous";
image.src = url;
});
}
}
watcher = {
const r = jsQR(imageData.data, N, P);
if (r) mutable result = r;
}
mutable N = 600 // this could be informed by the camera (I suppose)
mutable P = 300
imageData = {
const width = N,
height = P;
const context = this ? this.context : DOM.context2d(width, height, 1);
context.drawImage(image, 0, 0, width, height);
const data = context.getImageData(0, 0, width, height);
data.context = context;
return data;
}
viewof url = html`<input style="width:100%;padding:4px;" value="https://cors-anywhere.herokuapp.com/https://hips.hearstapps.com/pop.h-cdn.co/assets/15/35/768x380/gallery-1440781189-wiki.png">`
import {checkbox} from "@jashkenas/inputs"
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.
