如何通过 Javascript 在 PythonAnywhere 上的 OpenCV 中访问网络摄像头？

Posted 2023-02-23

【中文标题】如何通过 Javascript 在 PythonAnywhere 上的 OpenCV 中访问网络摄像头？

【英文标题】：How to access webcam in OpenCV on PythonAnywhere through Javascript?

【发布时间】：2020-05-27 15:28:32

【问题描述】：

我在 Django 中开发了一个 WebApplication，它有一个包含 OpevCV 代码的视图方法，当触发该代码时会打开用户网络摄像头以检测其面部。这个应用程序在我的本地服务器上运行良好，但是当我在 PythonAnywhere 上托管它时，它说找不到相机，因为我的 PA 托管不提供相机。 所以有人建议我通过 javascript 打开网络摄像头，因为它处理客户端计算机，然后将其提要传递给我的托管服务器计算机。 但由于我是 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代码如下（在localserver中工作）

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)

感谢任何帮助。提前谢谢你

【参考方案1】：

您需要使用 javascript 获取实时视频流，然后将该流提供给 opencv2 以使其正常工作。

使用：get live videostream in nodejs

你会得到一个"http://localhost:3000"的url，你可以在python代码中使用它，如下所示：

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)

【讨论】：

您好，您提供的解决方案是从文件流式传输视频，而不是从我的实时网络摄像头传输视频。

如果您能给我一个与我的代码相关的答案，那就太好了。实际上上述解决方案对我不起作用

【参考方案2】：

我曾经做过类似的事情，我使用的方案如下：

如您所知，我们需要 javascript 从网络摄像头获取用户图片。我发现an article 向我们展示了如何做到这一点，如果你想使用 Django，你只能使用前端（html 文件）。该代码用于获取图片并将其编码为 base64（字符串）并通过 websocket 发送。

之后，我们希望 Django 服务于 websocket。过去，我是用 Flask 做的，而不是 Django，但你可以看到如何使用 django-channel 创建 websocket 服务器。

对于最后一步，您需要一个带有 OpenCV 代码的函数。你需要decode base64和convert it to 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 中。希望它能给你更多的见解。

【讨论】：

您好，尝试您的解决方案需要一些时间，但我仍然接受您的努力，因为有时间限制。感谢您的帮助

嗨，我正在努力实现这个。很想听听是否有人成功！

嗨@Joesmaker，我只是为这个概念放了示例实现。你可以看到更新的答案。

@Tegar 我尝试使用您的 git 代码，但是当服务器在命中后被触发时，会出现一个空白数组，上面写着 details: not found

@AayushGupta 你能实施这个解决方案吗？