Skip to content

Instantly share code, notes, and snippets.

@somebody1234
Forked from bellbind/index.html
Last active January 13, 2023 16:15
Show Gist options
  • Save somebody1234/bd437d7d671c869551141ef968d09ad5 to your computer and use it in GitHub Desktop.
Save somebody1234/bd437d7d671c869551141ef968d09ad5 to your computer and use it in GitHub Desktop.
[chrome][android] BarcodeDetector example
<!doctype html>
<html>
<head>
<script type="module">
// WICG Shape Detection API
// - https://wicg.github.io/shape-detection-api/
try {
const start = document.getElementById("start");
const video = document.getElementById("video");
const result = document.getElementById("result");
const bd = new BarcodeDetector();
(async () => {
// It works on chrome on Android
//NOTE: Not implemented yet: chrome canary 84 on macos
result.textContent = (await BarcodeDetector.getSupportedFormats()).join("\n");
})().catch(err => {
document.getElementById("error").textContent += err;
});
const capture = async () => {
try {
const barcodes = await bd.detect(video);
const log = barcodes.map(({format, rawValue}) => `- ${format}: ${rawValue}`).join("\n");
if (log) result.textContent = log;
requestAnimationFrame(capture);
} catch (err) {
document.getElementById("error").textContent += err;
}
};
video.addEventListener("play", () => capture());
start.addEventListener("click", () => {
start.disabled = true;
(async () => {
const media = await navigator.mediaDevices.getUserMedia(
{auido: false, video: {
//NOTE: crash on android chrome when specified the size
//width: {ideal: 800}, height: {ideal: 800},
facingMode: "environment"}});
//console.log(media);
video.srcObject = media;
video.autoplay = true;
})().catch(err => document.getElementById("error").textContent += err);
}, {once: true});
} catch (err) {
document.getElementById("error").textContent += err;
}
</script>
</head>
<body>
BarcodeDetector demo: <button id="start">start</button>
<div><video id="video" autoplay></div>
<pre id="result"></pre>
<pre id="error" style="color:red"></pre>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment