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