JavaScriptを介してPythonAnywhereのOpenCVでWebカメラにアクセスする方法

私はDjangoでWebアプリケーションを開発しました。これは、トリガーされるとユーザーWebカメラを開いて顔を検出するOpevCVコードを含むビューメソッドを備えています。このアプリは私のローカルサーバーで正常に動作しますが、PythonAnywhereでホストした場合、PAホスティングではカメラが機能しないため、カメラが見つからないと表示されます。
そのため、クライアントマシンを処理するJavaScriptを介してWebカメラを開き、そのホスティングをホストしているサーバーマシンにフィードを渡すようにと誰かから提案されました。
しかし、私はPythonの新人なので、上記のタスクを実行する方法を理解できません。私はこのjsコードを見つけましたが、これを私のDjangoアプリに追加する方法と場所がわかりません。

JavaScriptでフィードを取得するためのコード

var video = document.querySelector("#videoElement");

if (navigator.mediaDevices.getUserMedia) {
    navigator.mediaDevices.getUserMedia({video: true}).then(function(stream) {
      video.srcObject = stream;
  }).catch(function(err0r) {
      console.log("Something went wrong!");
  });
}

カメラを開いて顔を検出するための私のPythonコードは次のとおりです（ローカルサーバーで動作します）

import cv2

cascade = cv2.CascadeClassifier('./haarcascade_frontalface_default.xml')

cam = cv2.VideoCapture(0)


while True:
    ret, frame = cam.read()
    frame = cv2.flip(frame, 1)

    if ret:
        gray = cv2.cvtColor(frame, cv2.COLOR_BGR2GRAY)

        faces = cascade.detectMultiScale(gray, scaleFactor=1.3, minNeighbors=3)

        for (x, y, w, h) in faces:
            cropped = cv2.resize(frame[y:y+h, x:x+w], (198,198))
            cv2.rectangle(frame, (x, y), (x+w, y+h), (255, 0, 0), 2)

        if cv2.waitKey(1) & 0xFF == ord('q'):
            break
            cv2.destroyAllWindows()

        cv2.imshow('Stream', frame)

どんな助けでもありがたいです。前もって感謝します

以前は似たようなことをしていましたが、使用したスキームは次のとおりです。

ご存知のとおり、ウェブカメラからユーザーの写真を取得するにはJavaScriptが必要です。その方法を示す記事を見つけました。Djangoを使用したい場合は、フロントエンド側（HTMLファイル）しか使用できません。これは、画像を取得してbase64（文字列）にエンコードし、WebSocket経由で送信するためのコードです。

その後、DjangoにWebSocketを提供してもらいます。以前は、DjangoではなくFlaskを使用していましたが、django-channelを使用してwebsocketサーバーを作成する方法を確認できます。

最後のステップでは、OpenCVコードを含む関数が必要です。base64をデコードしてopencvに変換する必要があります

def modify_picture(img_data):
    # decode image
    img = from_b64(img_data)

    # your OpenCV filter
    gray = cv2.cvtColor(img, cv2.COLOR_BGR2GRAY)

    # encode image to base64
    return to_b64(gray)

そしてもちろん、とは必要while Trueありませんがcv2.imshow、新しい画像のbase64バージョンを返します。それが役に立てば幸い。

更新：サンプルコードをgithubに記述します。Djangoにはありませんが、Pythonにはまだあります。それがあなたにもっと洞察を与えることを願っています。

JavaScriptを使用してライブビデオストリーミングを取得し、そのストリームをopencv2にフィードして機能させる必要があります。

使用：nodejsでライブビデオストリームを取得する

"http://localhost:3000"次のように、Pythonコードで使用できるURLを取得します。

import cv2

cascade = cv2.CascadeClassifier('./haarcascade_frontalface_default.xml')

cam = cv2.VideoCapture('http://localhost:3000')


while True:
    ret, frame = cam.read()
    frame = cv2.flip(frame, 1)

    if ret:
        gray = cv2.cvtColor(frame, cv2.COLOR_BGR2GRAY)

        faces = cascade.detectMultiScale(gray, scaleFactor=1.3, minNeighbors=3)

        for (x, y, w, h) in faces:
            cropped = cv2.resize(frame[y:y+h, x:x+w], (198,198))
            cv2.rectangle(frame, (x, y), (x+w, y+h), (255, 0, 0), 2)

        if cv2.waitKey(1) & 0xFF == ord('q'):
            break
            cv2.destroyAllWindows()

        cv2.imshow('Stream', frame)