Object Detection with OpenCV JavaScript

Introduction

To find an object in an image is actually hard task in pixels. There are many mathematical algoritms in the literature, we can implement them into our codes. But first you must read articles and understand how they really work, which is complicated for beginners, But you dont have to understand in case you are not doing your master thesis or something very professional.

Because, there some famous libraries already written about image processing, What you need is just to know what methods are there, and what they used for.

I m going to show you one of the famous library with an example;

OpenCV

An example of face Recognition;

OpenCV is by far the best library for computer vision related stuff. It s supported by C++, Python, Java, JavaScript and C#. It has optimized implementation for most of the commonly used computer vision algorithms and techniques It is open source and free.

Object Detection Example for Javascript

In my example I m going to show how we can find an reference image in another image using JavaScript. The sample code will get the image frames from a camera using timer.

  1. Create an html file on your desktop and prepare an empty body
  2. Download OpenCV.js from the https://docs.opencv.org/3.4.0/opencv.js and place in the same folder with the html file

3. To call opencv library from your html use the following;

  <script async src="opencv.js" onload="onOpenCvReady();" type="text/javascript"></script> 

4. We need to get frame from camera, Browser will ask the user for permission for the first time

function CamOpen()
{
// Grab elements, create settings, etc.
var video = document.getElementById('video');

// Get access to the camera!
if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
// Not adding `{ audio: true }` since we only want video now
navigator.mediaDevices.getUserMedia({ video: { facingMode: { exact: "user" } } }).then(function (stream) {
//video.src = window.URL.createObjectURL(stream);
video.srcObject = stream;
video.play();

setInterval(function () { TakeSnap(); }, 400);
});
}
else {
myalert("Could not access to cam!<br> mediaDevices : " + navigator.mediaDevices + "<br> Be sure that you are using a valid SSL sertificate");
}
} 

4. Then I created a function to detect object position;


        function FindObject()
        {
            let src = cv.imread('imageCanvasInput');
            let templ = cv.imread('templateCanvasInput');
            let dst = new cv.Mat();
            let mask = new cv.Mat();
            cv.matchTemplate(src, templ, dst, cv.TM_CCOEFF, mask);
            let result = cv.minMaxLoc(dst, mask);

            let maxPoint = result.maxLoc;
            let color = new cv.Scalar(255, 0, 0, 255);
            let point = new cv.Point(maxPoint.x + templ.cols, maxPoint.y + templ.rows);
            cv.rectangle(src, maxPoint, point, color, 2, cv.LINE_8, 0);


            // Ölçüm Kalibrasyonu
            let color2 = new cv.Scalar(0, 255, 0, 255);
            let point1 = new cv.Point(200, 100);
            let point2 = new cv.Point(400, 100);
            cv.line(src, point1, point2, color2, 5, cv.LINE_8, 0);
            //--------------------------------------



            cv.imshow('canvasOutput', src);
            src.delete(); dst.delete(); mask.delete();

            var OlcumX = Math.round(maxPoint.x * (RefLength / 200) * 100) / 100;
            var OlcumY = Math.round(maxPoint.y * (RefLength / 200) * 100) / 100;

            document.getElementById("info").innerHTML = "Pixel<br> x : " + maxPoint.x + " y:" + maxPoint.y + "  <br><br>Mesafe Ölçüm <br> x : " + OlcumX + " y:" + OlcumY;
        }


        function onOpenCvReady() {
            document.getElementById('status').innerHTML = 'OpenCV.js is ready.';

            /*
            var canvas = document.getElementById("imageCanvasInput");
            var ctx = canvas.getContext("2d");
            var img1 = new Image();
            img1.src = 'https://localhost:44370/images/backgroud/cam.png';
            img1.onload = function () { ctx.drawImage(img1, 0, 0);};
            */
            
            var canvastemplate = document.getElementById("templateCanvasInput");
            var ctxtemplate = canvastemplate.getContext("2d");
            var imgtemplate = new Image();
            imgtemplate.src = 'file.ashx?path=App_Data/App_Files/ImageProcessing/OpenCVRef.png';
            imgtemplate.onload = function () { ctxtemplate.drawImage(imgtemplate, 0, 0); };

        }
 

Leave a Reply

Your email address will not be published. Required fields are marked *

Scroll Up