Peerjs: call on stream event receives same remote stream twice

Created on 18 Dec 2019  ·  16Comments  ·  Source: peers/peerjs

Using a very simple example from peerjs.com between two peers.

var getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
peer.on('call', function(call) {
  getUserMedia({video: true, audio: true}, function(stream) {
    call.answer(stream); // Answer the call with an A/V stream.
    call.on('stream', function(remoteStream) {
      // Show stream in some video/canvas element.
     console.log('Received stream', remoteStream);
    });
  }, function(err) {
    console.log('Failed to get local stream' ,err);
  });
});

call.on('stream') always receives two same remote streams.

Here is a screen shot.

issue

Is it a known issue?

Thanks

bug investigating

Most helpful comment

i create an array.

const callList = [];

When i get a call or i call other users, first i check that list in onStream event and if that call not in my list, doing my stuf (add to page a video element or anything else).
Example here (i am calling other user and other user answer with a stream):

        // make a call (userId is other users peer id)
    const call = peer.call(userId, myVideoElement.srcObject, { metadata: { userId: peer.id } });
    // create a video element
    const video = createVideoElement(); // this is my custom function for create a html video element, it returns a video element.
    // call on stream
    call.on('stream', remoteStream => {
            // check call list if call not in the list then add to list and page
            if(!callList[call.peer]){
                // add stream to video element
                video.srcObject = remoteStream;
                // show on page
                showVideoElemenetOnPage(video); // this is my custom function for append video element to another element on the page
                // add call objec to global object
                callList[call.peer] = call;
            }
    });

This can solve twice run problem.

All 16 comments

any one can coment on this please?

I came across this problem, it looks like this happens when we transfer a stream to another client (audio: true, video: true), try to check this, transfer the stream from both video and audio, and then only with audio, I solved this problem possibly incorrectly , but it works, I check if I already received this stream (when I receive it, I save the stream, for example, in an array and put down a unique key for it, for example, the user id that can be obtained by passing {metadata: {user_id: 123}})

Yeap, stream event calls on every track. So, if you stream contains two tracks, stream event should calls twice.

Please, can we handle this behavior? I can stream video but I don't have sound

Still an issue

Sipjs handles it this way https://sipjs.com/guides/attach-media/ by having onTrackAdded

Please, can we handle this behavior? I can stream video but I don't have sound

I figured I was wrong. Both streams received contain audio and video. I forgot to remove the mute prop from my HTML tag...

I have both video and audio its just the behavior that bothers me.

El vie., 17 abr. 2020 a las 10:27, Baptiste Arnaud (<
[email protected]>) escribió:

Please, can we handle this behavior? I can stream video but I don't have
sound

I figured I was wrong. Both streams received contain audio and video. I
forgot to remove the mute prop from my HTML tag...


You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/peers/peerjs/issues/609#issuecomment-615115594, or
unsubscribe
https://github.com/notifications/unsubscribe-auth/AA47FG5NRKADFOYTFWURTI3RNAHFRANCNFSM4J4HHKVA
.

Anyone have working solution for these? still stream event called twice.

This things still have an issue as of today, anyone have an idea to deal with?

i create an array.

const callList = [];

When i get a call or i call other users, first i check that list in onStream event and if that call not in my list, doing my stuf (add to page a video element or anything else).
Example here (i am calling other user and other user answer with a stream):

        // make a call (userId is other users peer id)
    const call = peer.call(userId, myVideoElement.srcObject, { metadata: { userId: peer.id } });
    // create a video element
    const video = createVideoElement(); // this is my custom function for create a html video element, it returns a video element.
    // call on stream
    call.on('stream', remoteStream => {
            // check call list if call not in the list then add to list and page
            if(!callList[call.peer]){
                // add stream to video element
                video.srcObject = remoteStream;
                // show on page
                showVideoElemenetOnPage(video); // this is my custom function for append video element to another element on the page
                // add call objec to global object
                callList[call.peer] = call;
            }
    });

This can solve twice run problem.

i create an array.

const callList = [];

When i get a call or i call other users, first i check that list in onStream event and if that call not in my list, doing my stuf (add to page a video element or anything else).
Example here (i am calling other user and other user answer with a stream):

        // make a call (userId is other users peer id)
  const call = peer.call(userId, myVideoElement.srcObject, { metadata: { userId: peer.id } });
  // create a video element
  const video = createVideoElement(); // this is my custom function for create a html video element, it returns a video element.
  // call on stream
  call.on('stream', remoteStream => {
            // check call list if call not in the list then add to list and page
            if(!callList[call.peer]){
                // add stream to video element
                video.srcObject = remoteStream;
                // show on page
                showVideoElemenetOnPage(video); // this is my custom function for append video element to another element on the page
                // add call objec to global object
                callList[call.peer] = call;
            }
  });

This can solve twice run problem.

This solve my problem, thanks

after using the above method it was still accepting twice.

const callList = [];

peer.on('call', call =>{
call.answer(myMedia);
// initialining accept boolean for every new user
var accept = true;
call.on('stream', data=> {
console.log("acceptcall");
//to accept call only once for other user
if(accept){
addvideoElement(false,data);
accept=false;
}
});
});

socket.on('user-connected', ID => {

var call = peer.call(ID,myMedia);

    call.on('stream', data => { 
        if(!callList.includes(ID)){
            console.log("user-connected");
            addvideoElement(false,data);
            callList.push(ID);
        }

    });

});

If you get double stream issue then try to create video element before call.on('stream', data => { line. @dipanshubhola1009

Now it is working as expected

Same problem here :( I did the work around to ignore the second event

Was this page helpful?
0 / 5 - 0 ratings

Related issues

jameshfisher picture jameshfisher  ·  5Comments

schweini picture schweini  ·  7Comments

kahrkunne picture kahrkunne  ·  4Comments

furozen picture furozen  ·  9Comments

l2aelba picture l2aelba  ·  3Comments