需求描述

點(diǎn)擊照相機(jī)拍照，彈出照相機(jī)拍照彈窗，點(diǎn)擊拍照按鈕，截取錄像的幀，點(diǎn)擊保存，提交數(shù)據(jù)給后臺。

功能實(shí)現(xiàn)

1.html模塊

//點(diǎn)擊打開照相機(jī)拍照彈窗
<el-button @click="handleOpen">照相機(jī)拍照</el-button>

//照相機(jī)拍照彈窗
    <div class="public-mask mask-grey-bg" v-show="cameraOpen">
      <div class="mask-main camera-main">
        <div class="mask-title">
          <img src="../assets/images/icon_camera.png" class="title-icon"/>
          <span>照相機(jī)拍照</span>
          <img src="../assets/images/icon_close.png" class="title-close" @click="closeCameraMask"/>
        </div>
        <div class="camera-box">
          <div class="camera-left">
            <!-- 這里就是攝像頭顯示的畫面 -->
            <video id="videoCamera" width="100%" height="100%"></video>
          </div>
          <div class="camera-right">
        
            <div class="camera-img-box">
              <div class="small-img">
               <!-- 這里是點(diǎn)擊拍照顯示的圖片畫面 -->
                <img v-if="imgSrc" :src="imgSrc" style="width: 200px;height: 150px;" />
                <canvas id="canvasCamera" class="canvas" :width='videoWidth' :height='videoHeight' style="display: none;"></canvas>
              </div>
              <div>
              <!-- 點(diǎn)擊拍照和保存按鈕 -->
                <el-button type="primary" class="save-camera-btn" icon="el-icon-camera" @click="drawImage" style="margin-top: 10px;">拍照</el-button>
                <el-button type="primary" class="save-camera-btn" icon="el-icon-check" @click="uploadPicture">保存</el-button>
              </div>
            </div>
            
          </div>
          
        </div>
      </div>
    </div>

2.css模塊
就是一個彈窗，這里就不進(jìn)行展示了。

3.js模塊

export default {
  name: "Index",
  data() {
  	return {
  	  /** 照相機(jī)彈窗模塊-start */
      cameraOpen: false,
      imgSrc: undefined,
      os: false,//控制攝像頭開關(guān)
      thisVideo: null,
      thisContext: null,
      thisCancas: null,
      videoWidth: 800,
      videoHeight: 600,
      /** 照相機(jī)彈窗模塊-end */
  	}
  },
  methods: {
  /** 調(diào)用攝像頭拍照-start*/
  	// 打開照相機(jī)彈窗
  	handleOpen() {
  	  this.cameraOpen = true;
      this.getCompetence();
  	},
    // 調(diào)用攝像頭權(quán)限
    getCompetence() {
      //必須在model中render后才可獲取到dom節(jié)點(diǎn),直接獲取無法獲取到model中的dom節(jié)點(diǎn)
      this.$nextTick(() => {
        const _this = this;
        this.os = false;//切換成關(guān)閉攝像頭
        this.thisCancas = document.getElementById('canvasCamera');//這里是需要截取的canvas的Id名稱
        this.thisContext = this.thisCancas.getContext('2d');
        this.thisVideo = document.getElementById('videoCamera');
        // 舊版本瀏覽器可能根本不支持mediaDevices，我們首先設(shè)置一個空對象
        if (navigator.mediaDevices === undefined) {
          navigator.menavigatordiaDevices = {}
        }
        // 一些瀏覽器實(shí)現(xiàn)了部分mediaDevices，我們不能只分配一個對象
        // 使用getUserMedia，因?yàn)樗鼤采w現(xiàn)有的屬性。
        // 這里，如果缺少getUserMedia屬性，就添加它。
        if (navigator.mediaDevices.getUserMedia === undefined) {
          navigator.mediaDevices.getUserMedia = function (constraints) {
            // 首先獲取現(xiàn)存的getUserMedia(如果存在)
            let getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.getUserMedia;
            // 有些瀏覽器不支持，會返回錯誤信息
            // 保持接口一致
            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(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 {
            // 避免在新的瀏覽器中使用它，因?yàn)樗诒粭売谩?/span>
            _this.thisVideo.src = window.URL.createObjectURL(stream)
          }
          _this.thisVideo.onloadedmetadata = function (e) {
            _this.thisVideo.play()
          }
        }).catch(err => {
          this.$notify({
            title: '警告',
            message: '沒有開啟攝像頭權(quán)限或?yàn)g覽器版本不兼容.',
            type: 'warning'
          });
        });
      });
    },
    //繪制圖片
    drawImage() {
      // 點(diǎn)擊，canvas畫圖
      this.thisContext.drawImage(this.thisVideo, 0, 0, this.videoWidth, this.videoHeight);
      // 獲取圖片base64鏈接，展示到界面中的也是這個url地址
      this.imgSrc = this.thisCancas.toDataURL('image/png');
    },
    // 上傳照相機(jī)圖片
    uploadPicture() {
      // 這里就調(diào)用上傳圖片接口即可
      ...
    },
    //清空畫布
    clearCanvas(id) {
      let c = document.getElementById(id);
      let cxt = c.getContext("2d");
      cxt.clearRect(0, 0, c.width, c.height);
    },
    //重置畫布
    resetCanvas() {
      this.imgSrc = "";
      this.clearCanvas('canvasCamera');
    },
    //關(guān)閉攝像頭
    stopNavigator() {
      if (this.thisVideo && this.thisVideo !== null) {
        this.thisVideo.srcObject.getTracks()[0].stop();
        this.os = true;//切換成打開攝像頭
      }
    },
    // 關(guān)閉照相機(jī)彈窗
    closeCameraMask() {
      this.cameraOpen = false; // 關(guān)閉照相機(jī)彈窗
      this.resetCanvas(); // 重置畫布
      this.stopNavigator(); // 關(guān)閉攝像頭
      //this.getDetailList(); // 重新獲取一下List，此方法不再書寫
    },
    /** 調(diào)用攝像頭拍照-end*/
  },
}

效果展示

文章來源地址http://www.zghlxwxcb.cn/news/detail-528511.html

到了這里，關(guān)于vue調(diào)用電腦端攝像頭實(shí)時拍照的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！