@webarkit/jsfeat-next
Version:
Typescript version of jsfeat for WebARKit
82 lines (70 loc) • 3.02 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JsfeatNext grayscale example</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<video id="video" autoplay loop muted playsinline></video>
<canvas id="canvas"></canvas>
<script src="../dist/jsfeatNext.js"></script>
<script>
var jsfeat = jsfeatNext.jsfeatNext;
var imgproc = new jsfeat.imgproc();
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d', {"willReadFrequently": true});
if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
var hint = {
audio: false,
video: true
};
if (window.innerWidth < 800) {
var width = (window.innerWidth < window.innerHeight) ? 240 : 360;
var height = (window.innerWidth < window.innerHeight) ? 360 : 240;
var aspectRatio = window.innerWidth / window.innerHeight;
console.log(width, height);
hint = {
audio: false,
video: {
facingMode: 'environment',
width: { min: width, max: width }
},
};
console.log(hint);
}
navigator.mediaDevices.getUserMedia(hint).then(function (stream) {
video.srcObject = stream;
video.addEventListener('loadedmetadata', function () {
video.play();
console.log('video', video, video.videoWidth, video.videoHeight);
var canvasWidth = video.videoWidth;
var canvasHeight = video.videoHeight;
canvas.width = canvasWidth;
canvas.height = canvasHeight;
process();
});
});
function process() {
var width = 640, height = 480;
ctx.drawImage(video, 0, 0, width, height);
var image_data = ctx.getImageData(0, 0, width, height);
var img_u8 = new jsfeat.matrix_t(width, height, jsfeat.U8_t | jsfeat.C1_t);
var code = jsfeat.COLOR_RGBA2GRAY;
imgproc.grayscale(image_data.data, width, height, img_u8, code);
var data_u32 = new Uint32Array(image_data.data.buffer);
var alpha = (0xff << 24);
var i = img_u8.cols * img_u8.rows, pix = 0;
while (--i >= 0) {
pix = img_u8.data[i];
data_u32[i] = alpha | (pix << 16) | (pix << 8) | pix;
}
ctx.putImageData(image_data, 0, 0);
requestAnimationFrame(process);
}
}
</script>
</body>
</html>