zoukankan      html  css  js  c++  java
  • flask的模板引擎jinja入门教程 包含一个通过网络实时传输Video视频流的示例

    本文首发于个人博客https://kezunlin.me/post/1e37a6/,欢迎阅读最新内容!

    tutorial to use python flask jinja templates and a realtime video demo

    Guide

    Jinja delimiters

    The default Jinja delimiters are configured as follows:

    {% ... %} for Statements
    {{ ... }} for Expressions to print to the template output
    {# ... #} for Comments not included in the template output
    #  ... ## for Line Statements
    

    url_for static(css+image)

    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='bootstrap/bootstrap.min.css') }}">
    
    <img src="{{ url_for('static', filename='images/1.PNG') }}" height="{{query_img_height}}" width="{{query_img_width}}">
    

    You have by default the static endpoint for static files.

    will be converted to

    <link rel="stylesheet" type="text/css" href="/static/bootstrap/bootstrap.min.css">
    <img src="/static/images/1.PNG" height="1799" width="896">
    

    url for static(pass image path)

    <h1>Image  {{image_filename}}</h1>
    <img src="{{ url_for('static', filename = image_filename) }}" height="{{query_img_height}}" width="{{query_img_width}}">
    

    notice we do't use

    filename = {{image_filename}}
    

    image_filename will be passed to html with value images/1.PNG

    will be converted to

    <h1>Image  images/1.PNG </h1>
    <img src="/static/images/1.PNG" height="1799" width="896">
    

    filter

    {% set result_count = result_list | length %}
    
    {{ index | string ) }}
    

    filter: length, string

    debug html

    debug jinja2 html

    url_for with params

    python code

    @app.route('/index')
    @app.route('/')
    def index():
        return 'you are in the index page'
        
    
    @app.route('/questions/<int:question_id>'):    
    #int has been used as a filter that only integer will be passed 
    # in the url otherwise it will give a 404 error
    
    def find_question(question_id):  
        return ('you asked for question {0}'.format(question_id))
    

    html page

    <a href={{ url_for('index') }}>Index</a>
    <a href = {{ url_for('find_question' ,question_id=1) }}>Question 1</a>
    
    {% if kline_chart %}
       <div class="chart">{{ kline_chart | safe }}</div>
    {% endif %}
    

    Realtime Video

    index.html

    <img src="{{ url_for('video_feed') }}" height="480" width="640">
    

    main.py

    #===================================================
    outputFrame = None
    lock = threading.Lock()
    
    # initialize a flask object
    app = Flask(__name__)
    
    @app.route("/")
    def index():
    	# return the rendered template
    	return render_template("index.html")
    
    def generate():
        	# grab global references to the output frame and lock variables
    	global outputFrame, lock
    
    	# loop over frames from the output stream
    	while True:
    		# wait until the lock is acquired
    		with lock:
    			# check if the output frame is available, otherwise skip
    			# the iteration of the loop
    			if outputFrame is None:
    				continue
    
    			# encode the frame in JPEG format
    			(flag, encodedImage) = cv2.imencode(".jpg", outputFrame)
    
    			# ensure the frame was successfully encoded
    			if not flag:
    				continue
    
    		# yield the output frame in the byte format
    		yield(b'--frame
    ' b'Content-Type: image/jpeg
    
    ' +
    			bytearray(encodedImage) + b'
    ')
    
    @app.route("/video_feed")
    def video_feed():
    	# return the response generated along with the specific media
    	# type (mime type)
    	return Response(generate(),
    		mimetype = "multipart/x-mixed-replace; boundary=frame")
    #===================================================
    
    
    # start the flask app
    args = {"ip":"0.0.0.0","port":8888}
    app.run(host=args["ip"], port=args["port"], debug=True,
    		threaded=True, use_reloader=False)
    

    Example

    index

    # for web
    from flask import Flask,Response,render_template
    
    web_params = {
        "query_key":"",
        "query_segimg_filepath":"",
        "query_segmask_filepath":"",
        "query_img_height":0,
        "query_img_width":0,
        "result_list": []
    }
    
    # initialize a flask object
    app = Flask(__name__)
    
    @app.route("/")
    def index():
        global web_params
        return render_template("search.html",**web_params)
    
    
    # start the flask app
    args = {"ip":"0.0.0.0","port":8888}
    app.run(host=args["ip"], port=args["port"], debug=True,threaded=True, use_reloader=False)
    

    index.html

    <html>
      <head>
        <title>Query {{query_key}}</title>
      </head>
      <body>
        <h1>Query Image {{ query_segimg_filepath }} </h1>
    
        {# 
          <img src="{{ url_for('static', filename='images/1.PNG') }}" 
            height="30" 
            width="30">
        #}
      
        <img src="{{ url_for('static', filename = query_segimg_filepath) }}" 
          height="{{query_img_height}}" 
          width="{{query_img_width}}">
        {# 
          <img src="{{ url_for('static', filename = query_segmask_filepath) }}" 
            height="{{query_img_height}}" 
            width="{{query_img_width}}">
        #}
    
        {% set result_count = result_list | length %}
        <h1>Search Results #{{result_count}}</h1>
        
        {% for i in range(0,result_count) %}
          {% set item = result_list[i] %}
          {% set segimg_filepath = item["segimg_filepath"] %}
          {% set segmask_filepath = item["segmask_filepath"] %}
    
          {% set img_height = item["height"] %}
          {% set img_width = item["width"] %}
    
          <h2>Top # {{i}}  {{ segimg_filepath }}</h2>
    
          <img src="{{ url_for('static', filename = segimg_filepath) }}" height="{{img_height}}" width="{{img_width}}">
          {# 
            <img src="{{ url_for('static', filename = segmask_filepath) }}" height="{{img_height}}" width="{{img_width}}">
          #}
        {% endfor %}
       
      </body>
    </html>
    

    Reference

    History

    • 20191005: created.

    Copyright

  • 相关阅读:
    BEC listen and translation exercise 44
    中译英12
    BEC listen and translation exercise 43
    中译英11
    BEC listen and translation exercise 42
    中译英10
    BEC listen and translation exercise 41
    中译英9
    BEC listen and translation exercise 40
    中译英8
  • 原文地址:https://www.cnblogs.com/kezunlin/p/12008931.html
Copyright © 2011-2022 走看看