Javascript 通过ajax和flask提供视频流和动态数据的Web应用程序_Javascript_Python_Ajax_Flask

Javascript 通过ajax和flask提供视频流和动态数据的Web应用程序

javascript python ajax flask

Javascript 通过ajax和flask提供视频流和动态数据的Web应用程序,javascript,python,ajax,flask,Javascript,Python,Ajax,Flask,我正在尝试将动态数据更新程序添加到我的视频流web界面。我使用烧瓶框架。对于数据更新程序，我使用ajax。如果我在index.html中注释行，好的，我从python收到了当前时间（_get_time），并在html结果块中更改它。但在行中，我没有从python获得时间#html中的结果块不更新 main.py： from flask import Flask, render_template, Response, jsonify, request from camera import V

我正在尝试将动态数据更新程序添加到我的视频流web界面。我使用烧瓶框架。对于数据更新程序，我使用ajax。如果我在index.html中注释

行，好的，我从python收到了当前时间（_get_time），并在html结果块中更改它。但在

行中，我没有从python获得时间#html中的结果块不更新

main.py：

from flask import Flask, render_template, Response, jsonify, request
from camera import VideoCamera
from datetime import datetime

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html')

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

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

@app.route('/_get_time')
def get_time():
    time = datetime.utcnow()
    return jsonify(result=time)

if __name__ == '__main__':
    app.run(host='0.0.0.0', debug=True)

index.html：

<html>
    <head>
        <title>Video Streaming Demonstration</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1 /jquery.min.js"></script>
        <script>window.jQuery || document.write('<script src="{{url_for('static', filename='jquery.js') }}">\x3C/script>')</script>
        <script type=text/javascript>
            $SCRIPT_ROOT = {{ request.script_root|tojson|safe }};
        </script>
        <script type=text/javascript>
            setInterval("add()",1000)
            function add ()
            {
                $.getJSON($SCRIPT_ROOT + '/_get_time',
                function(data) {
                    $("#result").text(data.result);
                });
            }
        </script>
    </head>
    <body>
        <h1>Video Streaming Demonstration</h1>
        <img id="bg" src="{{ url_for('video_feed') }}"><!--Comment it -->
        <span id=result>?</span>
    </body>
</html>


视频流演示
window.jQuery | | document.write（'\x3C/script>'））
$SCRIPT_ROOT={{request.SCRIPT_ROOT|tojson|safe}；
setInterval（“添加（）”，1000）
函数添加（）
{
$.getJSON（$SCRIPT\u ROOT+'/\u get\u time'，
功能（数据）{
$（“#结果”）.text（data.result）；
});
}
视频流演示
?

谢谢大家!