Face recognition method based on front-end browser without back-end dependence

Abstract

The invention provides a face recognition method based on a front-end browser without back-end dependence, and belongs to the crossing field of computer vision and front-end development, the face recognition method comprises the following steps: 1) calling a camera through MediaDevices API, and capturing a video stream in real time; 2) carrying out noise reduction and illumination normalization on the video frame by using Canvas and WebGL; and 3) matching the TensorFlow.js face detection model with the pre-registered face library. According to the method, lightweight deployment of the browser face detection model is realized, and the method has the advantages of low deployment cost, high recognition speed and high accuracy.

Description

Technical Field

[0001] The present invention relates to the intersection of computer vision and front-end development, and in particular to a front-end face recognition method based on browser native technologies (HTML5, JavaScript, WebGL, TensorFlow.js). This method combines a lightweight machine learning model with hardware acceleration technology to achieve real-time face detection, feature extraction, and identity authentication without back-end dependence. Background Art

[0002] With the development of intelligent society, the demand for facial recognition technology in security, finance, government affairs, commerce and other fields is increasing. For example, in the security field, it is used for criminal investigation and pursuit, border security, etc., and in the financial field, it is used for identity verification and payment security.

[0003] The current mainstream solution is server-side facial recognition. Front-end devices capture the image of a person and transmit it to the server for recognition. This entire process relies on the network, which can lead to insufficient real-time performance. Network latency or instability can cause recognition to slow down or even fail, making it unsuitable for scenarios requiring high real-time performance. Furthermore, the process of sending user portrait data to the server increases the risk of data leakage. Furthermore, server-side facial recognition typically requires high-performance servers to handle a large number of concurrent requests, resulting in high hardware costs and complex deployment and maintenance. Summary of the Invention

[0004] In order to solve the above technical problems, the present invention provides a face recognition method based on a front-end browser without back-end dependence, aiming to provide a face recognition method that does not rely on a server, has high recognition rate, high real-time performance, high security, high user experience, and is easy to deploy and maintain.

[0005] The technical solution of the present invention is:

[0006] A face recognition method based on a front-end browser without back-end dependency, comprising the following steps:

[0007] 1) Use the MediaDevices API to call the camera and capture the video stream in real time;

[0008] 2) Use Canvas and WebGL to reduce noise and normalize lighting on video frames;

[0009] 3) The TensorFlow.js face detection model matches the pre-registered face library.

[0010] Further,

[0011] Step 1) specifically includes:

[0012] The browser uses navigator.mediaDevices.getUserMedia(constraints) to initiate a camera access request. After successful authorization, it returns a MediaStream object containing the video stream. Assign the obtained MediaStream to <video>The src attribute of the element enables real-time playback.

[0013] Users can see their own real-time face images and adjust the face position by themselves.

[0014] In the constraints parameter, set frameRate:{min:20,ideal:30} to balance the smoothness of the picture and rendering performance.

[0015] Further,

[0016] Step 2) Using WebGL's GPU acceleration capabilities, perform noise reduction and illumination normalization on each frame to improve the accuracy and robustness of face recognition.

[0017] The specific process is as follows:

[0018] 1) Initialize the WebGL environment: create a WebGL rendering context and set related parameters;

[0019] 2) Loading video frames: Loading video frames into WebGL as textures;

[0020] 3) Write shaders: Write vertex shaders and fragment shaders to implement denoising and lighting normalization algorithms;

[0021] 4) Rendering: The video frames are processed through the WebGL rendering pipeline and the results are output to Canvas. The processed video frames are then passed to the face detection model for recognition.

[0022] Further,

[0023] Step 3) includes: deploying the quantized TensorFlow.js face detection model MTCNN and feature extraction model MobileFaceNet in WebAssembly mode, and implementing multi-threaded parallel computing through Web Workers to prevent the browser's UI rendering process from being blocked during the recognition process.

[0024] After receiving the face video frame, it matches the pre-registered face library based on the feature vector similarity, renders the detection results in real time, and triggers business events such as successful login.

[0025] The beneficial effects of the present invention are

[0026] The face recognition method implemented by the present invention, which is implemented in a front-end browser without back-end dependencies, offers excellent real-time performance and user experience from a user perspective, while also better protecting the user's portrait privacy. From a developer's perspective, it is cross-language, cross-platform, cross-browser, and cross-terminal, and does not require server resources, reducing hardware investment and the complexity of deployment and maintenance. From an open source perspective, it offers integration, scalability, and inheritability. Compared to server-side face recognition solutions, the present invention has the following technical advantages:

[0027] Lightweight model deployment on the browser. Convert pre-trained models to JSON / Binary format and use IndexedDB to cache model files to reduce repeated loading time. Use 8-bit integer quantization (INT8) to compress the model size to 30% of the original size with less than 2% accuracy loss.

[0028] Hardware acceleration for graphics preprocessing. Image preprocessing (such as Gaussian blur and histogram equalization) is ported to the GPU via WebGL, increasing frame processing speed by 5 times.

[0029] User privacy protection mechanism. Feature vectors and user data are processed only in the browser's WebAssembly sandbox, and sensitive operations require secondary user authorization.

[0030] Excellent performance: Detection latency ≤ 80ms (Safari / Firefox / Chrome) for 1080p video streams; recognition accuracy ≥ 98.5%; memory usage < 150MB. BRIEF DESCRIPTION OF THE DRAWINGS

[0031] Figure 1 It is a schematic diagram of the workflow of the present invention. DETAILED DESCRIPTION

[0032] In order to make the purpose, technical solutions and advantages of the embodiments of the present invention clearer, the technical solutions in the embodiments of the present invention will be clearly and completely described below in conjunction with the drawings in the embodiments of the present invention. Obviously, the described embodiments are part of the embodiments of the present invention, not all the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by ordinary technicians in this field without making creative work are within the scope of protection of the present invention.

[0033] The present invention provides a face recognition method based on a front-end browser without back-end dependency. The method includes: (1) calling the camera through the MediaDevices API to capture the video stream in real time; (2) using Canvas and WebGL to perform noise reduction and illumination normalization on the video frames; (3) matching the TensorFlow.js face detection model with the pre-registered face database.

[0034] The specific implementation plan is as follows:

[0035] (1) Call the camera through the MediaDevices API to capture the video stream in real time: The browser uses navigator.mediaDevices.getUserMedia(constraints) to initiate a camera access request. After successful authorization, it returns a MediaStream object containing the video stream. Assign the obtained MediaStream to

[0036] <video>The element's src attribute enables real-time playback. Users can view their own face in real time and adjust its position. The constraints parameter sets frameRate:{min:20,ideal:30} to balance image smoothness and rendering performance.

[0037] (2) Using Canvas and WebGL to perform noise reduction and illumination normalization on video frames: This front-end browser face recognition method uses the GPU acceleration capability of WebGL to quickly perform noise reduction and illumination normalization on each frame to improve the recognition accuracy and robustness of face recognition. The specific process is as follows:

[0038] 1. Initialize the WebGL environment: create a WebGL rendering context and set the necessary parameters.

[0039] 2. Load video frames: Load video frames into WebGL as textures.

[0040] 3. Write shaders: Write vertex shaders and fragment shaders to implement denoising and lighting normalization algorithms.

[0041] 4. Rendering: The video frames are processed through the WebGL rendering pipeline and the results are output to Canvas. The processed video frames are then passed to the face detection model for recognition.

[0042] (3) TensorFlow.js face detection model matches the pre-registered face library: The quantized TensorFlow.js face detection model MTCNN and the feature extraction model MobileFaceNet are deployed in WebAssembly mode. Multi-threaded parallel computing is implemented through Web Workers to prevent the browser UI rendering process from being blocked during the recognition process. After receiving the face video frame, the pre-registered face library is matched based on feature vector similarity. The detection results are rendered in real time and business events such as successful login are triggered.

[0043] This paper mainly uses HTML5, JavaScript, WebGL and TensorFlow.js technologies, and is implemented on modern browsers. It fully utilizes WebGL's GPU-accelerated efficient rendering capabilities and TensorFlow.js's lightweight front-end deployment model capabilities.

[0044] Through model quantization, WebGL acceleration and local storage technology, real-time face detection and authentication without backend dependence is achieved.

[0045] Use Web Workers to allocate independent threads to handle face detection and feature extraction tasks.

[0046] The above description is only a preferred embodiment of the present invention and is only used to illustrate the technical solution of the present invention, and is not intended to limit the scope of protection of the present invention. Any modifications, equivalent replacements, improvements, etc. made within the spirit and principles of the present invention are included in the scope of protection of the present invention.< / video> < / video>

Claims

1. A face recognition method based on a front-end browser without back-end dependence, characterized in that: The steps include: 1) Use the MediaDevices API to call the camera and capture the video stream in real time; 2) Use Canvas and WebGL to reduce noise and normalize lighting on video frames; 3) The TensorFlow.js face detection model matches the pre-registered face library.

2. The method according to claim 1, characterized in that Step 1) specifically includes: The browser uses navigator.mediaDevices.getUserMedia(constraints) to initiate a camera access request. After successful authorization, it returns a MediaStream object containing the video stream. The obtained MediaStream is assigned to <video> The src attribute of the element enables real-time playback.< / video> 3. The method according to claim 2, characterized in that Users can see their own real-time face images and adjust the face position by themselves.

4. The method according to claim 2 or 3, characterized in that In the constraints parameter, set frameRate:{min:20,ideal:30} to balance the smoothness of the picture and rendering performance.

5. The method according to claim 1, wherein Step 2) Using WebGL's GPU acceleration capabilities, perform noise reduction and illumination normalization on each frame to improve the accuracy and robustness of face recognition.

6. The method according to claim 5, characterized in that The specific process is as follows: 1) Initialize the WebGL environment: create a WebGL rendering context and set related parameters; 2) Loading video frames: Loading video frames into WebGL as textures; 3) Write shaders: Write vertex shaders and fragment shaders to implement denoising and lighting normalization algorithms; 4) Rendering: The video frames are processed through the WebGL rendering pipeline and the results are output to Canvas. The processed video frames are then passed to the face detection model for recognition.

7. The method according to claim 1, characterized in that Step 3) includes: deploying the quantized TensorFlow.js face detection model MTCNN and feature extraction model MobileFaceNet in WebAssembly mode, and implementing multi-threaded parallel computing through Web Workers to prevent the browser's UI rendering process from being blocked during the recognition process.

8. The method according to claim 7, characterized in that After receiving the face video frame, it matches the pre-registered face library based on the feature vector similarity, renders the detection results in real time, and triggers business events such as successful login.

Images