[Webkit-unassigned] [Bug 212040] New: User media tracks muted after route change in standalone pwa

Mon May 18 12:58:53 PDT 2020

https://bugs.webkit.org/show_bug.cgi?id=212040

            Bug ID: 212040
           Summary: User media tracks muted after route change in
                    standalone pwa
           Product: WebKit
           Version: Safari 13
          Hardware: iPhone / iPad
                OS: iOS 13
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: Media
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: dustin.greif at gmail.com

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>

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20200518/29bf9484/attachment-0001.htm>