Question

我正在通过React和WebRTC创建一个群组语音呼叫应用程序。

我通过信令服务器（远程描述，ICE候选者等）在两个对等方之间拥有完整的连接语言。

我没有测试它是否可以工作，因为我不知道如何为存在的每个音频流添加音频元素。我敢肯定我做错了，但是我敢肯定你会理解我的逻辑的。

当添加远程音频流时，我有以下代码：

   peer_connection.onaddstream = event => {
                console.log("On AddStream.");
                let remoteAudioObject;
                let remoteStream;
                remoteStream = event.stream;


            this.setState({remoteStreams: [...this.state.remoteStreams, remoteStream]});

            }

要播放音频，我创建了一个单独的React组件，称为“音频管理器”，我将所有流都传递给了它，如下所示：

<AudioManager streams={this.state.remoteStreams}></AudioManager>

内部：

export default class AudioManager extends Component {
    constructor(props){
        super(props);


    }

    render(){
        return(<div>
            {this.props.streams.map(stream => (
                <audio src={stream} autoplay></audio>
            ))}
            </div>
        )
    }
}

但是，当我运行它时，出现以下错误：

[object%20MediaStream]:1 GET http://localhost:3000/[object%20MediaStream] 404 (Not Found)

有人会对我如何实现目标有任何指示吗？

谢谢。

Answer 1

我认为您不正确地传递了源对象。

src={stream}不起作用是因为src需要一个字符串，该字符串代表音频资源的URL，而流是MediaStream object。

您应该尝试这样的事情：

export default class AudioManager extends Component {
  setSrcObject(ref, stream) {
    if(ref) {
       ref.srcObject = stream;
     }
  }
  render() {
     return (
       <div>
         {this.props.streams.map(stream => (
             <audio ref={ref => this.setSrcObject(ref, stream)} autoplay />          
           )
         )}
       </div>
      )
    }
}

根据React状态下的音频流动态创建音频对象？

1 个答案: