【メモ】Safari for iOS 11でWebRTCを利用したビデオストリーム再生が上手くいかなかった話

これまた出すタイミングを見失っていた感ある古い作業メモですが。

元々とあるプロダクトの試作で、デバイスのフロントカメラにアクセスして写真を取るという仕様のもので、別の人が担当してたものなんですが、折り悪く担当の人が不在の時に「これiPhoneのSafariだと動いてなくね？」ということに気づき、急遽自分が対応したときの作業メモです。

なので全体的に理解が浅いですがご了承ください🙇

そもそもWeb RTCとは何なのかと言うと、クライアント同士がブラウザ間でP2P通信できる仕様やAPIの事を指すそうです。
で、ブラウザごとに使用されてるWeb RTCのコアライブラリが異なっていたりAPIに差分があったりするので、その差分をアプリ側で吸収する必要があると。

その一例として、今回のケースでは、video要素にはplaysinline属性が記述されていないとiOSのSafariではビデオのインライン再生が出来ない、という問題にぶち当たっていたということのようですね。

てことで、video要素にplaysinline属性を記述して解決しました。
一応コードは以下のような感じです（汚いけど）。

<video id="video" autoplay playsinline></video>
<script>
  const localVideo = document.getElementById('video')
  startVideo();
  
  function startVideo(){
    navigator.mediaDevices.getUserMedia({
        video: true,
        audio: false
    }).then(function (stream){
        localVideo.srcObject = stream;
    }).catch(function (error){
        console.error('mediaDevice.getUserMedia() error: ', error);
        return;
    });
</script>

参考リンク
https://www.slideshare.net/yusukenaka52/webrtc-80090858
https://qiita.com/tomoyukilabs/items/cb9dd1d3e7eb0cc7f58a
https://lealog.hateblo.jp/entry/2017/06/05/102203