Frozen screen when clicking 'stop video' on android Chrome

[thepug]

Describe the bug
On an android pixel 3 and google chrome, if I click the 'stop video' button after joining a room, the app freezes. The other participants can still see and hear the host but none of the elements are clickable, etc.

To Reproduce
Steps to reproduce the behavior:

1. Join a room.
2. Click on 'stop video'
3. The app will freeze.

Expected behavior
Stop video will mute the video and the app is still usable.

Screenshots

Environment (please complete the following information):

• OS: android 11
• Browser: Chrome 86.0.4240.110
• App Version: 0.2.1
• SDK Version: "twilio": "^3.39.3",
  "twilio-video": "2.8.0-beta.2",
• Node.js version: deployed on twilio (unsure of version)

Additional context
It seems to unfreeze if you got to the android app switcher and select chrome.

[timmydoza]

Thanks for the issue @thepug!

I can confirm this issue - I'm able to easily reproduce it on my Pixel 4a.

What's strange is that the app appears to be responding correctly under the hood (using Chrome devtools on desktop), but the app on the phone is frozen. There are no errors in the JS console. Selecting Chrome from the app switcher also fixes the issue for me.

We will research this one more, but it appears that it may be a problem with Pixel phones and not a problem with the app. Lots of people have described the same issue in this thread here: https://support.google.com/pixelphone/thread/58697077?hl=en

[hariaw]

This does indeed appear to be a wider issue with closing media streams on Android 11. It is reproducible with a minimal example that opens a MediaStream, assigns it to a <video> element and closes it: https://codepen.io/harryrickardsaw/pen/VwjEgLy. It only appears to affect Android 11, and is not Pixel-specific (reproducible on a Moto G7 running Android 11 GSI).

I have filed an Android bug at https://issuetracker.google.com/u/1/issues/173142922: @thepug please add any additional information you have there.

[makarandp0]

I have filed a chromium bug for this issue @ https://bugs.chromium.org/p/chromium/issues/detail?id=1148532

[dzhng]

I have this issue as well. Not just with Pixel, I have OnePlus 8 Pro, seems like general Chrome issue :(

It also fails when you switch between front facing / back facing cameras, as well as when the user toggle video.

Currently, I'm sort of getting around it the following way:

• When the user turn video on / off, disable the camera instead of stopping the camera.
• When the user ends the call, instead of going through the usual flow of stopping camera / unpublishing / cleaning up, I just hard reload the page to the next step of my app. This seems to fix freezing on video toggle 99% of the time.
• Currently seeing if I can do a similar trick on switching between front / back cameras.

[barthicus]

I have this issue as well. Not just with Pixel, I have OnePlus 8 Pro, seems like general Chrome issue :(

It also fails when you switch between front facing / back facing cameras, as well as when the user toggle video.

Currently, I'm sort of getting around it the following way:

• When the user turn video on / off, disable the camera instead of stopping the camera.
• When the user ends the call, instead of going through the usual flow of stopping camera / unpublishing / cleaning up, I just hard reload the page to the next step of my app. This seems to fix freezing on video toggle 99% of the time.
• Currently seeing if I can do a similar trick on switching between front / back cameras.

@dzhng I was thinking about similar solution but in my case it was too risky and I can't afford the possibility to crash users browser. Even refreshing the page make the browser's freeze (I guess tracks are stopped then what causes the crash).

To handle this issue I just extended the unsupported browsers list by
To handle this issue in UnsupportedBrowserWarning.tsx instead of checking Video.isSupported boolean we check the new isSupported() result which is the modified isSupported function that returns false for the Chrome-based mobile browsers newer than ver. 85.

The new isSupported function:

const isMobile = () => {
  if (typeof navigator === 'undefined' || typeof navigator.userAgent !== 'string') {
    return false
  }
  return /Mobile/.test(navigator.userAgent)
}

/**
 * Check if the current browser is officially supported by twilio-video.js.
 * @returns {boolean}
 */
const isSupported = (): boolean => {
  const browser = guessBrowser()
  const browserVersion = guessBrowserVersion()
  const rebrandedChrome = rebrandedChromeBrowser(browser)

  if (browser === 'chrome' && isMobile() && browserVersion.major > 85) return false

  return (
    !!browser &&
    isWebRTCSupported() &&
    (!rebrandedChrome || SUPPORTED_CHROME_BASED_BROWSERS.includes(rebrandedChrome)) &&
    !isNonChromiumEdge(browser)
  )
}

To fix it 100% we have to wait till Chrome devteam fixes the issue @makarandp0 mentioned.

[dzhng]

Been experimenting with this for the past 2 hrs, it seems like the freeze rate is a lot less if you unpublish the track before stopping / restarting it.

[BelkinVadim]

Having experimented, I found several ways to avoid freezing when stopping media stream tracks

1. Clear video.srcObject before stopping tracks

...
video.srcObject = null;
...
stream.getTracks().forEach(track => track.stop());

2. Deleting a track before stopping it

stream.getTracks().forEach(track => {
  stream.removeTrack(track);
  track.stop();
});

[barthicus]

@BelkinVadim Wow, it works! I just tested it on my project and finally browser is not freezed on video input source change.
I used the first way and just nulled the srcObject before replacing track: document.querySelector('video').srcObject = null
It's little hacky but most important fact is that works. Maybe I will refactor it a little and using refs later.

Thanks a lot!

Can I ask where I can find the method removeTrack from the second point in this twilio example repo? This looks like a better way to fix it but useMediaStreamTrack returns object that doesn't contain it.

[BelkinVadim]

@barthicus removeTrack this is the method of the media stream itself https://developer.mozilla.org/en-US/docs/Web/API/MediaStream

I also found that a similar problem exists on iPhone 12, and it is on iPhone 12 with iOS 14.3 version. There is a freeze when switching cameras. There is no such problem on iPhone < 12 with any iOS version

[hariaw]

@BelkinVadim which browser / version did you encounter the iPhone 12 / iOS 14.3 issue with?

[BelkinVadim]

@hrickardsaw Safari 14.3. The first method helps there, with srcObject reset. I don't have a iPhone 12 right now. There is no way to check the method with stream.removeTrack(track)

Continuing the theme Android 11 + Chrome. The problem with freezing can happen when you try to reload the page while displaying an active stream from the camera. This freeze is not stable for me, but it happens periodically

[adityaekbote]

@BelkinVadim Thanks for your effort on figuring out a workaround/solution for this! The video. srcObject = null solution seems to be working on my Samsung S21/Android 11/Chrome and Pixel 4, which were earlier facing this issue.

[BelkinVadim]

I also found that a similar problem exists on iPhone 12, and it is on iPhone 12 with iOS 14.3 version. There is a freeze when switching cameras. There is no such problem on iPhone < 12 with any iOS version

I checked it on the updated iOS 14.4 - there is no problem, perhaps when switching from 14.3 to 14.4 the problem was fixed

[timmydoza]

Hey everyone! There's an update in this Chromium issue: https://bugs.chromium.org/p/chromium/issues/detail?id=1138823

The most recent comment in that issue states:

Fix is in M91 which is currently in Beta and planned to started rolling out on May 25.

I'll keep an eye out for this new version of Chrome to verify that the problem has been fixed.

[timmydoza]

Hey everyone!

Looks like the fix has been released! I just tried the app in Chrome 92 on an Android device, and I no longer can reproduce the frozen screen issue.

I'll close this issue as it appears resolved. Please let me know if there are any outstanding issues or questions!