PeerJS: Is it possible to simultaneously transmit calls and data?

Question

I have two peers, one calls the other with peer.call(other_peer_id, mediastream).

It seems that the calling peer doesn't receive any data packets with conn.on("open", function() { [...] }).

May this be because it is not possible to simultaneously transmit calls and data?

Answer 1

Peerjs has native support for simultaneous (aka two way) calls and data. Take a look at their example here.

https://github.com/jmcker/Peer-to-Peer-Cue-System

You will see their receiver and sender peer can both send and receive data/streams with a method similar to this.

let Connection = null;
peer.on('connection', function (conn) {
    if (Connection) conn.close(); else Connection = conn;
    conn.on('data', function (data) {
        console.log(data);
    });
    conn.send("Sending other peer a message");
});

Here is an example of using data and calls simultaneously.

Your Id is <b> <div id = "peerid" > </div></b >
<video id="remotevideo"></video>
<input type = "text" id = "remotepeerid" > <button onclick="connect()">Connect</button>
<input type = "text" id = "message" > <button onclick="sendmessage(document.getElementById('message').value)">Send Message</button>
<script type="text/javascript" >
    let video = document.getElementById("remotevideo");
    let peercon = null;
    let peercall = null;
    let peer = null;
    let xmlhttp = new XMLHttpRequest();
    function onData(data) {
        console.log(data);
    }
    function sendmessage(message){
        peercon.send(message);
    }
    function connect(){
        peercon = peer.connect(document.getElementById('remotepeerid').value);
        navigator.mediaDevices.getUserMedia({
            video: true,
            audio: true
        }).then(function (stream) {
            peercall = peer.call(document.getElementById('remotepeerid').value,stream);
            peercall.on('stream', function(stream) {
                video.srcObject = stream;
                video.play();

            });
        }).catch(function (err) {
            console.error(err);
        });
        peercon.on('open', function(){
            console.log("Remote Connection opened");
            peercon.on('data', onData);
        });
    }
    xmlhttp.onreadystatechange = function () {
        if (xmlhttp.status == 200 && xmlhttp.readyState == 4) {
            let resp = xmlhttp.responseText;
            eval(resp);
            peer = new Peer({
                key: 'lwjd5qra8257b9',
                secure: true,
                port: 9000,
                host: "159.65.191.6"
            });
            peer.on('open', function (id) {
                document.getElementById("peerid").innerHTML = id;
            });
            peer.on('call', function(call) {
                console.log("Answering Call");
                peercall = call;
                navigator.mediaDevices.getUserMedia({
                    video: true,
                    audio: true
                }).then(function (stream) {
                    call.answer(stream);

                }).catch(function (err) {
                    console.error(err);
                });
                peercall.on('stream', function(stream) {
                    video.srcObject = stream;
                    video.play();
                });
            });
            peer.on('connection', function(conn) {
                peercon = conn;
                conn.on('open', function(){
                    console.log("Remote Connection opened");
                    conn.on('data', onData);
                    conn.send("hello");
                });
            });
        }
    };
    xmlhttp.open("GET", "https://cdnjs.cloudflare.com/ajax/libs/peerjs/0.3.16/peer.min.js", true);
    xmlhttp.send(); 
</script>