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: {
       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();
},