Vue如何實現調用PC端攝像頭實時拍照

這篇文章將為大家詳細講解有關Vue如何實現調用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"  />
</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="small">
          完成
        </el-button>
   </div>
</el-dialog>

下來我們來看js代碼，我把不需要的部分刪除了，因為涉及單位項目問題實屬抱歉哈

<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: [],
      //工種類別數據字典
      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 || 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.$notify({
            title: '警告',
            message: '沒有開啟攝像頭權限或瀏覽器版本不兼容.',
            type: 'warning'
          });
        });
      });
    },
    //繪制圖片
    drawImage() {
      // 點擊，canvas畫圖
      this.thisContext.drawImage(this.thisVideo, 0, 0, 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, 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>

關于“Vue如何實現調用PC端攝像頭實時拍照”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。