Как подключить больше 2-х человек в peer.js?

Question

ниндзя оп оп @kur4chyt

Качественный говнокод от производителя

Как подключить больше 2-х человек в peer.js?

я юзаю peer.js для аудио-звонков на сайте, и у меня максимум может быть там 2 человека, если подключается третий то второго выкидывает. как можно сделать чтобы было хотя бы до 4 человек в звонке?

мой код:

index.html:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Peer.js</title>
</head>

<body>
    <h1>Id: <span id="peer_id"></span></h1>

    <audio id="audio" autoplay></audio>

    <script src="js/jquery.min.js"></script>
    <script src="js/peerjs.min.js"></script>
    <script>
        navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
        var peer = new Peer();
        peer.on('open', function (id) {
            $("#peer_id").text(id);
        });
        peer.on('call', (call) => {
            navigator.mediaDevices.getUserMedia({video: false, audio: true}).then((stream) => {
                // console.log(stream);
                call.answer(stream); // Answer the call with an A/V stream.
                call.on('stream', (remoteStream) => {
                console.log(remoteStream);
                document.querySelector("#audio").srcObject = remoteStream;
                });
            }).catch((err) => {
                console.error('Failed to get local stream', err);
            });
        });
        peer.on('connection', function (conn) {
            conn.on('stream', function (data) {
                console.log(data);
            })
            conn.on('data', function (data) {
                // Will print 'hi!'
                console.log(data);
            });
        });
        
    </script>
</body>

</html>

connect.html:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Peer.js</title>
</head>

<body>
    <h1>Id: <span id="peer_id_text"></span></h1>
    <label for="peer_id">Input peer id</label>
    <input type="text" id="peer_id">
    <button id="connect">Connect</button>
    <audio id="audio" autoplay></audio>
    <script src="js/jquery.min.js"></script>
    <script src="js/peerjs.min.js"></script>
    <script>
        navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
        var peer = new Peer();
        $("#connect").on('click', (e) => {
            
            const conn = peer.connect($("#peer_id").val());
            navigator.mediaDevices.getUserMedia({video: false, audio: true}).then((stream) => {
            console.log(stream);
            const call = peer.call($("#peer_id").val(), stream);
            call.on('stream', (remoteStream) => {
                console.log(remoteStream);
                document.querySelector("#audio").srcObject = remoteStream;
            });
            }).catch((err) => {
            console.error('Failed to get local stream', err);
            });
            $("#peer_id_text").text(conn.peer);
        })
    </script>
</body>

</html>