如何使用WebSocket和JavaScript實現線上人臉辨識系統-js教程-PHP中文網

人脸识别

首頁

web前端

js教程

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Dec 18, 2023 pm 04:27 PM

websocket：用於實現即時通訊功能

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

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

登入後複製

伺服器端：

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中文網其他相關文章！

本網站聲明

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

熱AI工具

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

免費脫衣圖片

Clothoff.io

AI脫衣器

Video Face Swap

使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！

熱工具

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

中文版，非常好用

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

gmail信箱登陸入口在哪裡

7889

Java教學

1650

CakePHP 教程

1411

Laravel 教程

1302

PHP教程

1248

Related knowledge

前端熱敏紙小票打印遇到亂碼問題怎麼辦？ Apr 04, 2025 pm 02:42 PM

前端熱敏紙小票打印的常見問題與解決方案在前端開發中，小票打印是一個常見的需求。然而，很多開發者在實...

神秘的JavaScript：它的作用以及為什麼重要 Apr 09, 2025 am 12:07 AM

JavaScript是現代Web開發的基石，它的主要功能包括事件驅動編程、動態內容生成和異步編程。 1)事件驅動編程允許網頁根據用戶操作動態變化。 2)動態內容生成使得頁面內容可以根據條件調整。 3)異步編程確保用戶界面不被阻塞。 JavaScript廣泛應用於網頁交互、單頁面應用和服務器端開發，極大地提升了用戶體驗和跨平台開發的靈活性。