image

直接将原网页的<video />标签转移到画中画中

• 优点
  1. 性能最好
  2. 交互延迟感最低
  3. 支持同源iframe里src为http的视频
• 缺点
  1. 不支持同源iframe里的src为blob开头的视频
  2. 不支持非同源iframe里的视频

image

通过canvas的ctx.drawImage(videoEl) + requestAnimationFrame,最后从canvas中captureStream()获取流,放到画中画的<video />标签中播放

该模式也是旧画中画模式的实现方式

• 优点
  1. 支持同源iframe里的src为blob开头的视频
  2. 播放的视频帧率能达到源视频帧率
• 缺点
  1. 非常消耗系统资源
  2. 不支持无CORS的第三方视频
  3. 不支持非同源iframe里的视频

image

通过源视频的captureStream()获取流,放到画中画的<video />标签中播放。与上面的双视频模式类似,只少了用canvas绘制的流程

• 优点
  1. 支持同源iframe里的src为blob开头的视频
  2. 相比双视频模式,资源消耗少了点
• 缺点
  1. 经测试60帧源视频没法还原其播放帧率
  2. 不支持无CORS的第三方视频
  3. 不支持非同源iframe里的视频

image

使用navigator.mediaDevices.getDisplayMedia录制网页,然后通过cropTarget裁剪范围,再把该视频流放到画中画的<video />标签中播放

• 优点
  1. 支持非同源iframe里的视频
  2. 唯一可以绕过EME限制
  3. 支持无CORS的第三方视频
• 缺点
  1. 无法隐藏浏览器顶部的共享标签页提示 image
  2. 视频交互有略微延迟
  3. 需要chrome 104版本及以上
  4. 该网页的其他操作导致视频不在视窗内,会导致画中画的视频不正常
  5. 源视频中的播放器上功能、浮动元素会被录制进去

该模式需要chrome://flags/#element-capture开启,与网页录制功能差不多,但cropTarget替换成restrictionTarget

• 优点
  1. 相比网页录制功能,源视频中的播放器上功能、浮动元素不会被录制进去
• 缺点
  1. 测试下来网页会非常卡,性能很差
  2. 无法录制非同源iframe的视频,而cropTarget却可以

使用插件的tabCapture录制,然后网页获取到mediaStream放到canvas上进行裁剪,与网页录制功能相似

• 优点
  1. 相比网页录制功能,没有浏览器顶部的共享标签页提示
• 缺点
  1. 测试下来浏览器会非常卡,Intel集显730 + 12400最多只能跑30帧视频,60帧会导致浏览器卡顿崩溃
  2. 和网页录制功能一样,也不能滚动网页

image

先用captureStream从源视频中获取流,然后通过webRTC发送到top窗口,top窗口中再把该视频流放到画中画的<video />标签中播放

• 优点
  1. 支持非同源iframe里的视频
  2. 相比网页录制功能,没有了顶部的共享标签页提示
• 缺点
  1. 视频交互有略微延迟
  2. 不支持无CORS的第三方视频,但会先尝试添加cross origin,如果还是不支持就没办法了
  3. 刚启动时视频可能有模糊问题

image

通过注入代码改写MediaSource,从源头拿到sourceBuffer到画中画的自定义MediaSource + <video />播放

• 优点
  1. 支持非同源iframe里的视频
  2. 不经过任何二次处理的原始视频
• 缺点
  1. 只能支持src为blob开头的视频
  2. 可能会占用更多内存,并且作为2个单独播放器,还会消耗更多系统资源