こーひーをぶんなぐれ！ - iOS11, Android, MacのSafari11, PC版ChromeのそれぞれのWebRTCを使ったカメラ画像入力の指定方法

いずれも，HTML中のvideoタグ

<video id="local_video" autoplay playsinline></video>

に対して，

window.localVideo = document.getElementById('local_video');

の操作を事前に行なって，localVideoという名前のElementを取得している．(当たり前だが)

iOS11

//for iOS (with both Front and Back Camera)
const medias = {audio: false,
                video: {facingMode : {exact: "environment"}}}; //背面カメラ
navigator.getUserMedia
   (medias,
    function(stream){
        window.localVideo.srcObject = stream;
    },
    function(error){
       alert('navigator.getUserMedia() error:' + error);
    });

Mac版Safari11

// for MacOS Safari (with only 1 Camera)
const medias = {audio: false,
                video: {width:640, 
		height:480}};
navigator.getUserMedia(medias,
                       (stream) => {
		           window.localVideo.srcObject = stream;
		       },
		       (error) => {
		           console.error('navigator.getUserMedia() error:', error);
		       });

Mac版Safari11だとアロー記法による関数定義が有効になっているようだ．iOS11は検証中．

Android版Chrome

// for Android Chrome (with both Front and Back Camera)
const medias = {audio: false,
                video: {width: 640,
		wheight: 480,
		facingMode:{exact: "environment"}}};　//背面カメラ
navigator.mediaDevices.getUserMedia(medias)
  .then(stream => {
       window.localVideo.src = window.URL.createObjectURL(stream);
  })
  .catch(error => {
       console.error('navigator.mediaDvice.getUserMedia() error:', error);
       return;
  });

PC, MacOS版Chrome

// for PC Chrome (with only 1 Camera)
const medias = {audio: false,
                video: {width: 640,
		height: 480}};
navigator.mediaDevices.getUserMedia(medias)
  .then(stream => {
      window.localVideo.src = window.URL.createObjectURL(stream);
  })
  .catch(error => {
      console.error('navigator.mediaDvice.getUserMedia() error:', error);
      return;
  });

ChromeはAndroid，PC版を問わずthen,catchが使える．