WebRTC - PeerJs

Questions
1

Hi guys,
What’s the best way to implement PeerJs in Defold?
Trying to get Voice chat for my game.

I have a game loader page:

image
image688×625 19.3 KB

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.

2

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.

3

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.

5 Likes