ARview.js

<div onclick="start()" style="width: 100%; height:100%;background-color:#d3d3d3;" id="text">
	<div style="padding-top:280px;font-size: 18pt;padding-left:15px; padding-right:15px">
      Tap here to allow AR camera view.
      <div style="font-size: 8pt;">Does not work on Chrome for iOS and embedded browsers on iOS.</div>
    </div>
</div>

<video id="placeholder" src="placeholder.mp4" loop autoplay preload="auto" playsinline width="480" controls="false" hidden muted></video>

<video id="v" autoplay playsinline controls="false"></video>
<script type="text/javascript">
var config = {
  video: {
    width: 1080,
    facingMode: {
      exact: "environment"
    }
  }
};

if('mediaDevices' in navigator && 'getUserMedia' in navigator.mediaDevices){
  var start = () => navigator.mediaDevices.getUserMedia(config)
    .then(stream => {
      currentStream = stream;
      v.srcObject = stream;
    })
    .then(() => new Promise(resolve => v.onloadedmetadata = resolve))
    .catch(function (error) {
      //$('#text').html(error);
      $('#v').attr('hidden', true);
      $('#placeholder').removeAttr('hidden');
    });
}
else {
    $('#v').attr('hidden', true);
    $('#placeholder').removeAttr('hidden');
}

$('#text').on('click', function () {
  $('#text').hide();
});
</script>