Bug 212040 - User media tracks muted after route change in standalone pwa
Summary: User media tracks muted after route change in standalone pwa
Status: RESOLVED DUPLICATE of bug 215884
Alias: None
Product: WebKit
Classification: Unclassified
Component: Media (show other bugs)
Version: Safari 13
Hardware: iPhone / iPad iOS 13
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2020-05-18 12:58 PDT by Dustin Greif
Modified: 2021-01-05 04:49 PST (History)
6 users (show)

See Also:


Attachments

Note You need to log in before you can comment on or make changes to this bug.
Description Dustin Greif 2020-05-18 12:58:53 PDT
We have a PWA which needs constant access to the users camera on iPad.  This is a SPA that uses the camera stream on multiple different pages with different routes.  To optimize the user experience, we call getUserMedia a single time and hold onto the stream as they navigate throughout the app.  While this works well in Safari on iOS 13.4.1, we are running into issues when we launch the app in standalone mode from a saved link on the home screen.  In standalone, it seems that the stream produced by getUserMedia is stopped any time the main route for the page changes.  Even an update to the hash portion of the href causes the stream to stop.  We can detect this situation by looking for the stream tracks to have muted: true, but we then have to start a new stream which forces the user to wait about 2 seconds.  Our expectation would be that the camera stream would stay active, even after route changes, as long as our SPA is still loaded.

Here is a minimum reproduction of the issue.  It's difficult to reproduce with a jsfiddle since you need to have the example running as the top-level app in standalone mode.

<html>
<head>
  <meta name="apple-mobile-web-app-capable" content="yes">
</head>
<body>
<video id ="videoOutput" autoplay playsInline muted width=100></video>
<br>
<a href="#">
  Click here to add a hash route, which stops video playback in standalone safari
</a>

<script>
  function start() {
    const videoOutput = document.getElementById('videoOutput')

    navigator.mediaDevices.getUserMedia({ video: true }).then(s => {
      videoOutput.srcObject = s;
    }).catch(e => {
      alert("Failed to access camera: " + e)
    })
  }
  start()
</script>
</body>
</html>
Comment 1 Radar WebKit Bug Importer 2020-05-18 18:02:01 PDT
<rdar://problem/63372066>
Comment 2 youenn fablet 2020-05-25 05:41:24 PDT
I can repro this using a PWA application (airhorner.com), then call getUserMedia through web inspector.
The same application run in Safari does not exhibit the issue.
Comment 3 Andriy 2021-01-05 00:05:08 PST
I can confirm the issue. Our app experiences it only in PWA mode (when installed to home screen).

It makes not possible adding floating video chat feature to our SPA because any navigation using `history.pushState` mutes camera stream.

The camera video track receives `mute` after navigation and never gets `unmute` event after that.

The demo: https://mrlika.github.io/Bug-212040/

Source code: https://github.com/mrlika/Bug-212040
Comment 4 youenn fablet 2021-01-05 04:49:39 PST
Thanks Andriy.
This is the same fix as for bug 215884.
Let's track the work there.

*** This bug has been marked as a duplicate of bug 215884 ***