Python Bottleを用いて、ブラウザで連番画像を動画のように表示したい。

Question

実現したいこと

Python bottleを用いて、ブラウザで連番画像を動画のように表示したい。
（実際はBottleではなくても、FlaskでもDjangoでもなんでも良いです。）

前提

ある方のサイト(https://symfoware.blog.fc2.com/blog-entry-2425.html) でmp4動画をブラウザで表示するプログラムを見つけました。こちらのプログラムはうまくいきましたが、こちらを改造して連番画像から同様にブラウザで表示しようとしたところ画像が表示されずに困っています。
とりあえずは最初に数枚画像を読んで順に画像を表示できればと思って下記のようなプログラムを作成しました。

発生している問題・エラーメッセージ

連番画像を表示する方法をご存じの方、ご教授いただければ幸いです。

該当のソースコード

import time
import bottle
import cv2
app = bottle.Bottle()
def gen():
    fps_count = 0
    fps_time = time.time()
    
    # 画像読み込み
    filenames = sorted(glob.glob("/Data/*.png"))[0:10]
    imgs = [cv2.imread(filenames[i]) for i in range(0, 10)]
    image = imgs[0]

    while True:
        
        # jpg形式に変換
        flag, frame = cv2.imencode('.jpg', image)
        yield b'--frame\r\n' + b'Content-Type: image/jpeg\r\n\r\n' + bytearray(frame) + b'\r\n\r\n'
        # 連続再生されるのでwaitを入れる
        time.sleep(1/60)
        
        # フレームレート計算
        if (time.time() - fps_time) >= 1:
            fps = fps_count
            fps_count = 0
            fps_time = time.time()
            print(fps)
        else:
            fps_count += 1
        
@app.route('/')
def main():
    return bottle.static_file('index.html', root='./')

@app.route('/video_feed')
def video_feed():
    bottle.response.content_type = 'multipart/x-mixed-replace;boundary=frame'
    return gen()
app.run(host="（自分のローカルIPアドレス）", port=8080, reloader=True, debug=True)

補足情報（FW/ツールのバージョンなど）

python3.9,
bottle v0.12.25

Comments

[hoshi-takanori]

参考にしたのはどこのサイトでしょうか？ こちらの場合、Bottle ではなく Flask を使ってるようですが…。
https://note.com/fz5050/n/n80ee1171ea2e

[tn2nex2]

https://symfoware.blog.fc2.com/blog-entry-2425.html
参考にしたのは上のサイトです。
またFlaskでの実装の紹介もありがとうございます。

Answer 1

私の環境（macOS M1 13.5.1, Python 3.11.5, Bottle 0.12.25）では，以下の修正でブラウザに動画が表示できました。

• import glob を追加
• Data はカレントにあるとして /Data/*.png を Data/*.png に変更
• gen() 内のループ方法を変更（下記の記述例を参照）

import time
import bottle
import cv2
import glob

app = bottle.Bottle()

def gen():
    N = 10
    filenames = sorted(glob.glob('Data/*.png'))[:N]
    imgs = [cv2.imread(filenames[i]) for i in range(N)]

    for image in imgs:
        flag, frame = cv2.imencode('.jpg', image)
        yield (b'--frame\r\n'
               + b'Content-Type: image/jpeg\r\n\r\n'
               + bytearray(frame)
               + b'\r\n\r\n')
        time.sleep(1/60)

@app.route('/')
def main():
    return bottle.static_file('index.html', root='./')

@app.route('/video_feed')
def video_feed():
    bottle.response.content_type = 'multipart/x-mixed-replace;boundary=frame'
    return gen()

app.run(host='localhost', port=8080, reloader=True, debug=True)

Comments

[tn2nex2]

ご回答いただきありがとうございます。
素晴らしいです。
なぜこのループの変更だけで動くのかよくわかっていませんが、ひとまず解決して安心しました。

※globのimportは書いていたはずですが、いずれかの段階で誤って消してしまったようです。すみません。