时间戳

首页 > 解决方案 > 如何停止烧瓶视频流媒体

javascript - 如何停止烧瓶视频流媒体

问题描述

我使用烧瓶视频流媒体，我想知道在由于检测到二维码而停止流媒体后如何执行另一个操作。在 stackoverflow 上提出了类似的问题，答案是使用 javascript 侦听器。但是考虑到向浏览器提供视频流的是 HTML img 元素，我的问题是应该在哪个事件上设置 javascript 侦听器。我在图像标签上尝试了几个事件（中止、错误、暂停......），但没有结果。

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


@app.route('/video_feed/')
def video_feed():
    camera = get_camera() 
    return Response(gen(camera),
        mimetype='multipart/x-mixed-replace; boundary=frame')


<html>
  <head>
    <link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='style.css') }}">
    <title>Camera App</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  </head>

  <body id="bod">
    <center>
      <div id="camera">     
        <img id="cam" src="{{ url_for('video_feed') }}" alt="video feed">
      </div> 
      <script>
            document.getElementById("cam").addEventListener("abort", function() {
              alert("Hello World!");
            });
      </script>

    </center>
  </body>
</html>

标签： javascriptpythonflask

解决方案

如果您检查Supported HTML tags:onabort 、 onended 、 onstalled和 onsuspend ，那么您只会看到<video>而<audio>不会看到<img>。

可能您将不得不使用 JavaScript/AJAX 定期询问服务器是否检测到 QR。

我发现它<img>可以onload在每个加载的帧之后执行函数。所以我用它Date()来记住最后一帧的加载时间，我用它setInterval()来检查当前时间和最后一帧时间之间的差异以识别流的结束。我假设如果差异大于 1s，那么它是流的结束，但这不是理想的方法，因为有时它可能在帧之间有更长的延迟，但仍然流式传输。它可能在页面开始时有更长的延迟，并且可能需要稍后运行代码。

在烧瓶中，我用来self.stop_time在 3 秒后停止流式传输以模拟流式传输结束。

from flask import Flask, render_template_string, Response
import cv2
import time

app = Flask(__name__)

class Camera():
    
    def __init__(self):
        self.video = cv2.VideoCapture(0)
        self.start_time = time.time() 
        self.stop_time = self.start_time + 3
        
    def __del__(self):
        self.video.release()
        
    def get_feed(self):
        stat, frame = self.video.read()
        ret, jpeg = cv2.imencode('.jpg', frame)
        
        is_decoded = (time.time() >= self.stop_time) # stop stream after 3 seconds
        
        return jpeg.tobytes(), is_decoded
    
# ---

def get_camera():
    return Camera()
    
def gen(camera):
    while True:
        frame, is_decoded = camera.get_feed() 
        if is_decoded:
            print('stop stream')
            break
        yield b'--frame\r\nContent-Type: image/jpeg\r\n\r\n' + frame + b'\r\n'


@app.route('/video_feed/')
def video_feed():
    camera = get_camera() 
    return Response(gen(camera), mimetype='multipart/x-mixed-replace; boundary=frame')

@app.route('/')
def index():
    return render_template_string(
'''<html>
  <body>
      <img id="cam" src="{{ url_for('video_feed') }}">
      <script>
            var last_frame_time = ''; // no time before first frame to skip longer delay at start
            
            document.getElementById("cam").addEventListener("load", function() { // event "load" is generated after every loaded frame
                last_frame_time = new Date(); 
            });
            
            var intervalId = window.setInterval(function(){
                if(last_frame_time != '') { // to 
                    var current_time = new Date();
                    var seconds = (current_time - last_frame_time)/1000;
                    if(seconds >= 1) {
                        alert("Hello World! " + seconds);
                        clearInterval(intervalId);  // stop checking it
                    }
                }
            }, 100);  // 100ms = 0.1s 
      </script>
  </body>
</html>''')

if __name__ == '__main__':
    app.run()

编辑：

对我来说，这是更好的例子。它不使用events，但它用于AJAX向服务器询问is_decoded这意味着流的结束。它也可以QR从服务器解码。

from flask import Flask, render_template_string, Response, jsonify
import cv2
import time

app = Flask(__name__)

class Camera():
    
    def __init__(self):
        self.video = cv2.VideoCapture(0)
        self.start_time = time.time() 
        self.stop_time  = self.start_time + 5
        self.is_decoded = False  # keep it to send it with AJAX
        
    def __del__(self):
        self.video.release()
        
    def get_feed(self):
        stat, frame = self.video.read()
        ret, jpeg = cv2.imencode('.jpg', frame)
        
        self.is_decoded = (time.time() >= self.stop_time) # stop stream after 5 seconds
        
        return jpeg.tobytes(), self.is_decoded
    
# ---

# create it at start so two functions may use it
camera = Camera()

# send the same camera to two functions
def get_camera():
    return camera
    
def gen(camera):
    # start timer only when start streaming
    camera.start_time = time.time()
    camera.stop_time = camera.start_time + 5
    
    while True:
        frame, is_decoded = camera.get_feed() 
        if is_decoded:
            print('stop stream')
            break
        yield b'--frame\r\nContent-Type: image/jpeg\r\n\r\n' + frame + b'\r\n'

@app.route('/video_feed/')
def video_feed():
    camera = get_camera() 
    return Response(gen(camera), mimetype='multipart/x-mixed-replace; boundary=frame')

@app.route('/is_decoded/')
def is_decoded():
    camera = get_camera() 
    return jsonify({'is_decoded': camera.is_decoded})

@app.route('/')
def index():
    return render_template_string(
'''<html>
  <head>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  </head>
  
  <body>
      <img id="cam" src="{{ url_for('video_feed') }}">
      <script>
            var intervalId = window.setInterval(function(){
                $.getJSON('/is_decoded/', function(data){
                    if(data['is_decoded'] == true) {
                        alert("Hello World! " + data['is_decoded']);
                        clearInterval(intervalId);  // stop checking it
                    };
                })
            }, 500);  // 500ms = 0.5s 
      </script>
  </body>
</html>''')

if __name__ == '__main__':
    app.run()

顺便提一句：

据我了解，您想检测QRcode来自用户网络摄像头的图像 - 但cv2只能与本地摄像头一起使用，如果其他人远程使用页面，它将无法工作。它需要 JavaScript 从他的相机中获取图像，将其发送到服务器并进行处理。

推荐阅读