首頁 > 文章 > web前端 > 如何使用WebSocket和JavaScript實現線上人臉辨識系統

如何使用WebSocket和JavaScript實現線上人臉辨識系統

WBOY原創: 2023-12-18 16:27:23973瀏覽

受限於人類天生的視覺處理能力，人的視覺辨識系統在許多方面無法與電腦相比，例如，人的腦力不足以在短時間內辨識出大量的人臉。然而，在電腦如今的高級技術中，臉部辨識技術已經日益成熟化。利用電腦視覺和人工智慧的結合，我們能夠開發出多種臉部辨識技術，其中最重要的一種是線上人臉辨識系統。本文旨在介紹如何利用WebSocket和JavaScript來實作一個線上人臉辨識系統。

首先需要理解WebSocket是什麼。 WebSocket是一種基於TCP協定的網路通訊協定。它提供了瀏覽器和伺服器之間的持久性連接，實現了雙向通訊。在本文中，我們將使用WebSocket來將圖像和識別資訊從客戶端發送到伺服器，並將識別結果從伺服器發送回客戶端。

第一步是建立一個WebSocket連線。在客戶端中，透過以下程式碼片段建立一個WebSocket連接：

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

這將在本機上開啟一個WebSocket連接，連接到8080埠。當WebSocket連線開啟時，將輸出日誌「WebSocket連線已開啟」。當接收到來自伺服器的訊息時，將在控制台中輸出訊息資料。

現在需要實作客戶端將圖像資訊傳送到伺服器的功能。有多種方法可用於擷取影像，其中包括HTML5中的「

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

現在可以使用HTML5 Canvas API將擷取的影像繪製到一個

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

可以將圖像資料作為Base64字串提取出來，然後透過WebSocket發送給伺服器：

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

伺服器將使用OpenCV和Python將接收到的圖像進行處理和識別。以下是一個簡單的Python腳本，使用OpenCV將人臉從圖像中剪切出來：

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)

#可以看到，這個腳本使用了OpenCV中的人臉檢測器來檢測圖像中的人臉，並將人臉剪下來儲存到「face_{}.jpg」的檔案中。

在伺服器端，可以使用Python編寫以下WebSocket程式。

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)

當WebSocket連線開啟時，將自動執行websocket_handler函數，並持續監聽來自客戶端的訊息。當接收到新的影像時，將解析Base64編碼並使用OpenCV處理。資料處理後，將結果傳回給客戶端。

至此，我們已經成功地實現了一個線上人臉辨識系統。完整的客戶端和伺服器端程式碼如下所示：

客戶端：

<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>

伺服器端：

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)

希望這篇文章能幫助您了解如何使用WebSocket和JavaScript實作一個線上人臉辨識系統，並快速建構出一個可行性系統。

以上是如何使用WebSocket和JavaScript實現線上人臉辨識系統的詳細內容。更多資訊請關注PHP中文網其他相關文章！

Python JavaScript html5 字符串 canvas opencv 人工智能 websocket

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：如何使用Highcharts建立環形圖下一篇：如何使用Highcharts建立環形圖

看更多