VUE调用pc端摄像头

VUE项目调用pc端摄像头功能

（摄像头只可以用localhost启用项目访问，或者修改浏览器配置，底部有方法）

代码如下：

<template>
<!--  原生摄像头-->
    <div>
      <div class="box">
        <video id="videoCamera" class="canvas" :width="videoWidth" :height="videoHeight" autoPlay></video>
        <canvas id="canvasCamera" class="canvas" :width="videoWidth" :height="videoHeight"></canvas>
      </div>
      <div>
        <el-button @click="photographBtn" icon="el-icon-camera" size="small">拍照</el-button>
        <el-button v-if="os" @click="openCamera" icon="el-icon-video-camera" size="small">打开摄像头</el-button>
        <el-button v-else @click="stopCamera" icon="el-icon-switch-button" size="small">关闭摄像头</el-button>
        <el-button @click="resetBtn" icon="el-icon-refresh" size="small">重置</el-button>
        <el-button @click="submitBtn" icon="el-icon-circle-close" size="small">提交</el-button>
      </div>
    </div>
</template>

js

<script>
  export default {
    
    
    name: "camera",
    data() {
    
    
      return {
    
    
        os: false,//控制摄像头开关
        thisVideo: null,
        thisContext: null,
        thisCancas: null,
        imgSrc: '',
        videoWidth: 500,
        videoHeight: 400,
      };
    },
    created() {
    
    
      this.openCamera();
    },
    methods: {
    
    
      submitBtn() {
    
    
        console.log(this.imgSrc);
      },
      // 调用摄像头权限
      openCamera() {
    
    
        //必须在model中render后才可获取到dom节点,直接获取无法获取到model中的dom节点
        this.$nextTick(() => {
    
    
          const _this = this;
          this.os = false;//切换成关闭摄像头
          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)
              })
            }
          }
          const 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 => {
    
    
            this.$message({
    
    
              message: '没有开启摄像头权限或浏览器版本不兼容',
              type: 'warning'
            });
          });
        });
      },
      //拍照按钮
      photographBtn() {
    
    
        // 点击，canvas画图
        this.thisContext.drawImage(this.thisVideo, 0, 0, this.videoWidth, this.videoHeight);
        // 获取图片base64链接
        this.imgSrc = this.thisCancas.toDataURL('image/png');
      },
      //清空画布
      clearCanvas(id) {
    
    
        let c = document.getElementById(id);
        let cxt = c.getContext("2d");
        cxt.clearRect(0, 0, c.width, c.height);
      },
      //重置画布
      resetBtn() {
    
    
        this.imgSrc = "";
        this.clearCanvas('canvasCamera');
      },
      //关闭摄像头
      stopCamera() {
    
    
        if (this.thisVideo && this.thisVideo !== null) {
    
    
          this.thisVideo.srcObject.getTracks()[0].stop();
          this.os = true;//切换成打开摄像头
        }
      },
    }
  };
</script>

另外还有一篇解决摄像头用IP访问的解决方法原文链接如下

chrome只支持https\ 127.0.0.1\localhost三种地址方式调用摄像头，http方式不支持直接调用