检查Javascript中是否已经存在画中画？

Question

我正在创建一个画中画元素，该元素将在 javascript 文件加载后立即触发。
最初我会使用网络摄像头流作为视频源，但在某个事件发生变化时，我想将视频源更改为画布元素。
有没有办法检查画中画元素是否已经在浏览器中打开？

Answer 1

如果 PIP 可用，document.pictureInPictureElement 将是视频元素，否则它将是 null

https://developers.google.com/web/updates/2017/09/picture-in-picture

// Hide button if Picture-in-Picture is not supported.
pipButton.hidden = !document.pictureInPictureEnabled;

pipButton.addEventListener('click', function() {
  // If there is no element in Picture-in-Picture yet, let's request Picture
  // In Picture for the video, otherwise leave it.
  if (!document.pictureInPictureElement) {
    video.requestPictureInPicture()
      .catch(error => {
        // Video failed to enter Picture-in-Picture mode.
      });
  } else {
    document.exitPictureInPicture()
      .catch(error => {
        // Video failed to leave Picture-in-Picture mode.
      });
  }
  
  console.clear()
  console.log(!document.pictureInPictureElement)
});

<button id="pipButton">Toggle PiP</button><br/>

<video id="video" src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" width="50%"></video>