Flask: カメラ動画・ストリーミング配信やってみた♬

![stream_animation.gif](https://qiita-image-store.s3.amazonaws.com/0/233744/a033b592-b812-7162-7968-254c37a1ae30.gif)

#**動いた！！！**
何が問題だったのか。。。

だよね。。。

ということでできました。

###参考サイト
[Video Streaming with Flask](https://blog.miguelgrinberg.com/post/video-streaming-with-flask)
[miguelgrinberg/flask-video-streaming ](https://github.com/miguelgrinberg/flask-video-streaming)
###環境差分ということ
なんと、上記の記事は４年も前なのに。。。ウワンはほんのひと月前に環境構築したのに。。そんなことは関係なく。。
とにかく、アプリのダウンロードはubuntu環境で。。。適当なDir配下に置きます。

```
$ git clone https://github.com/miguelgrinberg/flask-video-streaming.git
```
これで、すべての必要なファイルがダウンロードされ、flask-video-streaming 配下に配置されます。
このダウンロードした中にrequirements.txtなどという環境情報が入っています。

```requirements.txt
click==6.7
Flask==0.12.2
itsdangerous==0.24
Jinja2==2.9.6
MarkupSafe==1.0
Werkzeug==0.12.2
```

```requirements-pi.txt
。。。
picamera==1.13
```

```requirements-opencv.txt
。。。
numpy==1.13.1
opencv-python==3.2.0.8
```
動かないと言っていたウワンの環境は以下の通りでした。。。

```
C:\Users\user>pip list
```

```ウワンの初期環境
C:\Users\user>pip list
Package                            Version
---------------------------------- -----------
click                              6.6　X
Flask                              0.11.1　X
itsdangerous                       0.24　〇　
Jinja2                             2.8　X
MarkupSafe                         0.23　X
numpy                              1.14.2　△
opencv-python                      3.4.1　△
Werkzeug                           0.11.11　X
```
〇：満たしている　△：UpperVersion　X：LowerVersion

ということで、環境構築
pythonなどが動いている環境であれば、以下のコマンドで一発構築できるはず。。
**--userつける前はいろいろ出るけど、以下ですんなりいきました。**

```
ubuntu on windows
python2 環境
$ pip install Flask --user
python3 環境
$ pip3 install Flask --user

windows
python3 環境
C:\Users\user>pip install Flask --user
```
ここからは基本同じなので、Windows環境を記載します。
このコマンドで以下の環境になりました。

```ウワンの新たな環境
C:\Users\user>pip list
Package                            Version
---------------------------------- -----------
click                              6.6　X
Flask                              1.0.2　〇
itsdangerous                       0.24　〇
Jinja2                             2.10　〇
MarkupSafe                         0.23　X　
numpy                              1.14.2　△
opencv-python                      3.4.1　△
Werkzeug                           0.14.1　△
```
clickとMarkupSafeが満たしていませんが、。。まずは放置しました。

###そして、実行

```
...>flask-video-streaming>python app.py
```
なんの苦労もなく動きました！

ちなみにcamera.pyのsleep(1)を以下のように削除すると、。。。2fpsくらい

```camera.py
class Camera(BaseCamera):
    """An emulated camera implementation that streams a repeated sequence of
    files 1.jpg, 2.jpg and 3.jpg at a rate of one frame per second."""
    imgs = [open(f + '.jpg', 'rb').read() for f in ['1', '2', '3']]

    @staticmethod
    def frames():
        while True:
            #time.sleep(1)
            yield Camera.imgs[int(time.time()) % 3]
```
そして、どうせシークエンスに動いているので演算やめて、
以下のようにすると。。。すごく速くなった
※10fpsは超えていると思う

```
    @staticmethod
    def frames():
        while True:
            #time.sleep(1)
            yield Camera.imgs[0]
            yield Camera.imgs[1]
            yield Camera.imgs[2]
```
ということで計測しました。

```
    @staticmethod
    def frames():
        start_time=time.time()
        i=0
        while True:
            yield Camera.imgs[i%3]
            time.sleep(0.1)　#0.1をいろいろ変える
            i += 1
            if int(time.time()-start_time)>=10:
                print("i=",i,"fps=",i/10)
                break
```
以下のとおりな結果でした。読み込まれた画像については、かなり優秀
ただし、これはあくまで関数内でのyieldしているカウント数から見ており、実際はこれ以上のfpsもやってみたが、出力はカクカク乱れて見えた。
以下の通り、この範囲（0.02あたりまで）はグラフも直線的に見える。
※このあたりから別のボトルネックが発生しているようである

| wait | fps |
|:-:|:-:|
|0.008|118.2|
|0.01|95.6|
|0.02|48.3|
|0.05|18.02|
|0.1|9.32|
|0.2|4.84|
|0.5|1.98|
|1|1.00|
|2|0.50|
|5|0.20|
![fpsvswait2.jpg](https://qiita-image-store.s3.amazonaws.com/0/233744/5b416d0b-83a1-774c-a044-3d2785e9bf08.jpeg)

そして、注意！

```
 * Environment: production
   WARNING: Do not use the development server in a production environment.
   Use a production WSGI server instead.
```
ということで、商用環境には使わないでね。。。WSGI
とりあえず、。。ゆっくりやっていこう
【参考】
[WSGIとPythonでスマートなWebアプリケーション開発を](http://gihyo.jp/dev/feature/01/wsgi/0001)
[Full Stack Python](https://www.fullstackpython.com/wsgi-servers.html)

以下に性能改善とWSGIの話がある
[Flask Video Streaming Revisited](https://blog.miguelgrinberg.com/post/flask-video-streaming-revisited)

###まとめ
・Flask：画像・ストリーミングが出来た
　あらためて、環境を意識して開発すべきを肝に銘じた

・実際のカメラ画像でいろいろ遊んでみようと思う

###【追記】
カメラ動画・Streaming配信は以下の変更で簡単に出来ました！
※変更は、以下のとおり、camera ⇒　camera_opencv

```app.py
else:
    from camera_opencv import Camera
```
安定した動画が配信できています。
ちなみに、RasPiでPicameraも同様にできた。
以下、ちょっと動画配信の記録。。。
![doga_streaming.jpg](https://qiita-image-store.s3.amazonaws.com/0/233744/63ccc1d3-9fbd-3fdf-3215-a75ef12b4e87.jpeg)


**これで、リアルタイム物体検出Streaming配信もできそう。。。**