通过简单对等添加React中的流和轨道

问题描述

我正在研究React中的在线会议代码。我将简单对等用作WebRTC包装器，由此我从简单对等反应开始并在其之上进行构建。我现在正在尝试在连接已经处于活动状态时向同级动态添加流/轨道。流来自视频，为此我捕获了流并将其传递给对等管理代码以提取和添加轨道（请参见下面的代码）。 我期望，成功添加轨道后，它会出现在与它一起处理的流中的对等对象中。但是，这不会发生。而且，连接对等方一侧的“跟踪”事件不会触发。

我想指出，所有其他简单对等（WebRTC）代码都可以正常工作：与对等方建立视频连接，动态添加对等方，通过数据通道发送和接收数据。

我在做什么错？ （请参见下面的代码）

非常感谢， 亚历克斯

代码在这里：

1. 从视频对象的引用获取流

 buttonCallback = () => {
    // ref points to video component,with video loaded. Stream contains two MediaStreamTracks
    const stream = this.localVideoRef.current.captureStream(); 
    // forward to peer connection management
    this.props.addTracksToPeerFcn(stream) // points to addTracksToPeerFcn
  }

1. 尝试将曲目添加到对等方

    addTracksToPeerFcn(stream){
      //peers contains all connected peers. So iterate over it and try to add the captured stream to it.
      Object.entries(this.state.peers).map(entry => { 
        let [peerId,peer] = entry
        console.log('Adding tracks to peer',peerId,peer,stream)
        
        let vidtracks = stream.getVideoTracks()
        let audtracks = stream.getAudioTracks()

        console.log('Track: ',vidtracks) // Check to make sure track exists: it does
        console.log('Track: ',audtracks)

        peer.addTrack(vidtracks[0],stream)
        peer.addTrack(audtracks[0],stream)

        // Check for added streams: none. 
        console.log('Streams now: ',peer.streams)

        // Also: checking for added tracks in current or other streams: none
        // (not in sample code)
      })
    }

解决方法

几天后，我自己找到了答案：我使用的简单对等项的实现是一个较旧的版本（9.1.1）。我怀疑（未经证实）此版本存在与向同伴添加曲目和流有关的错误。升级到最新版本后，问题已解决。