video.play() 在 IOS 上发生未处理的拒绝（notallowederror）

Question

使用 peer.js 在 React APP 上播放流视频

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

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

在 'video.play()'

收到此错误

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

我已经在 IOS.

上允许了音频和视频的权限

此代码适用于除 IOS 以外的其他平台。

我不知道。

如果我部署，那么我只会在 IOS 上黑屏。

我该如何解决这个问题？

提前致谢

Answer 1

问题是视频标签在 IOS 和 WebRTC 中的工作方式。

使用 HTTPS 环境（生产）然后添加这些属性

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

然后就可以了。

video.play() 在 IOS 上发生未处理的拒绝（notallowederror）

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

html

javascript

stream

webrtc

reactjs