webRTCがipadなら繋がるのにiphoneでは繋がらない時の対処法

JavaScriptでwebRTCのgetUserMediaのコードをコピペしてipadで正常に挙動するのにiphoneではアクセス許可しているのにも関わらず、画面が真っ黒になってgetUserMediaが渡っていない現象が出て暫く躓いたので対処法のメモ。

$(function() {
    navigator.mediaDevices = navigator.mediaDevices || ((navigator.mozGetUserMedia || navigator.webkitGetUserMedia) ? {
   getUserMedia: function(c) {
     return new Promise(function(y, n) {
       (navigator.mozGetUserMedia ||
        navigator.webkitGetUserMedia).call(navigator, c, y, n);
     });
    }
    } : null);
    if (!navigator.mediaDevices) {
      alert("getUserMedia() not supported.");
      return;
    } else {
        console.log("success")
    }

    var constraints = { audio: false, video: { 
                        facingMode: 'environment' 
                            }
                    };
    navigator.mediaDevices.getUserMedia(constraints).then(function(stream) {
      video = document.getElementById('camera');
      video.srcObject = stream;
    }).catch(function(err) {
      console.log(err.name + ": " + err.message);
    });

   <video id="camera" autoplay　playsinline="true"></video>

autoplayの後にplaysinline="true"を付け加えるだけでOK。
playsinline属性がないとiPhoneでは動かないらしい。

＜参考サイト＞
https://qiita.com/tomoyukilabs/items/cb9dd1d3e7eb0cc7f58a