CODEWITHSUNDEEP
javascripthtmlwebrtc
Muhammad Umer
Muhammad Umer

Reputation: 18097

Why is WebRTC local stream is showing nothing?

what i'm trying to do is have p1 make connection to p2, p2 get webcam and stream it to p2. On all same page to practice webrtc.

but onaddstream i do get a stream, it has correct id and errors, but when i assign it to video element nothing happens.

However, I do get valid stream from p2, which is the one who requests the stream. If i set video equal to this stream then it shows webcam video.

This is the code

v = $0

pc1 = new RTCPeerConnection();
pc2 = new RTCPeerConnection();

pc1.onaddstream = (s) => {
    v.src = URL.createObjectURL(s.stream);
    window.s1 = s.stream;
};

pc1.createOffer({offerToReceiveVideo: 1})
.then((offer) => {
    pc1.setLocalDescription(offer);
    pc2.setRemoteDescription(offer)
})
.then(() => navigator.mediaDevices.getUserMedia({ video: true }))
.then((stream) => {
    pc2.addStream(stream);
    window.s2 = stream;
})
.then(() => pc2.createAnswer())
.then((answer) => {
    pc2.setLocalDescription(answer);
    pc1.setRemoteDescription(answer);
})
.catch((err)=>console.log(err));

Upvotes: 1

Views: 608

Answers (1)

jib
jib

Reputation: 42450

You're not signaling ICE candidates. Add:

pc1.onicecandidate = e => pc2.addIceCandidate(e.candidate);
pc2.onicecandidate = e => pc1.addIceCandidate(e.candidate);

...and it will work.

Side-tip: check out your friendly web console deprecation warnings:

⚠ onaddstream is deprecated! Use peerConnection.ontrack instead.

⚠ URL.createObjectURL(MediaStream) is deprecated and will be removed soon.

E.g. like this. The spec is almost done evolving.

Upvotes: 1

Related Questions