やりたいこと

カメラ映像を画像処理した上でFlaskでストリーミングする方法をなんとか習得しました。
多くの解説サイトがそうであるように、出力画像が一つのものです。

では、複数の画像を同時にストリーミングさせるにはどうしたらよいのでしょうか。
カメラ映像そのままと画像処理された画像を流したいと考えています。

コード（画像ひとつ版）

Python
1from flask import Flask, render_template, Response
2import cv2
3
4app = Flask(__name__)
5
6class Camera(object):
7    def __init__(self):
8        self.video = cv2.VideoCapture(0)
9
10    def read(self):
11        return self.video.read()
12
13def gen(camera):
14    while True:
15        _, frame = camera.read()
16
17        # 画像処理1 グレースケールにする
18        image1 = cv2.cvtColor(frame, cv2.COLOR_BGR2GRAY) 
19        _, encoded1 = cv2.imencode('.jpg', image1)
20        bin1 = b"--frame\r\nContent-Type: image/jpeg\r\n\r\n" + encoded1.tobytes() + b"\r\n"
21
22        # 画像処理2 左右反転する
23        image2 = cv2.flip(frame, 1)
24        _, encoded2 = cv2.imencode('.jpg', image2)
25        bin2 = b"--frame\r\nContent-Type: image/jpeg\r\n\r\n" + encoded2.tobytes() + b"\r\n"
26
27        yield (bin1)
28
29@app.route("/")
30def stream():
31    return render_template("stream.html")
32
33@app.route("/video1")
34def video1():
35    return Response(gen(Camera()),
36            mimetype="multipart/x-mixed-replace; boundary=frame")
37
38if __name__ == "__main__":
39        app.run(debug=True)

html
1<html>
2<body>
3<img src="{{ url_for('video1') }}">
4</body>
5</html>

やってみたこと

その1

2個の画像を出力させる一歩前の段階として、

gen(camera)でbin1でなくリスト[bin1, bin2]を生成する
レスポンスを返すところでgen(Camera())でなくgen(Camera())[0]を指定する

をやってみた → generator' object is not subscriptable エラー

その2

その1と同じくgen(camera)でリスト[bin1, bin2]を生成する
レスポンスを返すところでlist(gen(Camera()))[0]を指定する

をやってみた → 何の反応もなし

と、複数表示させるどころか二つのバイナリを作ってそのうち一つを扱うことすらできていない状態です。

行動規範の内容に同意します

回答1件

ベストアンサー

cv2で同じカメラに同時アクセスはできないので、以下のようにすれば同時表示可能です。

Flaskと関係無くカメラにアクセスし画像を取得するアプリを作成する。
Flaskから[1]にアクセスし、画像を取得する。
通常/処理済みを識別する記号とかを自分で付けてそれを呼び出す。

1のアプリはCameraから画像を取得し、そのまま使うパターンと、画像処理して使うパターンの2通りの処理を行う必要があるはずです。
それぞれでcv2.VideoCapture(0)のようなものを呼び出すと動かないと思うので、画像を取得し続けるものとそれを利用して処理する物で分けるマルチスレッド/マルチプロセスのアプリが必要になります。
これはマルチスレッドで動かせば解決する可能性が高いです。(ハードによる)

2のFlaskから[1]にアクセスする方法はいくつかありますが、例えば以下の様なものです。

Socket通信
プロセス間通信
中間ストレージ(DBとか)を利用する。

DBは単にDBと書いてありますが、redisやmemcachedみたいな早いやつが良いと思います。（RDBMSはダメと思う)

3の識別する記号を付けては、例えばurlに/video0とか/video1とかわかるヤツで呼び出すだけです。
genを複数作る必要があるか、引数渡して1つで良いかは実装次第になると思います。

もしも、開発したあとに運用する予定がある場合は、OpenCVの処理は意外に重いので実機で動かすのをお勧めします。
開発機では動作しているが、実機(開発機より非力)で動かしたら全く満足に動かなくて設計し直しが発生する可能性があるためです。

そこまでやって実運用にはたえられそうにないのしかできませんでしたが、そんなに同時映像が重要なんでしょうか？

投稿2022/05/24 13:17

FiroProchainezo

総合スコア2401

mo256man

2022/05/24 15:01

素早い回答ありがとうございます。私のコードでは一つのカメラ映像から複数の画像を作るところまではできていますが（作っただけで送れていないのですけど）、そのやり方では駄目ということでしょうか？

FiroProchainezo

2022/05/25 00:55

はい。試しにgenを2つ(/video1と/video2とか。<img src="{{ url_for('video1') }}">も2個設置)作ってやってみると良いかもしれません。それで動けばそれで良いと思います。

mo256man

2022/05/25 12:13

おっと、気持ちが良いほどにきっぱりと断言されてしまいました。これは断念せざるを得ません。いくつか課題をいただきましたのでそれらの動きを確認しました。なぜそのような挙動になるのかは理解できていませんが。示していただいた方法は私には難しそうなので第三の方法にしようと思います。すなわち、np.hstack()を使って二つの画像を一つに合成してhtmlに送る、という。

行動規範の内容に同意します