react.js и WebRTC RTCPeerConnection.addStream не является объектом

Question

Я хочу сделать простой видеочат на react.js и WebRTC. Но в строке pc.addStream(localStream) ошибка:

TypeError: Argument 1 of RTCPeerConnection.addStream is not an object.

И я не понимаю, почему я не могу видеть бревно в строке:

pc.onicecandidate = (e)=>{ console.log('onicecandidate');

Вот весь код:

class App extends Component { 
    constructor(props) { 
    super(props); 
    } 
    componentDidUpdate(){ 
    loadScript("https://webrtc.github.io/adapter/adapter-latest.js"); 
    let localVideo, remoteVideo, peerConnection, localStream; 
    $('#start').on('click',()=>{ start(true) }); 

    let id = uuid(); 
    localVideo = document.getElementById('localVideo'); 
    remoteVideo = document.getElementById('remoteVideo'); 


    if(navigator.mediaDevices.getUserMedia) { 
     navigator.mediaDevices.getUserMedia({ video:true, audio:true}).then((stream)=> { 
      localStream = stream; 
      localVideo.src = window.URL.createObjectURL(stream); 
     }).catch(errorHandler); 
    }else{ alert('Your browser does not support getUserMedia API'); } 

    function start(isCaller) { 
     peerConnection = new RTCPeerConnection({ 'iceServers': [{'urls': 'stun:stun.services.mozilla.com'}, {'urls': 'stun:stun.l.google.com:19302'},]}); 
     peerConnection.onicecandidate = (e) => { 
     if(e.candidate != null) { 
      Meteor.call('addMsgRtc', JSON.stringify({'ice': e.candidate, '_id':id}), id); 
     } 
    }; 
     peerConnection.onaddstream = (e)=>{ 
     remoteVideo.src = window.URL.createObjectURL(e.stream); 
     }; 
     peerConnection.addStream(localStream); 
     if(isCaller) { 
     peerConnection.createOffer().then(
      createdDescription).catch(errorHandler); 
     } 
    } 
    if (!this.props.loadingRtc) { 
     for(let i of this.props.messagesRtc){   
     if(!peerConnection) start(false); 
     let signal = JSON.parse(i.text); 
     if(signal._id == id) return; 
     if(signal.sdp) { 
      peerConnection.setRemoteDescription(new RTCSessionDescription(signal.sdp)).then(()=> { 
      if(signal.sdp.type == 'offer') {    peerConnection.createAnswer().then(createdDescription).catch(errorHandler); 
      } 
     }).catch(errorHandler); 
     }else if(signal.ice) { 
     peerConnection.addIceCandidate(new RTCIceCandidate(signal.ice)).catch(errorHandler); 
     } 
    } 
    } 


    function createdDescription(description) { 
    peerConnection.setLocalDescription(description).then(()=> {   
     Meteor.call('addMsgRtc', JSON.stringify({'sdp':peerConnection.localDescription, '_id':id}), id); 
    }).catch(errorHandler); 
    } 
    function errorHandler(error) { console.log(error); } 
} 

    } 
    render() { 
    return (
     <div id="container"> 
      <video id="localVideo" autoPlay muted style={{width:"40%"}}></video> 
      <video id="remoteVideo" autoPlay style={{width:"40%"}}></video> 
      <br/> 
     </div> 
    ); 
    } 
} 

export default createContainer(()=> { 
    const subscriptionRtc = Meteor.subscribe('rtc'); 
    const loadingRtc = !subscriptionRtc.ready(); 
    return { 
    loadingRtc:loadingRtc, 
    messagesRtc: msgRtc.find().fetch(), 
    }; 
}, App); 

Answer 1

getUserMedia - это операция async, которая возвращает обещание. .then(), который устанавливает localStream, не был выполнен в то время, когда вы звоните pc.addStream. Возможно, вы захотите переместить start() в .then().

Событие ontrack не имеет e.stream. Вероятно, вы, скорее всего, захотите использовать onaddstream. Также, пожалуйста, установите srcObject = e.stream вместо URL.createObjectURL.