OpenCV on node and more

Posted on Edited on

A certification

Good news. I just received a certification from MongoDB University. There it is.

Cool! Right? I put in 7 weeks to complete this course. And here is the reference of the email:

Dear Tiger,

Congratulations! You have successfully completed M101JS: MongoDB for Node.js Developers with distinction. Your score puts you in the top 5% of all students who registered for the course. Great job!

WOW! Top 5%. Does it mean I am a top coder? I get myself calm and consider it a step to the upper level of my career life. Anyway, I’ll register the professional certification exam soon. Before that, I need to complete this blog.

OpenCV on node

Due to the new requirement of our project. (Yes, we did a reconstruction on our project.) We need to recognize the user’s face and crop it down to merge it into images sequence.
We’re working on Cocos Creator. Output target is Wechat game. We all know that Wechat works on mobile OS. Some of the native function and abilities are limited. Though the Wechat mini-app SDK provided some of the low-level api. But it’s doesn’t work when it comes to Wechat games.

So a better solution will be sending the image back to server, and let Master Bai，I mean, let the strong backend solve the problem. But before that, I need to walk through the path and make sure it works.

On Mac OS

Install opencv on mac os:

1
brew install opencv@2

After that, check the status of opencv by:

1
brew info opencv

If you find anything wrong with a red-cross mark, try to install it with brew.
Replace homebrew’s mirror(If it is unbearably slow) by:

1
export HOMEBREW_BOTTLE_DOMAIN=https://mirrors.tuna.tsinghua.edu.cn/homebrew-bottles

or change it in :

1
2
echo 'export HOMEBREW_BOTTLE_DOMAIN=https://mirrors.tuna.tsinghua.edu.cn/homebrew-bottles' >> ~/.bash_profile
source ~/.bash_profile

After opencv installed, we need to config pkg_config by
export PKG_CONFIG_PATH=/path/to/opencv/lib/pkgconfig
locate into the path of your npm project.

1
2
npm i --save peterbraden/node-opencv
npm i --save opencv

After this, I think you already have a full config for opencv on Mac OS.
Here is how I test it:

1
2
3
4
5
6
7
8
9
10
var cv = require("opencv");
cv.readImage("./tiger2.png", function(err, im){
    im.detectObject(cv.FACE_CASCADE, {}, function(err, faces){
      for (var i=0;i<faces.length; i++){
        var x = faces[i]
        im.ellipse(x.x + x.width/2, x.y + x.height/2, x.width/2, x.height/2);
      } 
      im.save('./out.jpg');
    });
  })

Just the sample code from official site.

Install opencv on CentOS:

I found CentOS is more friendly than Ubuntu. My feeling is base on what I need though.
Vultr have a very straightforward blog about this:
https://www.vultr.com/docs/how-to-install-opencv-on-centos-7

Master BAI did a more elegant version by GO after 12 hours since I made this test. Master is Master.

Decode QRCode by Typescript in Cocos Creator.

The key problem here is not the lib I need to use. After 10 minutes googling I am sure jsqr is the one I need. The problem is how to provide UTF8ClampedArray as a parameter to jsqr function.
Here is how I beat it:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
showCameraFrame(){
        var self = this;
        if(CC_WECHATGAME){
            wx.chooseImage({
                count: 1, // 默认9
                sizeType: ['original', 'compressed'], 
                sourceType: ['album', 'camera'], 
                success: function (res) {
                    var url = res.tempFilePaths[0];
                    

                    cc.loader.load({url:url,type:"png"},(err,result:cc.Texture2D)=>{
                        self.sprite.spriteFrame.setTexture(result);
                        self.sprite.node.setContentSize(result.getContentSize());
                        setTimeout(() => {
                           self.drawCode(); 
                        }, 1000);
                    })
                }
            });
        }
    }
    drawCode(){
        var gl = cc.game.canvas.getContext("webgl");
        var pixels = new    (gl.drawingBufferWidth * gl.drawingBufferHeight * 4);
                gl.readPixels(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight, gl.RGBA, gl.UNSIGNED_BYTE, pixels);
        var code = jsqr(pixels,cc.game.canvas.width,cc.game.canvas.height);
        if(code){
            console.log(code.data);
            this.label.string  = code.data;
        }
        
    }