-
Notifications
You must be signed in to change notification settings - Fork 4
/
demo.html
76 lines (68 loc) · 2.58 KB
/
demo.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<!DOCTYPE html>
<html>
<head>
<title>Camera demo</title>
<meta charset="utf-8"></meta>
</head>
<body>
<canvas id="canvas" style="width: 100%; height: 100vh; object-fit: cover; object-position: center;"></canvas>
<video id="video" style="display: hidden; height: 0px; width: 100%;"></video>
<script type="module">
import { scanImage, createZbar } from "./dist/zbar-wasi.esm.js";
const ZBAR = createZbar({ wasmpath: "./dist/zbar.wasm" });
const domCanvas = document.getElementById("canvas");
const domVideo = document.getElementById("video");
const ctx = domCanvas.getContext("2d", { alpha: false });
let renderLoopId;
const renderLoop = () => {
if (renderLoopId) {
cancelAnimationFrame(renderLoopId);
}
ctx.drawImage(domVideo, 0, 0, domCanvas.width, domCanvas.height);
const imageData = ctx.getImageData(0, 0, domCanvas.width, domCanvas.height);
console.time("scanImage");
const results = scanImage(imageData);
console.timeEnd("scanImage");
if (results.length > 0) alert("Barcodes: " + results.join(","));
renderLoopId = requestAnimationFrame(renderLoop);
};
const focusVideoCam = (videotrack, point) => {
const caps = videotrack.getCapabilities();
if (!caps.pointsOfInterest) return;
const constraints = videotrack.getConstraints();
constraints.pointsOfInterest = point
videotrack.applyConstraints(constraints);
};
const constraints = {
video: { facingMode: "environment" },
width: { min: 640, ideal: 1280 },
height: { min: 480, ideal: 720 },
};
const hookVideoCam = async (fn) => {
let srcCamera;
try {
srcCamera = await navigator.mediaDevices.getUserMedia(constraints);
} catch (err) {
alert("You need to give access to your camera from your browser");
return;
}
domVideo.srcObject = srcCamera;
domVideo.play();
domVideo.addEventListener("loadeddata", () => {
const videotrack = srcCamera.getVideoTracks()[0];
const { width, height } = videotrack.getSettings();
domCanvas.width = width;
domCanvas.height = height;
fn(videotrack);
});
};
hookVideoCam(track => {
domCanvas.addEventListener("click", ({clientX, clientY}) => {
const point = { x: clientX, y: clientY };
focusVideoCam(track, point);
});
renderLoop();
});
</script>
</body>
</html>