Web RTC simple peer connection with socket.io could not be established

18 Views Asked by At

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...

0

There are 0 best solutions below