首页 > 解决方案 > 使用 Javascript 和 Flask 进行视频流时的 URL 重定向

问题描述

我创建了一个对象识别文件,可以成功识别 Apple 和 Mango 等对象。我按照视频流博客中的教程在 Flask 上实现了实时视频 流

这是我的烧瓶文件。

from flask import Flask, render_template, Response, redirect, url_for
from camera import VideoCamera
app = Flask(__name__)
@app.route('/')
def index():
    return render_template('index.html')
def gen(camera1):
    while True:
        label, frame = camera1.get_frame()
        yield b'--frame\r\nContent-Type: image/jpeg\r\n\r\n'
        yield frame
        yield b'\r\n\r\n'
def genlabel(camera1):
    while True:
        label, frame = camera1.get_frame()
        return label
@app.route('/form')
def form():
    return Response(genlabel(VideoCamera()),
                    mimetype='text')
@app.route('/video_feed')
def video_feed():
    label = gen(VideoCamera())
    return Response((label),
                    mimetype='multipar/x-mixed-replace; boundary=frame')
@app.route('/apple')
def add():
    return render_template('apple.html')

这是我渲染的 index.html 文件。

<html>
  <head>
    <title>Video Streaming Demonstration</title>
  </head>
  <body>
      <p id="label">Here will be date|time</p>
<script>
    var label = document.getElementById("label");
    if (label == "apple"){
        label.addEventListener('change', doThing);
    }

    setInterval(() => {
        fetch("{{ url_for('form') }}")
        .then(response => {
                response.text().then(t => {label.innerHTML = t})
            });
        }, 100);  
    /* function */
    function doThing(){
        location.href = "{{ url_for('apple') }}";
    }
</script>
  </body>
</html>

即使在视频流中检测到苹果,它也不会重定向。为什么 ?

标签: javascriptpythonopencvflaskvideo-streaming

解决方案


推荐阅读