-
Notifications
You must be signed in to change notification settings - Fork 7
/
index.html
93 lines (83 loc) · 2.57 KB
/
index.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
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Mosse Tracker</title>
<style>
body {
text-align: center;
}
#container {
margin: 0px auto;
border: 10px #333 solid;
display: flex;
justify-content: center;
}
#videoElement {
visibility: hidden;
width: 1px;
height: 1px;
background-color: #666;
}
</style>
</head>
<body>
<h1>Mosse Multitracker Example</h1>
<p>Click on the image to track something.</p>
<video autoplay="true" id="videoElement"></video>
<div id="container">
<img id="img" />
</div>
<script type="module">
const video = document.querySelector("#videoElement");
const canvas = document.createElement("canvas");
const img = document.getElementById("img");
img.onclick = updatePosition;
let tracker = null;
import init, { MultiMosseTrackerJS } from "./pkg/mosse.js";
init().then(async () => {
if (navigator.mediaDevices.getUserMedia) {
navigator.mediaDevices
.getUserMedia({ audio: false, video: true })
.then(function (stream) {
video.srcObject = stream;
})
.catch(function (error) {
console.error("Something went wrong!", error);
});
}
});
setInterval(async function () {
const width = video.videoWidth;
const height = video.videoHeight;
if (width && height) {
if (tracker == null) {
tracker = new MultiMosseTrackerJS(
video.videoWidth,
video.videoHeight
);
canvas.width = width;
canvas.height = height;
}
const ctx = canvas.getContext("2d");
ctx.drawImage(video, 0, 0, width, height);
const base64 = canvas.toDataURL("image/png");
const blob = await (await fetch(base64)).blob();
let frame = new Uint8Array(await blob.arrayBuffer());
const tracked_frame = tracker.track(frame);
const tracked_blob = new Blob([tracked_frame], { type: "image/png" });
const url = URL.createObjectURL(tracked_blob);
img.src = url;
} else {
}
}, 200);
async function updatePosition(event) {
let x = event.offsetX;
let y = event.offsetY;
const blob = await (await fetch(img.src)).blob();
let frame = new Uint8Array(await blob.arrayBuffer());
tracker.set_target(x, y, frame);
}
</script>
</body>
</html>