Search code examples
javascriptcanvasdetectionmarker

Marker detection on paper sheet using Javascript


Currently I am looking for a simple way to detect the position of markers on a photographed paper sheet using Javascript. All I've found so far are libraries which are a bit over the top for my purpose.

For example awe.js uses AR technology to detect markers on live videos. However, all I need is a marker detection on a picture, as can be seen on the uploaded example file below. (Note that the markers are just dummy markers. I am going to use individual markers for every corner)

Paper sheet with 4 dummy markers

Libraries I tried:

Does anybody know a simple solution for my problem?


Solution

  • Thanks to everyone who tried to find a solution for my problem. After all, I managed to detect the markers of my paper sheet with js-aruco:

    https://github.com/jcmellado/js-aruco/tree/master/samples/getusermedia

    js-aruco makes a snapshot of a live video, renders each of the snapshots in a canvas and detects the markers. I adjusted the „getusermedia.html“ so that it doesn't take a snapshot from a video but renders an image only once in the canvas. The detector is able to find each of the markers listed on this page:

    http://diogok.net/js-aruco-markers/index.html

    Finally, I had to rewrite the function from aruco.js, so that it finds markers that are smaller than 20% of the paper (which was the default value).

    AR.Detector.prototype.detect = function(image) {
      CV.grayscale(image, this.grey);
      CV.adaptiveThreshold(this.grey, this.thres, 2, 3);
      this.contours = CV.findContours(this.thres, this.binary);
      this.candidates = this.findCandidates(this.contours, image.width * 0.01, 0.05, 10);
      this.candidates = this.clockwiseCorners(this.candidates);
      this.candidates = this.notTooNear(this.candidates, 10);
      return this.findMarkers(this.grey, this.candidates, 49);
    };
    

    This way, js-aruco is able to find small markers on the corners of my paper sheet.