如何为自定义div启用画中画（PiP）模式？非视频PiP实现咨询

Great question! It's true that most PiP guides focus on video elements, but we absolutely can get a dynamic, frequently-updating custom div into picture-in-picture mode using vanilla JS, HTML, and CSS. Here's a step-by-step solution that works with content that changes every second:

We'll need our target div, a hidden video element (since PiP requires a video to attach to), and a button to trigger the PiP mode:

<div id="dynamicDiv" style="width: 400px; height: 300px; background: #eee; padding: 1rem;">
  <!-- This content will update every second -->
  <p>Current time: <span id="timeDisplay">0</span></p>
</div>
<button id="pipButton">Enable Picture-in-Picture</button>
<video id="pipVideo" style="display: none;" muted playsinline></video>

We'll use the Element Capture API (supported in modern Chrome/Edge) to capture a live stream of the div's content. For browsers that don't support this, we'll fall back to a canvas-based approach:

const dynamicDiv = document.getElementById('dynamicDiv');
const pipVideo = document.getElementById('pipVideo');
const pipButton = document.getElementById('pipButton');
let mediaStream;

// First, simulate the div's content updating every second
setInterval(() => {
  document.getElementById('timeDisplay').textContent = Math.floor(Date.now() / 1000);
}, 1000);

// Function to start capturing the div
async function startCapture() {
  try {
    // Try using Element.captureStream() first (native support)
    if ('captureStream' in dynamicDiv) {
      mediaStream = dynamicDiv.captureStream(30); // 30 FPS
    } else {
      // Fallback: Use canvas to draw the div repeatedly
      const canvas = document.createElement('canvas');
      const ctx = canvas.getContext('2d');
      canvas.width = dynamicDiv.clientWidth;
      canvas.height = dynamicDiv.clientHeight;

      // Draw the div to canvas every frame
      function drawDivToCanvas() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.drawImage(dynamicDiv, 0, 0);
        requestAnimationFrame(drawDivToCanvas);
      }
      drawDivToCanvas();

      mediaStream = canvas.captureStream(30);
    }

    // Attach the stream to the hidden video
    pipVideo.srcObject = mediaStream;
    await pipVideo.play();
  } catch (err) {
    console.error('Failed to capture div content:', err);
  }
}

// Handle the PiP button click
pipButton.addEventListener('click', async () => {
  if (!document.pictureInPictureEnabled) {
    alert('Picture-in-Picture is not supported in your browser');
    return;
  }

  if (!mediaStream) {
    await startCapture();
  }

  try {
    if (document.pictureInPictureElement !== pipVideo) {
      await pipVideo.requestPictureInPicture();
      pipButton.textContent = 'Disable Picture-in-Picture';
    } else {
      await document.exitPictureInPicture();
      pipButton.textContent = 'Enable Picture-in-Picture';
    }
  } catch (err) {
    console.error('PiP error:', err);
  }
});

// Clean up the stream when exiting PiP
document.addEventListener('leavepictureinpicture', () => {
  mediaStream.getTracks().forEach(track => track.stop());
  mediaStream = null;
  pipButton.textContent = 'Enable Picture-in-Picture';
});

• HTTPS Requirement: The PiP and Media Capture APIs only work in secure contexts (HTTPS) or localhost for development.
• Browser Compatibility: Element.captureStream() is supported in Chrome, Edge, and Opera. The canvas fallback works in most modern browsers that support PiP.
• Performance: If your div has complex content, the canvas fallback might use more CPU—adjust the FPS in captureStream() (e.g., 15 instead of 30) if needed.
• Muted Video: The video element must be muted (we added muted in the HTML) to play automatically without user interaction, which is required for PiP.

That's it! This setup will take your dynamic div, stream its content to a hidden video, and let you toggle PiP mode with the button.

内容的提问来源于stack exchange，提问作者Og Amayokoy