首页截图

image.png

获取音视频

image.png

关键Code

获取摄像头数据

  /**
     * 获取流数据
     */
    openUserMeida() {
      var that = this
      // 判断是否支持获取媒体数据
      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 => {
        // 拿到流数据后，将流显示在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流数据
      let stream = video.srcObject
      // 判断流数据是否存在 ，存在则关闭所有轨道数据
      if (stream) {
        stream.getTracks().forEach(e => {
          e.stop();
        })
      }
      video.srcObject = null
    }

期待更新，麻烦点个赞，点个关注，栓Q !