yape06_detect without build libs

kalwalt · Nov 26, 2022 · 143a0a8 · 143a0a8
1 parent 280d62e
commit 143a0a8
Show file tree

Hide file tree

Showing 3 changed files with 146 additions and 1 deletion.
diff --git a/emscripten/bindings.cpp b/emscripten/bindings.cpp
@@ -134,5 +134,6 @@ EMSCRIPTEN_BINDINGS(webarkit) {
     // Extern jsfeat functions
 
     function("load_jpeg_data", &load_jpeg_data);
+    function("yape06_detect", &yape06_detect);
 
 };
diff --git a/emscripten/webarkitJsfeat.cpp b/emscripten/webarkitJsfeat.cpp
@@ -85,7 +85,22 @@ emscripten::val load_jpeg(const char* filename) {
 emscripten::val load_jpeg_data(std::string filename) {
   auto out = load_jpeg(filename.c_str());
   return out;
-}
+};
+
+int yape06_detect(emscripten::val inputSrc, int w, int h) {
+  auto src = emscripten::convertJSArrayToNumberVector<u_char>(inputSrc);
+  Imgproc imgproc;
+  Yape06 yape;
+  KeyPoints keypoints(w * h);
+  std::unique_ptr<Matrix_t> lev0_img = std::make_unique<Matrix_t>(w, h, ComboTypes::U8C1_t);
+
+  imgproc.grayscale_internal<u_char, Matrix_t>(src.data(), w, h, lev0_img.get(), ColorSpace::COLOR_RGBA2GRAY);
+  imgproc.gaussian_blur_internal(lev0_img.get(), lev0_img.get(), 5, 2);
+  auto kpc = yape.detect_internal(lev0_img.get(), keypoints&, 17);
+
+  return kpc.count;
+};
+
 }
 
 #include "bindings.cpp"
diff --git a/examples/yape06_detector_video_example.html b/examples/yape06_detector_video_example.html
@@ -0,0 +1,129 @@
+<!DOCTYPE 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>JsfeatCpp video 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>
+        var canvas = document.getElementById('canvas');
+        var ctx = canvas.getContext('2d');
+
+        window.addEventListener('jsfeatCpp-loaded', function (e) {
+            var jsfeatCpp = Module;
+            console.log(jsfeatCpp);
+            var imgproc = new jsfeatCpp.imgproc();
+            var yape06 = new jsfeatCpp.yape06();
+            yape06.laplacian_threshold = 30;
+            yape06.min_eigen_value_threshold = 25;
+            var size = 640 * 480;
+            corners = new jsfeatCpp.KeyPoints(size);
+            const U8_t = Module.Types.U8_t.value;
+            const C1_t = Module.Types.C1_t.value;
+            const COLOR_RGBA2GRAY = Module.Colors.COLOR_RGBA2GRAY.value;
+            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 moveBytes(src, dest, width, height) {
+                    var i, j = 0;
+                    for (i = 0; i < width * height * 4;) {
+                        dest[i++] = src[j];
+                        dest[i++] = src[j];
+                        dest[i++] = src[j++];
+                        dest[i++] = 255;
+                    }
+                }
+
+                function render_mono_image(src, dst, sw, sh, dw) {
+                    var alpha = (0xff << 24);
+                    for (var i = 0; i < sh; ++i) {
+                        for (var j = 0; j < sw; ++j) {
+                            var pix = src[i * sw + j];
+                            dst[i * dw + j] = alpha | (pix << 16) | (pix << 8) | pix;
+                        }
+                    }
+                }
+                function render_corners(corners, count, img, step) {
+                var pix = (0xff << 24) | (0x00 << 16) | (0xff << 8) | 0x00;
+                for(var i=0; i < count; ++i)
+                {
+                    var x = corners[i].x;
+                    var y = corners[i].y;
+                    var off = (x + y * step);
+                    img[off] = pix;
+                    img[off-1] = pix;
+                    img[off+1] = pix;
+                    img[off-step] = pix;
+                    img[off+step] = pix;
+                }
+            }
+
+                function process() {
+                    var width = 640,
+                        height = 480;
+                    ctx.drawImage(video, 0, 0, width, height);
+                    var image_data = ctx.getImageData(0, 0, width, height);
+                    var obj = jsfeatCpp.yape06_detect(image_data.data, width, height);
+                    console.log("count is: ", obj);
+                    var data_u32 = new Uint32Array(image_data.data.buffer);
+                    // we convert to mono gray image, check both methods
+                    //render_mono_image(img_u8.data, data_u32, width, height, 640)
+                    //render_corners(obj.points, obj.count, data_u32, 640);
+                    //moveBytes(img_u8.data, image_data.data, width, height);
+                    ctx.putImageData(image_data, 0, 0);
+                    requestAnimationFrame(process);
+                }
+            }
+        })
+    </script>
+    <script src="../build/jsfeatcpp.js"></script>
+</body>
+
+</html>