javascript - 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 是一个返回 promise 的异步操作。在调用pc.addStream时，设置localStream的.then()还没有执行。您可能希望将 start() 移动到 .then() 中。

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