So implementieren Sie ein Online-Gesichtserkennungssystem mit WebSocket und JavaScript

Eingeschränkt durch die angeborenen visuellen Verarbeitungsfähigkeiten des Menschen können menschliche visuelle Erkennungssysteme in vielerlei Hinsicht nicht mit Computern verglichen werden. Beispielsweise reicht die menschliche Gehirnleistung nicht aus, um eine große Anzahl von Gesichtern in kurzer Zeit zu erkennen. Allerdings ist die Gesichtserkennungstechnologie in der heutigen fortschrittlichen Computertechnologie immer ausgereifter geworden. Mithilfe einer Kombination aus Computer Vision und künstlicher Intelligenz konnten wir eine Vielzahl von Gesichtserkennungstechnologien entwickeln, darunter Online-Gesichtserkennungssysteme. Ziel dieses Artikels ist es, die Verwendung von WebSocket und JavaScript zur Implementierung eines Online-Gesichtserkennungssystems vorzustellen.

Zuerst müssen Sie verstehen, was WebSocket ist. WebSocket ist ein Netzwerkkommunikationsprotokoll, das auf dem TCP-Protokoll basiert. Es stellt eine dauerhafte Verbindung zwischen dem Browser und dem Server her und ermöglicht so eine bidirektionale Kommunikation. In diesem Artikel verwenden wir WebSocket, um Bild- und Erkennungsinformationen vom Client an den Server zu senden und die Erkennungsergebnisse vom Server zurück an den Client zu senden.

Der erste Schritt besteht darin, eine WebSocket-Verbindung herzustellen. Erstellen Sie im Client eine WebSocket-Verbindung mit dem folgenden Codeausschnitt:

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

Dadurch wird eine WebSocket-Verbindung auf localhost geöffnet und eine Verbindung zu Port 8080 hergestellt. Beim Öffnen der WebSocket-Verbindung wird das Protokoll „WebSocket-Verbindung ist geöffnet“ ausgegeben. Wenn eine Nachricht vom Server empfangen wird, werden die Nachrichtendaten an die Konsole ausgegeben.

Jetzt müssen wir die Funktion implementieren, dass der Client Bildinformationen an den Server sendet. Es gibt mehrere Methoden zum Erfassen von Bildern, darunter das „“-Element in HTML5 und die „getUserMedia“-API. Eine der einfachsten Möglichkeiten, Kameradaten zu erfassen, ist die Verwendung der „getUserMedia“-API:

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

Aufgenommene Bilder können jetzt mithilfe der HTML5-Canvas-API in ein -Element gezeichnet werden:

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

Bilddaten können als Base64 gezeichnet werden string Extrahieren Sie es und senden Sie es über WebSocket an den Server:

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

Der Server verwendet OpenCV und Python, um das empfangene Bild zu verarbeiten und zu erkennen. Das Folgende ist ein einfaches Python-Skript, das OpenCV verwendet, um Gesichter aus Bildern auszuschneiden:

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)

Wie Sie sehen können, verwendet dieses Skript den Gesichtsdetektor in OpenCV, um Gesichter im Bild zu erkennen und die Gesichter in zu konvertieren. Schneiden Sie es aus und speichern Sie es in die Datei „face_{}.jpg“.

Auf der Serverseite können Sie das folgende WebSocket-Programm mit Python schreiben.

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)

Wenn die WebSocket-Verbindung geöffnet wird, wird die Funktion websocket_handler automatisch ausgeführt und wartet weiterhin auf Nachrichten vom Client. Wenn ein neues Bild empfangen wird, wird die Base64-Kodierung mithilfe von OpenCV analysiert und verarbeitet. Nachdem die Daten verarbeitet wurden, werden die Ergebnisse an den Client zurückgegeben.

Zu diesem Zeitpunkt haben wir erfolgreich ein Online-Gesichtserkennungssystem implementiert. Der vollständige clientseitige und serverseitige Code lautet wie folgt:

Client:

<html>
<head>
    <meta charset="UTF-8">
    <title>人脸识别</title>
</head>
<body>
    <h1>人脸识别</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>

Serverseitig:

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)

Ich hoffe, dieser Artikel kann Ihnen helfen zu verstehen, wie Sie WebSocket und JavaScript verwenden, um ein Online-Gesichtserkennungssystem zu implementieren und Bauen Sie es schnell auf. Überlegen Sie sich ein praktikables System.

Das obige ist der detaillierte Inhalt vonSo implementieren Sie ein Online-Gesichtserkennungssystem mit WebSocket und JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!