HTML5原生不支持RTSP，需转为WebRTC或HLS；WebRTC方案可直接调用requestPictureInPicture()，HLS需hls.js且PiP兼容性差；启用PiP须满足已播放、用户手势触发、有音频或静音+playsinline、HTTPS等条件。
HTML5 原生不支持 RTSP，更谈不上画中画
浏览器的 <video></video> 标签只支持 HTTP(S) 协议下的 MP4、WebM、Ogg 等封装格式，rtsp:// 地址直接丢给 <video src="rtsp://..."></video> 会静默失败，控制台通常报 DOMException: The element has no supported sources。画中画（Picture-in-Picture, PiP）是基于合法 <video></video> 元素触发的 API，源头都不工作，PiP 自然无从谈起。
必须先转协议：RTSP → WebRTC 或 HLS 才能进 HTML5
真正可行的路径是服务端或边缘网关把 RTSP 流转成浏览器能播的格式：
-
推荐 WebRTC 方案：用
janus-gateway、mediasoup或EasyNVR接入 RTSP，再通过RTCPeerConnection播放 —— 此时得到的是原生<video></video>元素，可调用videoElement.requestPictureInPicture() -
HLS 方案（延迟高）：用
ffmpeg+nginx-rtmp-module或gstreamer转成.m3u8，配合hls.js播放；但hls.js创建的<video></video>是“模拟”播放器，部分浏览器不认为它是可 PiP 的原生媒体元素，调用requestPictureInPicture()可能抛NotAllowedError
启用画中画前必须满足的 3 个硬性条件
即使流已成功播放，PiP 仍可能被拒绝，常见卡点如下：
-
videoElement必须已play()且处于“用户手势触发后”的上下文中（比如绑定在click或touchend里），不能在load回调或定时器中直接调用 - 视频需有音频轨道（哪怕静音），或显式设置
videoElement.muted = true且videoElement.playsinline = true（iOS Safari 强制要求） - 页面需为 HTTPS（localhost 除外），HTTP 页面调用
requestPictureInPicture()会直接失败
一个最小可用的 WebRTC + PiP 示例
假设你已用 mediasoup-client 成功订阅到远端流并绑定到 <video id="remoteVideo"></video>：
立即学习“前端免费学习笔记（深入）”；
const videoEl = document.getElementById('remoteVideo');
// 确保已播放且有用户交互上下文
button.addEventListener('click', async () => {
try {
await videoEl.play(); // 触发播放
await videoEl.requestPictureInPicture(); // 立即请求 PiP
} catch (err) {
console.error('PiP failed:', err.name); // 常见：NotAllowedError / SecurityError
}
});
注意：requestPictureInPicture() 返回 Promise，拒绝原因要捕获；iOS Safari 对 PiP 支持较弱，某些版本仅允许全屏退出后手动点 PiP 按钮，无法代码触发。
真正麻烦的从来不是调用那一行代码，而是前面 RTSP 到 WebRTC 的链路稳定性、NAT 穿透成功率、以及不同终端对 PiP 的差异化策略 —— 这些没法靠前端单方面绕过。
