html5中用mediarecorder实现屏幕加人脸录制，需分别获取屏幕流和摄像头流，再通过addtrack合并轨道；若需画中画效果，须用canvas合成并capturestream；最后用mediarecorder录制合成流。
在HTML5中用MediaRecorder实现屏幕加人脸录制，关键在于同时获取两个媒体流（屏幕共享流 + 摄像头流），再通过MediaStream的addTrack方法合成一个可录制的流。这不是简单调用getDisplayMedia或getUserMedia就能完成的，需要合理处理轨道合并、音视频同步和浏览器兼容性问题。
1. 分别获取屏幕流和摄像头流
必须分开请求，因为getDisplayMedia不支持同时开启摄像头，而getUserMedia无法捕获屏幕：
- 先调用
navigator.mediaDevices.getDisplayMedia({ video: true })获取屏幕流（用户选择窗口/标签页/整个屏幕） - 再调用
navigator.mediaDevices.getUserMedia({ video: true, audio: true })获取本地摄像头+麦克风流 - 注意：Chrome 94+ 支持
getDisplayMedia中传入{ video: { displaySurface: 'browser' } }等参数控制捕获范围；Safari暂不支持getDisplayMedia，需降级提示
2. 合成单一流用于录制
不能直接把两个MediaStream传给MediaRecorder，必须手动合并轨道：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 新建一个空流：
const mergedStream = new MediaStream() - 将屏幕流的视频轨道加入：
screenStream.getVideoTracks().forEach(track => mergedStream.addTrack(track)) - 将摄像头流的视频轨道加入（可选叠加画中画）：
cameraStream.getVideoTracks().forEach(track => mergedStream.addTrack(track)) - 将麦克风音频轨道加入（通常只取摄像头流里的音频）：
cameraStream.getAudioTracks().forEach(track => mergedStream.addTrack(track)) - ⚠️ 注意：若需人脸以画中画形式显示在屏幕右下角，需用
Canvas+drawImage实时合成画面——此时不能靠纯轨道合并，而要创建离屏canvas，用两个<video></video>元素分别播放屏幕和摄像头流，再逐帧绘制合成，最后用canvas.captureStream()生成新流
3. 初始化并启动MediaRecorder
合成流准备好后，即可创建录制器：
- 检查浏览器支持：
if ('MediaRecorder' in window)，并确认MIME类型可用（如MediaRecorder.isTypeSupported('video/webm;codecs=vp9')） - 推荐使用
video/webm;codecs=vp9,opus（兼容性好、支持音视频）或video/mp4;codecs=h264,mp4a.40.2（Safari更友好） - 实例化：
const recorder = new MediaRecorder(mergedStream, { mimeType: 'video/webm;codecs=vp9,opus' }) - 监听
dataavailable事件收集Blob分片，stop后合并为完整文件
4. 处理常见问题与优化建议
网课场景对稳定性、延迟和资源占用敏感，需针对性处理：
-
权限与触发限制：
getDisplayMedia必须由用户手势（如click）触发，不可自动调用；避免在iframe中调用（需allow="display-capture"） -
人脸画中画定位：用CSS定位
<video></video>不可行（无法录制），必须走Canvas合成；建议固定人脸尺寸为200×150px，锚点设在屏幕右下角内边距20px处 -
音频混音风险：若屏幕流含系统声音（Chrome 93+ 支持
{ audio: true }参数），需避免与麦克风音频重复采集，建议仅启用其中一路 -
性能监控：监听
recorder.onwarning和stream.oninactive，当CPU过高导致掉帧时，可动态降低摄像头分辨率（如从1280×720降至640×480）
实际网课录制中，核心难点不在API调用，而在流管理与视觉合成逻辑。只要轨道合并正确、画中画渲染稳定、录制格式适配目标浏览器，就能产出清晰可用的“屏幕+人脸”双视角课程视频。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
