FlaskとOpenCVで live streaming


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

参考サンプルコード
[Python Live Video Streaming Example](http://www.chioka.in/python-live-video-streaming-example/)
[Video Streaming with Flask](https://blog.miguelgrinberg.com/post/video-streaming-with-flask/page/5)
[Webcam Live Streaming using Flask](https://stackoverflow.com/questions/37837756/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など）](https://www.yoheim.net/blog.php?q=20160505)

[PythonのFlaskでのrender_templateで画像ファイルの表示方法](https://teratail.com/questions/89341)

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


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

```python

# 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）

```python

# 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型)](https://wiki.suikawiki.org/n/multipart%2Fx-mixed-replace)
Content-Typeの書き方として(上記参照のサイトより)
区切り（boundary）の文字列を決める：例では、boundary=ThisRandomString
区切り文字列に指定された文字列の前に “--” を付けてパートを区切る
最後の区切りには後にも “--” を入れる：例では、--ThisRandomString--
Multipart 自身もコンテント・ヘッダとコンテント・ボディ、各パートもそれぞれコンテント・ヘッダとコンテント・ボディから構成される

```html
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型の意味。

```python
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>

```