Wie greife ich über Javascript auf Webcam in OpenCV auf PythonAnywhere zu?

8

Ich habe in Django eine Webanwendung entwickelt, die eine Ansichtsmethode enthält, die den OpevCV-Code enthält, der beim Auslösen die Benutzer-Webcam öffnet, um ihr Gesicht zu erkennen. Diese App funktioniert auf meinem lokalen Server einwandfrei, aber wenn ich sie auf PythonAnywhere gehostet habe, heißt es, dass die Kamera nicht gefunden wurde, da mein PA-Hosting keine Kamera bedient.
Also schlug mir jemand vor, die Webcam über Javascript zu öffnen, da sie sich mit dem Client-Computer befasst, und dann ihren Feed an den Server-Computer weiterzuleiten, der mein Hosting ist.
Aber da ich ein Anfänger in Python bin, kann ich nicht herausfinden, wie ich die obige Aufgabe ausführen soll. Ich habe diesen Teil von js Code gefunden, aber ich weiß nicht, wie und wo ich ihn in meine Django App einfügen soll.

Code zum Abrufen des Feeds mit 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!");
  });
}

Mein Python-Code zum Öffnen der Kamera und zum Erkennen von Gesichtern lautet wie folgt (funktioniert auf dem lokalen Server).

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)

Jede Hilfe wird geschätzt. Vielen Dank im Voraus

Aayush Gupta
quelle

Antworten:

1

Ich habe etwas Ähnliches gemacht, das Schema, das ich verwendet habe, war wie folgt:

Datenfluss

Wie Sie bereits wissen, benötigen wir Javascript, um das Bild des Benutzers von der Webcam zu erhalten. Ich habe einen Artikel gefunden , der uns zeigt, wie das geht. Sie können nur die Frontend-Seite (die HTML-Datei) verwenden, wenn Sie Django verwenden möchten. Dieser Code dient zum Abrufen von Bildern und zum Codieren in base64 (Zeichenfolge) und zum Senden über den Websocket.

Danach möchten wir, dass Django den Websocket bedient. In der Vergangenheit habe ich es mit Flask gemacht, nicht mit Django, aber Sie können sehen, wie Sie einen Websocket- Server mit Django-Channel erstellen können .

Für den letzten Schritt benötigen Sie eine Funktion mit Ihrem OpenCV-Code. Sie müssen base64 dekodieren und in opencv konvertieren

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)

Und natürlich brauchen Sie nicht while Trueund cv2.imshow, sondern geben die base64-Version Ihres neuen Bildes zurück. Ich hoffe es hilft.


Update: Ich schreibe einen Beispielcode in meinen Github . Nicht in Django, aber immer noch in Python. Ich hoffe, es gibt Ihnen mehr Einblick.

Tegar
quelle
Hallo, es wird einige Zeit dauern, um Ihre Lösung auszuprobieren, aber ich akzeptiere trotzdem Ihre Bemühungen, da es ein Zeitlimit gibt.
Vielen
Hallo, ich habe ein bisschen Mühe, dieses zu implementieren. Würde gerne hören, ob jemand Erfolg hat!
Joesmaker
1
hi @Joesmaker, ich habe gerade eine Beispielimplementierung für das Konzept eingefügt. Sie können die aktualisierte Antwort sehen.
Tegar
@Tegar Hey, danke fürs Teilen!
Joesmaker
@Tegar Ich habe versucht, Ihren Git-Code zu verwenden, aber wenn der Server nach dem Treffer ausgelöst wird, erscheint ein leeres Array mit der Aufschrift:{ details: not found }
Aayush Gupta
-1

Sie müssen das Live-Video-Streaming mit Javascript abrufen und diesen Stream dann an opencv2 weiterleiten, damit es funktioniert.

Verwenden Sie: Holen Sie sich Live-Videostream in NodeJS

Sie erhalten eine URL, "http://localhost:3000"die Sie im Python-Code wie folgt verwenden können:

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)
Sunil Lama
quelle
Hallo, die Lösung, die Sie bereitgestellt haben, überträgt das Video aus einer Datei und nicht von meiner Live-Webcam.
Aayush Gupta
Es wäre großartig gewesen, wenn Sie mir eine relevante Antwort auf meinen Code gegeben hätten. Eigentlich funktioniert die obige Lösung bei mir nicht
Aayush Gupta