dolbyio-samples / rts-app-react-publisher-viewer

A Real Time Streaming App example for dolby.io
MIT License
15 stars 9 forks source link

[Viewer App] Safari: All the streams are not shown in the viewer app #313

Open vishalkharge opened 1 year ago

vishalkharge commented 1 year ago

When the publisher is streaming 4 sources, viewer app on Safari browser is not showing all the 4 sources.

STEPS:

  1. Open the publisher app on Chrome browser
  2. Add multiple sources [Camera, local file, browser tab youtube, window]
  3. Go live
  4. Copy the invite viewers link and open the viewer app in Safari browser
  5. All the sources streamed from the publisher are not shown in the viewer app

If you are not able to reproduce the issue with above steps, try stoping and starting the streaming again

Int Branch: int-issue-145-multisources

Environment: OS: macOS Ventura Version 13.1 Publisher Browser: Chrome Version Version 109.0.5414.119 (Official Build) (x86_64) Viewer Browser: Safari Version 16.2 (18614.3.7.1.5)

Screen Recording:

https://user-images.githubusercontent.com/110803586/218345345-87b6fed5-d8b1-4fd2-8c4f-7da46ffddce3.mov

https://user-images.githubusercontent.com/110803586/218345325-e87ab67f-1f08-4355-97ae-81ab5fb8dff8.mov

jackshen commented 1 year ago

https://dolbyio.slack.com/archives/C03FCG13J1J/p1677728277319149

Possible SDK issue that's causing this Safari bug

Tested on versions 0.1.35 and 0.1.37

I believe I've isolated the cause, here is my understanding of the process that leads to the bug

When in the Viewer app:

  1. We receive the active event that from the viewer.on('broadcastEvent', ...event listener
  2. We use tracks from event.data in order to create the mediastream and add audio/video remote tracks (viewer.addRemoteTrack)
  3. When we run await viewer.addRemoteTrack('audio', [mediaStream]) it looks like it always resolves correctly
  4. When we run await viewer.addRemoteTrack('video', [mediaStream]); after successfully adding the audio remote track, sometimes it never resolves. This behaviour seems to intermittently happen in Safari. It does not appear to throw an exception, as it's already wrapped in a try catch.
  5. If the above promises resolve, we are able to correctly add the stream to state and render it. If it doesn't, then the user will not be able to see the unresolved streams at all