mediastream 生命周期管理需显式启停、及时释放轨道、避免引用滞留，因其绑定硬件资源，不主动清理会持续占用内存和设备权限；获取后须立即用于 video.srcobject、mediarecorder 或 rtcpeerconnection，停止时须调用 stream.gettracks().foreach(track => track.stop())，并在组件卸载时同步清理。
MediaStream 对象的生命周期管理核心在于“显式控制启停、及时释放轨道、避免引用滞留”。它不像普通 JS 对象那样只靠垃圾回收，而是直接绑定底层硬件资源（摄像头、麦克风）和解码上下文，不主动清理就会持续占用内存和设备权限。
创建后必须绑定到媒体元素或录制器
获取 MediaStream 后，若不立即用于 video.srcObject、MediaRecorder 或 RTCPeerConnection，它仍处于活跃状态（active === true），摄像头/麦克风持续工作。常见误区是拿到流后仅做 log 或暂存，却没赋予实际用途。
- ✅ 正确做法：获取流后立刻赋值给
video.srcObject = stream，或传入new MediaRecorder(stream) - ⚠️ 避免：保存 stream 引用却不使用；或仅在 console 中打印后就搁置
停止播放或录制时要逐轨关闭
设 video.srcObject = null 或调用 recorder.stop() 并不能自动停止所有轨道——MediaStream 本身仍存在，其内部的 MediaStreamTrack 可能还在运行。
- 调用
stream.getTracks().forEach(track => track.stop())是最可靠释放方式 - 尤其注意：
track.stop()后，track.readyState变为"ended"，且无法再启用 - 若需临时静音/停画而非彻底关闭，改用
track.enabled = false（轻量级开关，不释放设备）
与组件生命周期严格同步
在 React/Vue 中，MediaStream 常因组件卸载而被遗忘。不能依赖 DOM 移除或 ref 置空自动清理。
- React：在
useEffect或useLayoutEffect的 cleanup 函数中执行stream?.getTracks()?.forEach(t => t.stop()) - Vue：在
onBeforeUnmount中调用stream?.getTracks()?.forEach(t => t.stop())，并确保 stream 引用不被闭包捕获 - 禁止在模板中写
<video :srcobject="stream"></video>而不配对清理逻辑——响应式赋值不会触发自动 stop
复用流时注意约束变更与状态一致性
同一 MediaStream 可被多个 video 元素或录制器共享，但切换设备或调整参数时需谨慎。
- 更换摄像头/麦克风应调用
track.applyConstraints({ deviceId: { exact: "xxx" } })，而非重建整个流 - 若需重采流（如权限变更后），旧流必须先
stop()所有轨道，再调用getUserMedia获取新流 - 检查
stream.active状态：变为false表示所有轨道都已结束，此时可安全丢弃引用
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
