PeerJS Stream Call not working

[Interstellar717]

I am working on sending a stream through PeerJS. Everything works until you call the other peer; the other peer receives the call and not the stream. It responds to .on("call", func) and not .on("stream", func). Do any of you have any idea why this is not working? (code attached in zip because it would allow me to upload the index.html)

Also, before you tell me to do anything in the terminal or install anything, my computer can't do that because of some stupid thing about how my parents set up my user account. I've researched a solution and come to the conclusion that I just need to wait until my new computer comes in, so don't bother addressing that. Using only the online PeerJS library and writing code in a file, is there a solution?

index.zip

[gherman-cs]

Hey cool to see you building stuff!

PeerJS has 3 main types, Peers, DataConnections, MediaConnections. peer.call creates mediaConnections, peer.connect creates dataConnections.

As per peerjs docs, it's not peer.on('stream its mediaconnection.on('stream'

I updated your example, added some more listeners and clarified prints outs and variables a bit, probably have some copy paste wrong messages, but pretty close. see below.

This example on peerjs docs is sorta similar to yours https://github.com/jmcker/Peer-to-Peer-Cue-System/tree/main is pretty good to help understand the event listening and such. For media stuff this is an example I have seen as well https://github.com/oxedom/parker (I am sure there are others)

FYI, PeerJS is not really actively maintained. Their server (for creating connections) gets overloaded a lot so it's a bit painful to use them as a dev because you don't know if it's your bug or the peerJS server (see issue here). I normally will spin up a local server when I am using peerJS to protect my sanity.

Also, before you tell me to do anything in the terminal or install anything, my computer can't do that because of some stupid thing about how my parents set up my user account. I've researched a solution and come to the conclusion that I just need to wait until my new computer comes in, so don't both addressing that.

It's cool that your trying things and asking for help. But this so don't both addressing that does not come off as polite to me.

Above all, be polite. Remember that no-one is getting paid to answer your question. Users are giving up their time to help you – so please be appreciative of that. If you’re asking a homework question, explain why you’re asking for help with something that traditionally you’d have to answer all by yourself. If a user suggests that your general approach is wrong and that there’s a better way of doing things, don’t take it personally: they’re trying to help you improve your code. By all means disagree robustly, but don’t start into ad hominem arguments. (This advice applies to answerers as well, of course.)

From https://stackoverflow.com/help/how-to-ask -> https://codeblog.jonskeet.uk/2010/08/29/writing-the-perfect-question/

I'd love to connect and hear about the what you're building and interested in. Chat on discord? I'm gherman_cs there

<script src="https://unpkg.com/[email protected]/dist/peerjs.min.js"></script>
<script>
    var connSendMedia;
    async function sendShare() {
        let mediaStream = null;
        try {
            mediaStream = await navigator.mediaDevices.getDisplayMedia({
                video: {
                    cursor: "always"
                },
                audio: false
            });

            connSendMedia = peer_sen.call(connSend.peer, mediaStream);

            connSendMedia.on('stream', (_)=>{console.log(`Send stream recieved`)})
            connSendMedia.on('close', function () {
                console.log('SMedia conn close');
            });
            connSendMedia.on('error', (err)=>{console.log(`SMedia connection error ${err}`)})

        } catch (ex) {
            console.error("Error occurred: " + ex);
        }
    }

    const peer_sen = new Peer('777');
    const peer_rec = new Peer('717');

    var connSend;

    peer_sen.on('open', id => {
        console.log('Sender peer ID is: ' + id);
    });

    peer_rec.on('open', id => {
        console.log('Receiver peer ID is: ' + id);
    });

    function connect() {
        const peerId = document.getElementById('peerId').value;
        connSend = peer_sen.connect(peerId);
        console.log(connSend)
        connSend.on('open', () => { // emitted when data connection is established and ready to use
            console.log('Sender connected to ' + connSend.peer);
            document.getElementById('sender-status').innerText = 'Connected to ' + connSend.peer;
            sendShare();
        });
        connSend.on('data', (data) => {
            console.log(`sender recieved data ${data}`)
        })
        connSend.on('closed', ()=>{console.log(`Sender data connection closed`)})
    }

    peer_rec.on('connection', function (connRec) {
        console.log('Reciever connected to ' + connRec.peer);
        document.getElementById('receiver-status').innerText = 'Connected to ' + connRec.peer;

        console.log(connRec)
        connSend.on('open', ()=>{console.log(`Reciever connection open`)})
        connRec.on('data', function (data) {
            console.log('Received', data);
            document.getElementById('msgs').value += data + '\n';
        });
        connSend.on('closed', ()=>{console.log(`Reciever data connection closed`)})
    });

    peer_rec.on('call', function (mcRec) {
        mcRec.answer(null); // parameter usually stream
        console.log(mcRec);
        mcRec.on('stream', (_)=>{console.log(`Rec stream recieved`)})
        mcRec.on('close', function () {
            console.log('RMedia conn close');
        });
        mcRec.on('error', (err)=>{console.log(`RMedia connection error ${err}`)})
    });

    peer_rec.on('call', (mcRec) => {
        console.log(`Reciever recieved media connection`)
    })

    // As per peerJS docs,
    // Peers don't have an on stream event, media connections have an on stream event
    peer_rec.on('stream', function (stream) {
        console.log(stream);
        document.getElementById('video').srcObject = stream;
    });
    
    // As per peerJS docs,
    // Peers don't have an on stream event, media connections have an on stream event
    peer_sen.on('stream', function (stream) {
        console.log(stream);
        //document.getElementById('video').srcObject = stream;
    });

    peer_rec.on('close', function() {
        console.log('Connection destroyed');
    });

    peer_sen.on('close', function() {
        console.log('Connection destroyed');
    });
    peer_rec.on('error', function(err){
        console.log(err)
    })
    peer_sen.on('error', function(err){
        console.log(err)
    })

    function sendMsg(msg = document.getElementById('msg').value, type = "text") {
        if (type == "text") {
            connSend.send(msg);
        } else if (type == "mediaStream") {
            connSend.send(msg);
        }
    }

</script>
<div class="content">
    <div id="col1" class="col">
        <h1>Sender</h1>
        <span id="sender-status"></span>
        <input type="text" id="peerId" placeholder="Peer ID" value="717">
        <button onclick="connect()">Connect</button>
        <br><br>
        <input type="text" id="msg" placeholder="Message">
        <button onclick="sendMsg()">Send</button>
    </div>
    <div id="col2" class="col">
        <h1>Receiver</h1>
        <span id="receiver-status"></span>
        <textarea id="msgs"></textarea>
        <video id="video"></video>
    </div>
</div>
<style>
    html,
    body {
        height: 100%;
        margin: 0;
        padding: 0;
    }

    .col {
        margin: 30px;
        padding: 30px;
        width: calc(50% - 120px);
        height: calc(100% - 120px);
        border: solid black 0.1px;
    }

    .content {
        display: flex;
        height: 100%;
    }

    span {
        display: block;
    }
</style>

[Interstellar717]

does not come off as polite to me.

My bad, I was attempting to save your time because all solutions I've found online include things that I am not in a position to do, and I figured that would be one of the first things someone would suggest. Apologies and thank you for responding anyway.