直播讲师双机位
在线培训讲师，一台笔记本录课件PPT，一台摄像头拍自己手语讲解。平台只支持单画面推流，学员要么只看PPT看不见手语，要么讲师把摄像头怼到PPT上导致字太小。用这个工具把摄像头画面缩小到右下角，叠加在PPT画面上，两路画面同时输出成一个视频流，直播软件直接推流。手语区域固定200x300像素，不遮挡关键数据。
主视频 · MAIN
点击 / 拖拽主视频
背景大画面（铺满）
local only
小窗 · PIP
点击 / 拖拽小窗视频
画中画小窗画面
local only
实时预览canvas · live PIP compose
上传主视频与小窗视频后，
在此实时预览画中画合成，满意后导出 webm。
在此实时预览画中画合成，满意后导出 webm。
00:00 / 00:00
画中画设置position / size / style / audio
当前：右下 · 在预览画面上拖拽小窗可微调
边框色
粗细 3
诚实标注：本工具纯前端运行，采用「双 video 同步播放 → canvas 逐帧合成（主视频铺满 + 小窗叠加）→
captureStream 取视频轨 + 选定音频轨（AudioContext / GainNode 路由，可混音）→ MediaRecorder 重录」，
因此输出为 webm 视频（画面重新编码）。两视频时长不同时以主视频为准，小窗结束后冻结末帧。
如需 MP4 / 无损 请用 FFmpeg（ffmpeg -i main.mp4 -i pip.mp4 -filter_complex overlay out.mp4）。
导出需保持本页面前台播放至结束。
就绪 · 上传主视频与小窗视频后实时预览并导出
第一节
关于本工具
About直播时想同时展示主讲人和PPT，但剪辑软件拖轨道太慢。这个工具把两段视频叠成一个画面，副视频可拖拽缩放、任意定位，主视频声音保留。基于FFmpeg合成，视频上传到服务器处理，处理完自动删除原文件，不保留副本。
使用场景
监控与现场画面叠加
工地安全员巡检时，手机拍现场违规操作（未戴安全帽），同时调出对应区域的固定监控回放。需要把监控回放作为小窗嵌在手机拍摄画面里，发给项目经理确认时间线。本工具能在手机端直接叠加两段视频，小窗位置拖到左上角，不遮挡现场主体，输出一个完整证据视频，无需电脑后期。
多语字幕对照演示
外语教学博主制作听力素材，原视频为英文演讲，需要叠加中文字幕轨。但字幕文件（SRT）渲染后与画面分离，学生看字幕时容易错过演讲者表情。把字幕视频（黑底白字，透明通道）作为画中画叠加在原视频底部，调整透明度至60%，既能看到字幕又不完全遮挡演讲画面，输出单一视频文件便于上传平台。
产品开箱与详情页同屏
电商测评博主拍摄一款机械键盘开箱，需要让观众同时看到键盘实物特写和商品详情页的参数表格（轴体类型、键程数据）。手机拍实物，电脑录屏详情页。用工具把录屏画面缩小到右侧，实物画面占左侧主区域，两个画面同步播放。观众无需暂停视频去翻详情页，开箱过程与参数对照一气呵成。
体育赛事战术复盘
业余篮球教练用GoPro录了整场比赛，想截取某次进攻回合，同时叠加战术板动画（用平板画的跑位路线）。原视频和战术动画时长不一致，且战术动画需要半透明叠加在场上球员身上。本工具支持分别调整两路视频的起始时间与透明度，把战术动画设为50%透明度，精确对齐到球员接球瞬间，输出复盘视频发给队员。
第二节
使用指南
Getting Started使用步骤
- 1上传主视频（背景画面），支持 MP4/MOV 格式，文件大小上限 500MB
- 2上传子视频（画中画画面），格式同上，时长建议短于主视频
- 3拖动子视频预览框调整位置（左上/右下/自定义），或直接输入 X/Y 坐标值
- 4点击「合成」按钮，进度条显示处理进度，完成后自动弹出下载链接
输入输出示例
| 输入 | 输出 | 说明 |
|---|---|---|
| 主视频：1920×1080 风景.mp4；画中画：640×480 人物.mp4；位置：右下角；大小：原比例 30%；边距：20px | 输出视频：1920×1080，画中画位于右下角，实际显示尺寸 192×144，距右边缘 20px、距下边缘 20px | 常规：最典型的使用场景——大屏风景配小窗人物，验证位置和缩放逻辑 |
| 主视频：1280×720 教程.mp4；画中画：320×240 演示.mp4；位置：左上角；大小：固定 400×300；边距：0px | 输出视频：1280×720，画中画位于左上角，实际显示尺寸 400×300，紧贴左上角（无边距） | 常规：固定尺寸模式，验证边距为 0 时是否贴边，以及固定尺寸是否保持宽高比 |
| 主视频：3840×2160 4K 视频.mp4；画中画：1920×1080 高清.mp4；位置：右上角；大小：原比例 10%；边距：5px | 输出视频：3840×2160，画中画位于右上角，实际显示尺寸 192×108，距右边缘 5px、距上边缘 5px | 边界：4K 主视频 + 高清画中画，验证超大分辨率下缩放比例计算是否正确 |
| 主视频：640×480 标清.mp4；画中画：1920×1080 高清.mp4；位置：居中；大小：原比例 50%；边距：0px | 输出视频：640×480，画中画位于画面中央，实际显示尺寸 320×180，超出主视频上下边界（被裁剪） | 边界：画中画原始分辨率大于主视频，50% 缩放后仍超出主视频高度，验证裁剪处理逻辑 |
| 主视频：1920×1080.mp4；画中画：1920×1080.mp4（同一文件）；位置：左下角；大小：原比例 100%；边距：10px | 输出视频：1920×1080，画中画位于左下角，实际显示尺寸 1920×1080，完全覆盖主视频 | 边界：画中画与主视频同尺寸且 100% 缩放，验证是否允许覆盖全部画面，以及边距是否仍生效 |
| 主视频：1920×1080.mp4；画中画：800×600.png（静态图片）；位置：右下角；大小：固定 300×225；边距：30px | 输出视频：1920×1080，画中画位于右下角，实际显示尺寸 300×225，距右边缘 30px、距下边缘 30px | 易错：用户可能以为只能合成视频，实际上支持图片作为画中画，验证静态素材兼容性 |
| 主视频：1920×1080.mp4；画中画：640×480.mp4；位置：左上角；大小：原比例 200%；边距：50px | 输出视频：1920×1080，画中画位于左上角，实际显示尺寸 1280×960，超出主视频右边界和下边界（被裁剪） | 易错：缩放比例超过 100% 时画中画可能超出主视频边界，用户需注意裁剪风险 |
| 主视频：1920×1080.mp4；画中画：640×480.mp4；位置：右下角；大小：原比例 30%；边距：-10px | 输出视频：1920×1080，画中画位于右下角，实际显示尺寸 192×144，距右边缘 -10px、距下边缘 -10px（部分移出画面） | 易错：负边距导致画中画部分移出画面，验证工具是否允许负值以及如何处理超出边界 |
常见错误对照
1.主视频和画中画视频尺寸不匹配，导致黑边或拉伸
✗ 错误
主视频 1920x1080，画中画视频 640x480，直接合成不指定缩放✓ 修复
在合成前将画中画视频缩放至合适尺寸，例如 ffmpeg -i pip.mp4 -vf scale=320:240FFmpeg 默认不自动缩放画中画，尺寸差异会导致黑边或画面变形。需手动用 scale 滤镜统一尺寸后再叠加。
2.画中画位置参数写错坐标系，导致画面超出边界
✗ 错误
overlay=W-w:0（想放在右上角，但写成了右下角）✓ 修复
overlay=W-w:0（正确：W-w 表示水平右对齐，0 表示垂直顶部对齐）FFmpeg overlay 滤镜坐标系：左上角为 (0,0)，W=主视频宽，w=画中画宽。W-w 是右对齐，H-h 是底部对齐。
3.时间轴参数用错，画中画提前或延迟出现
✗ 错误
overlay=0:0:enable='between(t,0,10)'（想让画中画从第 5 秒开始，持续 10 秒）✓ 修复
overlay=0:0:enable='between(t,5,15)'between(t,start,end) 的 start 和 end 是绝对时间点，不是相对时长。第 5 秒开始、持续 10 秒，应写 between(t,5,15)。
4.画中画透明度设置时，忘记启用 alpha 通道支持
✗ 错误
ffmpeg -i main.mp4 -i pip.png -filter_complex overlay=0:0✓ 修复
ffmpeg -i main.mp4 -i pip.png -filter_complex '[1:v]format=rgba,colorchannelmixer=aa=0.5[alpha];[0:v][alpha]overlay=0:0'PNG 自带 alpha，但 FFmpeg 默认用 RGB 格式处理，会丢弃透明通道。需显式指定 format=rgba 并调整 alpha 值。
5.画中画音频未处理，导致双音轨冲突
✗ 错误
ffmpeg -i main.mp4 -i pip.mp4 -filter_complex overlay -c copy output.mp4✓ 修复
ffmpeg -i main.mp4 -i pip.mp4 -filter_complex '[0:a]volume=1.0[a0];[1:a]volume=0.3[a1];[a0][a1]amix=inputs=2:duration=first' -c:v libx264 output.mp4默认 -c copy 会保留两个音轨，播放器可能只播第一个。需用 amix 混合音频，并调整音量比例避免主音被盖过。
6.输出编码参数缺失，导致文件体积过大或兼容性差
✗ 错误
ffmpeg -i main.mp4 -i pip.mp4 -filter_complex overlay output.mkv✓ 修复
ffmpeg -i main.mp4 -i pip.mp4 -filter_complex overlay -c:v libx264 -crf 23 -preset medium -c:a aac -b:a 128k output.mp4不指定编码器时 FFmpeg 会用默认编码（可能为无压缩），导致文件巨大。建议指定 libx264（H.264）和 AAC 音频，保证兼容性。
7.画中画素材时长超过主视频，导致尾部黑屏
✗ 错误
画中画视频 30 秒，主视频 15 秒，合成后后 15 秒只有画中画✓ 修复
使用 shortest=1 参数截断画中画：overlay=0:0:shortest=1overlay 默认以最长输入为输出时长。shortest=1 让输出以主视频时长为准，自动截断画中画尾部。
第三节
工作原理
How It Works核心公式
PIP(x,y) = α·A(x,y) + (1-α)·B(x,y), 其中 α = 1 在子画面区域, 否则 α = 0
变量说明
A(x,y)主画面在像素(x,y)的颜色值B(x,y)子画面在像素(x,y)的颜色值α透明度掩码，子画面区域为1，其余为0x,y像素坐标，从左上角(0,0)开始
示例
主画面 1920×1080，子画面 320×240 置于右下角，偏移量 (1600,840)。对于像素 (1650,900)：该点位于子画面区域（1650≥1600 且 1650<1920，900≥840 且 900<1080），α=1，输出 = 子画面颜色值。对于像素 (100,100)：不在子画面区域，α=0，输出 = 主画面颜色值。最终合成帧中，子画面覆盖区域完全替换为主画面对应区域，其余保留主画面原样。
用户输入
FFmpeg 处理
输出结果
用户控制
第五节
常见问题
Q & A问两个视频分辨率不一样，合成后画面会被拉伸还是裁剪？＋
答
默认按主视频分辨率输出，副视频（画中画）会等比缩放适应你设定的位置区域，不会拉伸变形。如果副视频宽高比与设定区域不匹配，上下或左右会出现黑边。想避免黑边，可以提前把副视频裁剪成相同比例，或者用本工具的「填充」模式（会裁剪画面边缘）。具体效果在预览区可实时看到，调好再下载。
问为什么我上传的视频显示不支持格式？＋
答
本工具基于 FFmpeg 处理，常见格式 MP4、MOV、AVI、MKV、FLV 都支持。如果提示不支持，一般是视频编码太老（如 DivX 3）或容器封装不规范。建议先用格式工厂或 HandBrake 转成 H.264 + AAC 的 MP4（最通用），再上传。另外，部分浏览器对某些格式的预览有限制，但后端处理时仍能正常合成。
问画中画的位置和大小可以精确到像素吗？＋
答
可以。位置参数支持输入具体坐标（如左上角 X:100, Y:200），大小也支持像素值（宽:320, 高:240）。如果不确定像素值，可以先选预设位置（左上/右上/左下/右下/居中），再微调偏移量。注意，坐标原点在主视频的左上角，X 向右为正，Y 向下为正。预览区会实时显示副视频的边框位置。
问两个视频时长不一样，短的播完了画面会卡住还是变黑？＋
答
默认主视频决定总时长，副视频如果比主视频短，播完后最后一帧会静止停留在画中画区域，直到主视频结束。如果想让副视频循环播放，需要先手动把副视频用其他工具延长（如 FFmpeg concat 循环拼接）。本工具暂不支持自动循环选项。如果副视频比主视频长，多余部分会被截掉。
问合成后视频声音怎么处理？两个视频都有声音会重叠吗？＋
答
默认只保留主视频的音频轨道，副视频的音频被丢弃。如果想让两个视频的声音混合，需要在合成前用其他工具提取副视频音频单独调整音量后合并。本工具暂不支持多音轨混音。如果副视频有重要旁白，建议先把副视频音频提取出来，再用剪辑软件叠加到主视频上。
问上传视频有没有大小或时长限制？＋
答
有，取决于浏览器和服务器配置。浏览器端上传单个文件上限通常是 2GB（Chrome/Firefox），但实际受网络影响。服务器端目前限制单视频时长不超过 30 分钟，文件大小不超过 500MB。超过限制会提示错误。如果视频太大，建议先压缩或裁剪成片段再合成。完全在浏览器内处理的版本（WASM）对时长和大小限制更宽松，但处理速度较慢。
问我的视频是竖屏的，画中画能跟着旋转吗？＋
答
可以。在画中画设置里有一个「旋转」参数，支持 0°/90°/180°/270° 旋转副视频。如果主视频是竖屏（如 9:16），副视频也建议旋转 90° 或 270° 来适配竖屏布局。注意，旋转后需要重新调整位置坐标，因为画面宽高会互换。预览区会同步显示旋转效果。
问这个工具和直接用剪辑软件（如剪映/PR）做画中画有什么区别？＋
答
核心区别是操作门槛和速度。本工具无需安装软件、打开工程文件，上传两个视频→调参数→预览→下载，全程 1-3 分钟搞定，适合快速出片。缺点是没有剪辑软件里丰富的转场、关键帧动画、蒙版等高级功能。如果你只需要固定位置、固定大小的画中画（如教学视频放老师头像、直播录屏放摄像头画面），本工具更快。需要复杂动效还是用专业剪辑软件。
问我上传视频到服务器，隐私安全吗？＋
答
上传的视频会暂存在服务器硬盘用于处理，处理完成后系统自动删除原始文件和结果文件，不会保留。服务器位于国内机房，有基本的安全防护。如果对隐私极度敏感（如商业机密视频），建议使用纯浏览器端处理版本（WASM），所有计算在本地完成，不上传任何数据。目前本工具同时提供两种模式，在页面顶部可切换。
隐私保证所有计算与处理均在你的浏览器本地完成，输入数据不会上传服务器，也不会保存或共享。