React Native: Cannot get PeerJs server to communicate back to my React Native Client, sending back the peer ID - react-native

Question

The example i found was here for the client:
https://github.com/metehankurucu/react-native-video-calling-app
So im trying to build the Server.js from this.
This is my Peer Client:
import React, {useState} from 'react';
import {Alert} from 'react-native';
import {
mediaDevices,
MediaStream,
MediaStreamConstraints,
} from 'react-native-webrtc';
import socketio from 'socket.io-client';
import {MainContext as MainContextType, User} from '../interfaces';
import {
SERVER_URL,
PEER_SERVER_HOST,
PEER_SERVER_PORT,
PEER_SERVER_PATH,
} from '../server';
// #ts-ignore
import Peer from 'react-native-peerjs';
import {navigate} from '../helpers/RootNavigation';
const initialValues: MainContextType = {
username: '',
peerId: '',
users: [],
localStream: null,
remoteStream: null,
remoteUser: null,
initialize: () => {},
setUsername: () => {},
call: () => {},
switchCamera: () => {},
toggleMute: () => {},
isMuted: false,
closeCall: () => {},
reset: () => {},
activeCall: null,
};
export const MainContext = React.createContext(initialValues);
interface Props {}
const MainContextProvider: React.FC<Props> = ({children}) => {
const [username, setUsername] = useState(initialValues.username);
const [peerId, setPeerId] = useState(initialValues.peerId);
const [users, setUsers] = useState<User[]>(initialValues.users);
const [localStream, setLocalStream] = useState<MediaStream | null>(
initialValues.localStream,
);
const [remoteStream, setRemoteStream] = useState<MediaStream | null>(
initialValues.remoteStream,
);
const [remoteUser, setRemoteUser] = useState<User | null>(null);
const [socket, setSocket] = useState<SocketIOClient.Socket | null>(null);
const [peerServer, setPeerServer] = useState<any>(null);
const [isMuted, setIsMuted] = useState(initialValues.isMuted);
const [activeCall, setActiveCall] = useState<any>(null);
const initialize = async () => {
const isFrontCamera = true;
const devices = await mediaDevices.enumerateDevices();
const facing = isFrontCamera ? 'front' : 'environment';
const videoSourceId = devices.find(
(device: any) => device.kind === 'videoinput' && device.facing === facing,
);
const facingMode = isFrontCamera ? 'user' : 'environment';
const constraints: MediaStreamConstraints = {
audio: true,
video: {
mandatory: {
minWidth: 1280,
minHeight: 720,
minFrameRate: 30,
},
facingMode,
optional: videoSourceId ? [{sourceId: videoSourceId}] : [],
},
};
const newStream = await mediaDevices.getUserMedia(constraints);
setLocalStream(newStream as MediaStream);
const io = socketio.connect('http://localhost', {
reconnection: true,
autoConnect: true,
});
io.on('connect', () => {
console.log('connect');
setSocket(io);
console.log('setSocket');
io.emit('register', username);
console.log('register');
});
io.on('users-change', (users: User[]) => {
console.log('users-change');
setUsers(users);
console.log('setUsers');
});
io.on('accepted-call', (user: User) => {
console.log('accepted-call');
setRemoteUser(user);
console.log('setRemoteUser');
});
io.on('rejected-call', (user: User) => {
console.log('rejected-call');
setRemoteUser(null);
console.log('setRemoteUser');
setActiveCall(null);
console.log('setActiveCall');
Alert.alert('Your call request rejected by ' + user?.username);
navigate('Users');
console.log('navigate');
});
io.on('not-available', (username: string) => {
console.log('not-available');
setRemoteUser(null);
console.log('setRemoteUser');
setActiveCall(null);
console.log('setActiveCall');
Alert.alert(username + ' is not available right now');
navigate('Users');
console.log('Users');
});
const peerServer = new Peer({
host: 'localhost',
path: '/peerjs',
secure: false,
port: 9000,
config: {
iceServers: [
{
urls: [
'stun:stun1.l.google.com:19302',
'stun:stun2.l.google.com:19302',
],
},
],
},
});
console.log(peerServer);
peerServer.on('error', (err: Error) =>
console.log('Peer server error', err),
);
peerServer.on('open', (peerId: string) => {
console.log('open');
setPeerServer(peerServer);
console.log('setPeerServer');
setPeerId(peerId);
console.log('setPeerId');
io.emit('set-peer-id', peerId);
console.log('set-peer-id');
});
io.on('call', (user: User) => {
console.log(user);
peerServer.on('call', (call: any) => {
console.log('call');
setRemoteUser(user);
console.log('setRemoteUser');
Alert.alert(
'New Call',
'You have a new call from ' + user?.username,
[
{
text: 'Reject',
onPress: () => {
io.emit('reject-call', user?.username);
setRemoteUser(null);
setActiveCall(null);
},
style: 'cancel',
},
{
text: 'Accept',
onPress: () => {
io.emit('accept-call', user?.username);
call.answer(newStream);
setActiveCall(call);
navigate('Call');
},
},
],
{cancelable: false},
);
call.on('stream', (stream: MediaStream) => {
console.log('stream');
setRemoteStream(stream);
console.log('setRemoteStream');
});
call.on('close', () => {
console.log('close');
closeCall();
console.log('closeCall');
});
call.on('error', () => {});
});
});
};
const call = (user: User) => {
if (!peerServer || !socket) {
Alert.alert('Peer server or socket connection not found');
return;
}
if (!user.peerId) {
Alert.alert('User not connected to peer server');
return;
}
socket.emit('call', user.username);
console.log('setRemoteUser');
setRemoteUser(user);
try {
console.log('1');
const call = peerServer.call(user.peerId, localStream);
console.log('peerServer.call(user.peerId, localStream)');
call.on(
'stream',
(stream: MediaStream) => {
setActiveCall(call);
setRemoteStream(stream);
},
(err: Error) => {
console.error('Failed to get call stream', err);
},
);
} catch (error) {
console.log('Calling error', error);
}
};
const switchCamera = () => {
if (localStream) {
// #ts-ignore
localStream.getVideoTracks().forEach((track) => track._switchCamera());
}
};
const toggleMute = () => {
if (localStream)
localStream.getAudioTracks().forEach((track) => {
track.enabled = !track.enabled;
setIsMuted(!track.enabled);
});
};
const closeCall = () => {
activeCall?.close();
setActiveCall(null);
setRemoteUser(null);
navigate('Users');
Alert.alert('Call is ended');
};
const reset = async () => {
peerServer?.destroy();
socket?.disconnect();
setActiveCall(null);
setRemoteUser(null);
setLocalStream(null);
setRemoteStream(null);
setUsername('');
setPeerId('');
};
return (
<MainContext.Provider
value={{
username,
setUsername,
peerId,
setPeerId,
users,
setUsers,
localStream,
setLocalStream,
remoteStream,
setRemoteStream,
initialize,
call,
switchCamera,
toggleMute,
isMuted,
closeCall,
reset,
remoteUser,
activeCall,
}}>
{children}
</MainContext.Provider>
);
};
export default MainContextProvider;
Forgive me as i have put alot of consol.logs in there, so i hope i havent confused you.
And this is my Peerjs Server:
const express = require("express");
const app = express();
const port = 9000;
const http = require("http");
const server = http.createServer(app);
const io = require("socket.io")(server);
app.use(express.static(__dirname + "/public"));
io.sockets.on("error", e => console.log(e));
server.listen(port, () => console.log(`Server is running on port ${port}`));
let broadcaster
io.sockets.on("connection", socket => {
socket.on("broadcaster", () => {
broadcaster = socket.id;
socket.broadcast.emit("broadcaster");
});
socket.on("watcher", () => {
socket.to(broadcaster).emit("watcher", socket.id);
});
socket.on("disconnect", () => {
socket.to(broadcaster).emit("disconnectPeer", socket.id);
});
});
this is the JSON i get from the client:
{
"acks": {},
"connected": false,
"disconnected": true,
"flags": {},
"ids": 0,
"io": {
"_autoConnect": true,
"_callbacks": {
"$close": [Array],
"$error": [Array],
"$open": [Array],
"$packet": [Array]
},
"_randomizationFactor": 0.5,
"_readyState": "opening",
"_reconnection": true,
"_reconnectionAttempts": Infinity,
"_reconnectionDelay": 1000,
"_reconnectionDelayMax": 5000,
"_timeout": 20000,
"backoff": {
"attempts": 0,
"factor": 2,
"jitter": 0.5,
"max": 5000,
"ms": 1000
},
"decoder": {},
"encoder": {},
"engine": {
"_callbacks": [Object],
"hostname": "localhost",
"id": null,
"opts": [Object],
"pingInterval": null,
"pingTimeout": null,
"pingTimeoutTimer": null,
"port": "80",
"prevBufferLen": 0,
"readyState": "opening",
"secure": false,
"transport": [XHR],
"transports": [Array],
"upgrades": null,
"writeBuffer": [Array]
},
"nsps": {
"/": [Circular]
},
"opts": {
"autoConnect": true,
"hostname": "localhost",
"path": "/socket.io",
"port": "80",
"reconnection": true,
"secure": false
},
"skipReconnect": false,
"subs": [
[Function subDestroy],
[Function subDestroy],
[Function subDestroy]
],
"uri": "http://localhost"
},
"nsp": "/",
"receiveBuffer": [],
"sendBuffer": [],
"subs": [
[Function subDestroy],
[Function subDestroy],
[Function subDestroy],
[Function subDestroy]
]
}
[Mon Mar 29 2021 19: 22: 16.595] LOG {
"_api": {
"_options": {
"config": [Object],
"debug": 0,
"host": "localhost",
"key": "peerjs",
"path": "/peerjs/",
"port": 9000,
"secure": false,
"token": "f0ty4c4n2si"
}
},
"_connections": Map {},
"_destroyed": false,
"_disconnected": false,
"_events": {},
"_eventsCount": 0,
"_id": null,
"_lastServerId": null,
"_lostMessages": Map {},
"_open": false,
"_options": {
"config": {
"iceServers": [Array]
},
"debug": 0,
"host": "localhost",
"key": "peerjs",
"path": "/peerjs/",
"port": 9000,
"secure": false,
"token": "f0ty4c4n2si"
},
"_socket": {
"_baseUrl": "ws://localhost:9000/peerjs/peerjs?key=peerjs",
"_disconnected": true,
"_events": {
"close": [r],
"disconnected": [r],
"error": [r],
"message": [r]
},
"_eventsCount": 4,
"_messagesQueue": [],
"pingInterval": 5000
}
}
[Mon Mar 29 2021 19: 22: 16.752] LOG Peer server error[Error: Could not get an ID from the server.]