本文由 IMWeb 团队成员 万宽红Terrancewan 首发于社区网站 imweb.io。点击阅读原文查看 IMWeb 社区更多精彩文章。
前段时间接触了一些音视频、web直播相关的东西,加上Flash的即将终结、WebRTCd的兴起、小程序的流行,这里总结了一点个人学习收获和大家分享。
<video>
和 <audio>
的媒体流。可以用MediaSource.isTypeSupported() 判断是否支持某种MINE类型。在ios Safari中不支持。1、Google力推,已成为W3C标准
2、现代浏览器支持趋势,X5也支持(微信、QQ)
3、基于UDP,低延迟,弱网抗性强,比flv.js更有优势
方案 | CPU占用 | 帧率 | 码率 | 延时 | 首帧 |
---|---|---|---|---|---|
flv.js | 0.4 | 30 | 700kbit/s | 1.5s | 2s |
WebRTC | 1.9 | 30 | 700kbit/s | 0.7s | 1.5s |
4、支持Web上行能力
5、编码为H264+OPUS
6、提供NAT穿透技术(ICE)
实际情况下,当用户数量很大时,对推流设备的性能要求很高,复杂的权限管理也难以实现,采用P2P的架构基本不可行。对于个别用户提供上行流、海量用户只进行拉流的场景,腾讯课堂实现了一种P2S的解决方案。进一步学习可阅读jaychen的系列文章《WebRTC直播技术》。
推流url:
播放url:
下面是我根据官网教程搭建的一个音视频小程序,搭建过程简单,同一个局域网下直播体验也很流畅(读者也可直接搜索腾讯视频云小程序进行体验):
前端核心代码还是相当简洁的:
<view
id='video-box'>
<live-pusher
id="pusher"
mode="RTC"
url="{{pusher.push_url}}"
autopush='true'
bindstatechange="onPush">
</live-pusher>
</view>
<view
id='video-box'>
<live-player
wx:for="{{player}}"
id="player_{{index}}"
mode="RTC"
object-fit="fillCrop"
src="{{item.playUrl}}"
autoplay='true'
bindstatechange="onPlay">
</live-player>
</view>
能否和WebRTC同时使用?
对于腾讯课堂的应用场景,老师上课推流采用的是RTMP协议,考虑到WebRTC目前只能用于PC端拉流,那么在移动端能否让用户可以直接通过小程序来观看直播课呢?我觉得在技术层面可行的,接入小程序直播对于扩大平台影响力、社交圈分享、提高收费转化都会产生很大的帮助。难点在于复杂的权限控制、多路音视频流、多人连麦等问题,比如权限控制只能单独放到房间控制逻辑中完成,而音视频流本身缺乏这种校验;主辅路的切换还需要添加单独的信令控制,同时在小程序中加入相应的判断逻辑。