在线教育的 Web 音视频架构方案.pptx

1、在线教育的视频架构录1. 直播、点播发展现状2. 在线教育的业务形态和视频实践3. 监控体系1. 直播、点播发展现状Macromedia 公司Netscape Navigator 2.0Macromedia Director 导出在 web 播放FutureWave 被 Macromedia 收购Shockwave PlayerFutureSplash PlayerFlashWHATWG & W3CiPhone1996 年底1995199620062007FutureWave 公司Web 超文本技术应用工作组万维网联盟微软、迪士尼选择的 web 动画方案FutureSplash Animato

2、r 导出在 web 播放一个新版本的 HTMLutureWave 被 Macromedia 收购移动端时代到来FlashWHATWG & W3CiPhoneAndroid1.0HLS1996 年底2006200720082009Web 超文本技术应用工作组万维网联盟苹果案播放一个新版本的 HTML动端时代到来neAndroid1.0HLSThought of flashHTML5推荐标准webRTC 标准草案20082009201020142017苹果乔布斯video 标签MSE微软、YouTube、google 靠齐2. 在线教育的业务形态腾讯课堂的业务形态PC Web移动WebiOS/An

3、droid Appwindows/mac客户端服务集群程序windows/mac客户端学师Server2.1 点播腾讯课堂的业务形态PC Web移动WebiOS/Android Appwindows/mac客户端服务集群程序windows/mac客户端学师Server点播师学Serverm3u8普通播放器HLSts上传转码flvHTTP-FLV机构B侧接机学端拉数据学端CDNMP4 HLSMP4 机构反馈盗播严重法律手段技术手段HLSDASHHLS 防盗链HLS 加密HLS 加密EXT-X-KEY加密转码上传户加密前件加密后件点播4. 获取解密密钥5. 获取解密密钥鉴权与密钥派发1. 登陆并派

4、发登陆态信息业务后台登陆服务KMS1.发起视频加密2.获取解密密钥播放终端4.加密完成回调2. 获取播放地址多媒体转码播放服务3.加密转码上传回源3. 获取视频业务前端加密前件加密后件CDN？鉴权信息解密密钥业务后台播放终端鉴权信息解密密钥业务后台播放终端方案一： Cookie鉴权信息解密密钥业务后台播放终端Cookie 可能存在问题？Cookie 可能存在问题？多窗口容易串付费免费type = 1type = 2cookie鉴权信息解密密钥业务后台播放终端EXT-X-KEYAndroid 平台的 H5 播放器在访问 EXT-X-KEY 标签所标识的 URL 时不会携带 Cookie鉴权信息解

5、密密钥业务后台播放终端方案二： EXT-X-KEY 标签所标识的 URL 携带鉴权信息鉴权信息解密密钥业务后台播放终端EXT-X-KEYURI=“https:/ 直播腾讯课堂的业务形态webRTC + HLSPC Web移动WebiOS/Android Appwindows/mac客户端服务集群程序windows/mac客户端学师Server师Server学m3u8videoaudioH264AAC转码普通播放器HLSUDP 私有协议ts旁路推流webRTC播放器flvHTTP-FLV师端师端推流接机学端拉流学端CDNWebRTCRelay 机WebRTC 怎么实现多场景？万人课堂P2P 应用

6、到实际业务中的可行性实现多场景学师学学问题：师学P2P直连,带宽占实现多场景学师学学问题：学相互直连,延迟实现多场景Relay Server师学学学案：MCU/SFU 结构实现多场景Relay ServerNAT师信令服务器 Signal学问题：需要 STUN 和 TURN 协助“打洞”实现多场景Relay Server师信令服务器 Signal学案：Relay 机采公 IP，简化连接过程实现多场景公IPRelay Server内wss师信令服务器 Signal学WSS + DTLS 保证内容安全下如何播放多路流？下如何播放多路流？下如何播放多路流？主路视频师频辅路视频下如何播放多路流？上端主

7、辅路流下发1 =f(n)= ssrcidA2 =f(n)= ssrcidB7 =f(n)= ssrcidC频主辅路成对应SSRC主路视频辅路视频Relay主辅路分别成对应的SSRC浏览器端下如何播放多路流？上端主辅路流下发主辅路成对应SSRCRelay组装 track成 SDP信令server下发组装多个track浏览器端成新的sdp，通知下发下如何播放多路流？信令 server 下发Answer SDPssrcidA(频): trackidAssrcidB(主路): trackidBssrcidC(辅路): trackidC（ 1: 频 = f(n) = ssrcidA) trackid下如

8、何播放多路流？信令 server 下发Answer SDPPeerConnection.ontrack(trackidA, streamA)ssrcidA(频): trackidA触发ssrcidB(主路): trackidBssrcidC(辅路): trackidC（ 1: 频 = f(n) = ssrcidA) trackid streamA下如何播放多路流？信令 server 下发Answer SDPPeerConnection.ontrack(trackidA, streamA)ssrcidA(频): trackidA触发audio/videossrcidB(主路): trackidB

9、ssrcidC(辅路): trackidC绑定（ 1: 频 = f(n) = ssrcidA) trackid streamA = audio A 频下如何播放多路流？上端主辅路流下发主辅路成对应SSRC组成相应的 RTP/RTCPRelay组装 track RTP/RTCP组包浏览器底层解包，喂对应的流到 audio/video成 SDP信令server下发ICE通道复视频流下发浏览器端a.接机列表师端b. 推流旁路推流接机策略 Serverrelay 机3.鉴权通过获取 relay机HLS6. 转发 offer/candidate7. relay 回包 answer信令 Server直播

10、CDN2. 鉴权 UserSig5. offer/candidate8. 转发candidate业务 Server9. media1. 获取 UserSig4. 获取 candidateHLS 播放器WebRTC 播放器stun坑坑洼洼弹出摄像头提示MediaDevices.getUserMedia()特定 android 机器mediaDevice.enumerateDevices()多画全屏的兼容webkitEnterFullscreenwebkitRequestFullScreen单路视频流全屏系统全屏全屏兼容多画全屏的兼容多路视频流videoPCdiv 系统全屏videoH5主 vid

11、eo 系统全屏div 网页全屏divSafari 12.1.1 有声没画Safari 12.1.1 有声没画Unified-PlanSafari 12.1.1 有声没画Plan-b一个m行下可以放多路流Unified-Plan一个m行描述一路流，多路流使用多个m行描述Safari 12.1.1 有声没画Plan-bSafari 12.1.1 有声没画Unified-Plan2.3 PPT 信令化直播信令化师频视频流师学直播信令化摄像头PPT视频流师学PPT 不够清晰PPT 画面大变化小，视频传输带宽占用高直播信令化本地观看视频流师学直播信令化PPT 怎么放到本地网页上？老师操作怎么同步到 PP

12、T？本地观看音视频流和 PPT 的同步问题？视频流师学PPT 怎么放到本地网页上？转换PPTH5转换方案转换技术缺点优点Office官转换微云转换存在Microsoft商标 可定制性差不持动画，还原度低还原度差，扩展性不好需要部署服务还原度有服务、简单易简单易、需部署服务最牌具，兼容性强，便定制PPT匠/微演iSpringPPT 怎么放到本地网页上？腾讯云存储业务服务器2. 请求转换 PPT 件查询转换任务3. 查询转换任务iSpring师老师操作怎么同步到 PPT？SSO 传输信令websocket 传输信令师信令服务器学操作 - 信令音视频流和 PPT 的同步问题？时间同步？ RTP ti

13、mestamp？视频流SSO 传输信令websocket 传输信令师信令服务器学操作 - 信令RTP timestamp回放信令化HLS视频流时间同步学业务服务器回放信令化启动视频流定时器执当前信令，对下个信令Y1 2 3videoElement.currentTime = singal.time信令队列3. 监控体系从架构到业务户A：我打开很慢户B：我感觉很卡户C：我屏了监控体系上下行统计avmonitor日报输出罗盘上报量统计(告警）monitorbadjsJS 异常上下监控avmonitor罗盘上报monitorbadjs报输出avmonitor罗盘上报monitorbadjs量统计&告警avmonitor罗盘上报monitorbadjsJS 异常avmonitor罗盘上报monitorbadjs监控体系3告警问题快速排查？avmonitor罗盘上报12monitorbadjs监控体系观察音视频长期的总体情况？avmonitor1罗盘上报monitorbadjs总结1. 直播、点播发展现状2. 在线教育的点播、直播案（点播 HLS， 直播 webRTC + HLS）3. HLS 整体的加密案，以及两种传递鉴权态的思路4. webRTC 多场景案，多路流案以及实际开发中遇到的坑5. PPT 信令化的思路6. 监控体系的设计思路