How To Use Attachmediastream?

I tried to test an exercise with WebRTC socket.io for a video call and chat . I could not get the console errors on firefox but not attacking me the two local / remote stream betwe

Solution 1:

attachMediaStream is not part of WebRTC. It's a shim adapter.js used to expose for setting video.src or video.srcObject (which Chrome still doesn't support, but Canary does).

In any case, you're passing in the wrong arguments, which should be an element and a stream, not two streams. I.e. make it:

attachMediaStream(remoteVideo, event.streams[0]);

or better, use the spec-way that adapter.js now supports on all browsers:

remoteVideo.srcObject = event.streams[0];

Important: The pc.ontrack event contains event.streams (plural), not event.stream! - It's an array since a track may (but rarely does) exist in more than one stream.

If you're not using the latest adapter.js, then note that pc.ontrack is only natively available in Firefox at the moment, so in Chrome you would need the older pc.onaddstream (and its event.stream).

PS: You're currently setting remoteVideo.src to the local video. Don't do that.

PPS: Remove pc_constraints. Really old stuff that will break Chrome.

Here's a demo of ontrack (use https fiddle in Chrome):

var pc1 = newRTCPeerConnection(), pc2 = newRTCPeerConnection();

navigator.mediaDevices.getUserMedia({ video: true, audio: true })
  .then(stream => pc1.addStream(video1.srcObject = stream))
  .catch(log);

varadd = (pc, can) => can && pc.addIceCandidate(can).catch(log);
pc1.onicecandidate = e =>add(pc2, e.candidate);
pc2.onicecandidate = e =>add(pc1, e.candidate);

pc2.ontrack = e => video2.srcObject = e.streams[0];
pc1.oniceconnectionstatechange = e =>log(pc1.iceConnectionState);
pc1.onnegotiationneeded = e =>
  pc1.createOffer().then(d => pc1.setLocalDescription(d))
  .then(() => pc2.setRemoteDescription(pc1.localDescription))
  .then(() => pc2.createAnswer()).then(d => pc2.setLocalDescription(d))
  .then(() => pc1.setRemoteDescription(pc2.localDescription))
  .catch(log);

varlog = msg => div.innerHTML += "<br>" + msg;

<videoid="video1"height="120"width="160"autoplaymuted></video><videoid="video2"height="120"width="160"autoplay></video><br><divid="div"></div><scriptsrc="https://webrtc.github.io/adapter/adapter-latest.js"></script>