javascriptで画像の更新ができない

やりたいこと

pythonとopencvで画像を取得し、連番画像として保存する。（0.jpg, 1.jpgのように）
javascriptで連番的に画像へのパスを読み込ませて動画のようにしたい。画像データが増えすぎると困るので、100枚を常に更新し続ける形にしたいのだが、1回目に0.jpgを読み込んだ時と、2回目に0.jpgを読み込んだときで表示される画像が変わらずループした状態になる。（Finderで確認したら、画像は最初に表示したものとは違うものになっていることは確認済み）
もしかしたら、javascriptの方で何か失敗しているのかと思い。質問してみました。回答よろしくお願いします。

html
1<!DOCTYPE HTML>
2<html>
3    <head>
4        <meta charset="UTF-8">
5        <link type="stylesheet" src="">
6    </head>
7    <body>
8        <p>Dog Cam</p>
9        <img id="video_frame" src="image/0.jpg">
10        <form>
11            <input type="button" value="START" onclick="start()">
12            <input type="button" value="STOP" onclick="stop()">
13        </form>
14    </body>
15    <script type="text/javascript">
16        var index = 0;
17        var buffer = 100;
18        var speed = 33;
19        var timer;
20
21        function update() {
22            index++;
23            if ( index >= buffer ) {
24                index = 0; 
25            }
26            var img_path = "./image/" + String(index) + ".jpg";
27            document.getElementById("video_frame").src = img_path;
28            console.log(img_path);
29        }
30
31        function start() {
32            timer = setInterval(update, speed);
33        }
34
35        function stop() {
36            clearInterval(timer);
37        }
38    </script>
39</html>

python
1import cv2
2import os
3
4
5DIR = "./image"
6cnt = 0
7buff = 100
8
9cap = cv2.VideoCapture(1)ww
10start = time.time()
11while True:
12    ret, frame = cap.read()
13    frame = cv2.resize(frame, None ,fx=0.3, fy=0.3)
14    frame = cv2.flip(frame, 1)
15    if cnt == buff:
16        cnt = 0
17    filepath = os.path.join(DIR, f"{cnt}.jpg")
18    print(filepath)
19    cv2.imwrite(filepath, frame)
20    cnt += 1

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

回答1件

JS 側Update関数でindex++となっているが
それはその関数外部で宣言されたvar indexの値と連動していないとか?
あとはJS でHtmlにオブジェクトの画像パスを変更していると思うが
それを一旦やめて
オブジェクトを消して新たに画像オブジェクトを作ってあげるとかしてみたらどうでしょうか
趣旨が合ってるか分かりませんが見た感じこんな感じの事を思いました

投稿2022/05/05 06:52

編集2022/05/05 06:54