Chrome on Android 11 freezes when closing the reader

[Stofkat]

Steps to reproduce

• Open the scanner in Chrome on Android 11
• Hide the component or navigate away without a full page reload
• Chrome will now seemingly freeze, pressing home and going back to the browser fixes this issue.

This appears to be a problem with the underlying MediaStreamTrack, the bug has already been reported in November 2020: https://bugs.chromium.org/p/chromium/issues/detail?id=1148532

I found out that introducing a small delay in MediaStreamTrack.stop helps as a workaround for this issue

I simply replaced line the this.stopCamera = streamTrack.stop.bind(streamTrack); with:

this.stopCamera = () => {
  setTimeout(() => {
    streamTrack.stop();
  }, 2000);
}

[nastassiadanilova]

Mostly the same issue https://bugs.chromium.org/p/chromium/issues/detail?id=1138823. Just to track how the progress is going.

One of the possible solutions https://github.com/twilio/twilio-video-app-react/issues/355#issuecomment-780368725

[joobacca]

@Stofkat Where do you define the streamTrack object?

[joobacca]

@Stofkat Where do you define the streamTrack object?

In case anyone stumbles upon the same problem, I solved it using the snippet @nastassiadanilova linked:

const video = qrReaderRef.current.els.preview;
video.srcObject = null;
navigator.mediaDevices
  .getUserMedia({
    video: true,
  })
  .then(mediaStream => {
     mediaStream.getVideoTracks().forEach(track => {
      mediaStream.removeTrack(track);
      track.stop();
    });
  });

[ZanekShaw]

I have this issue but need help implementing the patch you describe. Can you please explain further?