I have a video-call-chat website using WebRTC. I built it with express, socket.io and kurento. Specifically, I run kurento server at port 8888: docker run -d -p 8888:8888 kurento/kurento-media-server:6.6.0 and I use Kurento Utils JS in client for: get Peer connection, transfer video streams, ICE candidates as well as handle offers, answers.

I run my app on https://localhost:3000. In the client of local user, I use WebRtcPeerSendonly to send and embedded local MediaStream. And with remote users, they will receive and embedded the received MediaStream by method WebRtcPeerRecvonly. But the received MediaStream is always wrong and user can't embedded exact remote stream of the others. Can someone help in resolving this issue?

Below is my code for create Receive Only WebRTC peer:

user.rtcPeer = kurentoUtils.WebRtcPeer.WebRtcPeerRecvonly(
    options,
    function (err) {
      if (err) {
        return console.error(err);
      }
      this.generateOffer(onOffer);
    }
);

And another for create Send Only WebRTC peer:

user.rtcPeer = kurentoUtils.WebRtcPeer.WebRtcPeerSendonly(
    options,
    function (err) {
      if (err) {
        return console.error(err);
      }
      this.generateOffer(onOffer);
    }
);

I have took a look at Kurento Utils JS library and I find out that it has two functions to get and assign remote stream: one is getRemoteStreams() and another is setRemoteVideo(). Below is the code:

if (!pc.getRemoteStreams && pc.getReceivers) {
    pc.getRemoteStreams = function () {
       var stream = new MediaStream();
       pc.getReceivers().forEach(function (sender) {
           stream.addTrack(sender.track);
       });
       return [stream];
    };
}

function setRemoteVideo() {
    if (remoteVideo) {
         remoteVideo.pause();
         var stream = pc.getRemoteStreams()[0];

         console.log(stream)

         remoteVideo.srcObject = stream;
         logger.debug("Remote stream:", stream);
         if (
            typeof AdapterJS !== "undefined" &&
            AdapterJS.webrtcDetectedBrowser === "IE" &&
               AdapterJS.webrtcDetectedVersion >= 9
         ) {
            remoteVideo = attachMediaStream(remoteVideo, stream);
         } else {
            remoteVideo.load();
         }
     }
}

When if condition come false, it mean the default getRemoteStreams function of this library is applied, I try to console.log the remote stream in library and it always show a MediaStream with ID = "default":

MediaStream {id: 'default', active: true, onaddtrack: null, onremovetrack: null, onactive: null, …}
     active: true
     id: "default"
     onactive: null
     onaddtrack: null
     oninactive: null
     onremovetrack: null

But when I remove the if condition, means that the getRemoteStreams function is overridden as above. Then the log show that remote stream is a MediaStream with a specified ID, for example:

MediaStream {id: 'a1ece389-bac6-4263-83a8-e142f7137efb', active: true, onaddtrack: null, onremovetrack: null, onactive: null, …}
     active: true
     id: "a1ece389-bac6-4263-83a8-e142f7137efb"
     onactive: null
     onaddtrack: null
     oninactive: null
     onremovetrack: null

But in this case, the received ID doesn't coincide with the sended MediaStream ID.

I think the reason is not server connection because when new user access this website, it create a new ID (showed in console) and it can send Media Stream to the others (but not the expected one).