网页打开摄像头预览画面,再关闭视频流stream

Demo功能点

  • 使用js打开摄像头，并使用video元素预览视频画面
  • 使用 web rtc API getUserMedia()捕获视频流mediaStream
  • 打开摄像头视频流并在网页上实时播放
  • 用户可以关闭摄像头视频流，停止捕获视频，stop/close mediaStream
  • web网页获取视频流，并指定视频分辨率
  • navigator.mediaDevices.getUserMedia() demo
  • stream.getTracks() track.stop() 停止捕获视频
  • webrtc 入门demo
  • js 能获取视频吗？ 可以，这个webrtc 的demo就实现了
  • webrtc 能做什么，在线测试音视频能力
video元素:

demo完整代码


<button onclick="openCamera()">open camera 打开摄像头</button>
<button onclick="closeCam()">关闭摄像头、stop/close mediaStream</button>

<div>
  video元素:<br>
  <video id="video" style="background: #eee; max-width: 400px;" autoplay controls></video>
</div>

<script>
  function openCamera() {
    var constraints = {
      audio: true,
      // video: true
      video: {
        width: 640,
        height: 360,
      }
    }

    navigator.mediaDevices.getUserMedia(constraints)
      .then(function (mediaStream) {
        console.log('get mediaStream', mediaStream)
        // var videoTracks = mediaStream.getVideoTracks()
        // console.log(videoTracks)
        var video = document.querySelector('#video')
        video.srcObject = mediaStream
        video.play()
      })
  }

  function closeCam() {
    var video = document.querySelector('#video')
    stream = video.srcObject

    stream.getTracks().forEach(function (track) {
      track.stop();
    });
  }
</script>