【JavaScript】カメラを取得して画面に表示する

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

<button type="button" onclick="startVideo();">Start video</button> <button type="button" onclick="stopVideo();">Stop video</button>
<video id="video" autoplay style="width: 240px; height: 180px; border: 1px solid black;"></video>
<script>
  var video = document.getElementById('video');
  var constraints = { audio: true, video: true };

  // カメラ・マイク開始
  function startVideo() {
    navigator.mediaDevices.getUserMedia(constraints)
    .then(function(mediaStream) {
      video.srcObject = mediaStream;
      video.onloadedmetadata = function(e) {
        video.play();
      };
    })
    .catch(function(err) { console.log(err.name + ": " + err.message); });
  }

  // カメラ・マイク停止
  function stopVideo() {
    let stream = video.srcObject;
    let tracks = stream.getTracks();
    tracks.forEach(function(track) {
      track.stop();
    });
    video.srcObject = null;
  }
</script>