FlaskとOpenCVで live streaming #Python3

FlaskとOpenCVを使ったVideo streamingのサンプルがありますが、コードについて自分の理解の範囲で解説を加えました。

参考サンプルコード
Python Live Video Streaming Example
Video Streaming with Flask
Webcam Live Streaming using Flask

Flaskアプリでは、3つのものを作る必要があります。
（1）ブラウザーで表現するもの（HTML+テンプレートjinja2+必要があればCSS）
（2）リクエストとレスポンスを振り合分けるルーティング（Python　flask）
（3）リクエストを受けて処理をする関数(python)

Flaskでは以下のホルダー構成を作る必要があります。
・staticフォルダ：画像ファイル等の静的なリソースファイルの置き場として認識
・templatesフォルダ：テンプレート置き場として認識
※デフォルトで、これらのフォルダーを参照するようになっていますが、変更も可能です。（例えば、/static/xxxというリクエストは、ルーティング処理を書かずともFlaskが自動的に処理）

[Python] 軽量WebフレームワークのFlaskに入門（準備、起動、HTML、静的ファイル、GET、POSTなど）

PythonのFlaskでのrender_templateで画像ファイルの表示方法

─── static
|   └── js(必要があれば）
|   |   └──main.js
|   └── main.cs
├── templates
│   └── index.html
├──  camera.py　（処理する関数）
└──  main.py (メインプログラム)

OpenCVを使ったカメラの設定とキャプチャー


# camera.py

import cv2

class VideoCamera(object):
    def __init__(self):
        self.video = cv2.VideoCapture(0)

        # Opencvのカメラをセットします。(0)はノートパソコンならば組み込まれているカメラ

    def __del__(self):
        self.video.release()

    def get_frame(self):
        success, image = self.video.read()
        ret, jpeg = cv2.imencode('.jpg', image)
        return jpeg.tobytes()

        # read()は、二つの値を返すので、success, imageの2つ変数で受けています。
        # OpencVはデフォルトでは raw imagesなので JPEGに変換
        # ファイルに保存する場合はimwriteを使用、メモリ上に格納したい時はimencodeを使用
        # cv2.imencode() は numpy.ndarray() を返すので .tobytes() で bytes 型に変換

ルーティングのプログラム（flask）


# main.py

from flask import Flask, render_template, Response

from camera import VideoCamera

app = Flask(__name__)

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

    # "/" を呼び出したときには、indexが表示される。

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

# returnではなくジェネレーターのyieldで逐次出力。
# Generatorとして働くためにgenとの関数名にしている
# Content-Type（送り返すファイルの種類として）multipart/x-mixed-replace を利用。
# HTTP応答によりサーバーが任意のタイミングで複数の文書を返し、紙芝居的にレンダリングを切り替えさせるもの。
#（※以下に解説参照あり）

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

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

# 0.0.0.0はすべてのアクセスを受け付けます。    
# webブラウザーには、「localhost:5000」と入力

※Content-Type（送り返すファイルの種類として）multipart/x-mixed-replaceについて
multipart/x-mixed-replace (MIME型)
Content-Typeの書き方として(上記参照のサイトより)
区切り（boundary）の文字列を決める：例では、boundary=ThisRandomString
区切り文字列に指定された文字列の前に “--” を付けてパートを区切る
最後の区切りには後にも “--” を入れる：例では、--ThisRandomString--
Multipart 自身もコンテント・ヘッダとコンテント・ボディ、各パートもそれぞれコンテント・ヘッダとコンテント・ボディから構成される

Content-type: multipart/x-mixed-replace;boundary=ThisRandomString

 --ThisRandomString
 Content-type: text/plain

 Data for the first object.

 --ThisRandomString
 Content-type: text/plain

 Data for the second and last object.

 --ThisRandomString--

この書式に合わせてyieldの内容を記載。
区切り文字列 "frame",（\r\n）は改行コード。b''はByte型の意味。

b'--frame\r\n' b'Content-Type: image/jpeg\r\n\r\n' + frame + b'\r\n\r\n'

templateホルダー内にindex.htmlファイルを作成。

<html>
  <head>
    <title>Video Streaming Demonstration</title>
  </head>
  <body>
    <h1>Video Streaming Demonstration</h1>
    <img src="{{ url_for('video_feed') }}">
    <!-- jinja2のテンプレートの書き方です。/video_feedを呼び出しています。 -->
  </body>
</html>