Question

我在React中遇到了元素性能问题。

在我的应用程序中，我在两个用户之间建立webrtc连接，并在元素中呈现他们的流，以便他们可以看到彼此。我使用js DOM操作创建它们，如下所示：

video = document.createElement('video')

video.id = 'native-video-' + that.getGlobalID()
video.autoplay = true
video.controls = false
video.src = URL.createObjectURL(wrStream)
if (local) {
  video.muted = true
}
parentElement.appendChild(video)

一切正常，用户无法正常看到对方。但是当我开始将我的应用程序重写为React时，我在渲染元素时遇到了性能问题。视频口吃得非常糟糕，因此它比实时流媒体更具幻灯片效果（从~1fps到~10fps不等）。我正在使用以下代码（我不相信任何幻想）：

renderLocalStream () {
  return (
    <video ref='videoPlayer'
      id={'native-video-' + this.state.localStream.getGlobalID()}
      src={this.state.localStream.getStreamSrc()} >
    </video>
  )
}

我已经检查了组件更新的频率，因为我认为它可能会使更新变得非常快 - 产生口吃，但事实证明它只更新一次，所以这不是问题。

我有一种感觉，我错过了一些非常简单的东西，但我无法弄清楚。有没有人对如何解决它有任何想法？

Answer 1

你错过了反应代码中视频元素的自动播放，这会导致Chrome中出现这种口吃效果。

反应视频元素的表现

1 个答案: