在 React 中通过 simple-peer 添加流和曲目

Question

我正在使用 React 编写在线会议代码。我使用 simple-peer 作为 WebRTC 包装器，由此我开始使用 simple-peer-react 并在其之上构建。我现在正在尝试在连接已处于活动状态时向对等方动态添加 stream/track。流来自视频，为此我捕获了流并将其传递给对等管理代码以提取和添加曲目（请参见下面的代码）。我期望的是，当成功添加曲目时，它将出现在与其一起传递的流中的对等 object 中。然而，这不会发生。此外，已连接对等端的 'track' 事件不会触发。

我想指出所有其他 simple-peer (WebRTC) 代码工作正常：建立与对等点的视频连接、动态添加对等点、通过 data-channel 发送和接收数据。

我做错了什么？（见下面的代码）

非常感谢，亚历克斯

这里是代码：

从视频参考中获取流object

 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
  }

正在尝试将曲目添加到对等点

    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)
      })
    }

Answer 1

几天后我自己找到了答案：我使用的 simple-peer 的实现是旧版本 (9.1.1)。我怀疑（未经证实）此版本存在与向对等点添加曲目和流相关的错误。升级到最新版本后，问题解决。

在 React 中通过 simple-peer 添加流和曲目

Adding streams and tracks via simple-peer in react

webrtc

reactjs

simple-peer