ScreenShare OnEnded is not fired when the stop button is used in Chrome

[andreaswissel]

I'm trying to cleanup the RemoteParticipant's track whenever the screen sharing is stopped through the use of the native stop button in Chrome. However none of the events provided work in this case. The event is fired just fine when the participant leaves the room (e.g. by refreshing the browser window), pressing the stop button will result in a still image. I have also tried creating a MediaStream from the track's mediaStreamTrack myself, bypassing the attach method, to no avail. I'm not exactly sure if this is a general issue with Chrome itself?

• [x] I have verified that the issue occurs with the latest twilio-video.js release and is not marked as a known issue in the CHANGELOG.md.
• [x] I reviewed the Common Issues and open GitHub issues and verified that this report represents a potentially new issue.
• [x] I verified that the Quickstart application works in my environment.
• [x] I am not sharing any Personally Identifiable Information (PII) or sensitive account information (API keys, credentials, etc.) when reporting this issue.

Code to reproduce the issue:

participant.on('trackSubscribed', track) => {
       if (track.kind === 'video') {
        stream.addEventListener('ended', () => {
          debugger;
       })
}

Expected behavior:

Breakpoint should halt the application, indicating that the event has fired and the stream has stopped.

Actual behavior:

No event is fired.

Software versions:

• [ ] Browser(s): Chrome 79
• [ ] Operating System: macOS 10.15.2
• [ ] twilio-video.js: 2.0.0
• [ ] Third-party libraries (e.g., Angular, React, etc.): Angular 8.2.5

[manjeshbhargav]

Hi @andreaswissel ,

Thanks for writing in with your issue. The scenario that you're trying to build can be easily accomplished as follows:

• The LocalParticipant (Alice, for ex.) that is publishing the screen share LocalVideoTrack can listen to the stopped event and unpublish it:

  let localParticipant; // Alice's LocalParticipant
  let screenShareTrack; // Alice's screen share LocalVideoTrack
  screenShareTrack.on('stopped', () => {
  localParticipant.unpublishTrack(screenShareTrack);
  });

  When you click on Chrome's native "stop sharing button", a stopped event is emitted on the screenShareTrack.

• Then, the RemoteParticipant (Bob, for ex.) will receive an unsubscribed event on the RemoteTrackPublication associated with the screen share Track:

  screenSharePublication.on('unsubscribed', remoteScreenShareTrack => {
  remoteScreenShareTrack.detach().forEach(videoElement => {
  videoElement.remove();
  });
  });

  Please let me know if this works for you.

Thanks,

Manjesh Malavalli JSDK Team

[andreaswissel]

Hi Manjesh,

I didn't think about it this way, yet. I already do some DOM cleanup for the onended-event so this does indeed work and integrates quite nicely. Thanks!

However, the onended callback should probably still be called on remote participants to conform with the official spec, I guess?

Thanks again!

[manjeshbhargav]

Hi @andreaswissel ,

The new unified plan spec does not emit the onended event anymore. It emits the onmuted event instead. But I wouldn't recommend depending on these events. You'll get consistent behavior if you follow what I have suggested.

Thanks,

Manjesh Malavalli JSDK Team