webRTC connection from browser to phone not working - node.js

Question

I'm building a project using react native and webRTC with nodejs + ejs.
establish connections:
1- browser to browser works well.
2- device to browser works well.
3- browser to device does not work and here is the problem and all codes are the same for socket io and peer connections.
// REACT NATIVE PART
const [localStream, setLocalStream] = useState<MediaStream|null>(null);
const [remoteStream, setRemoteStream] = useState<MediaStream|null>(null);
const socket = io(utils.RAW_BACKEND_URL)
const peerConnection = new RTCPeerConnection({
iceServers: [
{
urls: ['stun:stun.l.google.com:19302']
}
]
})
useEffect(()=> {
peerConnection.onaddstream = (e) => {
setRemoteStream(e.stream);
}
socket.emit('join-room')
socket.on('calling-user', async (args)=> {
setOffer(JSON.stringify(args.offer))
await peerConnection.setRemoteDescription(new RTCSessionDescription(args.offer));
utils.showAlertMessage("Calling", "You have a call", [
{
text: "Call?",
onPress: async ()=> await answerCall()
},
{
text: "No",
}
])
})
socket.on('ic-candidate', async(args)=> {
await peerConnection.addIceCandidate(new RTCIceCandidate(args.candidate))
})
socket.on('answer-made', async (args)=> {
console.log("HERE");
await peerConnection.setRemoteDescription(new RTCSessionDescription(args.answer));
setShow(true)
})
}, [])
const getUserMedia = async (callAUser?:boolean) => {
let isFront = true, videoSourceId: any = null;
try {
const availableDevices = await mediaDevices.enumerateDevices();
let videoSourceId;
for (let i = 0; i < availableDevices.length; i++) {
const sourceInfo = availableDevices[i];
if (
sourceInfo.kind == 'videoinput' &&
sourceInfo.facing == (isFront ? 'front' : 'environment')
) {
videoSourceId = sourceInfo.deviceId;
}
}
const mediaStream = await mediaDevices.getUserMedia({
// audio: true,
video: {
mandatory: {
minWidth: 500,
minHeight: 300,
minFrameRate: 30,
},
facingMode: 'user',
optional: [{sourceId: videoSourceId}]
}
})
setLocalStream(mediaStream);
peerConnection.addStream(mediaStream);
if(callAUser){
await callUser();
}
}catch(err: any) {
utils.showAlertMessage("ERRORsss", err.message);
}
}
const callUser = async () => {
peerConnection.onicecandidate = e => {
if(e.candidate) {
socket.emit('candidate', {
candidate: e.candidate
})
}
}
const offer = await peerConnection.createOffer();
await peerConnection.setLocalDescription(new RTCSessionDescription(offer));
socket.emit('call-user', {
offer: offer
})
}
const answerCall = async () => {
await getUserMedia();
const answer = await peerConnection.createAnswer();
await peerConnection.setLocalDescription(new RTCSessionDescription(answer));
socket.emit('make-answer', {
answer
})
}
return (
<View style={styles.stream}>
<Button title="Call" onPress={()=>getUserMedia(true)} />
<Button title="Answer" onPress={()=>answerCall()} />
{localStream != null &&
<RTCView
objectFit={"cover"}
streamURL={localStream.toURL()}
style={{height: '50%', borderWidth: 1, borderColor: 'red'}}
/>
}
{remoteStream != null && show ?
<RTCView
objectFit={"cover"}
streamURL={remoteStream.toURL()}
style={{height: '50%', borderWidth: 1, borderColor: 'blue'}}
/>
: <Text>{offer}</Text>
}
</View>
);
//js file for serving ejs page
const client = io("https://b277-2001-16a2-cb25-a800-f1da-b62e-7f94-42ee.ngrok.io");
const peerConnection = new RTCPeerConnection({
iceServers: [
{
urls: ['stun:stun.l.google.com:19302']
}
]
})
client.on('answer-made', async (args)=> {
await peerConnection.setRemoteDescription(new RTCSessionDescription(args.answer));
sdpAnswer.innerHTML = JSON.stringify(args.answer);
})
client.on('answer-made', async (args)=> {
await peerConnection.setRemoteDescription(new RTCSessionDescription(args.answer));
sdpAnswer.innerHTML = JSON.stringify(args.answer);
})
onst callUser = async () => {
await getMedia();
const offer = await peerConnection.createOffer();
await peerConnection.setLocalDescription(new RTCSessionDescription(offer));
peerConnection.onicecandidate = (e) => {
if(e.candidate) {
client.emit('candidate', {
candidate: e.candidate
})
}
}
client.emit('call-user', {
offer
})
}
// socket io part
client.join("q2");
client.on('join-room', (args)=> {
client.broadcast.to("q2").emit("user-joined", {
id: client.id
})
})
client.on("call-user", (args) => {
client.broadcast.to("q2").emit("calling-user", args);
});
client.on("make-answer", (args) => {
client.broadcast.to("q2").emit("answer-made", args);
});
client.on("candidate", (args) => {
client.broadcast.to("q2").emit("ic-candidate", args);
});
I hope you can help me what mistake I made and did not figure it.
Thanks in advance