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

问题描述

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

解决方法

document.pictureInPictureElement将是视频元素（如果有PIP可用），否则将是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>