examples/browser-script/index.html
<!DOCTYPE html>
<html>
<head>
<title>Example - OpenHPS Browser</title>
</head>
<body>
<video id="abc" width="1280" height="720"></video>
<canvas id="123" width="1280" height="720"></canvas>
<script src="https://cdn.jsdelivr.net/npm/@openhps/core@0.2.0-alpha.9"></script>
<script src="../../dist/web/openhps-opencv.min.js"></script>
<script>
// Dependencies
const core = window['@openhps/core'];
const cv = window['@openhps/opencv'];
let model;
function initWebcam() {
navigator.getUserMedia = navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia;
if (navigator.getUserMedia) {
navigator.getUserMedia({ audio: true, video: {
width: 1280,
height: 720,
facingMode: "user" // Front facing camera
}},
function(stream) {
var video = document.getElementById('abc');
video.srcObject = stream;
video.onloadedmetadata = function(e) {
video.play();
initModel();
};
},
function(err) {
console.error("The following error occurred: " + err.name);
}
);
} else {
console.error("getUserMedia not supported");
}
}
let l = [0, 0, 0]
let h = [60, 255, 200]
function initModel() {
core.ModelBuilder.create()
.withLogger(console.log)
.from(new cv.VideoSource({
videoSource: document.getElementById("abc"),
autoPlay: true,
fps: 30,
width: 1280,
height: 720,
}))
.via(new cv.ColorMaskNode({
minRange: l,
maxRange: h
}))
.via(new cv.ImageErodeNode({
iterations: 5
}))
.via(new cv.ImageDilateNode({
iterations: 5
}))
// .via(new (class X extends cv.ImageProcessingNode {
// processImage(image) {
// return new Promise((resolve) => {
// let dst = new cv.OpenCV.Mat();
// const kernel = new cv.OpenCV.Mat();
// let anchor = new cv.OpenCV.Point(0, 0);
// cv.OpenCV.dilate(image, dst, kernel, anchor, 5);
// kernel.delete();
// resolve(dst);
// });
// }
// }))
.to(new cv.ImageDisplaySink({
windowTitle: "123"
}), new core.CallbackSinkNode(frame => {
frame.image.delete();
}))
.build().then(m => {
model = m;
}).catch(console.error);
}
initWebcam();
</script>
</body>
</html>