Bagaimana untuk melaksanakan sistem pengecaman muka dalam talian menggunakan WebSocket dan JavaScript

Terhad oleh keupayaan pemprosesan visual semula jadi manusia, sistem pengecaman visual manusia tidak boleh dibandingkan dengan komputer dalam banyak aspek Contohnya, kuasa otak manusia tidak mencukupi untuk mengenali sejumlah besar wajah dalam tempoh yang singkat. Walau bagaimanapun, dalam teknologi komputer yang canggih hari ini, teknologi pengecaman muka telah menjadi semakin matang. Menggunakan gabungan penglihatan komputer dan kecerdasan buatan, kami telah dapat membangunkan pelbagai teknologi pengecaman muka, salah satu yang paling penting ialah sistem pengecaman muka dalam talian. Artikel ini bertujuan untuk memperkenalkan cara menggunakan WebSocket dan JavaScript untuk melaksanakan sistem pengecaman muka dalam talian.

Mula-mula anda perlu memahami apa itu WebSocket. WebSocket ialah protokol komunikasi rangkaian berdasarkan protokol TCP. Ia menyediakan sambungan berterusan antara penyemak imbas dan pelayan, membolehkan komunikasi dua hala. Dalam artikel ini, kami akan menggunakan WebSocket untuk menghantar maklumat imej dan pengecaman daripada klien ke pelayan, dan untuk menghantar hasil pengecaman daripada pelayan kembali kepada klien.

Langkah pertama ialah membuat sambungan WebSocket. Dalam klien, buat sambungan WebSocket dengan coretan kod berikut:

let socket = new WebSocket("ws://localhost:8080/");
socket.onopen = function() {
   console.log("WebSocket连接已打开");
};
socket.onmessage = function(event) {
   console.log(event.data);
};

Ini akan membuka sambungan WebSocket pada localhost, menyambung ke port 8080. Apabila sambungan WebSocket dibuka, log "Sambungan WebSocket dibuka" akan dikeluarkan. Apabila mesej diterima daripada pelayan, data mesej dikeluarkan ke konsol.

Kini kita perlu melaksanakan fungsi klien menghantar maklumat imej ke pelayan. Terdapat beberapa kaedah untuk menangkap imej, termasuk elemen "" dalam HTML5 dan API "getUserMedia". Salah satu cara paling mudah untuk menangkap data kamera ialah menggunakan API "getUserMedia":

let video = document.querySelector('video');
navigator.mediaDevices.getUserMedia({video: true})
  .then(function (stream) {
    video.srcObject = stream;
  });

Imej yang ditangkap kini boleh dilukis ke dalam elemen menggunakan API Kanvas HTML5:

let canvas = document.getElementById('canvas');
let context = canvas.getContext('2d');
context.drawImage(video, 0, 0, canvas.width, canvas.height);

Data imej boleh dilukis sebagai Base64 string Ekstrak dan hantar ke pelayan melalui WebSocket:

let dataUrl = canvas.toDataURL('image/jpeg', 1.0);
socket.send(dataUrl);

Pelayan akan menggunakan OpenCV dan Python untuk memproses dan mengenali imej yang diterima. Berikut ialah skrip Python mudah yang menggunakan OpenCV untuk memotong muka daripada imej:

import cv2

def detect_faces(image):
    face_cascade = cv2.CascadeClassifier('haarcascade_frontalface_default.xml')
    gray = cv2.cvtColor(image, cv2.COLOR_BGR2GRAY)
    faces = face_cascade.detectMultiScale(gray, 1.3, 5)
    return faces

def extract_faces(image_path):
    image = cv2.imread(image_path)
    faces = detect_faces(image)
    for i, (x, y, w, h) in enumerate(faces):
        face_image = image[y:y+h, x:x+w]
        cv2.imwrite('face_{}.jpg'.format(i), face_image)

Seperti yang anda boleh lihat, skrip ini menggunakan pengesan muka dalam OpenCV untuk mengesan wajah dalam imej dan menukar muka menjadi Potong dan simpannya ke fail "face_{}.jpg".

Di bahagian pelayan, anda boleh menulis program WebSocket berikut menggunakan Python.

import asyncio
import cv2
import base64
import io

from aiohttp import web

async def index(request):
    return web.Response(text="WebSocket服务器已启动！")

async def websocket_handler(request):
    ws = web.WebSocketResponse()
    await ws.prepare(request)
    
    while True:
        data = await ws.receive()
        if data.type == web.WSMsgType.TEXT:
            await ws.send_str("接收到了一张新的图像，请稍候……")
            img_data = data.data[23:]  # 截取“data:image/jpeg;base64,”之后的数据
            try:
                img_bytes = base64.b64decode(img_data)
                img_stream = io.BytesIO(img_bytes)
                img_np = cv2.imdecode(np.frombuffer(img_stream.read(), np.uint8), cv2.IMREAD_UNCHANGED)
                
                # 图像识别代码
                # ...
                
                # 向客户端发送识别结果
                await ws.send_str("这是一个人脸。")
            except:
                await ws.send_str("出错了，无法处理该图像。")

        elif data.type == web.WSMsgType.ERROR:
            print("WebSocket连接发生错误！ Code：{}".format(ws.exception()))
            break

    return ws

app = web.Application()
app.router.add_get('/', index)
app.router.add_get('/ws', websocket_handler)  # /ws是WebSocket路径，亦可为其他路径
web.run_app(app, port=8080)

Apabila sambungan WebSocket dibuka, fungsi websocket_handler akan berjalan secara automatik dan terus mendengar mesej daripada klien. Apabila imej baharu diterima, pengekodan Base64 dihuraikan dan diproses menggunakan OpenCV. Selepas data diproses, hasilnya dikembalikan kepada pelanggan.

Pada ketika ini, kami telah berjaya melaksanakan sistem pengecaman muka dalam talian. Kod sisi klien dan sisi pelayan yang lengkap adalah seperti berikut:

Pelanggan:

<html>
<head>
    <meta charset="UTF-8">
    <title>人脸识别</title>
</head>
<body>
    <h1 id="人脸识别">人脸识别</h1>
    <video width="320" height="240" autoplay></video>
    <canvas id="canvas" width="320" height="240"></canvas>
    <script>
        let socket = new WebSocket("ws://localhost:8080/");
        socket.onopen = function() {
            console.log("WebSocket连接已打开");
        };
        socket.onmessage = function(event) {
            console.log(event.data);
        };

        let video = document.querySelector('video');
        navigator.mediaDevices.getUserMedia({video: true})
            .then(function (stream) {
                video.srcObject = stream;
            });

        let canvas = document.getElementById('canvas');
        let context = canvas.getContext('2d');

        setInterval(function() {
            context.drawImage(video, 0, 0, canvas.width, canvas.height);
            let dataUrl = canvas.toDataURL('image/jpeg', 1.0);
            socket.send(dataUrl);
        }, 500);
    </script>
</body>
</html>

Sisi pelayan:

import asyncio
import cv2
import base64
import io

from aiohttp import web

async def index(request):
    return web.Response(text="WebSocket服务器已启动！")

async def websocket_handler(request):
    ws = web.WebSocketResponse()
    await ws.prepare(request)
    
    while True:
        data = await ws.receive()
        if data.type == web.WSMsgType.TEXT:
            await ws.send_str("接收到了一张新的图像，请稍候……")
            img_data = data.data[23:]  # 截取“data:image/jpeg;base64,”之后的数据
            try:
                img_bytes = base64.b64decode(img_data)
                img_stream = io.BytesIO(img_bytes)
                img_np = cv2.imdecode(np.frombuffer(img_stream.read(), np.uint8), cv2.IMREAD_UNCHANGED)
                
                # 图像识别代码
                # ...
                
                # 向客户端发送识别结果
                await ws.send_str("这是一个人脸。")
            except:
                await ws.send_str("出错了，无法处理该图像。")

        elif data.type == web.WSMsgType.ERROR:
            print("WebSocket连接发生错误！ Code：{}".format(ws.exception()))
            break

    return ws

app = web.Application()
app.router.add_get('/', index)
app.router.add_get('/ws', websocket_handler)
web.run_app(app, port=8080)

Saya harap artikel ini dapat membantu anda memahami cara menggunakan WebSocket dan JavaScript untuk melaksanakan sistem pengecaman muka dalam talian dan cepat membinanya Hadirkan sistem yang boleh dilaksanakan.

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan sistem pengecaman muka dalam talian menggunakan WebSocket dan JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!