Html5调用手机摄像头并实现人脸识别的实现

精选原创

wx5f184b1820e35 2024-03-04 20:58:04 ©著作权

©著作权归作者所有：来自51CTO博客作者wx5f184b1820e35的原创作品，请联系作者获取转载授权，否则将追究法律责任

设计思想

用户友好性：界面设计应该简洁明了，方便用户操作，并且提供必要的提示信息。
性能优化：考虑到移动设备的性能限制，实现应该尽可能轻量化和高效。
安全性：使用摄像头和处理用户图像数据时需要注意隐私和安全问题。
功能扩展性：实现应该具有一定的扩展性，方便后续添加更多功能或改进。
兼容性：考虑不同浏览器和设备的兼容性。

HTML部分代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Face Recognition</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="app">
        Face Recognition
        <div id="video-container">
            <video id="video" autoplay></video>
            <canvas id="canvas"></canvas>
        </div>
        <div id="output"></div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script>
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/face-landmarks-detection"></script>
    <script src="script.js"></script>
</body>
</html>

CSS 代码部分（styles.css）：

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

#app {
    text-align: center;
    padding: 20px;
}

#video-container {
    position: relative;
    margin: 0 auto;
    width: 80%;
}

#video {
    width: 100%;
    height: auto;
    border-radius: 8px;
}

#canvas {
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 8px;
}

#output {
    margin-top: 20px;
}

人脸识别部分

JavaScript实现

// 获取元素
const video = document.getElementById('video');
const canvas = document.getElementById('canvas');
const output = document.getElementById('output');
const context = canvas.getContext('2d');

// 初始化摄像头
navigator.mediaDevices.getUserMedia({ video: true })
    .then(stream => {
        video.srcObject = stream;
    })
    .catch(err => console.error(err));

// 加载 TensorFlow.js 模型
async function loadModel() {
    const model = await tf.loadGraphModel('https://tfhub.dev/google/mediapipe/face_mesh/1/model.json');
    return model;
}

// 在视频流中检测人脸并绘制标记点
async function detectFace() {
    const model = await loadModel();
    const loop = async () => {
        context.drawImage(video, 0, 0, canvas.width, canvas.height);
        const predictions = await model.estimateFaces(video);
        if (predictions.length > 0) {
            output.textContent = '人脸已检测到';
            // 绘制人脸标记点
            drawFace(predictions);
        } else {
            output.textContent = '未检测到人脸';
        }
        requestAnimationFrame(loop);
    };
    loop();
}

// 绘制人脸标记点
function drawFace(predictions) {
    context.clearRect(0, 0, canvas.width, canvas.height);
    predictions.forEach(prediction => {
        const keypoints = prediction.scaledMesh;
        for (let i = 0; i < keypoints.length; i++) {
            const [x, y] = keypoints[i];
            context.beginPath();
            context.arc(x, y, 1, 0, 2 * Math.PI);
            context.fillStyle = 'red';
            context.fill();
        }
    });
}

// 调用检测人脸的函数
detectFace();

C++实现人脸识别

#include <iostream>
#include <opencv2/opencv.hpp>

int main() {
    cv::VideoCapture cap(0); // 打开摄像头设备
    if (!cap.isOpened()) {
        std::cerr << "Error: Failed to open camera." << std::endl;
        return -1;
    }

    cv::Mat frame, gray;
    cv::CascadeClassifier face_cascade;
    face_cascade.load("haarcascade_frontalface_alt.xml"); // 加载人脸识别模型

    while (true) {
        cap >> frame; // 读取视频流帧

        cv::cvtColor(frame, gray, cv::COLOR_BGR2GRAY); // 将帧转换为灰度图像
        cv::equalizeHist(gray, gray); // 直方图均衡化

        std::vector<cv::Rect> faces;
        face_cascade.detectMultiScale(gray, faces, 1.1, 2, 0 | cv::CASCADE_SCALE_IMAGE, cv::Size(30, 30));

        for (size_t i = 0; i < faces.size(); i++) {
            cv::rectangle(frame, faces[i], cv::Scalar(255, 0, 0), 2); // 在图像中绘制人脸矩形框
        }

        cv::imshow("Face Detection", frame); // 显示图像
        if (cv::waitKey(30) >= 0) break; // 按下任意键退出循环
    }

    return 0;
}

代码使用 OpenCV 库实现了摄像头视频流的获取和人脸检测功能。
cv::VideoCapture 用于打开摄像头设备，cap >> frame 用于读取视频流帧。
cv::CascadeClassifier 加载了人脸识别模型，模型文件为 haarcascade_frontalface_alt.xml。
face_cascade.detectMultiScale 用于检测人脸，将检测到的人脸用蓝色矩形框标记在原图上。

Java代码实现人脸识别

import org.opencv.core.Core;
import org.opencv.core.Mat;
import org.opencv.core.MatOfRect;
import org.opencv.core.Rect;
import org.opencv.core.Scalar;
import org.opencv.imgcodecs.Imgcodecs;
import org.opencv.imgproc.Imgproc;
import org.opencv.objdetect.CascadeClassifier;

public class FaceDetection {

    public static void main(String[] args) {
        System.loadLibrary(Core.NATIVE_LIBRARY_NAME); // 加载 OpenCV 库

        CascadeClassifier faceCascade = new CascadeClassifier();
        faceCascade.load("haarcascade_frontalface_alt.xml"); // 加载人脸识别模型

        Mat frame = new Mat();
        Mat gray = new Mat();
        VideoCapture capture = new VideoCapture(0); // 打开摄像头设备

        if (!capture.isOpened()) {
            System.err.println("Error: Failed to open camera.");
            return;
        }

        while (true) {
            capture.read(frame); // 读取视频流帧

            Imgproc.cvtColor(frame, gray, Imgproc.COLOR_BGR2GRAY); // 将帧转换为灰度图像
            Imgproc.equalizeHist(gray, gray); // 直方图均衡化

            MatOfRect faces = new MatOfRect();
            faceCascade.detectMultiScale(gray, faces, 1.1, 2, 0 | Objdetect.CASCADE_SCALE_IMAGE, new Size(30, 30));

            for (Rect rect : faces.toArray()) {
                Imgproc.rectangle(frame, rect.tl(), rect.br(), new Scalar(255, 0, 0), 2); // 在图像中绘制人脸矩形框
            }

            Imgcodecs.imwrite("output.jpg", frame); // 将帧保存为图像文件
        }
    }
}

代码使用 OpenCV 库实现了摄像头视频流的获取和人脸检测功能。
CascadeClassifier 加载了人脸识别模型，模型文件为 haarcascade_frontalface_alt.xml。
capture.read(frame) 用于读取视频流帧，faceCascade.detectMultiScale 用于检测人脸，将检测到的人脸用蓝色矩形框标记在原图上。
使用 `Imgcodecs.imwrite

代码分析

HTML 部分包含了一个 <video> 元素用于显示摄像头的视频流，一个 <canvas> 元素用于绘制人脸标记点，并提供了一个 <div> 元素用于输出检测结果。
CSS 部分定义了页面的样式，包括视频和画布的样式。
JavaScript 部分包括了初始化摄像头、加载 TensorFlow.js 模型、检测人脸并绘制标记点等功能。loadModel 函数用于加载 TensorFlow.js 模型，detectFace 函数用于检测人脸并在画布上绘制标记点，drawFace 函数用于绘制人脸标记点。