peers / peerjs

Simple peer-to-peer with WebRTC.
https://peerjs.com
MIT License
12.33k stars 1.43k forks source link

call on stream event receives same remote stream twice #609

Open xoraingroup opened 4 years ago

xoraingroup commented 4 years ago

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

xoraingroup commented 4 years ago

any one can coment on this please?

Ponao commented 4 years ago

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}})

afrokick commented 4 years ago

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

baptisteArno commented 4 years ago

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

Payetus commented 4 years ago

Still an issue

Payetus commented 4 years ago

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

baptisteArno commented 4 years ago

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...

Payetus commented 4 years ago

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

El vie., 17 abr. 2020 a las 10:27, Baptiste Arnaud (< notifications@github.com>) 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 .

KaushikSathvara commented 4 years ago

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

ghazimuharam commented 4 years ago

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

ahmetaltun commented 4 years ago

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.

ghazimuharam commented 4 years ago

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

dipanshubhola1009 commented 3 years ago

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);
        }

    });

});

KaushikSathvara commented 3 years ago

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

dipanshubhola1009 commented 3 years ago

Now it is working as expected

ErickWendel commented 3 years ago

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

GuvanchBayryyyev commented 3 years ago

I have found simple solution:


let count = 0;
call.on('stream', function(remoteStream) {
     count = count + 1;
     if(count == 2){
       return
      } else {
        console.log('Received stream', remoteStream);
     }
});
amanKumar689 commented 3 years ago

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

ooo god i was confused with 48 hour thanks bro i love u

umohangopikrishna commented 3 years ago

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

on create video element before call.on('stream', data => { }); even though it executing two time but video is not displaying because the adding of same track is not allowed by video Element. when keeping video element inside the call.on('stream'(stream)=>{}) it will create new video element for twice.