Динамически создавать аудиообъект на основе аудиопотоков в состоянии React?

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 под названием Audio manager, которому я передаюво всех потоках, подобных этому:

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