RTCMultiConnection icon indicating copy to clipboard operation
RTCMultiConnection copied to clipboard

Is this a bug? The `connection.onstream` event executed several times in a row on a single `connection.addStream`event.

Open ghost opened this issue 7 years ago • 2 comments

The script is simple. Initiator and Broadcaster see and hear each other. I delete the local stream of the broadcaster from him and from the initiator. And later I launch a new stream from Broadcast, and I want it to appear as an initiator.

One connection.addStream event should trigger one connection.onstream event for both the initiator and the broadcaster. But in my case it is not.

I use the following code:

// we delete the local stream from the broadcaster and send a command to the initiator to delete this stream
connection.getAllParticipants().forEach(function(remoteUserId) {
	var user = connection.peers[remoteUserId];
	user.peer.getLocalStreams().forEach(function(localStream) {
		user.peer.removeStream(localStream);
	});
});

//Let's wait for a while until all streams are deleted from the remote users (initiator) and we start deleting the local stream from the broadcaster
setTimeout(function() {
	connection.attachStreams.forEach(function(stream) { stream.stop(); });
}, 2000);


//Create a new stream and display it locally and send it to other members.
setTimeout(function() {
	connection.addStream({ // add stream event in to connection.onstream
		audio: true,
		video: true
	});
}, 3000);

Such a code may be needed, for example, when switching parameters of bandwidth, mediaConstraints, microphones, webcams, etc.

Run this code in the Broadcast console several times. The video is deleted from both participants. A new great joins.

BUT! Observe the initiator. Run this code 5 times. The connection.onstream event will fire five times in a row for the fifth time. And for 6 times the use of the code, the connection.onstream event will start 6 times - executed several times in a row. And so on.

At the same time, absolutely identical streams are accumulated in the connection.peers [remoteUserId] .streams array. For example, on the 6th trigger of the code in the broadcaster, the initiator will have an array of 7 values with exactly the same parameters.

Tell me, please, how to make so that when connection.addStream the event connection.onstream fires only once?

ghost avatar Nov 19 '18 02:11 ghost

Hi. Did you find what was the problem ?

ghost avatar Mar 12 '19 06:03 ghost

Hi, I am trying to switch camera in the middle of broadcast, On the broadcaster side camera changes successfully (not on firefox). But on the user side screen reloads but no change in camera. Here is my code which i am using in my angular application

changeCamera = (device_id) => { // check support if(navigator.mediaDevices.getUserMedia) { localStorage.setItem("deviceId", device_id);

      // we delete the local stream from the broadcaster and send a command to the initiator to delete this stream
      this.connection.getAllParticipants().forEach(function(remoteUserId) {
        var user = this.connection.peers[remoteUserId];
        user.peer.getLocalStreams().forEach(function(localStream) {
          user.peer.removeStream(localStream);
        });
      });

    //Let's wait for a while until all streams are deleted from the remote users (initiator) and we start deleting the local stream from the broadcaster
    setTimeout(() => {
      this.connection.attachStreams.forEach(function(streams) { streams.stop(); });
    }, 2000);

    // var pc = new RTCPeerConnection();
    // stream.getTracks().forEach(function(track) {  // COMMENTED THIS BLOCK, (SINCE STREAM IS UNDEFINED HERE)
    //   pc.addTrack(track, stream);
    // });

    //Below block hits onstream event successfully.
    setTimeout(() => {
      this.connection.addStream({ // add stream event in to connection.onstream
        audio: true,
        video: true
      });
    }, 3000);
}

}

After onstream event trigger i am trying to manipulate the stream this way.

this.connection.onstream = function(event) {

  const video = document.createElement('video');

    if(localStorage.getItem("deviceId")) {
            navigator.mediaDevices.getUserMedia({
              video: { deviceId: localStorage.getItem("deviceId") }, audio: true
            }).then((stream) => {
          
              event.stream = {};
              event.stream = stream;
              console.log("new event=", event);          
              video.srcObject = stream;
    
            }, reason => {
              console.error("Error reason", reason); // Error!
            });
          }
    }

Suggest a way to proceed with, I am beginner in webRTC

rahul7827 avatar Apr 14 '21 12:04 rahul7827