In Firefox, initiator of the call does not receive any signal of new Peers who joined in. Chrome works fine.

**What version of this package are you using?**
9.10.0
**What operating system, Node.js, and npm version?**
MacOS Big Sur v11.1, node: 14.15.4, nom: 6.14.4
**What happened?**
So in chrome I can connect both user, where video and audio connects to each other peers.

However in Mozilla Firefox, the initiator of the call does not receive back any signal/stream from the new peer who join in the room. The new peer who joined in, receive the stream of the initiator.

```
import React, {useState, useRef, useEffect} from 'react';
import io from 'socket.io-client'
import Peer from 'simple-peer'
import styled from 'styled-components'
import { makeStyles } from '@material-ui/core/styles'
import IconButton from '@material-ui/core/IconButton';
import VideocamOutlinedIcon from '@material-ui/icons/VideocamOutlined';
import VideocamOffOutlinedIcon from '@material-ui/icons/VideocamOffOutlined';
import CallEndIcon from '@material-ui/icons/CallEnd';
import MicNoneOutlinedIcon from '@material-ui/icons/MicNoneOutlined';
import MicOffOutlinedIcon from '@material-ui/icons/MicOffOutlined';
import GridList from '@material-ui/core/GridList';
import GridListTile from '@material-ui/core/GridListTile';
import GridListTileBar from '@material-ui/core/GridListTileBar';

const Container = styled.div`
padding: 0;
display: flex;
height: 100%;
width: 100%;
margin: auto;
flex-wrap: wrap;
`;

const StyledVideoMain = styled.video`
height: 100%;
width: 100%;
`;

const StyledVideo = styled.video`
position: absolute;
float: left;
z-index: 1200;
width: 500px;
right: 0;
top: 93px;
`;
const useStyles = makeStyles(theme => ({
root: {
display: 'flex',
flexWrap: 'wrap',
justifyContent: 'space-around',
overflow: 'hidden',
backgroundColor: theme.palette.background.paper,
},
gridList: {
width: 500,
height: 450,
},
commands: {
padding: '20px',
textAlign: 'center'
},
iconButtons: {
backgroundColor: theme.palette.background.light,
color: theme.palette.secondary.main,
marginRight: theme.spacing(6)
},
iconButtonsActive: {
backgroundColor: theme.palette.secondary.main,
color: 'white',
marginRight: theme.spacing(6),
'&:hover': {
color: theme.palette.secondary.main
}
}
}))

const Video = (props) => {
const ref = useRef();

useEffect(() => {
console.log('props.peer', props.peer, props.peer.peer)
props.peer.peer.on('connect', () => {
console.log('connected');
});

props.peer.peer.on('data', data => {
console.log('got a message from peer2: ' + data)
});

props.peer.peer.on('stream', stream => {
console.log('AM I getting this stream from new user who connected:peer video tag receiving stream !!!! ->', stream);
// ref.current.srcObject = stream;
if ('srcObject' in ref.current) {
ref.current.srcObject = stream;
} else {
ref.current.src = window.URL.createObjectURL(stream);
}
ref.current.play();
});

props.peer.peer.on('track', track => {
console.log('peer video receiving track only??', track);
});

props.peer.peer.on('error', error => {
console.error('error from remote user: ', error);
});

props.peer.peer.on('signal', data => {
console.log('SIGNAL', JSON.stringify(data));
});

}, []);

return (

);
}

const Room2 = (props) => {
const [peers, setPeers] = useState([]);
const [userID, setUserID] = useState('');
const [stream, setStream] = useState(null);
const [camera, setCamera] = useState(true);
const [audio, setAudio] = useState(true);
const [roomFull, setRoomFull] = useState(false);
const socketRef = useRef();
const userVideo = useRef();
const peersRef = useRef([]);
const roomID = props.match.params.roomId;
const classes = useStyles();

useEffect(() => {
socketRef.current = io.connect("/");
navigator.mediaDevices.getUserMedia({ video: camera, audio: audio }).then(stream => {
setStream(stream);
if (userVideo.current) {
userVideo.current.srcObject = stream;
}
// console.log('RoomId', roomID);
socketRef.current.emit("joinRoom", roomID);

socketRef.current.on("allUsers", users => {
const peers = [];
setUserID(socketRef.current.id); // setting user Id in UI
users.forEach(userID => {
const peer = createPeer(userID, socketRef.current.id, stream);
peersRef.current.push({
peerID: userID,
peer,
})
peers.push({
peerID: userID,
peer
});
});
setPeers(peers);
});

// USER JOINED
socketRef.current.on("userJoined", payload => {
const peer = addPeer(payload.signal, payload.callerID, stream);
const peerObj = {
peerID: payload.callerID,
peer,
};
peersRef.current.push(peerObj);

if (!(peers.includes(peerObj))) {
setPeers(users => {
if (users.includes(peerObj)) {
return [...users];
} else {
return [...users, peerObj];
}
});
}
});

socketRef.current.on("callAccepted", payload => {
const item = peersRef.current.find(p => p.peerID === payload.id);
item.peer.signal(payload.signal);
});

socketRef.current.on("roomFull", () => {
setRoomFull(true);
});

socketRef.current.on("userDisconnected", (userID) => {
const itemPeer = peersRef.current.find(p => p.peerID === userID);
if (itemPeer && itemPeer.peer) {
itemPeer.peer.destroy();
}

// remove peer from peersRef
const peersLeft = peersRef.current.filter(p => p.peerID !== userID);

//update peersRef
peersRef.current = peersLeft;

//update State peers
setPeers(peersLeft);
});

}).catch((error) => {
console.log('Catch Error loading:', error);
})

return function disconnectMe(){
socketRef.current.disconnect();
}
}, []);

// User just join into room so we tell the peer we initiate the connection.
function createPeer(userToSignal, callerID, stream) {
const peer = new Peer({
initiator: true,
trickle: false,
stream,
// config: { iceServers: [{ urls: 'stun:stun.l.google.com:19302' }, { urls: 'stun:global.stun.twilio.com:3478?transport=udp' }] },
});

peer.on("signal", signal => {
socketRef.current.emit("connecting", { userToSignal, callerID, signal })
})

peer.on('close', () => {
console.log('this peer has closed');
});

peer.on('stream', stream => {
console.log('getting stream back', stream);
});

return peer;
}

function addPeer(incomingSignal, callerID, stream) {
const peer = new Peer({
initiator: false,
trickle: false,
stream,
// config: { iceServers: [{ urls: 'stun:stun.l.google.com:19302' }, { urls: 'stun:global.stun.twilio.com:3478?transport=udp' }] },
});

peer.on("signal", data => {
socketRef.current.emit("returningSignal", { signal: data, to: callerID })
})

peer.on('close', () => {
console.log('this peer has closed');
});

peer.signal(incomingSignal);

return peer;
}

function handleCameraClick(event) {
if (!camera) {
stream = null;
}
setCamera(!camera);
}

function handleAudioClick(event) {
stream.getAudio
setAudio(!audio);
}

function handleCloseMeeting(event) {
//add to browser history, that will automatically called disconnect function in useEffect component
props.history.push('/calendar');
}

function handleCanPlay() {
userVideo.current.play();
}

return (

export default Room2;
```

On the server side, I have:

```
io.on('connection', socket => {

socket.on('joinRoom', (roomID) => {

socket.join(roomID);
if (users[roomID]) {
const length = users[roomID].length;
// 5 users max in a room
if (length === 5) {
socket.emit("roomFull");
return;
}
users[roomID].push(socket.id);
} else {
users[roomID] = [socket.id];
}
socketToRoom[socket.id] = roomID;
const usersInThisRoom = users[roomID].filter(id => id !== socket.id);
socket.emit("allUsers", usersInThisRoom);
});

socket.on("connecting", payload => {
io.to(payload.userToSignal).emit('userJoined', { signal: payload.signal, callerID: payload.callerID });
});

socket.on("returningSignal", payload => {
io.to(payload.to).emit('callAccepted', { signal: payload.signal, id: socket.id });
});

socket.on('disconnect', (reason) => {
const roomID = socketToRoom[socket.id];
let room = users[roomID];
if (room) {
room = room.filter(id => id !== socket.id);
users[roomID] = room;
socket.to(roomID).emit('userDisconnected', socket.id);
}
});

});
```

I am not sure if that a simple-peer bug as I don't get any error, or it's the way I have set up the connection which is wrong. It is working fine in Chrome, but not in Mozilla Firefox.

Thank you