Twilio-video.js: OSX Safari 11.1 room leave causes crash

Created on 6 May 2018 · 10Comments · Source: twilio/twilio-video.js

[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 (this application causes the crash)

Code to reproduce the issue:

Open https://github.com/twilio/video-quickstart-js on the latest Safari Version 11.1 (13605.1.33.1.4) and join a room. Then open the quickstart on any other browser (including safari on another computer over ngrok). Click "leave room" on any of the browsers and Safari will refresh the page with a message that says "This webpage was reloaded because a problem occurred"

Expected behavior:

The expected behavior for leaving a room is for it to disconnect both participants and remove the tracks successfully. This behavior happens on Chrome and Firefox

Actual behavior:

On Safari, the browser abruptly refreshes with "This webpage was reloaded because a problem occurred". It also clears the Javascript console and does not allow me to see any logs

Software versions:

[X] Browser(s): OSX Safari Version 11.1 (13605.1.33.1.4)
[X] Operating System: High Sierra 10.13.4 (17E202)
[X] twilio-video.js: v1.8.0 and also tested it with 1.9.0-dev

Additional info:

I've been developing a video application and have had issues exclusively with Safari on OSX (and ios). I've tried peer to peer rooms and group rooms supporting all codecs but still get the same behavior of applications crashing when participants leave rooms.

I noticed that https://github.com/twilio/video-quickstart-js also has the same behavior. When a participant leaves a room, Safari refreshes and restarts. I've verified this on two different Mac machines and on an iphone.

If you have any idea of what might be going on, I'd greatly appreciate it. I've tried using the twilio-video 1.9 dev version as well. Unfortunately I've found no way to prevent Safari from refreshing after this particular crash, which has made it even more frustrating to find logs or errors related to this problem. Thanks for the help!

Safari bug filed

Source

wesleykendall

👍4

Most helpful comment

For anyone that sees this issue, I worked around it with the following hack:

// Detach the Tracks from the DOM.
function detachTracks(tracks) {
  let isSafari = /Safari/.test(navigator.userAgent) && /Apple Computer/.test(navigator.vendor);
  tracks.forEach(function(track) {
    if (isSafari) {
      // Avoid detaching the track and only remove the DOM element for Safari.
      // This avoids the issue that happens because of https://github.com/twilio/twilio-video.js/issues/294
      // We are still uncertain about what side effects this problem ultimately has if particants
      // connect and reconnect multiple times.
      track._attachments.forEach(function(element) {
        element.remove();
      });
    } else {
      track.detach().forEach(function(detachedElement) {
        detachedElement.remove();
      });
    }
  });
}

I tried a couple other things, such as pausing the track before detaching and other things, but nothing seems to avoid the webkit bug. Anyways, this doesn't appear to be an issue in twilio-video.js, so feel free to close it if you'd like

wesleykendall on 17 May 2018

👍11 🎉6

All 10 comments

Hi @wesleykendall,

Sorry you're hitting this. I filed Bug 185228 - EXC_BAD_ACCESS using WebRTC and MediaStream APIs describing this same issue. In the bug tracker, they said Bug 185233 - A MediaStream being played should allow removing some of its tracks should fix this. I'm not sure when it will be released, though.

Mark

markandrus on 6 May 2018

Thanks @markandrus ! Do you happen to now if there is a hack to get around it programmatically? For example, refreshing the browser when a client disconnects?

wesleykendall on 6 May 2018

Hi there,

we switched today from simple-webrtc to twilio-video.js and got the same issue. Ios 11.3.1 and after exit from the remote-client, the ios-safari crashes and make a auto-reload ... (we are wrapping the twilio inside vue / quasar). (with simple-webrtc - and the same twilio backstack we had no problem ...)

ibrainventures on 8 May 2018

👍1

@ibrainventures we are looking to see if there are any hacks around this for now. Will report here if we find anything. If you find anything, let me know!

wesleykendall on 11 May 2018

In my experience testing with the Quickstart application, I only observed the crash when detach-ing the RemoteParticipants' RemoteAudioTrack/RemoteVideoTrack from their <video> element. There might exist a workaround that detach-es in a different way.

markandrus on 11 May 2018

@markandrus thanks for the suggestion! I just commented out detaching tracks and that seems to avoid the error, so I will experiment with this more as a possible work around

wesleykendall on 12 May 2018

For anyone that sees this issue, I worked around it with the following hack:

// Detach the Tracks from the DOM.
function detachTracks(tracks) {
  let isSafari = /Safari/.test(navigator.userAgent) && /Apple Computer/.test(navigator.vendor);
  tracks.forEach(function(track) {
    if (isSafari) {
      // Avoid detaching the track and only remove the DOM element for Safari.
      // This avoids the issue that happens because of https://github.com/twilio/twilio-video.js/issues/294
      // We are still uncertain about what side effects this problem ultimately has if particants
      // connect and reconnect multiple times.
      track._attachments.forEach(function(element) {
        element.remove();
      });
    } else {
      track.detach().forEach(function(detachedElement) {
        detachedElement.remove();
      });
    }
  });
}

wesleykendall on 17 May 2018

👍11 🎉6

@wesleykendall this resolves the issue completely for me. Thank you. I will take a look myself at the underlying code in the Twilio framework and if I find something relevant will connect in with Webkit bug tracker to report potential issues to them. This should not have to be worked around.