如何实现Django StreamingHttpResponse视频流的网页嵌入

基础实现现状 #

直接访问videoStream视图对应的URL http://127.0.0.1:8000/videostream时，无需加载模板即可正常显示本地摄像头的实时视频流，当前目标是将该视频流正常嵌入到普通网页或Django模板中。

现有views.py实现代码如下：

class VideoCamera(object):
    def __init__(self):
        self.video = cv2.VideoCapture(0)
    def __del__(self):
        self.video.release()

    def get_frame(self):
        ret,image = self.video.read()
        ret,jpeg = cv2.imencode('.jpg',image)
        return jpeg.tobytes()

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')


def videoStream(request)
    return StreamingHttpResponse(gen(VideoCamera())), content_type="multipart/x-mixed-replace;boundary=frame")

初始嵌入尝试及异常 #

最初尝试两种前端标签嵌入视频流：

• 使用<video src="http://127.0.0.1:8000/videostream" autoplay="autoplay">标签
• 使用<img src="http://127.0.0.1:8000/videostream">标签

两种方式下，浏览器均可正常向对应视图发起请求，但视频流始终无法正常启动。

补充尝试方案及缺陷 #

尝试通过前端JS定时刷新img元素的src属性拉取帧，实现代码如下：

<!DOCTYPE PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Webcam</title>
</head>

<body>
    <img id="image">
    <script type="text/javascript">
        var image = document.getElementById('image');
        function refresh() {
           image.src = "http://127.0.0.1:8000/videostream/";
           image.onload= function(){
               setTimeout(refresh, 30);
          }
        }
        refresh();
    </script>
</body>
</html>

该方案虽可启动视频流，但运行约10秒后就会崩溃。问题本质是以30毫秒的高频反复向服务端发起请求，完全不符合StreamingHttpResponse的设计使用逻辑，当前需要找到正确的视频流嵌入实现方法。

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