React.js 和 WebRTC RTCPeerConnection.addStream 不是对象

Question

react.js我想在和上进行简单的视频聊天WebRTC。pc.addStream(localStream)但出现在线错误：

类型错误：RTCPeerConnection.addStream 的参数 1 不是对象。

我不明白为什么我看不到该行中的日志：

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是一个返回承诺的异步操作。当您调用 时，设置.then()的localStream尚未执行pc.addStream。您可能想将您的移动start()到.then().

顺便说一句，ontrack 事件没有e.stream。您可能想使用onaddstream它。另外请设置srcObject = e.stream而不是使用URL.createObjectURL.