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是返回承諾的異步操作。當您撥打pc.addStream時，設置localStream的.then()尚未執行。 您可能需要將start()轉換爲.then()。

ontrack事件沒有e.stream btw。您可能需要使用onaddstream。還請設置srcObject = e.stream而不是使用URL.createObjectURL。