Opencv Django网页中摄像头直播Stream

Question

I am making a project in Django. And I want to show live feed from camera on a webpage.我正在 Django 做一个项目。我想在网页上显示来自摄像头的实时提要。 But I am not sure on how to return live feed I get from a cam on a web page.但我不确定如何返回我从 web 页面上的摄像头获得的实时提要。 Here's my code that I have tried so far but haven't seen any progress.这是我到目前为止尝试过但没有看到任何进展的代码。

from django.shortcuts import render
from .forms import FaceAdditionForm
import cv2
import numpy as np
from django.http import StreamingHttpResponse

def capture_video_from_cam():
    cap = cv2.VideoCapture(0)
    currentFrame = 0
    while True:

        ret, frame = cap.read()

        # Handles the mirroring of the current frame
        frame = cv2.flip(frame,1)
        currentFrame += 1

def addfaces(request):
    add_faces_form = FaceAdditionForm()
    if add_faces_form.is_valid():
        add_faces_form.save()
    return render(request, 'base.html', {'add_faces': add_faces_form})


def show_video_on_page(request):
    resp = StreamingHttpResponse(capture_video_from_cam())
    return render(request, 'base.html', {'video': resp})

Answer 1

The solution for the above problem was something like this :上述问题的解决方案是这样的：

views.py视图.py

from django.views.decorators import gzip
from django.http import StreamingHttpResponse
import cv2
import threading

class VideoCamera(object):
    def __init__(self):
        self.video = cv2.VideoCapture(0)
        (self.grabbed, self.frame) = self.video.read()
        threading.Thread(target=self.update, args=()).start()

    def __del__(self):
        self.video.release()

    def get_frame(self):
        image = self.frame
        _, jpeg = cv2.imencode('.jpg', image)
        return jpeg.tobytes()

    def update(self):
        while True:
            (self.grabbed, self.frame) = self.video.read()


def gen(camera):
    while True:
        frame = camera.get_frame()
        yield(b'--frame\r\n'
              b'Content-Type: image/jpeg\r\n\r\n' + frame + b'\r\n\r\n')


@gzip.gzip_page
def livefe(request):
    try:
        cam = VideoCamera()
        return StreamingHttpResponse(gen(cam), content_type="multipart/x-mixed-replace;boundary=frame")
    except:  # This is bad! replace it with proper handling
        pass

And then in urls.py map this to a url.然后在 urls.py 中将其映射到一个 url。

Answer 2

I modified the code by Aniket Maithani to display it in certain img source.我修改了 Aniket Maithani 的代码以在某些 img 源中显示它。

camera.py相机.py

class VideoCamera(object):
    def __init__(self):
        self.video = cv2.VideoCapture(0)
        (self.grabbed, self.frame) = self.video.read()
        threading.Thread(target=self.update, args=()).start()

    def __del__(self):
        self.video.release()

    def get_frame(self):
        image = self.frame
        _, jpeg = cv2.imencode('.jpg', image)
        return jpeg.tobytes()

    def update(self):
        while True:
            (self.grabbed, self.frame) = self.video.read()

def gen(camera):
while True:
    frame = camera.get_frame()
    yield(b'--frame\r\n'
          b'Content-Type: image/jpeg\r\n\r\n' + frame + b'\r\n\r\n')

views.py视图.py

from camera import *

@gzip.gzip_page
def livefe(request):
    try:
        cam = VideoCamera()
        return StreamingHttpResponse(gen(cam), content_type="multipart/x-mixed-replace;boundary=frame")
    except:  # This is bad!
        pass

def index(request, *args, **kwargs):
    return render(request, 'index.html')

urls.py网址.py

from django.urls import path
from .views import *

urlpatterns = [
    path('', index),

        # 'livefe' -> function from views
        # 'live_camera' -> name at index.html>img src="{% url 'live_camera' %}
        path('/camera', livefe, name="live_camera"),
    ]

index.html index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebCamera</title>
</head>
<body>
    <div>
        <img src="{% url 'live_camera' %}">
    </div>
</body>
</html>

Opencv Django网页中摄像头直播Stream

问题描述

2 个解决方案

解决方案1
19 2018-04-12 21:04:22

解决方案2
0 2023-01-24 14:47:41

Opencv Django网页中摄像头直播Stream

问题描述

2 个解决方案

解决方案1 19 2018-04-12 21:04:22

解决方案2 0 2023-01-24 14:47:41

解决方案1
19 2018-04-12 21:04:22

解决方案2
0 2023-01-24 14:47:41