Face sign in

I spent a week doing a face-check-in demo,Making the addressWelcome star, online preview big screendemo

First say some nonsense, before do annual lottery, feel good silly, now just learning Threejs, want to do such a scene to lottery, and learning the knowledge of face recognition, want to do face recognition sign, want to do in the browser

Experience the whole process

  • 1. Wechat scan registration and upload profile picture
    1. Open face recognition in mobile browser (ios11 support, wechat browser does not support)
  • 3. The computer opens the address on the big screen. The big screen can display the face of the computer synchronously

Share the process

1. Face recognition

You can use Node or Python to call OpencV or something like that, but this is a back-end application. You can use raspberry PI to make a device, but it is browser recognition, so tracking.js (has not been updated for several years, to identify other models, You can train models in Python. After the recognition of the face, to calculate the width, to calculate the face in a certain width, you can cut out a square to send face retrieval.

2. Face retrieval

Face retrieval USES is the intelligence of tencent cloud image API, you need to create personal information, need a unique id (with WeChat openid), a face can add 20 less than 99% of the similarity of images, an organization can have 2 w personal, sure enough, the interface charge is very cheap, tuned to the amount is ten thousand times for free

3. Upload personal information

Get wechat OpenID, upload the photo to the server for saving, and add it to the face library of Tencent Cloud

4. Threejs scenario

  • Add a skybox
  • Calculate ball (CSS3render, need to change to webglRender)
  • L shape four need to write vertex join
  • Animo.js is good for animation, but why not use Tween, because I just learned it and wanted to try it
  • You have a face, you have to fly the face into the square of the ball, you have to use coordinate transformation, and quaternion, to fit
  • Idle no face, will always play random picture animation, a face will be played after the end of animation

5. The socket communication

With socket. IO communication, real-time recognition of the face, the face picture timely sent to the big screen

6.ssl

Nginx or Apache needs to configure HTTPS and port forwarding. Configure HTTPS for Node service and Socket service

Did not complete the tasks

  • Will modify the face into the animation, need to have a mid-point over
  • Add particle animation, select any image to add explosion into the picture effect
  • Write shader to write some effects