【WebRtc】获取音视频数据

最新推荐文章于 2024-10-03 20:25:05 发布

原创

最新推荐文章于 2024-10-03 20:25:05 发布 · 365 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#webrtc #音视频 #前端

该代码段展示了如何使用浏览器的navigator.mediaDevices.getUserMedia接口获取摄像头和音频数据，处理流数据并在video标签中显示。如果遇到浏览器不支持或获取媒体设备失败的情况，会显示警告信息并提供异常处理。此外，还包括了关闭摄像头流的功能。

首页截图

获取音视频

关键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<MediaSt