How to connect more than 2 people in peer.js?

N

ninja op op2021-03-17 18:49:48

JavaScript

ninja op op, 2021-03-17 18:49:48

I use peer.js for audio calls on the site, and I can have a maximum of 2 people there, if the third one connects, then the second one is thrown out. How can I make it so that there are at least 4 people in the call?

my code is

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>

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

M

Maxim Siomin, 2021-03-17
@MaxSiominDev

https://freelance.habr.com/