之呼叫PC端攝像頭實時拍照，供大家參考，具體內容如下

由於我使用的是點選按鈕開啟模態框拍照所以在這裡吧按鈕和模態框程式碼都貼上如下。

<!-- 開啟模態框按鈕-->
        <el-form-item label="*照片：" prop="headImage">
          <el-input type="text" v-model="imgSrc" />
            <el-col :span="1.5">
              <el-button
                @click="onTake"
                icon="el-icon-camera"
                size="small">
                拍照上傳
              </el-button>
            </el-col>
        </el-form-item>
        <!--拍照後顯示圖片-->
        <el-form-item label="" prop="imgSrc">
          <img v-if="imgSrc"  :src="imgSrc" style="width: 200px;height: 240px;" />
</el-form-item>

<!--拍照模態框-->
    <el-dialog
      title="拍照上傳"
      :visible.sync="visible"
      @close="onCancel"
      width="1065px">
      <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 slot="footer">
        <el-button
          @click="drawImage"
          icon="el-icon-camera"
          size="small">
          拍照
        </el-button>
        <el-button
          v-if="os"
          @click="getCompetence"
          icon="el-icon-video-camera"
          size="small">
          開啟攝像頭
        </el-button>
        <el-button
          v-else
          @click="stopNavigator"
          icon="el-icon-switch-button"
          size="small">
          關閉攝像頭
        </el-button>
        <el-button
          @click="resetCanvas"
          icon="el-icon-refresh"
          size="small">
          重置
        </el-button>
        <el-button
          @click="onCancel"
          icon="el-icon-circle-close"
          size=BAowk
 
"small">
          完成
        </el-button>
   </div>
</el-dialog>

下來我們來看程式碼，我把不需要的部分刪除了，因為涉及單位專案問題實屬抱歉哈

<script>
export default {
  name: "XXX",data() {
    return {
      visible: false,//彈窗
      loading: false,//上傳按鈕載入
      os: false,//控制攝像頭開關
      thisVideo: null,thisContext: null,thisCancas: null,videoWidth: 500,videoHeight: 400,postOptions:[],CertCtl:'',// 遮罩層
      loading: true,// 選中陣列
      ids: [],// 非單個禁用
      single: true,// 非多個禁用
      multiple: true,// 總條數
      total: 0,// 專案人員表格資料
      akworkerList: [],www.cppcns.com
 
     //工種類別資料字典
      workerTypeOptions:[],// 彈出層標題
      title: "",// 是否顯示彈出層
      open: false,// 查詢引數
      queryParams: {
        pageNum: 1,pageSize: 10,imgSrc:undefined,},// 表單引數
      form: {},// 表單校驗
      rules: {
      }
    };
  },created() {
   
  },methods: {
    /*呼叫攝像頭拍照開始*/
    onTake() {
      this.visible = true;
      this.getCompetence();
    },onCancel() {
      this.visible = false;
     /* this.resetCanvas();*/
      this.stopNavigator();
    },// 呼叫攝像頭許可權
    getCompetence() {
      //必須在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.menavigatordiaDevices = {}
        }
        // 一些瀏覽器實現了部分mediaDevices，我們不能只分配一個物件
        // 使用getUserMedia，因為它會覆蓋現有的屬性。
        // 這裡，如果缺少getUserMedia屬性，就新增它。
        if (navigator.mediaDevices.getUserMedia === undefined) {
          navigator.mediaDevices.getUserMedia = function (constraints) {
            // 首先獲取現存的getUserMedia(如果存在)
            let getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigatBAowkor.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 constraintBAowks = {
          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.$notify({
            title: '警告',message: '沒有開啟攝像頭許可權或瀏覽器版本不相容.',type: 'warning'
          });
        });
      });
    },//繪製圖片
    drawImage() {
      // 點選，canvas畫圖
      this.thisContext.drawImage(this.thisVideo,this.videoWidth,this.videoHeight);
      // 獲取圖片base64連結
      this.imgSrc = this.thisCancas.toDataURL('image/png');
      /*const imgSrc=this.imgSrc;*/
    },//清空畫布
    clearCanvas(id) {
      let c = document.getElementById(id);
      let cxt = c.getContext("2d");
      cxt.clearRect(0,c.width,c.height);
    },//重置畫布
    resetCanvas() {
      this.imgSrc = "";
      this.clearCanvas('canvasCamera');
    },//關閉攝像頭
    stopNavigator() {
      if (this.thisVideo && this.thisVideo !== null) {
        this.thisVideo.srcObject.getTracks()[0].stop();
        this.os = true;//切換成開啟攝像頭
      }
    },/*呼叫攝像頭拍照結束*/
  }
};
</script>

在此，本篇文章也就分享完畢了，若有什麼不對之處還望各位大佬多多指點，若有相似之處還望聯絡修改刪除，謝謝

以上就是本文的全部內容www.cppcns.com，希望對大家的學習有所幫助，也希望大家多多支援我們。