【JavaScript実験】 カメラの映像を取得する

スマートフォンのカメラから映像を取得して <video> タグで描画するサンプルを作成した。

フロントカメラ、リアカメラの指定もできるようだが、どう頑張ってもフロントカメラの映像しか取得できなかった。

https://cosmology233.github.io/sandbox/hatena/2016/10/03/

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
  <link rel="stylesheet" href="./styles/style.css">
  <title>Practice JavaScript</title>
</head>
<body>
  <video id="video" width="256" height="256" autoplay></video>
  
  <script src="./scripts/script.js"></script>
</body>
</html>

scripts/script.js

(function() {
  navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
  
  var video = document.getElementById("video");
  
  navigator.getUserMedia({
    "video": {
      "facingMode": {
        "exact": "environment"
      }
    }
  },
  function(stream) {
    video.src = URL.createObjectURL(stream);
    video.play();
  },
  function(error) {
    alert("ERROR: ", error);
  });
})();