如何在PC端使用WebRTC 拍摄静态照片

一、业务场景

我们需要在PC端打开摄像头，捕获摄像头画面，并实现截图保存该画面。

二、代码实现

1.界面有两个主要的操作部分：流和捕获面板和演示面板,一个元素，它将接收来自 WebRTC 的流，一个用来初始化打开摄像头，以及一个用户单击以捕获视频帧。

<div class='content'>
      <video v-show="!init" id="photograph" width="300" height="300"></video>
      <div>
        <button v-if="init" @click="initPhoto()">初始化摄像头</el-button>
        <button v-else  @click="submit()">开始采集</el-button>
      </div>
    </div>
  </div>

2.接下来，我们有一个元素，捕获的帧存储在其中，可能以某种方式进行操作，然后转换为输出图像文件。该画布通过使用 设置画布样式来保持隐藏，以避免使屏幕混乱——-用户不需要看到这个中间阶段,所以v-show==false, 我们还有一个元素，我们将在其中绘制图像——这是向用户显示的最终显示。

<canvas ref="photographImg" v-show="false" id="photographImg" width="300" height="300"</canvas>
<div class="output">
  <img id="photo" >
</div>

3.检测摄像头，进行初始化,检测当前用户终端是否有摄像头，并打开，传入成功回调函数sucess以及异常捕获error。

initPhoto() {
      let _this = this;
      _this.loading = true;

      function getUserMedia(constraints, success, error) {
          if (navigator.mediaDevices.getUserMedia) {
              //最新的标准API
              navigator.mediaDevices.getUserMedia(constraints).then(success).catch(error);
          } else if (navigator.webkitGetUserMedia) {
              //webkit核心浏览器
              navigator.webkitGetUserMedia(constraints, success, error)
          } else if (navigator.mozGetUserMedia) {
              //firfox浏览器
              navigator.mozGetUserMedia(constraints, success, error);
          } else if (navigator.getUserMedia) {
              //旧版API
              navigator.getUserMedia(constraints, success, error);
          }
      }

      let video = document.getElementById('photograph');
      function success(stream) {
          setTimeout(res => {
              _this.init = false;
              _this.loading = false
          }, 2000);
          //兼容webkit核心浏览器
          let CompatibleURL = window.URL || window.webkitURL;
          video.srcObject = stream;
          video.play();
      }


      function error(error) {
          _this.loading = false;
          _this.$message({
              showClose: true,
              message: `访问用户媒体设备失败${error.name}, ${error.message}`,
              type: 'error'
          });
      }

      if (navigator.mediaDevices.getUserMedia || navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia) {
          //调用用户媒体设备, 访问摄像头
          getUserMedia({video: {width: 300, height: 300}}, success, error);
      } else {
          _this.$message({
              showClose: true,
              message: '不支持访问用户媒体',
              type: 'error'
          });
      }
  },

4.点击按钮采集图片submit

submit() {
    let canvas = document.getElementById('photographImg');
    let context = canvas.getContext('2d');
    let video = document.getElementById('photograph');
    context.drawImage(video, 0, 0, 300, 300);
    this.takepicture();
},
function takepicture() {
    var context = canvas.getContext('2d');
    if (width && height) {
      canvas.width = width;
      canvas.height = height;
      context.drawImage(video, 0, 0, width, height);

      var data = canvas.toDataURL('image/png');
      photo.setAttribute('src', data);
    } 
  }
[更多官方资料请参考](https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API/Taking_still_photos)