I used simple Peer and react for peer-to-peer connection. And I made and distributed a video chat app that other people can participate in, and now it works in the local environment, but it doesn't work at all in the distributed environment. A first-time visitor does not recognize that a new person has arrived. The second person who entered has two faces
I don't know what's wrong with this part. please help me..
client
const Video = (props) => {
const anotherUserRef = useRef(null);
console.log(props, "props");
useEffect(() => {
props.peer.on("stream", (stream) => {
console.log("stream", stream);
anotherUserRef.current.srcObject = stream;
});
}, []);
return (
<>
<Webcam
className="anotherUser"
playsInline
autoPlay
ref={anotherUserRef}
/>
</>
);
};
...
useEffect(() => {
navigator.mediaDevices
.getUserMedia({
video: videoConstraints,
audio: true,
})
.then((stream) => {
const peers = [];
userVideo.current.srcObject = stream;
console.log("원래 여기 있떤 사람들", userInfo);
userInfo.forEach((user) => {
const peer = createPeer(user, socket.id, stream);
peersRef.current.push({
peerID: user,
peer,
});
peers.push(peer);
});
setPeers(peers);
console.log("나 있기전에 있던 사람들", peers);
socket.on("user joined", (payload) => {
const peer = addPeer(payload.signal, payload.callerID, stream);
peersRef.current.push({
peerID: payload.callerID,
peer,
});
setPeers((users) => [...users, peer]);
});
socket.on("receiving-returned-signal", (payload) => {
console.log("signal돌려받음", payload);
const item = peersRef.current.find((p) => p.peerID === payload.id);
item.peer.signal(payload.signal);
});
});
return () => {
userVideo.current = null;
socket.off("user joined");
socket.off(SOCKET.USER);
socket.off(SOCKET.RECEIVING_RETURNED_SIGNAL);
};
}, []);
function createPeer(userToSignal, callerID, stream) {
console.log(userToSignal, callerID, stream);
const peer = new Peer({
initiator: true,
trickle: false,
stream,
});
peer.on("signal", (signal) => {
console.log("this is signal", signal);
socket.emit("sending signal", {
userToSignal,
callerID,
signal,
});
});
return peer;
}
function addPeer(incomingSignal, callerID, stream) {
const peer = new Peer({
initiator: false,
trickle: false,
stream,
});
peer.on("signal", (signal) => {
console.log(signal, "누가 들어왓대", callerID, "<-얘가 왔대");
socket.emit("returning signal", { signal, callerID });
});
console.log("this is incomingSignal", incomingSignal);
peer.signal(incomingSignal);
return peer;
}
return (
<Webcam className="user" ref={userVideo} autoPlay playsInline />
{peers && peers.map((peer, index) => <Video key={index} peer={peer} />)}
);
server
socket.on("sending signal", (payload) => {
console.log(
"here is sendingsignal",
payload.callerID,
payload.userToSignal,
"~에게 보냄"
);
io.to(payload.userToSignal).emit("user joined", {
signal: payload.signal,
callerID: payload.callerID,
});
});
socket.on("returning signal", (payload) => {
io.to(payload.callerID).emit("receiving-returned-signal", {
signal: payload.signal,
id: socket.id,
});
});
