[Webkit-unassigned] [Bug 210285] New: MediaStream can only be used ~10 times on new video elements

Thu Apr 9 09:48:35 PDT 2020

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

            Bug ID: 210285
           Summary: MediaStream can only be used ~10 times on new video
                    elements
           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 web app that uses `getUserMedia` to grab a feed from the users camera and capture images from it.  As the user navigates the app, the camera feed is not always visible (and thus removed from the dom).  To improve efficiency, we make a single call to `getUserMedia` and hold onto the returned MediaStream and then bind that stream to a new video element using `srcObject` each time the user is ready to capture new images.  This works great in all browsers except safari on iOS.  What we see on iOS is that stream can be played ~10-13 times in new video elements, and after that the `loadedmetadata` event will never fire on the video element.  We can make another call to `getUserMedia` at that point to get a new stream, but we cannot find any indication that the video element, media stream, or video track have entered a bad state.  Calling `play()` on the video element simply does not resolve or throw an error.  If we use the exact same video element each time, the issue doesn't seem to happen as quickly.  What we would expect is that the video stream can be bound to an infinite number of video elements, as long as the previous element has been removed from the dom.  Here is a simple recreation of the problem:

<html>
  <body>
    <div id="output">
      <h1 id="count">Please allow camera permissions, then the example will start...</h1>
    </div>

    <script>
      function start() {
        const output = document.getElementById('output'),
          countHeader = document.getElementById('count'),
          shareVideoElement = false

        let count = 0
        let video, stream

        if (shareVideoElement) {
          video = document.createElement('video')
        }

        function show() {
          if (!shareVideoElement) {
            video = document.createElement('video')
          }

          video.srcObject = stream
          video.style.border = '1px solid black'

          output.appendChild(video)
          count++
          countHeader.innerHTML = count

          const timer = setTimeout(() => {
            console.log(`FAILED to play stream after ${count} attempts`)
            countHeader.innerHTML += ' - Failure detected'
            console.log(video, stream, stream.getVideoTracks()[0])
          }, 1000)

          video.play().then(() => {
            clearTimeout(timer)
            setTimeout(hide, 100)
          }).catch(e => {
            alert(e)
            console.log(e)
          })
        }

        function hide() {
          if (count >= 50) {
            countHeader.innerHTML = 'Successfully reached 50 attempts'
            return
          }

          if (video) {
            video.parentNode.removeChild(video)
          }

          setTimeout(show, 10)
        }

        function loadNewStream() {
          navigator.mediaDevices.getUserMedia({ video: true }).then(s => {
            stream = s
            show()
          }).catch(e => {
            console.error(e)
            countHeader.innerHTML = 'Failed to access camera: ' + e
          })
        }

        loadNewStream()
      }

      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/20200409/3e1ee02e/attachment.htm>