Javascript 如何停止烧瓶视频流_Javascript_Python_Flask

Javascript 如何停止烧瓶视频流

javascript python flask

Javascript 如何停止烧瓶视频流,javascript,python,flask,Javascript,Python,Flask,我使用一个flask视频流，我想知道由于检测到QR码，流停止后如何执行另一个操作。在stackoverflow上提出了一个类似的问题，答案是使用javascript侦听器。但是考虑到向浏览器提供视频流的是一个HTML img元素，我的问题是javascript侦听器应该设置在哪个事件上。我在图像标签上尝试了几个事件（中止、错误、挂起…），但没有结果 def gen(camera): while True: frame, is_decoded = camera.get_feed()

我使用一个flask视频流，我想知道由于检测到QR码，流停止后如何执行另一个操作。在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')


照相机应用程序
document.getElementById（“cam”）.addEventListener（“中止”，函数（）{
警报（“你好，世界！”）；
});

如果您检查

支持的HTML标记：

，则只会看到

和

，而不会看到

可能您必须使用JavaScript/AJAX定期询问服务器是否检测到QR

我发现

与

onload

一起工作，它在每个加载的帧之后执行函数。所以我将其与

Date（）

一起使用，以记住最后一帧是何时加载的，并使用

setInterval（）

检查当前时间和最后一帧时间之间的差异，以识别流的结束。我假设若差值大于1s，那个么它就是流的结尾，但这不是理想的方法，因为有时帧之间可能有更长的延迟，但仍然流。它可能在页面开始时有更长的延迟，并且可能需要稍后运行代码

在烧瓶中，我使用

self.stop\u time

在3秒后停止流，以模拟流结束

顺便说一句：

据我所知，您希望从用户的网络摄像头检测图像上的

QRcode

，但

cv2

只能与本地摄像头一起工作，如果其他人远程使用页面，则无法工作。它需要JavaScript从他的相机中获取图像，将其发送到服务器并进行处理。

如果您检查

支持的HTML标记：

，则只会看到

和

，而不会看到

。可能您必须使用JavaScript/AJAX定期询问服务器是否检测到QR。感谢您的精彩回答，我没有AJAX方面的经验，因此这提供了一种全新的发现方法。你的最后一个注释非常贴切，我确实打算从用户的网络摄像头中检测代码，我觉得遗漏了这样一个细节有点愚蠢。

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

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