h5使用摄像头拍照

后台管理系统用到快递单号拍照留存的功能，原需求是手机拍照再上传，使用效率过低，一线操作员不乐意用，因此仓库给统一配备摄像头，使用浏览器唤醒摄像头功能进行拍照上传，废话不多说，直接上代码。

<!-- 样式部分可以忽略 -->
<style>
  * {
      padding: 0;
      margin: 0;
  }

  div {
      width: 100vw;
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
  }

  .btn {
      width: 100px;
      height: 50px;
      border-radius: 10px;
      background: #ff9900;
      line-height: 50px;
      text-align: center;
      color: #fff;
      box-shadow: 0 0 10px #999;
  }

  video,
  canvas {
      width: 300px;
      height: 300px;
      border: 2px solid #000;
      border-radius: 10px;
      margin-left: 5px;
  }
</style>

<!-- js -->
<script>
  // 开启摄像
  document.getElementById('play').onclick = () => {
      let constraints = {
          // video属性设置
          video: {
              width: 300,
              height: 300
           },
          // audio属性设置
          audio: true
      };
                            
      navigator.mediaDevices.getUserMedia(constraints).then(mediaStream => {
          // 成功返回promise对象，接收一个mediaStream参数与video标签进行对接
          document.getElementById('video').srcObject = mediaStream;
          document.getElementById('video').play();
      });
      // 失败就失败了
  };
  
  // 拍照、canvas绘制
  document.getElementById('take').onclick = () => {
      let ctx = document.getElementById('canvas').getContext('2d');
      ctx.drawImage(document.getElementById('video'), 0, 0, 300, 300);
  };
</script>

<!-- html -->
<div>
    <div id="play" class="btn">开启摄像</div>
    <div id="take" class="btn">拍照</div>
    <video id="video"></video>
    <!-- 尽量在canvas标签上设置宽高 -->
    <canvas id="canvas" width="300px" height="300px"></canvas>
</div>