疫情之下在线教育音视频技术的实践与挑战

1. 疫情之下在线教育音视频技术的实践与挑战陈俊文 Javen 腾讯高级前端工程师

2.

3. 陈俊文腾讯前端高级工程师，IMWeb 团队成员。负责腾讯课堂、企鹅辅导Web前端音视频开发以及在线教育Web音视频技术的整体架构。对前端WebRTC和音视频等技术，有较丰富的实践经验。

4. • 在线课堂直播低延迟大并发的技术选型 • Web 播放器与学生视频连⻨ • 在线课堂质量监控定位 • Web音视频未来探索方向

5. 1、在线课堂直播低延迟大并发的技术选型 1.1 在线教育的业务场景介绍 1.2 传统直播到互动 WebRTC 直播 1.3 结合 WebRTC-CDN 的大并发低延迟直播方案

6. 在线教育的业务场景介绍远程会议直播带货在线教育

7. 在线教育的业务场景介绍摄像头 Video ⻨克⻛ Audio 低延时 PPT/桌面分享 Video 多路流摄像头 Video ⻨克⻛ Audio 可互动老师低延迟<300ms 学生高并发

8. Web浏览器音视频应用有哪些技术方案？ 1、基于浏览器插件的flash播放RTMP 2、跨平台的HLS/DASH 播放方案 3、基于HTML5 MSE 能力的flv播放技术 4、WebRTC实时通讯技术

9. 跨平台的HLS/DASH 播放方案

10. 跨基于HTML5 Video和Audio的MSE方案 flv.js http-flv

11. 基于WebRTC的低延时通讯方案硬件音视频采集音视频处理引擎低延时P2P传输安全协议

12. 传统直播到互动 WebRTC 直播插件化基于flash 插件 RTMP 和 FLV × 即将淘汰跨平台HLS \ DASH方案 apple/X5原生 MSE支持基于HTML5 MSE flv方案 MSE支持移动端 × 基于wasm+ﬀmpeg +WebGL方案 Wasm支持性能瓶颈 WebRTC方案较高版本浏览器复杂度 TCP/ http短连接 TCP/ http⻓连接 TCP/ http UDP/ RTP RTCP传输延迟10-30秒延迟几秒延迟几秒延迟百毫秒内支持性好： PC浏览器直播几乎所有浏览器自适应码流格式简单轻量连续流较低延时 ※传统直播特殊解码场景低延迟直播如H265 视频会议 ※RTC实时音视频

13. 传统直播到互动 WebRTC 直播插件化跨平台HLS \ DASH方案基于HTML5 MSE flv方案基于wasm+ﬀmpeg +WebGL方案 WebRTC方案基于flash 插件 RTMP 和 FLV 在线教育 × 即将淘汰赛事直播大型会议直播远程会议 ※传统直播 ※RTC实时音视频

14. 传统直播到互动 WebRTC 直播老师学生音视频服务互动直播低延时 Win 腾讯云 TRTC 可互动、上下行房间系统 CDN直播 Mac Web IOS 标准稳定的腾讯云云直播直播接入与CDN分发 win/mac H5 Android 小程序

15. TRTC实时音视频服务老师上行接口机 RT CP 旁路推流 ee 摄像头video 云直播 rC on ne ct io n FLV/ HLS/ RTMP ⻨克⻛audio CDN ① 混流引入延时分享屏幕video WebRTC 基于UDP传输，低延时 WebRTC server ②CDN的TCP传输、GOP 播放buffer、HLS切片

16. 如何兼得？ WebRTC FLV HLS HLS 低延迟高并发价格高、容量有限、可互动上行价格低、延迟较高，不可上行

17. 腾讯云TRTC 老师上行接口机 CDN下行如果使用WebRTC？ R T CP 旁路推流 ee 摄像头video 腾讯云云直播⻨克⻛audio WebRTC 基于UDP传输，低延时 webrtc server rC on ne WebRTC -CDN 快直播延迟<1s n FLV/ WebRTC HLS/ RTMP CDN WebRTC webrtc server 分享屏幕video ct io

18. 结合 WebRTC-CDN 的大并发低延迟直播方案 TRTC hls 云直播CDN 房间管理信令服务流控调度老师 flv src 媒体服务 signal media SRTP SRTCP rtmp webrtc OC WebRTC Client signal <-http请求 offer http请求 answer-> WebRTC Client DTLS DTLS oc 老师 …. websocket建连用户进房远端流通知订阅/发布 offer/answer协商成员列表信令心跳..... mid media SRTP SRTCP

19. 结合 WebRTC-CDN 的大并发低延迟直播方案 TRTC hls 云直播CDN 房间管理信令服务流控调度老师 flv src 媒体服务 oc webrtc RTC 直播 websocket建连用户进房远端流通知订阅/发布应用id:1234 offer/answer协商用户id: user01 房间id: 成员列表心跳信令..... 可以上下行，连⻨活动 OC 房间内的用户/⻆色 WebRTC-CDN <-http请求 offer 面向“直播流” 1001 WebRTC Client http请求 answer-> signal webrtc://ke.qq.com/live/{streamId_xxx} WebRTC 纯直播观看 Client DTLS DTLS media 功能强大，复杂的信令 SRTP SRTCP rtmp 老师 …. signal mid 考虑单房间上限、成本相对高 SRTP media 轻量的信令协议和流程 SRTCP 业务方不考虑并发上限、成本相对低

20. 结合 WebRTC-CDN 的大并发低延迟直播方案超容量及兼容异常降级百万同时在线 WebRTC-CDN 快直播优先用于连⻨上行承载大量主要低延迟直播 CDN直播 RTC 互动直播百万级PCU的web直播策略：按并发和场景去切不同直播类型

21. 结合 WebRTC-CDN 的大并发低延迟直播方案海量瞬间新进入直播的学生心跳上报 WebRTC快直播 WebRTC快直播 WebRTC快直播 WebRTC互动业务流量控制 1、通过心跳上报，统计不同类型直播的平台的实时并发流量。 2、根据在线并发量，响应新进房学生应该切到哪种直播方式。 WebRTC互动 CDN直播 CDN直播 WebRTC互动 CDN直播业务实现流信令通知 1、非静态直播, 有流的切换操作。 2、由业务实现流更新后多端信令通知。 TRTC 老师端学生端业务后台

22. 2、Web播放器与学生视频连⻨ 2.1 构建Web音视频应用的整体架构 2.2 支持多模式的Web播放器设计思路 2.3 Web视频连⻨的落地

23. 构建Web音视频应用的整体架构业务层 UI交互应用业务消息通道视频交互应用播放插件统一上报信令白板多人视频连⻨滤镜插件网络检测多路视频管理播放器中心播放器核心 Web API 插件系统

24. 构建Web音视频应用的整体架构业务层上层应用定制化 UI交互应用业务消息通道视频交互应用功能测试播放插件统一上报滤镜插件信令白板网络检测多人视频连⻨多路视频管理集成测试播放器事件中心播放器核心底层接口通用兼容 Web API 插件系统单元测试

25. 支持多模式的Web播放器设计思路为什么要自己做播放器？ flv.js video.js meidaelement.js hls.js 单路视频 => 多路视频怎么联动控制？大而全的能力 & 拓展定制化怎么权衡？如何多种播放模式，降级切换….

26. 支持多模式的Web播放器设计思路单一视频老师PPT + 摄像头视频多人视频互动

27. 支持多模式的Web播放器设计思路连⻨主播观众连⻨观众观众观众观众观众观众主播观众传统直播： RTC直播场景：观众观看的直播结构，⻆色固定所有人在音视频房间内是平等的，身份非固定

28. 支持多模式的Web播放器设计思路 ARMPlayer 统一抹平的API/ 事件 / 属性 +组件工具函数(插件使用) Plugins Manager 插件管理架构设计插件机制 & 播放引擎扩展 Events Manager 事件中心 PlayerCore 播放核心控件组件媒体组件 H5Video 视频组件 <video/> H5Audio 音频组件 <audio/> volume音量 fullscreen button按钮 loading ……. Component基类 Web API统一兼容封装

29. 支持多模式的Web播放器设计思路架构设计多人连⻨插件信令化白板插件滤镜插件多实例调度播放降级流量控制网络监测监控上报性能检测 arm-webrtc arm-hls arm-flv 插件机制 & 播放引擎扩展 ARMPlayer 统一抹平的API/ 事件 / 属性 +组件工具函数(插件使用) Plugins Manager 插件管理 Events Manager 事件中心 PlayerCore 播放核心

30. Web视频连⻨的落地业务层 UI交互应用业务消息通道视频交互应用播放插件监控上报信令白板多人视频连⻨滤镜插件网络检测多路视频管理视频连⻨应用播放器事件中心播放器核心插件系统以播放器为基础 Web API 上行 WebRTC 下 WebRTC

31. Web视频连⻨的落地 1. 网络质量检测通话前通过预上行发起检测，保证上课网络。轮询检测下行质量状态，网络差时，给予用户提示。 WebRTC API：丢包率 [packetsLost]、RTT [currentRoundTripTime] 2. 码率调整非主播上行用户，适当选用低分辨率。 [applyConstraints] 网络检测差时，sender.setParameters调整maxBitrate。

32. Web视频连⻨的落地检测未找到⻨克⻛ 3. 设备测试与监听测试能否获取设备，根据捕获错误提示。[geusermedia Error] 判断是否当前正在使用的设备被拔出、若插入了新的可用的媒体设备，尝试自动恢复采集并推流。[devicechange] 4. 音量获取与静音策略 WebAudio动态计算获取音量大小，渲染展示每个用户音量 [audioContext] 本地流静音 removeTrack 和 muteAudio信令通知。远端流静音，先立即mute本地mediaElement，然后异步延时取消订阅。

33. 3、在线课堂质量监控定位 3.1 Web前端直播质量评估 3.2 上课业务结合音视频一站式监控定位

34. 在线课堂的质量从哪些方面衡量？业务交互相关消息通道连接-成功率音视频相关进房成功率/开播成功率消息通道消息-到达率直播首帧耗时、进度seek耗时发题到达率、学生答题率。。。。卡顿率、帧率、码率、丢包率。。。。

35. 痛点：用户老师/学生反馈 top 问题归因分类网络问题设备问题操作问题课件问题软件问题无效问题

36. 集体反馈 / 个例反馈分析发送端分析接收端

37. 端上采集监控的指标体系播放前请求鉴权成功率下行音频码率请求流地址成功率下行视频码率请求鉴权成耗时下行音频(xxx ms)卡顿率请求流地址耗时下行音频(xxx ms)卡顿率流地址状态请求成功率播放开始下行视频丢帧率请求状态码上行音频码率达标率进房耗时上行视频码率达标率进房成功率上行视频帧率达标率协商失败率网络丢包率 ICE连接耗时网络延时(<=xxxms)达标率 ICE失败率播放过程播放过程网络与设备应用内存首帧平均耗时-开始进房间系统CPU 首帧平均耗时-切换房间应用 CPU 开播成功率播放时⻓/视频总时⻓占比首次（预）缓冲时间首次（预）缓冲⻓度二次缓冲等待时间视频播放数据上课视频完播率播放平均/最低帧率播放平均/最低码率

38. 1.开播成功率鉴权失败 Sig接口耗时 2. 首帧耗时 ws断开与重连 sdp协商失败进房耗时 ws连接耗时协商耗时 ice fail ICE收集及连接耗时 dk解密失败媒体帧数据到达耗时渲染播放直播首开各阶段耗时文件接口耗时 masterList耗时 levelList耗时密钥请求分片ts加载耗时点播首开各阶段耗时 3. 卡顿率解码失败卡顿时⻓1 …… 卡顿时⻓n 卡顿率=卡顿时⻓/播放时⻓ ①bufferstall计时 ②interframeDealy(帧间延迟)耗时> x 00ms计时解密解码播放渲染播放

39. 基于端上的能力如何采集与监控？ CDN直播：Http-flv 和 HLS 1. 2. 3. 4. 首帧耗时（开始拉流→首帧加载）下载速度 / 码率 buffer剩余帧 getVideoPlaybackQuality

40. 基于端上的能力如何采集与监控？ WebRTC直播 1. 基于事件首帧耗时（进房/创建RTCPeerConnection →首帧加载） RTCPeerconnection 断开/重连，信令Websocket 断开/重连 2. getStats API framesDecoded 、 totalInterFrameDelay 监控计算帧率及卡顿率 bytesReceived 、 bytesSent 用于计算码率 currentRoundTripTime 动态RTT时⻓ packetsLost 、packetsReceived 监控丢包情况

41. 基于端上的能力如何去监控？日志上报质量数据获取监控上报统计上报用户日志排查监控告警（大盘/房间）每日质量指标邮件

42. 上课业务结合音视频一站式监控定位是否已经足够好用了呢？场景1：来自多方的日志系统（业务前端及后台，SDK与云侧监控）, 需要开发同学往返排查，不好用。场景2: 想输入（课程id 、用户id…）直接看到上课时间线发了什么，及问题时间点和版本设备情况等。场景3：除音视频外，结合业务（聊天内容、互动答题率等）主动感知，得出分析结论，生成一节课的质量报告。场景4：除了开发，客服/运营/产品也能使用。

43. 上课业务结合音视频一站式监控定位课程业务信息设备版本 IP地域 1. 底层数据来源跨多系统查询，一键输入信息定位。 2. 业务流与音视频上的事件/指标，时间线归因分析。 3. 面向业务+音视频链路节点串联，全链路可视化。音视频、网络质量 4. 主动感知与关联告警，直接生成课程质量报告。异常时间点聊天互动异常反馈

44. 上课业务结合音视频一站式监控定位 1. 底层数据来源跨多系统查询，一键输入信息定位。 2. 业务流与音视频上的事件/指标，时间线归因分析。 3. 面向业务+音视频链路节点串联，全链路可视化。 4. 主动感知与关联告警，直接生成课程质量报告。

45. 4、Web音视频未来的探索方向 4.1 最新浏览器 RTC 能力的关注展望 4.2 WebCodec 和 WebTransport 探索

46. 最新浏览器 RTC 能力的关注展望 WebRTC & AV1 codec chrome 90 beta 对AV1支持

47. 最新浏览器 RTC 能力的关注展望 WebRTC Encoded Transform 帧级别的信息同步提供了让用户操作WebRTC编码后/解码前数据的能力使用场景上课白板信令同步计算端到端的延迟端上统计全链路的延迟自定义的输入和渲染视频美颜滤镜

48. WebTransport 和 WebCodec 探索低延迟web端直播基于HTTP3实现的API，提供支持不可靠UDP传输 Web端上视频制作远程桌面控制定制化RTC的能力提供浏览器的encode/decode能力

49. 总结： 1、介绍在线教育场景中及Web直播方案如何选型。 2、WebRTC-CDN 方案与其他方案融合，应对大流量在线互动直播。 3、构建以播放器为基础的音视频应用架构，落地Web视频连⻨的细节。 4、前端如何检测播放质量，搭建一站式定位工具和监控体系的思路。 5、浏览器WebRTC未来的能力及有哪些应用可以探索。不久将来，我们将习惯于分享链接，在网⻚中去学习、开会、游戏….

50.

51. 扫码关注IMWeb微信公众号工作机会与我交流

52. 疫情之下在线教育音视频技术的实践与挑战扫描二维码提交议题反馈