Кандидаты на льду WEBRTC не оседают на стороне приемника (React, Socket.io) ⇐ Javascript

[Anonymous]

Я внедряю функцию видеооткрыта, используя два отдельных экземпляра RTCPeerconnection для отправки и получения видео. В настоящее время я реализовал только подключение к RTC отправителя, то есть только приемник может увидеть видео отправителя. правильно. Треки, кажется, получены, но видео не отображается. Журналы отправителя < /p>
webrtc recievr < /p>
webrtc sender < /p>
function VideoFrameReciever() {
const { match, socket } = useAuthStore();
const remoteVideoRef = useRef();

const startCall = async () => {
let candidates= null;
const sendersPC = new RTCPeerConnection({
iceServers: [
{ urls: "stun:stun.l.google.com:19302" }, // Example STUN server (Google)
{ urls: "stun:global.stun.twilio.com:3478" }, // Example STUN server (Twilio)
// Add more STUN servers if needed
],
});
socket.on("receive-offer", async ({ sdp, from }) => {
console.log("offer received");

await sendersPC.setRemoteDescription(sdp);
const answer = await sendersPC.createAnswer();
await sendersPC.setLocalDescription(answer);

socket.emit("send-answer", {
sdp: sendersPC.localDescription,
to: match,
});
console.log("answer sent");
sendersPC.onicecandidate = (e) => {
if (e.candidate) {
socket.emit("send-ice-candidate", {
candidate: e.candidate,
to: match,
});
console.log("ice candidate sent", e.candidate);
}
};
});
socket.on("receive-ice-candidate", async ({ candidate }) => {
console.log("ice candidates recieved--->",candidate)
console.log("senderPc---->",sendersPC);
await sendersPC.addIceCandidate(candidate);
});

sendersPC.ontrack = (event) => {
console.log("track received");
console.log(event);
if (remoteVideoRef.current) {
remoteVideoRef.current.srcObject = event.streams[0]; // Use the streams from the event
console.log("remoteVideoRef is available", event.streams[0]);
} else {
console.error("remoteVideoRef is not available yet.");
}
};
};

startCall();

return (



{/* {myStream && (

My Stream


)} */}

Remote Stream




);
}

function VideoFrameSender() {
const { match, socket, connectSocket } = useAuthStore();
useEffect(() => {
connectSocket();
}, []);
const startCall = async () => {
const sendersPC = new RTCPeerConnection({
iceServers: [
{ urls: "stun:stun.l.google.com:19302" }, // Example STUN server (Google)
{ urls: "stun:global.stun.twilio.com:3478" }, // Example STUN server (Twilio)
// Add more STUN servers if needed
],
});

sendersPC.onnegotiationneeded = async () => {
console.log("negotiation needed");
const offer = await sendersPC.createOffer();
await sendersPC.setLocalDescription(offer);
socket.emit("send-offer", { sdp: sendersPC.localDescription, to: match });
console.log("offer sent");
};

socket.on("receive-answer", async ({ sdp }) => {
console.log("answer received");
await sendersPC.setRemoteDescription(sdp);
});

sendersPC.onicecandidate = (e) => {
if (e.candidate) {
socket.emit("send-ice-candidate", {
candidate: e.candidate,
to: match,
});
console.log("ice candidate sent", e.candidate);
}
};
socket.on("receive-ice-candidate", async ({ candidate }) => {
console.log("ice candidate received--->", candidate);
await sendersPC.addIceCandidate(candidate);
});

const stream = await navigator.mediaDevices.getUserMedia({
video: true,
audio: false,
});

// Correct way to add track with stream:
stream.getTracks().forEach((track) => sendersPC.addTrack(track, stream)); // Add each track with the stream
console.log("Sender tracks:", stream.getTracks()); //

Подробнее здесь: https://stackoverflow.com/questions/794 ... -socket-io