html5与webrtc在视频会议中分工协作：webrtc负责获取、连接、传输，html5负责呈现、控制、增强；getusermedia是媒体流唯一入口，peerconnection管理轨道生命周期，html5标签实现渲染与交互，mediarecorder和audiocontext支持扩展处理。
HTML5 和 WebRTC 在视频会议中不是替代关系，而是分工协作：WebRTC 负责“获取—连接—传输”，HTML5 负责“呈现—控制—增强”。多媒体流处理正是二者交叠最紧密的环节。
媒体流的源头：getUserMedia 是唯一入口
HTML5 本身不提供摄像头/麦克风访问能力，完全依赖 WebRTC 的 navigator.mediaDevices.getUserMedia()。调用后触发浏览器权限弹窗，用户授权才生成可用的 MediaStream 对象——这是整个流程的起点。
- 返回的 stream 可直接赋给
<video></video>的 srcObject 实现本地预览，这一步靠 HTML5 标签完成渲染； - 若需切换摄像头、关闭某路音轨，要用
stream.getVideoTracks()[0].enabled = false等操作，这些方法属于 HTML5 MediaStream 规范，但数据来源全由 WebRTC 提供； - 约束参数（如
{ video: { width: { ideal: 1280 } } }）影响采集质量，但实际分辨率仍受设备和浏览器限制。
流的传输与路由：PeerConnection 管理轨道生命周期
本地流通过 RTCPeerConnection.addTrack() 加入连接，远端流则通过 ontrack 事件接收。每个 MediaStreamTrack（音/视频轨道）在连接中独立存在，可单独启停、替换或监听状态。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 远端视频轨道到达时，会触发
peerConnection.ontrack，从中提取 stream 并赋值给远端<video></video>元素； - 对方关闭摄像头，会触发该轨道的 onended 事件，此时应清理界面（如设
video.srcObject = null）； - 同一连接中可添加多个轨道（如共享屏幕+摄像头），PeerConnection 自动复用底层传输通道，无需额外建连。
流的呈现与交互：HTML5 标签是最终出口
WebRTC 不负责画面绘制和声音播放，所有渲染均由 HTML5 原生元素承担：<video></video> 解码并显示 MediaStream，<audio></audio> 播放音频流，且支持标准控制接口。
-
video.play()/video.muted = true/video.volume = 0.7都是 HTML5 媒体 API，无需 WebRTC 封装； - 结合
<canvas></canvas>可对视频帧做实时处理：用ctx.drawImage(videoEl, 0, 0)捕获当前画面，实现美颜、遮挡、贴纸等效果； - 监听
video.onloadedmetadata或video.onplaying可判断是否成功开始渲染，避免黑屏或静音提示延迟。
流的扩展处理：MediaRecorder 与 AudioContext 补充能力
除主通话流外，HTML5 提供的配套 API 能拓展会议功能，且都基于同一 MediaStream 对象。
- MediaRecorder 可录制本地或远端流为 WebM 或 MP4 文件，用于回放或存档；
- AudioContext + createMediaStreamSource() 支持音量可视化、噪声检测、语音活动判断（VAD），甚至对接 WebAssembly 实现轻量降噪；
- 录制或分析前无需重新采集，直接传入已有的 stream 即可，复用性强、开销低。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
