basic2016/camera_new.html

<!doctype html>
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <title>Camera with mediaDevice</title>
</head>
<body>
  Camera with mediaDevice.getUserMedia() (Chromeはフラグ設定が必要です）<br />
  <button onclick="startVideo()">Start</button>
  <button onclick="stopVideo()">Stop</button>
  <br />
  <video id="local_video" autoplay style="width: 320px; height: 240px; border: 1px solid black;"></video>
</body>
<script type="text/javascript">
  let localVideo = document.getElementById('local_video');
  let localStream;
  
  // start local video
  function startVideo() {
    navigator.mediaDevices.getUserMedia({video: true, audio: false})
    .then(function (stream) { // success
      localStream = stream;
      localVideo.srcObject = stream
      localVideo.onloadedmetadata = function (e) {
        localVideo.play();
      };
    }).catch(function (error) { // error
      console.error('mediaDevice.getUserMedia() error:', error);
      return;
    });
  }
  
  // stop local video
  function stopVideo() {
    for (track of localStream.getTracks()) {
      track.stop();
    }
    localStream = null;
    
    localVideo.pause();
    window.URL.revokeObjectURL(localVideo.src);
    localVideo.src = '';
  }
</script>
</html>