如何将Python实时情绪检测代码整合到Django Web应用并在网页显示

核心思路是彻底移除OpenCV的独立窗口渲染逻辑，转而将处理后的视频帧转为网页可流式接收的格式，配合前端直接展示流数据。

1. 后端（views.py）改造 #

1.1 清理冲突代码 #

删掉所有cv2.imshow()、cv2.waitKey()、cv2.destroyAllWindows()这类触发独立窗口的代码，这是冲突的核心来源。

1.2 实现视频流生成接口 #

用Django的StreamingHttpResponse返回逐帧处理后的视频流，示例代码：

from django.http import StreamingHttpResponse
import cv2
from deepface import DeepFace
import numpy as np

def generate_emotion_frames():
    # 初始化摄像头（0为本地默认摄像头）
    cap = cv2.VideoCapture(0)
    while cap.isOpened():
        success, frame = cap.read()
        if not success:
            break
        
        # 执行情绪检测
        try:
            analyze_result = DeepFace.analyze(frame, actions=['emotion'], enforce_detection=False)
            dominant_emotion = analyze_result[0]['dominant_emotion']
            # 在帧上绘制情绪标签
            cv2.putText(frame, f"当前情绪: {dominant_emotion}", (20, 40), 
                        cv2.FONT_HERSHEY_DUPLEX, 1.2, (0, 255, 0), 2)
        except Exception as e:
            # 处理检测异常，避免流中断
            pass
        
        # 将帧编码为JPEG格式
        ret, buffer = cv2.imencode('.jpg', frame)
        frame_bytes = buffer.tobytes()
        
        # 生成流式响应的帧数据格式
        yield (b'--frame\r\n'
               b'Content-Type: image/jpeg\r\n\r\n' + frame_bytes + b'\r\n')
    
    cap.release()

def emotion_stream(request):
    return StreamingHttpResponse(generate_emotion_frames(), content_type='multipart/x-mixed-replace; boundary=frame')

1.3 配置URL路由 #

在应用的urls.py中添加流接口路由：

from django.urls import path
from . import views

urlpatterns = [
    # 其他现有路由...
    path('emotion-stream/', views.emotion_stream, name='emotion_stream'),
]

2. 前端（HTML模板）实现 #

用<img>标签直接对接后端的视频流接口，无需额外处理摄像头，示例模板：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>实时情绪检测</title>
</head>
<body>
    <h2>实时情绪检测</h2>
    <!-- 绑定视频流的img标签 -->
    <img src="{% url 'emotion_stream' %}" width="640" height="480" style="border:1px solid #ccc;">
</body>
</html>

3. 可选进阶方案（前端控制摄像头） #

如果需要由用户授权后在前端调用摄像头，再将帧发送到后端处理，可采用WebSocket方案：

• 前端用WebRTC获取摄像头流，将每帧转为Base64发送到后端WebSocket
• 后端接收帧后用DeepFace检测，返回情绪结果
• 前端在原视频流画布上叠加情绪文本

这种方案适合需要前端控制摄像头开关、分辨率的场景，但开发复杂度更高。

注意事项 #

• 部署到服务器时，若使用后端调用摄像头，需确保服务器有摄像头访问权限；建议生产环境优先采用前端WebRTC方案，避免服务器硬件依赖
• DeepFace检测速度会影响帧率，可通过降低帧分辨率（如cv2.resize(frame, (320, 240))）、减少检测频率（每3帧检测一次）优化性能

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