WebRTC & Peer JS Calling Issues

Viewed 2989

In my function connect(id): I start a call using var call = this.peer.call(id, this.mediastream); then I use

call.on('stream', function(stream) 
    {
        // `stream` is the MediaStream of the remote peer.
        // Here you'd add it to an HTML video/canvas element.
        peerVideo.srcObject = stream;
        console.log("Call stream has started! CLinet end!!!!!" + stream);
        output.innerHTML = "Streaming audio from other client...";
      });

To get the audio from the peer. This call.on stream is never executed so that means the call is not returning anything.

On the peer side of things they can hear the caller just fine. I'm not sure what is wrong!

Here is the full code:

const video = document.getElementById("video");
const peerVideo = document.getElementById("peervideo");
const output = document.getElementById("output");
const peerText = document.getElementById("peerid");
const peerButton = document.getElementById("peersubmit");


var promise = null;
var mediastream = null;
var peer = null;
var myId = null;

async function init()
{
    //init the media devices
    initMediaDevices();

    //init peer
    initPeer();

    //Add timeout to ensure the peer.on method had time to get id from server
    setTimeout(() => {  console.log("My ID is: " + this.myId); output.innerHTML = "My ID: " + formatString(this.myId)}, 2000);
}

function initMediaDevices()
{

    //Setup stream for usermedia
    try
    {
        this.promise = navigator.mediaDevices.getUserMedia({audio: true})

        promise.then((stream) =>
        {
            setStream(stream);
            //video.srcObject = stream;
            console.log(stream);
        })

        output.innerHTML = "Audio was established!";
    }
    catch(err)
    {
        console.log(err)
        output.innerHTML = "Audio Failed!"
    }
}

function initPeer()
{
    this.peer = new Peer();
    this.peer.on('open', function(id)
    {
        setID(id)
    });

    peer.on('call', function(call) 
    {
        // Answer the call, providing our mediaStream
        call.answer(this.mediastream);
        console.log(call + "-------------------- got here peer call");
        output.innerHTML = "Connected to Peer";

        call.on('stream', function(stream) 
        {
            // `stream` is the MediaStream of the remote peer.
            // Here you'd add it to an HTML video/canvas element.
            peerVideo.srcObject = stream;
            console.log("Call stream has started! Peer end");
            output.innerHTML = "Streaming audio from other client...";
          });
      });
}

function setID(id)
{
    this.myId = id;
}

function setStream(stream)
{
    this.mediastream = stream;
    console.log("Media Stream Set! " + this.mediastream);
}

function connect(id)
{
    var call = this.peer.call(id, this.mediastream);

    call.on('stream', function(stream) 
    {
        // `stream` is the MediaStream of the remote peer.
        // Here you'd add it to an HTML video/canvas element.
        peerVideo.srcObject = stream;
        console.log("Call stream has started! CLinet end!!!!!" + stream);
        output.innerHTML = "Streaming audio from other client...";
      });

      console.log(call + "----------------------" + this.mediastream + " This is the person that connected");
}

init();

//Event listeners
peerButton.addEventListener("click", () => 
{
    let id = peerText.value;
    console.log("Button Pressed!")
    connect(id);
});

//unrelated
function formatString(string)
{
    var newString = "";
    for (var i = 0; i < string.length; i++) 
    {
        var letter = string.charAt(i);
        if(isNaN(letter))
        {
            newString += letter.fontcolor("red");
        }  
        else
        {
            newString += letter;
        }
    }
    return newString;
}

And the html

<video id="video" autoplay>Video Stream no available</video>
<video id="peervideo" autoplay>Video Stream no available</video>
<h3 id="output"></h3>

<input type="text" id="peerid">
<input type="submit" value="Submit" id="peersubmit">
3 Answers

I have same issue. When you decide to set a debugger and make breaking points around

 var call = this.peer.call(id, this.mediastream);

call.on('stream', function(s

You will receive the stream, sounds like you need to put some setTimeout to prevent this behaviour, and I know it works... but its bad practice

Add timeout to connect function it will work

your connect(id) is triggered before the new user completes navigator.getUserMedia();

Actually it's because you executed call.on before navigator.mediaDevices.getUserMedia.

so try use await initMediaDevices to make sure initPeer(); execute afterwards.

Related