Build a Web‑Based Face Login Using Baidu AI and getUserMedia

Background

Face recognition is mature on mobile devices but rarely used on the Web. This tutorial shows how to build a web‑based face login using browser video capture and the Python face_recognition library.

Video Stream Capture

The browser accesses the webcam via navigator.mediaDevices.getUserMedia (fallback to older navigator.getUserMedia) and streams video to a video element.

Recognition Tools

Baidu Face Recognition API

Analyzes face occlusion, blur, illumination, pose, completeness, size and returns a similarity score for images that meet quality standards. Compares two faces in an image and returns a similarity value. Supports live photo, ID photo, ID chip photo, and watermark‑protected photo. Detects image artifacts (moiré, distortion) to verify that the target is a real person.

face_recognition (Python)

A Python wrapper around dlib’s deep‑learning face model. Provides face_locations , face_encodings and compare_faces functions with 99.38 % accuracy on the Labeled Faces in the Wild benchmark.

Overall Process

Start a web service (e.g., Flask or Django) and pre‑compute face encodings for reference images using face_recognition.face_encodings. Store the encodings and associated user identifiers in memory or a database.

The front‑end page calls getUserMedia to obtain the webcam video stream and displays it in a video element.

At a fixed interval (commonly every 3 seconds) the current frame is drawn onto a hidden canvas, converted to a Base64 data URL, and sent to the back‑end via an AJAX POST request.

The back‑end decodes the Base64 string and saves it as an image file (or processes it directly in memory).

Using face_recognition.face_locations and face_recognition.face_encodings, compute the encoding of the uploaded frame.

Compare the new encoding with the stored reference encodings using face_recognition.compare_faces (or face_distance) and a tolerance threshold (commonly 0.6).

If the similarity exceeds the threshold, the login succeeds; otherwise it fails.

Flowchart & Sequence Diagram

Front‑End Code Example

<div class="layui-container">
    <div class="blog-main">
        <!-- Left area -->
        <div id="support"></div>
        <div class="div-a" id="contentHolder">
            <video id="video" width="100%" height="60%" autoplay></video>
            <canvas hidden="hidden" id="canvas" width="520" height="250"></canvas>
        </div>
        <div class="div-b">
            <h3>Real‑time Data</h3>
            <span>Age:</span><span id="age"></span><br>
            <span>Beauty:</span><span id="beauty"></span><br>
            <span>Gender:</span><span id="gender"></span><br>
            <span>Race:</span><span id="race"></span><br>
            <span>Glasses:</span><span id="glasses"></span><br>
            <span>Expression:</span><span id="expression"></span><br>
        </div>
    </div>
</div>

<script>
window.onload = function () {
    try {
        document.getElementById("support").innerHTML = "Browser supports HTML5 CANVAS";
    } catch (e) {
        document.getElementById("support").innerHTML = "Browser does NOT support HTML5 CANVAS";
    }
};

var timer = null;
window.addEventListener("DOMContentLoaded", function () {
    var canvas = document.getElementById("canvas"),
        context = canvas.getContext("2d"),
        video = document.getElementById("video"),
        mediaConstraints = {
            audio: false,
            video: {
                width: { ideal: 1280 },
                height: { ideal: 720 },
                frameRate: { ideal: 10, max: 15 },
                facingMode: "environment"
            }
        };

    function errBack(error) {
        console.log("Video capture error:", error.code);
    }

    if (navigator.mediaDevices.getUserMedia || navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia) {
        navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
        navigator.getUserMedia(mediaConstraints, function (stream) {
            video.srcObject = stream;
            video.play();
        }, errBack);
    }

    timer = setInterval(function () {
        context.drawImage(video, 0, 0, 330, 250);
        CatchCode();
    }, 3000);
}, false);

function dataURItoBlob(base64Data) {
    var byteString;
    if (base64Data.split(',')[0].indexOf('base64') >= 0)
        byteString = atob(base64Data.split(',')[1]);
    else
        byteString = unescape(base64Data.split(',')[1]);
    var mimeString = base64Data.split(',')[0].split(':')[1].split(';')[0];
    var ia = new Uint8Array(byteString.length);
    for (var i = 0; i < byteString.length; i++) {
        ia[i] = byteString.charCodeAt(i);
    }
    return new Blob([ia], { type: mimeString });
}

function CatchCode() {
    var canvas = document.getElementById("canvas");
    var imageBase64 = canvas.toDataURL();
    var blob = dataURItoBlob(imageBase64);
    var fd = new FormData(document.forms[0]);
    fd.append("the_file", blob, 'image.png');
    $.ajax({
        type: "POST",
        url: "/index/Index/faceVerifyVideo",
        processData: false,
        contentType: false,
        data: fd,
        datatype: "json",
        success: function (res) {
            if (res.code == 0) {
                var jsonObj = res.data.face_list[0];
                $("#age").html(jsonObj.age);
                $("#beauty").html(jsonObj.beauty);
                $("#gender").html(jsonObj.gender.type == 'male' ? "男" : "女");
                var raceMap = { 'yellow': '黄种人', 'white': '白种人', 'black': '黑种人' };
                $("#race").html(raceMap[jsonObj.race.type] || "阿拉伯人");
                var glassesMap = { 'none': '未戴眼镜', 'common': '戴了普通眼镜' };
                $("#glasses").html(glassesMap[jsonObj.glasses.type] || "戴了墨镜");
                var exprMap = { 'none': '不笑', 'smile': '微笑' };
                $("#expression").html(exprMap[jsonObj.expression.type] || "大笑");
                clearInterval(timer);
            } else {
                layer.msg(res.msg, { icon: 5 });
            }
        },
        error: function () {
            layer.alert('接口异常', { icon: 5 });
        }
    });
}
</script>

Back‑End Note

The server endpoint /index/Index/faceVerifyVideo receives the uploaded image, forwards it to Baidu’s face analysis service, and returns a JSON payload containing age, beauty, gender, race, glasses and expression. The same endpoint can be adapted to invoke face_recognition for local verification instead of the external API.