首頁截圖

image.png

獲取音視頻

image.png

關鍵Code

獲取攝像頭數(shù)據(jù)

  /**
     * 獲取流數(shù)據(jù)
     */
    openUserMeida() {
      var that = this
      // 判斷是否支持獲取媒體數(shù)據(jù)
      if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
        that.$notify({
          title: '警告',
          message: '瀏覽器不支持獲取媒體設備',
          type: 'warning'
        });
        return;
      }
      let constraints = {video: true, audio: true}
      this.loading = true
      this.getLocalUserMedia(constraints).then(stream => {
        // 拿到流數(shù)據(jù)后，將流顯示在video
        this.setDomVideoStream('localVideo', stream);
      });
    },
    /**
     * 獲取音視頻流
     * @param constraints
     * @returns {Promise<MediaStream>}
     */
    async getLocalUserMedia(constraints) {
      return await navigator.mediaDevices.getUserMedia(constraints).catch(this.handleError)
    },
    /**
     * 異常處理
     * @param error
     */
    handleError(error) {
      this.loading = false;
      this.$notify({
        title: '警告',
        message: '無法獲取媒體設備，請檢查是否占用或缺失',
        type: 'warning'
      });
      console.error('navigator.MediaDevices.getUserMedia error: ', error.message, error.name);
    },

關閉攝像頭

 /**
     * 關閉
     * @param domId
     */
    closeUserMedia(domId) {
      let video = document.getElementById(domId)
      // 獲取video流數(shù)據(jù)
      let stream = video.srcObject
      // 判斷流數(shù)據(jù)是否存在 ，存在則關閉所有軌道數(shù)據(jù)
      if (stream) {
        stream.getTracks().forEach(e => {
          e.stop();
        })
      }
      video.srcObject = null
    }

期待更新，麻煩點個贊，點個關注，栓Q !