一个调用电脑摄像头的自拍组件

从公司业务中提炼出来的一个组件，用于利用电脑摄像头自拍，然后获取自拍的照片文件

贴上 vue2 的代码实现。
代码里引入的其他资源文件这里就不展示了，仅供参考

<template>
  <div class="zh-camera">
    <!-- 展示拍完的照片 -->
    <div class="selfie" v-show="photoVisible">
      <img ref="selfie" :class="{ bordered }" :src="dataUrl" alt="selfie" />
      <div class="actions row-between">
        <el-button class="zh-button danger middle" @click="reTakeAPhoto"
          >重拍</el-button
        >
        <el-button class="zh-button primary middle" @click="surePhoto"
          >确认</el-button
        >
      </div>
    </div>

    <!-- 正在拍摄中摄像头 -->
    <div class="camera" v-show="!photoVisible">
      <video ref="camera" :class="{ bordered }"></video>
      <el-button
        v-if="cameraCanUse"
        class="zh-button primary large sure"
        @click="takeAPhoto"
        >拍照</el-button
      >
      <p v-else class="info">暂无摄像头或正在加载中</p>
    </div>
  </div>
</template>

<script>
  export default {
    props: {
      bordered: {
        type: Boolean,
        default: false,
      },
    },
    data: () => ({
      video: null,
      stream: null,
      img: null,
      dataUrl: "",
      file: null,
      photoVisible: false,
      cameraCanUse: false,
      delayTimer: 0,
    }),
    mounted() {
      this.init();
      this.playCamera();
    },
    beforeDestroy() {
      this.destroyCamera();
    },
    methods: {
      init() {
        this.video = this.$refs.camera;
        this.img = this.$refs.selfie;
      },
      playCamera() {
        return new Promise((resolve) => {
          // 添加延时加载视频流，防止快速频繁切换导致的问题。
          let delay = 1000;
          this.delayTimer = setTimeout(async () => {
            this.cameraCanUse = true;

            // 获取浏览器摄像头
            if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
              this.stream = await navigator.mediaDevices.getUserMedia({
                video: true,
                audio: false,
              });
            } else {
              let getWebcam =
                navigator.getUserMedia ||
                navigator.webKitGetUserMedia ||
                navigator.moxGetUserMedia ||
                navigator.mozGetUserMedia ||
                navigator.msGetUserMedia;
              this.stream = await getWebcam({
                video: true,
                audio: false,
              });
            }

            this.video.srcObject = this.stream;
            this.video.play();
            resolve();
          }, delay);
        });
      },
      destroyCamera() {
        clearTimeout(this.delayTimer);
        this.video.pause();
        if (this.stream) {
          let tracks = this.stream.getTracks();
          for (let track of tracks) {
            track.stop();
          }
        }
      },
      takeAPhoto() {
        let canvas = document.createElement("canvas"),
          context = canvas.getContext("2d");
        canvas.width = this.video.videoWidth;
        canvas.height = this.video.videoHeight;
        context.drawImage(
          this.video,
          0,
          0,
          this.video.videoWidth,
          this.video.videoHeight
        );
        this.dataUrl = canvas.toDataURL("image/png");
        this.file = this.dataURLtoFile(this.dataUrl);

        this.destroyCamera();
        this.photoVisible = true;
      },
      reTakeAPhoto() {
        this.photoVisible = false;
        this.playCamera();
      },
      surePhoto() {
        this.$emit("picture", {
          file: this.file,
          dataUrl: this.dataUrl,
        });
      },
      /**
       * DataUrl转为File
       * @param {String} dataUrl - dataUrl地址
       * @param {String} fileName - file文件名
       */
      dataURLtoFile(dataUrl, fileName = "picture.png") {
        var arr = dataUrl.split(","),
          mime = arr[0].match(/:(.*?);/)[1],
          bstr = atob(arr[1]),
          n = bstr.length,
          u8arr = new Uint8Array(n);
        while (n--) {
          u8arr[n] = bstr.charCodeAt(n);
        }
        return new File([u8arr], fileName, { type: mime });
      },
    },
  };
</script>

<style scoped lang="scss">
  // 引入自定义封装排版样式、工具样式
  @import "@/assets/style/custom.scss";
  @import "@/views/monitor/monitorV2/zh.scss";

  .zh-camera {
    width: 360px;
    height: 270px;
    $bottomHeight: 2rem;

    > .camera {
      width: 100%;
      height: 100%;

      > video {
        width: 100%;
        height: calc(100% - #{$bottomHeight});
        background-color: black;

        &.bordered {
          border: 1px solid #81a7d5;
          border-radius: 4px;
          padding: 4px;
        }
      }

      > .sure,
      > .info {
        height: $bottomHeight;
        width: 100%;
      }

      > .info {
        margin: 0;
        color: #ff983c;
        text-align: center;
      }
    }

    > .selfie {
      width: 100%;
      height: 100%;

      > img {
        width: 100%;
        height: calc(100% - #{$bottomHeight});
        object-fit: contain;
        background-color: black;

        &.bordered {
          border: 1px solid #81a7d5;
          border-radius: 4px;
          padding: 4px;
        }
      }

      > .actions {
        height: $bottomHeight;
        width: 100%;

        > .el-button {
          width: calc(100% / 2 - 0.1rem);
          height: 100%;
        }
      }
    }
  }
</style>