REGRESSION (iOS 16): When getUserMedia is called again, the existing stream is killed

[rbernalber]

After the ios 16 update, when getUserMedia is called again, it kills itself and the camera does not work.

I'm testing on an iPhone mini mainly. The application is a PWA.

Accessed from the browser, not from the desktop icon, everything is fine.

On a regular iPhone 13 it doesn't happen, neither on iPad. Both with IOS 15

This problem is very random.
When open app from browser and then return PWA, its work again!

[rbernalber]

I have tested with an iPhone 11 upgraded to iOS 16 and the same error occurs. 
It's hopeless, it makes the PWA app unusable.

[Radar WebKit Bug Importer]

<rdar://problem/100790113>

Could this be a dupe of https://bugs.webkit.org/show_bug.cgi?id=179363 ?

[rbernalber]

is similar but not. I cloned getUserMedia with "clone()". On the device with ios16 it is easy to reproduce the bug.

When the permission request message appears, very quickly it is accepted and the bug appears.

on devices with version 15 I can't reproduce this error.

  const normalStream = await this.window.navigator.mediaDevices.getUserMedia({
        audio: false,
        video: {
          facingMode: 'environment',
          width: { exact: 150 },
          height: { ideal: 720, max: 960, min: 480 },
          // aspectRatio: { ideal: 1 },
          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
          // @ts-ignore
          ...(this.window.navigator.mediaDevices.getSupportedConstraints().resizeMode && {
            // resizeMode: 'none'
            resizeMode: 'crop-and-scale"'
          }),
          frameRate: { ideal: 60 },
        }
      })

      const fakeStream = normalStream.clone()
      const mediumStream = normalStream.clone()

      await Promise.all([
        ...mediumStream.getTracks().map((x) =>
          x.applyConstraints(
            this.getVideoConstraints({
              aspectRatio: 1.333,
              width: { min: 960, ideal: 1280, max: 1440 }
            })
          )
        ),
        ...fakeStream
          .getTracks()
          .map((x) =>
            x.applyConstraints(
              this.getVideoConstraints({ width: { min: 960, ideal: 1280, max: 1440 }, frameRate: { ideal: 25 } })
            )
          )
      ])

      this.cameraNormalAperture.nativeElement.srcObject = normalStream
      this.cameraMediumAperture.nativeElement.srcObject = mediumStream
      this.fakeCamera.nativeElement.srcObject = fakeStream