如何在Django网页中实现OpenCV摄像头实时视频流展示？

我来帮你搞定Django里的摄像头实时流问题！你现在的代码只是读取了摄像头帧，但没把它转换成浏览器能识别的流格式，所以网页没法正常展示。下面是完整的可运行方案，一步步拆解给你：

1. 完善视图函数（处理视频流生成） #

首先修改你的视图，把摄像头帧转换成MJPEG流格式（浏览器原生支持这种实时流类型），并通过StreamingHttpResponse返回：

from django.shortcuts import render
from django.http import StreamingHttpResponse
import cv2

# 全局维护摄像头实例，避免重复创建
camera = None

def get_camera():
    global camera
    if camera is None:
        # 打开默认摄像头（索引0，若不行可尝试1）
        camera = cv2.VideoCapture(0)
        # 可选：设置摄像头分辨率
        camera.set(cv2.CAP_PROP_FRAME_WIDTH, 640)
        camera.set(cv2.CAP_PROP_FRAME_HEIGHT, 480)
    return camera

def generate_video_frames():
    camera = get_camera()
    try:
        while True:
            # 读取摄像头帧
            success, frame = camera.read()
            if not success:
                break
            
            # 将OpenCV帧编码为JPEG字节流
            success, jpeg_frame = cv2.imencode('.jpg', frame)
            if not success:
                continue
            
            # 封装成MJPEG流格式（浏览器能识别的边界分隔符）
            yield (b'--frame\r\n'
                   b'Content-Type: image/jpeg\r\n\r\n' + jpeg_frame.tobytes() + b'\r\n')
    finally:
        # 确保摄像头资源被释放
        global camera
        if camera is not None:
            camera.release()
            camera = None

def video_stream(request):
    # 返回流式响应，指定内容类型为MJPEG
    return StreamingHttpResponse(
        generate_video_frames(),
        content_type='multipart/x-mixed-replace; boundary=frame'
    )

def index(request):
    # 渲染展示视频流的前端页面
    return render(request, 'camera_stream.html')

2. 编写前端模板（展示视频流） #

在你的模板目录下创建camera_stream.html，用<img>标签直接指向视频流视图的URL：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>实时摄像头流</title>
</head>
<body>
    <h2>摄像头实时视频</h2>
    <!-- 这里的URL对应你配置的video_stream视图路由 -->
    <img src="{% url 'video_stream' %}" style="width: 640px; height: 480px; border: 1px solid #ccc;">
</body>
</html>

3. 配置URL路由 #

在你的应用urls.py中添加对应的路由：

from django.urls import path
from . import views

urlpatterns = [
    path('', views.index, name='index'),
    path('stream/', views.video_stream, name='video_stream'),
]

关键知识点说明 #

• MJPEG流原理：浏览器通过multipart/x-mixed-replace类型的响应，会持续接收服务器发送的JPEG图片，每张图片用--frame分隔，从而形成“视频流”的视觉效果。
• 生成器函数：generate_video_frames是生成器，每次yield一张图片的字节流，StreamingHttpResponse会逐次把这些内容推送给浏览器，避免一次性加载全部数据。
• 资源管理：用全局变量维护摄像头实例，避免每次请求都重新打开摄像头；在finally块中释放资源，防止内存泄漏。

注意事项 #

• 开发环境下用Django自带的runserver即可正常运行；如果部署到生产环境，建议使用ASGI服务器（如Daphne），因为WSGI服务器对长连接的支持有限。
• 如果摄像头无法打开，尝试更换索引（比如把cv2.VideoCapture(0)改成1），不同平台的摄像头索引可能不同。
• 可以通过调整cv2.imencode的参数（如cv2.imencode('.jpg', frame, [cv2.IMWRITE_JPEG_QUALITY, 80])）来平衡画质和带宽占用。

内容的提问来源于stack exchange，提问作者Aniket Maithani