Error simple WebRTC chat on react.js and meteor.js


#1

I’m trying to make a simple chat using webrtc technology, react.js and meteor.js.
This is client code:

 class Rtc extends Component {
   constructor(props) {
     super(props);
   }

   componentDidUpdate(){
     let localVideo, remoteVideo, peerConnection, localStream;
     $('#start').on('click', ()=>{ start(true) });
     let id = Meteor.uuid();
     localVideo = document.getElementById('localVideo');
     remoteVideo = document.getElementById('remoteVideo');

     if (!this.props.loadingRtc) {
       this.props.messagesRtc.forEach((item, i ,arr)=>{
         let signal = JSON.parse(item.text);
         if(i == 0)return;
         gotMessageFromServer(signal);
       });
     }

     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 ) => {
         console.log('e.candidate', e.candidate);
         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);
       }
     }

     function gotMessageFromServer(signal) {
       if(!peerConnection)  start(false);      
       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>
         <video id="localVideo"  autoPlay muted style={{width:"40%"}}></video>
         <video id="remoteVideo" autoPlay       style={{width:"40%"}}></video>
         <br/>
         <input type="button" id="start" value="Start Video"/>
       </div>
     );
   }
 }


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

Server code:

 export const msgRtc = new Mongo.Collection('rtc');
 let messagesRtc = [];
 let clients = [];

  Meteor.publish('rtc', function wsPub() {
    clients.push(this);
    _.each(messagesRtc, (message) => {
      this.added('rtc', message._id, message);
    });
    this.ready();
  });

 Meteor.methods({
    'addMsgRtc'(arr, id) {
      let newMessage = {_id:id, 'text':arr};
      messagesRtc.push(newMessage);
      _.each(clients, (client) => {
        client.added('rtc', id, newMessage);      
      });
    },

The problem is that why after the initialization of getUserMedia does not want to further this videos and what not so I can’t understand. Because it is actually a similar code with the usual websockets like this works and syncs fine.


#2

Hey @alex10 I am also working on trying to get webrtc working using meteor pub sub methods. Were you able to get this working ?? Any insight on how you were able to pass the messages from one client to another ?