ホームページ > 記事 > ウェブフロントエンド > WebSocket と JavaScript を使用してオンライン顔認識システムを実装する方法

WebSocket と JavaScript を使用してオンライン顔認識システムを実装する方法

WBOYオリジナル: 2023-12-18 16:27:23922ブラウズ

人間の視覚処理能力には生来の限界があるため、人間の視覚認識システムは多くの点でコンピューターと比較できません。たとえば、人間の脳力は多数の物体を認識するには十分ではありません。すぐに顔が見えます。しかし、今日の高度なコンピューター技術の中で、顔認識技術はますます成熟しています。コンピュータービジョンと人工知能を組み合わせて使用することで、さまざまな顔認識テクノロジーを開発することができました。その中で最も重要なものの 1 つはオンライン顔認識システムです。この記事の目的は、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 を使用して、受信した画像を処理および認識します。以下は、OpenCV を使用して画像から顔を切り取る単純な Python スクリプトです:

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 中国語 Web サイトの他の関連記事を参照してください。

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

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：Highcharts を使用してドーナツチャートを作成する方法次の記事：Highcharts を使用してドーナツチャートを作成する方法

続きを見る