2

使用 chrome，当 (1) 选择一个选项卡进行捕获，以及 (2) 该选项卡上的一个元素请求全屏时，似乎getDisplayMedia和requestFullscreen不能很好地一起播放。此时 chrome 将改为显示这个奇怪的窗口版本的选项卡。

有没有人遇到过这个问题或者有什么办法解决这个问题？您可以使用这个粗略的小提琴来重现。

const TodoApp = () => {
    const requestFullscreen = () => {
    document.body.requestFullscreen()
  }
  const share = () => {
    navigator.mediaDevices.getDisplayMedia()
        .then((stream) => {
        window.stream = stream
        console.log('success', stream)
      })
      .catch((err) => {
        console.log('err', err)
      })
  }
    return (
    <div>
      <button onClick={requestFullscreen}>requestFullscreen</button>
      <button onClick={share}>Share</button>
      <video id='video' autoPlay={true}></video>
    </div>
  )
}

window.stream = {active: false}
window.lastActive = false

window.setInterval(() => {
    console.log('active: ', window.stream.active)
  if (window.stream.active !== lastActive) {
    if (window.stream.active) {
        document.querySelector('video').srcObject = window.stream
    } else {
        document.querySelector('video').srcObject = null
    }
    lastActive = window.stream.active
  }
}, 5000)
ReactDOM.render(<TodoApp />, document.querySelector("#app"))

抱歉，如果以前有人问过这个问题，但我找不到。

4

0 回答 0