iOSでsetIntervalが動かない？

サイト作成の勉強中です。

https://qiita.com/tinymouse/items/ec3a6dfae0b334c95894
この記事を元に、iOSで動作するOCRを作成しようとチャレンジしています。

記事中のvideoタグに表示するところまでは出来たのですが、canvasタグに表示するところがうまくいきません。
切り分けのため、カメラをフロントに変更してからPCで読み込むとうまく動作します。
iOSでsetIntervalを使用するときには、作法が必要なのでしょうか？

アドバイスのほどよろしくお願いします。

補足１）最初の一枚は撮れています。2枚目以降0.2秒後に撮らないです。
補足２）質問はChromeでしたが、safariでも同様でした。なぜか、safariはcanvas表示がwidth50%くらいになってましたが。

index.php
1<!DOCTYPE html>
2<html>
3<head>
4  <meta charset="UTF-8">
5  <title>Camera Test</title>
6  <link rel="stylesheet" href="css/styles.css">
7</head>
8<body>
9  
10<canvas id="canvas"></canvas>
11<p id="result"></p>
12
13</body>
14<script src="https://unpkg.com/tesseract.js@4.0.1/dist/tesseract.min.js"></script>
15<script src="js/main.js"></script>
16</html>

main.js
1var video = document.createElement('video');
2var canvas = document.querySelector('#canvas');
3navigator.mediaDevices.getUserMedia({
4    video: {
5        facingMode: { exact: "environment" }
6    },
7    audio: false
8})
9.then(function(stream){
10    video.srcObject = stream;
11    video.play();
12    setInterval(function(){
13        canvas.width = video.videoWidth;
14        canvas.height = video.videoHeight;
15        var ctx = canvas.getContext('2d');
16        ctx.drawImage(video, 0, 0, video.videoWidth, video.videoHeight, 0, 0, canvas.width, canvas.height);
17    }, 200);
18})
19.catch(function(e){
20    document.querySelector('#result').textContent = JSON.stringify(e);
21});

styles.css
1body {
2  font-family: Arial, sans-serif;
3  margin: 0;
4}
5
6#canvas {
7  width: 100%;
8  height: auto;
9}

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

回答1件

自己解決

参考にしている記事中にリンクがあり、ためしたところ解決しました。
https://qiita.com/tinymouse/items/8b82f3578e167627d209
以下を追加しました。
video.autoplay = true;
video.muted = true;
video.playsInline = true;

投稿2023/01/09 03:54

goola

総合スコア67