I am using PeerJS which gets a uuid from PeerServer (hosted on my VPS).
How do I maintain the PeerJS object (which has the uuid for that player) when I use the loader page? As the uuid gets destroyed upon re-initialization on next page.
Game client loads immediately and I don’t have other way to send the PeerJs->uuid via Websocket to PeerServer so that I can make a call between 2 players using WebRTC.
Okey,
So, PeerJS library accepts hardcoded id as well.
That way, landing page can generate an id from the PeerServer and pass it on to Game-Client page using GET/POST and re-initialize PeerJS again with that id.
Now, I can grab my_peer_id inside Defold and pass it to other peers using Defold->Websocket so they can make a call to me.
Still have few extra steps that needs to go perfectly before this is done.
For anyone who wants to have Voice Chat on their HTML5 games.
1 - Install PeerServer on your Server (google it)
2 - Link and initialize PeerJS on your HTML page.
<script>
var id = ((new URL(document.location)).searchParams).get('peer_id');
const videoGrid = document.getElementById('video-grid');
var myPeer = new Peer(id, {
host: '/',
port: '9000',
path: "/myapp/"
});
myPeer.on('open', function(id) {
console.log('My peer ID is: ' + id);
});
const myVideo = document.createElement('video');
myVideo.muted = true
const peers = {}
my_stream = null;
navigator.mediaDevices.getUserMedia({
video: false,
audio: true
}).then(stream => {
addVideoStream(myVideo, stream);
my_stream = stream;
myPeer.on('call', call => {
call.answer(stream)
const video = document.createElement('video')
call.on('stream', userVideoStream => {
addVideoStream(video, userVideoStream)
})
})
})
//Defold can get your peer_id using this or
// html5.run("((new URL(document.location)).searchParams).get('peer_id')")
function getMyPeerId(){
return myPeer.id;
}
function connectToNewUser(userId){
console.log(userId);
const call = myPeer.call(userId, my_stream);
const video = document.createElement('video');
call.on('stream', userVideoStream => {
addVideoStream(video, userVideoStream);
})
call.on('close', () => {
video.remove();
})
peers[userId] = call;
}
function addVideoStream(video, stream) {
video.srcObject = stream;
video.addEventListener('loadedmetadata', () => {
video.play();
})
videoGrid.append(video);
}
3 - Defold > Get peer_id from HTTP POST/GET
if html5 then
peer_id = html5.run("((new URL(document.location)).searchParams).get('peer_id')")
end
4 - Connect to Websocket via. Defold and broadcast your_peer_id to all players in the room.
5 - Defold Game client then needs to parse the broadcast and execute:
html5.run(“connectToNewUser(’”… peer_id …"’);")
Done!!
Took me few hours to figure this out.
First time playing with WebRTC.
Also, trying had to avoid creating another Websocket server just for this.