前端 er 如何玩转音视频流-WebRTC 技术介绍
内容提要
本文介绍了前端开发者使用WebRTC处理音视频流的方法，包括获取用户设备权限、录制和转换音视频、截取视频画面和实现音频可视化。同时讨论了一些问题和解决方案。
延伸解读
WebRTC 的适用场景与限制
文章指出 WebRTC 适合点对点实时音视频传输，如视频会议和直播，但作者的项目因快速落地采用了传统 Ajax 架构，仅用 WebRTC 的 API 实现录音录像。这意味着 WebRTC 并非所有音视频需求的唯一解，需根据项目实时性要求和开发周期权衡。
录制文件时长问题的根源与修复
MediaRecorder 录制的 WebM 文件缺少文件头信息，导致播放时 duration 为 Infinity 且无法倍速。Chromium 官方标记为 wont fix，推荐社区方案。文章介绍了通过修正文件头（如使用 ts-ebml 库）或前端技巧（设置 currentTime 为极大值）来获取准确时长，但后者可能引起进度条跳动。
音频格式转换的实用方案
项目需将 WebM 转为 MP3 以满足第三方接口要求。文章推荐使用 Recorder 库（底层基于 lamejs），并提醒采样率和比特率需与后端对齐。此外，腾讯云实时语音转文字 SDK 内部已实现 WebM 转 PCM，可直接复用其数据，但 PCM 体积大，不适合网络传输。
成熟库与自研的权衡
作者反思，音频领域有 Recorder 库，视频领域有 RecordRTC 库，它们已处理了录制中的常见坑（如时长修复）。自研虽能深入理解原理，但耗时且易踩坑。若项目时间充裕，建议优先评估成熟库，如 RecordRTC 的 getSeekableBlob 方法即基于 ts-ebml 修复时长。
Q&A
WebRTC是什么技术，它的主要用途是什么？
WebRTC是一种实时通讯技术，支持浏览器之间的音视频流传输，主要用于视频会议和视频直播等场景。
如何使用getUserMedia API获取用户的摄像头和麦克风权限？
使用getUserMedia API时，需要配置mediaOption，指定audio和video参数，然后调用navigator.mediaDevices.getUserMedia()来获取权限。
在WebRTC中如何实现视频录制？
视频录制使用MediaRecorder API，创建MediaRecorder对象并传入MediaStream流，调用start()方法开始录制，stop()方法结束录制。
遇到录制视频没有时长的问题该如何解决？
可以通过设置录制文件的currentTime为一个较大的值，触发ontimeupdate事件来获取准确的duration。
如何实现音频可视化效果？
使用Web Audio API创建音频上下文和分析器，通过analyser.getByteFrequencyData()获取频率数据并进行可视化处理。
如何将webm格式的视频转换为mp3格式？
可以使用lamejs库进行转换，创建Recorder对象并指定类型为mp3，调用start()和stop()方法进行录制和转换。
