Konva.jsでcanvasにカメラ映像を表示する(iPhone実機 Safari対応版)

デモ

See the Pen Web Camera Streaming for iPhone by Konva.js by qwe001 (@qwe001) on CodePen.

キモ

公式デモでは、document.createElement('video'); を使って、
JavaScriptでvideoタグを生成していましたが、
iPhone実機は、Javascriptで生成したvideoタグでは読み込んでくれないっぽいです。生成タイミングの問題かしら。
Android実機やエミュレータでは表示されたから、iPhone実機で表示されない理由が分からなくてかなり沼りました。
誰かしら同じ問題に直面していると思ったんですが…

<video id="bg_video" autoplay muted playsinline></video>
<div id="app"></div>

  //var video = document.createElement('video');
  // [IMPORTANT] iPhone実機 Safariはmuted=trueでDOMに設定したvideo要素しか表示できない模様
  var video = document.getElementById('bg_video');

JSでvideoタグを生成した場合、どうなるのか

以下のように、動画の自動再生を許可しないエラーが出ます。
iPhoneの機種次第で、一瞬だけ出たり、まったくでなかったりします。
ユーザーがダイアログで動画を許可するように押しても出ます。
SafariじゃなくてもChromeブラウザでも同様にエラーが出ます。

NotAllowedError: The request is not allowed by the user agent or the platform in the current context, possibly because the user denied permission.

上のデモのコメントアウトしてるほうを使って、iPhone実機でWEBインスペクターを使って確認すればわかります。

2022.04.10 追記

iOS 12.1 以下だと、カメラ映像が表示されません。
Invalid constraintという謎のエラーが出ます。
原因は、デバイス側で対応していない解像度を指定したためです。

解決策は、16:9サイズの縦横の値を明確に指定するか、
いっそのこと解像度を指定しないことです。

app.syncCamera = function(video, layer)
{
  var anim = new Konva.Animation(function() {
    // do nothing, animation just need to update the layer
  }, layer);

  var options = {
    audio: false,
    video: {
      //width: app.width,
      height: app.height,
      facingMode: "user" // use front camera
      //facingMode: { exact: "environment" } // use rear camera
    }
  };
};

↓

app.syncCamera = function(video, layer)
{
  var anim = new Konva.Animation(function() {
    // do nothing, animation just need to update the layer
  }, layer);

  var options = {
    audio: false,
    video: {
      facingMode: "user" // use front camera
      //facingMode: { exact: "environment" } // use rear camera
    }
  };
};

・case1
video: {width:960, height: 540}　→ NG

・case2
video: {width: 1280, height: 720}  → OK

・case3
video: true → OK

・case4
video: {width: {min:1280}, height: {min:720}}  → OK

1280x720を指定しても、デバイスがその解像度に対応していなければ映像は表示されません。
一番いいのでは、デバイスの使用可能な解像度一覧を取得して、最大サイズを代入する方法でしょうが、いかんせん締め切りまで時間が全くないので上記のやり方で。
誰かもっと良い方法教えて

iOSが嫌いになるのに十分なほど苦しめられました。。
Windows環境だとデバッグめんどうだし。やっぱAndroidが一番よ

参考サイト

• https://konvajs.org/docs/sandbox/Video_On_Canvas.html