Tried setting up a peer connection with a sender and a receiver (remote.html and index.html) over a index.js server... I am not looking for video streaming, or something like that. I am just trying to secure my connection
Index.js
require('dotenv').config();
const isDevelopment = (process.env.NODE_ENV === 'development');
const express = require('express');
const app = express();
const fs = require('fs');
let options = {};
if (isDevelopment) {
options = {
key: fs.readFileSync('./localhost.key'),
cert: fs.readFileSync('./localhost.crt')
};
}
const server = require(isDevelopment ? 'https' : 'http').Server(options, app);
const port = process.env.PORT || 443;
app.use(express.static('public'));
server.listen(port, () => {
console.log(`App listening on port ${port}`);
});
const { Server } = require("socket.io");
const io = new Server(server);
const clients = {};
io.on('connection', socket => {
clients[socket.id] = { id: socket.id };
socket.on('disconnect', () => {
io.emit('client-disconnect', clients[socket.id]);
delete clients[socket.id];
io.emit('clients', clients);
});
socket.on('signal', (peerId, signal) => {
console.log(`Received signal from ${socket.id} to ${peerId}`);
io.to(peerId).emit('signal', peerId, signal, socket.id);
});
io.emit('clients', clients);
io.emit('client-connection', clients[socket.id]);
console.log(`Client connected: ${socket.id}`);
//log disconnect
socket.on('disconnect', () => {
console.log(`Client disconnected: ${socket.id}`);
});
});
Index.html
{
let url;
let socket;
let peer;
const servers = {
iceServers: [{
urls: 'stun:stun.l.google.com:19302'
}]
};
const peerConnection = new RTCPeerConnection(servers);
console.log(peerConnection);
peerConnection.onicecandidate = (event) => {
if (event.candidate) {
console.log(event.candidate);
} else {
console.log('All ICE candidates have been sent');
}
};
const init = async () => {
initSocket();
createQR();
};
const initSocket = () => {
//verbinding met server
socket = io.connect('/');
console.log(socket)
url = `${new URL(`/remote.html?id=${socket.id}`, window.location)}`;
socket.on('connect', () => {
console.log(socket.id);
//zet socket id in url
const urlParams = new URLSearchParams(window.location.search);
urlParams.set('socketId', socket.id);
history.replaceState({}, '', `${window.location.pathname}?${urlParams.toString()}`);
//verander de url van de qr code met de socket id
url = `${new URL(`/remote.html?id=${socket.id}`, window.location)}`;
remoteUrl.href = url;
});
socket.on('client-disconnect', (client) => {
if (peer && peer.data.id === client.id) {
peer.destroy();//peer kan geen berichten meer ontvangen
}
});
socket.on('signal', async (myId, signal, peerId) => {
console.log(`Received signal from ${peerId}`);
console.log('loller');
if (peer) {
//bestaande peer verbinding? ontvangen signaal naar peer verstuurd
peer.signal(signal);
console.log('signal');
} else if (signal.type === 'offer') {
//geen bestaande peer? nieuwe peer gecreerd met behulp van createpeer
createPeer(false, peerId);
peer.signal(signal);
console.log('offer');
}
});
};
const createPeer = (initiator, peerId) => {
peer = new SimplePeer({ initiator });
peer.on('connect', () => {
console.log('hello peer');
peer.send('hey peer');
});
peer.data = {
id: peerId
};
peer.on('signal', data => {
socket.emit('signal', peerId, data);
});
peer.on('data', data => {
console.log('Received message: ' + data);
});
peer.on('close', () => {
console.log('closed');
peer.destroy();
peer = null;
});
peer.on('error', () => {
console.log('error');
});
};
const createQR = () => {
url = `${new URL(`/remote.html?id=${socket.id}`, window.location)}`;
remoteUrl.href = url;
var qr = new QRious({
element: document.getElementById('qr'),
value: url,
size: 200,
background: 'transparent',
foreground: '#E50809',
level: 'L',
});
};
init();
}
Remote.html
{
let socket;
let myStream;
let peer;
const servers = {
iceServers: [{
urls: 'stun:stun.l.google.com:19302'
}]
};
const initSocket = () => {
socket = io.connect('/');
console.log(socket)
socket.on('connect', () => {
console.log(socket.id);
});
socket.on('signal', async (myId, signal, peerId) => {
console.log(`Received signal from ${peerId}`);
if (signal.type === 'offer') {
answerPeerOffer(myId, signal, peerId);
}
peer.signal(signal);
});
};
const getUrlParameter = name => {
name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
const regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
const results = regex.exec(location.search);
return results === null ? false : decodeURIComponent(results[1].replace(/\+/g, ' '));
};
const targetSocketId = getUrlParameter('id');
console.log(targetSocketId);
const createPeer = (initiator, peerId) => {
peer = new SimplePeer({ initiator });
peer.on('connect', () => {
console.log('hello peer');
peer.send('hey peer');
});
peer.data = {
id: peerId
};
peer.on('signal', data => {
socket.emit('signal', peerId, data);
});
peer.on('close', () => {
console.log('closed');
peer.destroy();
peer = null;
});
peer.on('error', () => {
console.log('error');
});
};
const init = async () => {
initSocket();
const targetSocketId = getUrlParameter('targetSocketId');
createPeer(true, targetSocketId);
console.log(targetSocketId);
};
const answerPeerOffer = async (myId, offer, peerId) => {
peer = new SimplePeer();
peer.on('signal', data => {
socket.emit('signal', peerId, data);
});
};
init();
}
I tried many many things, looked at demo's and all that sort of stuff. I am just not able to secure a connection between my sender and receiver. Right now, the console in my terminal says:
Received signal from V92yabMBK_IDDJfvAADz to false...