当前位置： 云海天教程网 > 技术新闻 > 编程语言 > 正文

flask的模板引擎jinja入门教程 包含一个通过网络实时传输Video视频流的示例

  • 作者： 佚名     来源： 网络转载
  • 时间：2019-12-09

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

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

<!--more-->

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

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

<!-- kzl in-article ad -->

<ins class="adsbygoogle" style="display:block; text-align:center;" data-ad-layout="in-article" data-ad-format="fluid" data-ad-client="ca-pub-5653382914441020" data-ad-slot="7925631830"></ins>

<script> (adsbygoogle = window.adsbygoogle || []).push({}); </script>

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