<template>
  <div class="camera_outer">
    <video
        id="videoCamera"
        :width="videoWidth"
        :height="videoHeight"
        autoplay
    ></video>
    <canvas
        style="display: none"
        id="canvasCamera"
        :width="videoWidth"
        :height="videoHeight"
    ></canvas>
    <div v-if="imgSrc" class="img_bg_camera">
      <img :src="imgSrc" alt="" class="tx_img"/>
    </div>
    <el-button @click="getCompetence">打開攝像頭</el-button>
    <el-button @click="stopNavigator">關(guān)閉攝像頭</el-button>
    <el-button @click="setImage">拍照</el-button>
  </div>
</template>
 
<script>
  export default {
    name: "CameraVideo",
    data() {
      return {
        videoWidth: 600,
        videoHeight: 600,
        imgSrc: "",
        thisCanvas: null,
        thisContext: null,
        thisVideo: null
      }
    },
    mounted() {
      this.getCompetence()
    },
    methods: {
      // 調(diào)用權(quán)限（打開攝像頭功能）
      getCompetence() {
        var _this = this;
        this.thisCanvas = document.getElementById("canvasCamera");
        this.thisContext = this.thisCanvas.getContext("2d");
        this.thisVideo = document.getElementById("videoCamera");
        // 舊版本瀏覽器可能根本不支持mediaDevices扮叨，我們首先設(shè)置一個(gè)空對(duì)象
        if (window.navigator.mediaDevices === undefined) {
          window.navigator.mediaDevices = {};
        }
        // 一些瀏覽器實(shí)現(xiàn)了部分mediaDevices，我們不能只分配一個(gè)對(duì)象
        // 使用getUserMedia领迈，因?yàn)樗鼤?huì)覆蓋現(xiàn)有的屬性彻磁。
        // 這里碍沐，如果缺少getUserMedia屬性，就添加它衷蜓。
        if (window.navigator.mediaDevices.getUserMedia === undefined) {
          window.navigator.mediaDevices.getUserMedia = (constraints) => {
            // 首先獲取現(xiàn)存的getUserMedia(如果存在)
            var getUserMedia =
                window.navigator.webkitGetUserMedia ||
                window.navigator.mozGetUserMedia ||
                window.navigator.getUserMedia;
            // 有些瀏覽器不支持累提，會(huì)返回錯(cuò)誤信息
            // 保持接口一致
            if (!getUserMedia) {
              return Promise.reject(
                  new Error("getUserMedia is not implemented in this browser")
              );
            }
            // 否則，使用Promise將調(diào)用包裝到舊的navigator.getUserMedia
            return new Promise(function (resolve, reject) {
              getUserMedia.call(window.navigator, constraints, resolve, reject);
            });
          };
        }
        var constraints = {
          audio: false,
          video: {
            width: this.videoWidth,
            height: this.videoHeight,
            transform: "scaleX(-1)",
          },
        };
        window.navigator.mediaDevices
            .getUserMedia(constraints)
            .then(function (stream) {
              // 舊的瀏覽器可能沒有srcObject
              if ("srcObject" in _this.thisVideo) {
                _this.thisVideo.srcObject = stream;
              } else {
                // 避免在新的瀏覽器中使用它磁浇，因?yàn)樗诒粭売谩?                _this.thisVideo.src = window.URL.createObjectURL(stream);
              }
              _this.thisVideo.onloadedmetadata = function (e) {
                _this.thisVideo.play();
              };
            })
            .catch((err) => {
              console.log(err);
            });
      },
      //  繪制圖片（拍照功能）
      setImage() {
        var _this = this;
        // 點(diǎn)擊斋陪，canvas畫圖
        _this.thisContext.drawImage(
            _this.thisVideo,
            0,
            0,
            _this.videoWidth,
            _this.videoHeight
        );
        // 獲取圖片base64鏈接
        var image = this.thisCanvas.toDataURL("image/png");
        _this.imgSrc = image;
        this.$emit("refreshDataList", this.imgSrc);
      },
      // base64轉(zhuǎn)文件
      dataURLtoFile(dataurl, filename) {
        var arr = dataurl.split(",");
        var mime = arr[0].match(/:(.*?);/)[1];
        var bstr = atob(arr[1]);
        var n = bstr.length;
        var u8arr = new Uint8Array(n);
        while (n--) {
          u8arr[n] = bstr.charCodeAt(n);
        }
        return new File([u8arr], filename, {type: mime});
      },
      // 關(guān)閉攝像頭
      stopNavigator() {
        this.thisVideo.srcObject.getTracks()[0].stop();
      }
    }
  }
</script>
 
<style scoped lang="scss">
  .camera_outer {
    position: relative;
    overflow: hidden;
    background-size: 100%;
 
    video,
    canvas,
    .tx_img {
      -moz-transform: scaleX(-1);
      -webkit-transform: scaleX(-1);
      -o-transform: scaleX(-1);
      transform: scaleX(-1);
      border: 1px solid #ccc;
    }
 
    .btn_camera {
      position: absolute;
      bottom: 4px;
      left: 0;
      right: 0;
      height: 50px;
      background-color: rgba(0, 0, 0, 0.3);
      line-height: 50px;
      text-align: center;
      color: #ffffff;
    }
 
    .bg_r_img {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      top: 0;
    }
 
    .img_bg_camera {
      position: absolute;
      right: 0;
      top: 0;
 
      img {
        width: 300px;
        height: 300px;
      }
 
      .img_btn_camera {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 50px;
        line-height: 50px;
        text-align: center;
        background-color: rgba(0, 0, 0, 0.3);
        color: #ffffff;
 
        .loding_img {
          width: 50px;
          height: 50px;
        }
      }
    }
  }
</style>

但是這里會(huì)出現(xiàn)一個(gè)報(bào)錯(cuò)信息: getUserMedia is not implemented in this browser
這個(gè)錯(cuò)誤信息怎么處理呢, 有兩種方案一種是生產(chǎn)環(huán)境, 一種是開發(fā)環(huán)境:

• 將http協(xié)議換成https協(xié)議訪問網(wǎng)站(生產(chǎn)環(huán)境)
• 瀏覽器內(nèi)核指定白名單(開發(fā)環(huán)境):

//在谷歌瀏覽器內(nèi)輸入url
chrome://flags/#unsafely-treat-insecure-origin-as-secure

輸入完后照下圖輸入我們要設(shè)置的白名單域名選擇 Enabled 重啟瀏覽器就可以了

image.png