vue在pc端調用攝像頭

vue在pc端掉用攝像頭

實現拍照其實用的是video和canvas來實現的，萬能的canvas繪圖

<div v-if="imgSrc" class="img_bg_camera">
  <img :src="imgSrc" alt="" class="tx_img" />
</div>

<div class="bottom-btn">
  <Icon type="md-undo" size="60" @click="getCompetence()" />
  <Icon type="ios-camera" size="100" @click="setImage()" />
  <Icon type="md-checkmark" size="60" @click="stopNavigator()" />
</div>

getBouding() {
  let wid = this.$refs.camera_outer.offsetWidth;
  let hei = this.$refs.camera_outer.offsetHeight;
  this.videoWidth = wid;
  this.videoHeight = hei;
},
// 調用權限（打開攝像頭功能）
getCompetence() {
  this.imgSrc = '';
  let _this = this;
  this.thisCancas = document.getElementById('canvasCamera');
  this.thisContext = this.thisCancas.getContext('2d');
  this.thisVideo = document.getElementById('videoCamera');
  // 舊版本瀏覽器可能根本不支持mediaDevices，我們首先設置一個空對象
  if (navigator.mediaDevices === undefined) {
    navigator.mediaDevices = {};
  }
  // 一些瀏覽器實現了部分mediaDevices，我們不能只分配一個對象
  // 使用getUserMedia，因為它會覆蓋現有的屬性。
  // 這里，如果缺少getUserMedia屬性，就添加它。
  if (navigator.mediaDevices.getUserMedia === undefined) {
    navigator.mediaDevices.getUserMedia = function (constraints) {
      // 首先獲取現存的getUserMedia(如果存在)
      let getUserMedia =
        navigator.webkitGetUserMedia ||
        navigator.mozGetUserMedia ||
        navigator.getUserMedia;
      // 有些瀏覽器不支持，會返回錯誤信息
      // 保持接口一致
      if (!getUserMedia) {
        return Promise.reject(
          new Error('getUserMedia is not implemented in this browser')
        );
      }
      // 否則，使用Promise將調用包裝到舊的navigator.getUserMedia
      return new Promise(function (resolve, reject) {
        getUserMedia.call(navigator, constraints, resolve, reject);
      });
    };
  }
  let constraints = {
    audio: false,
    video: {
      width: this.videoWidth,
      height: this.videoHeight,
      transform: 'scaleX(-1)',
    },
  };
  navigator.mediaDevices
    .getUserMedia(constraints)
    .then(function (stream) {
      // 舊的瀏覽器可能沒有srcObject
      if ('srcObject' in _this.thisVideo) {
        _this.thisVideo.srcObject = stream;
      } else {
        // 避免在新的瀏覽器中使用它，因為它正在被棄用。
        _this.thisVideo.src = window.URL.createObjectURL(stream);
      }
      _this.thisVideo.onloadedmetadata = function (e) {
        _this.thisVideo.play();
      };
    })
    .catch((err) => {
      console.log(err);
    });
},
//  繪制圖片（拍照功能）

setImage() {
  let _this = this;
  // 點擊，canvas畫圖
  _this.thisContext.drawImage(
    _this.thisVideo,
    0,
    0,
    _this.videoWidth,
    _this.videoHeight
  );
  // 獲取圖片base64鏈接
  let image = this.thisCancas.toDataURL('image/png');
  _this.imgSrc = image;
  let name = this.guid() + '.png'
  let fitls = this.dataURLtoFile(image, name);
  this.fitls = fitls;
  console.log(fitls);
  let picInfo = {
    imgSRC: this.imgSrc,
    imgForm: fitls,
  };
  this.$emit('savePic', picInfo);
},
// base64轉文件

dataURLtoFile(dataurl, filename) {
  let arr = dataurl.split(',');
  let mime = arr[0].match(/:(.*?);/)[1];
  let bstr = atob(arr[1]);
  let n = bstr.length;
  let u8arr = new Uint8Array(n);
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n);
  }
  return new File([u8arr], filename, { type: mime });
},
// 隨機前綴
guid() {
  let now = new Date().getTime();
  let str = `xxxxxxxx-xxxx-${now}-yxxx`;
  return str.replace(/[xy]/g, function (c) {
    var r = (Math.random() * 16) | 0;
    var v = c == 'x' ? r : (r & 0x3) | 0x8;
    return v.toString(16);
  });
},

// 關閉攝像頭

stopNavigator() {
  let picInfo = {
    imgSRC: this.imgSrc,
    imgForm: this.fitls,
  };
  this.$emit('closeCamera', picInfo);
  this.thisVideo.srcObject.getTracks()[0].stop();
},