Search code examples
javascripthtmlreactjsstreamwebrtc

video.play() occurred unhandled rejection (notallowederror) on IOS

using peer.js for stream video on React APP

  addVideoStream(video: HTMLVideoElement, stream: MediaStream) {
    video.srcObject = stream

    video?.addEventListener('loadedmetadata', () => {
      video.play()
    })
    if (this.videoGrid) this.videoGrid.append(video)
  }

got this error at 'video.play()'

the request is not allowed by the user agent or the platform in the current context

already I allowed permission for Audio and video on IOS.

this code works well other platforms except IOS.

I have no idea.

If I deploy then I just get black screen on IOS.

how can I fix this?

thanks in advance

Solution

  • the problem was how video tag works in IOS with WebRTC.

    used HTTPS environment(production) then add these attributes

    if (isMobile && isSafari) {
      this.myVideo.playsInline = true
      this.myVideo.autoplay = true
    }

    then it works.