Web直播,你需要先知道这些

一、直播知识小科普

  1. 一个典型的直播流程:录制->编码->网络传输(推流->服务器处理->CDN分发)->解码->播放
  2. IPB:一种常用的视频压缩方案,用I帧表示关键帧,B帧表示前向差别帧,P帧表示双向差别帧
  3. GOP (Group of Pictures):GOP 越长(I帧之间的间隔越大),B 帧所占比例越高,编码的率失真性能越高。虽然B帧压缩率高,但解码时CPU压力会更大。
  4. 音视频直播质量好坏的主要指标: 内容延时 、 卡顿(流畅度) 、 首帧时长
  5. 音视频直播需要克服的主要问题:网络环境、多人连麦、主辅路、浏览器兼容性、CDN支持等
  6. MSE (Media Source Extensions):W3C 标准API,解决 HTML5 的流问题(HTML5 原生仅支持播放 mp4/webm 非流格式,不支持 FLV),允许JavaScript动态构建 <video> 和 <audio>的媒体流。可以用MediaSource.isTypeSupported() 判断是否支持某种MINE类型。在ios Safari中不支持。

(此图片来源于网络,如有侵权,请联系删除! )

  1. 文件格式/封装格式/容器格式 :一种承载视频的格式,比如flv、avi、mpg、vob、mov、mp4等。而视频是用什么方式进行编解码的,则与Codec相关。举个栗子,MP4格式根据编解码的不同,又分为nMP4、fMP4。nMP4是由嵌套的Boxes 组成,fMP4格式则是由一系列的片段组成,因此只有后者不需要加载整个文件进行播放。
  2. Codec :多媒体数字信号编码解码器,能够对音视频进行压缩(CO)与解压缩( DEC ) 。CODEC技术能有效减少数字存储占用的空间,在计算机系统中,使用硬件完成CODEC可以节省CPU的资源,提高系统的运行效率。
  3. 常用视频编码 :MPEG、H264、RealVideo、WMV、QuickTime。。。
  4. 常用音频编码 :PCM、WAV、OGG、APE、AAC、MP3、Vorbis、Opus。。。

二、现有方案比较

RTMP协议

  1. 基于TCP
  2. adobe垄断,国内支持度高
  3. 浏览器端依赖Flash进行播放
  4. 2~5秒的延迟

RTP协议

  1. Real-time Transpo

    rt P

    rotocol,IETF于1996提出的一个标准

  2. 基于UDP
  3. 实时性强
  4. 用于视频监控、视频会议、IP电话
  5. CDN厂商、浏览器不支持

HLS 协议

  1. Http Live Streaming,苹果提出的基于HTTP的流媒体传输协议
  2. HTML5直接支持(video),适合APP直播,PC断只有Safari、Edge支持
  3. 必须是H264+AAC编码
  4. 因为传输的是切割后的音视频片段,导致内容延时较大

    (此图片来源于网络,如有侵权,请联系删除! )

flv.js

  1. Bilibli开源,解析flv数据,通过MSE封装成fMP4喂给video标签
  2. 编码为H264+AAC
  3. 使用HTTP的流式IO(fetch或stream)或WebSocket协议流式的传输媒体内容
  4. 2~5秒的延迟,首帧比RTMP更快

WebRTC协议

(此图片来源于网络,如有侵权,请联系删除! )

1、Google力推,已成为W3C标准

2、现代浏览器支持趋势,X5也支持(微信、QQ)

(此图片来源于网络,如有侵权,请联系删除! )

3、基于UDP,低延迟,弱网抗性强,比flv.js更有优势

(此图片来源于网络,如有侵权,请联系删除! )

4、支持Web上行能力

5、编码为H264+OPUS

6、提供NAT穿透技术(ICE)

实际情况下,当用户数量很大时,对推流设备的性能要求很高,复杂的权限管理也难以实现,采用P2P的架构基本不可行。对于个别用户提供上行流、海量用户只进行拉流的场景,腾讯课堂实现了一种P2S的解决方案。 进一步学习可阅读jaychen的系列文章《WebRTC直播技术》。

(此图片来源于网络,如有侵权,请联系删除! )

三、小程序+直播

技术方案

  1. 基于RTMP,官方说底层使用HTTP/2的一种内部传输机制,但又说是基于UDP的,这就搞不懂了。。。
  2. live-pusher 和 live-player 没有限制第三方云服务
  3. 可直接使用腾讯云视频直播能力,只需配置好推流url、播放url即可

推流url:

(此图片来源于网络,如有侵权,请联系删除! )

播放url:

(此图片来源于网络,如有侵权,请联系删除! )

下面是我根据官网教程搭建的一个音视频小程序,搭建过程简单,同一个局域网下直播体验也很流畅(读者也可直接搜索 腾讯视频云 小程序进行体验):

(此图片来源于网络,如有侵权,请联系删除! )

前端核心代码还是相当简洁的:

  • live-pusher组件:设置好url推流地址(仅支持 flv, rtmp 格式)等参数即可,使用bindstatechange获取播放状态变化

    
    复制代码
    <view id='video-box'>  
        <live-pusher
              id="pusher"
              mode="RTC"
              url="{{pusher.push_url}}" 
              autopush='true'
              bindstatechange="onPush">
        </live-pusher>  
     </view>
  • live-player组件:设置后src音视频地址(仅支持 flv, rtmp 格式)等参数即可,使用bindstatechange获取播放状态变化

    
    <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端拉流,那么在移动端能否让用户可以直接通过小程序来观看直播课呢?我觉得在技术层面可行的,接入小程序直播对于扩大平台影响力、社交圈分享、提高收费转化都会产生很大的帮助。难点在于复杂的权限控制、多路音视频流、多人连麦等问题,比如权限控制只能单独放到房间控制逻辑中完成,而音视频流本身缺乏这种校验;主辅路的切换还需要添加单独的信令控制,同时在小程序中加入相应的判断逻辑。

免责声明:本站所有文章和图片均来自用户分享和网络收集,文章和图片版权归原作者及原出处所有,仅供学习与参考,请勿用于商业用途,如果损害了您的权利,请联系网站客服处理。

【小程序源码网资源版权风险说明】:
本站为避免不必要的纷争,分享的所有资源中一切可能有版权风险的资源将全部转载自第三方网站或平台,站长只为大家提供相关资源的介绍和跳转引导。 因可能有疏忽大意,所以如有遗漏资源侵犯了您的合法权利,请联系站长删除。
【小程序源码网资源下载使用说明】:
本站所分享的一切QQ小程序源码,thinkphp整站源码,微信小程序源码,图文教程等资源仅供用户学习参考使用,任何人不得作其他用途,违者自行承担所有责任。
【小程序源码网毫无人看的介绍】:
本站又称Z站,原名贼娘网,开站于2018年,换过三任站长,目前站长是第四任站长,本站是一个主要分享免费开源小程序源码/网站源码/免费素材/教程资源的网站,主要小程序资源有用于学习的小程序源码,也有正版原创可商用的小程序源码,是一个公益博客型网站。
【小程序源码网原创源码版权申明】:
未经小程序源码网许可,任何人不得擅自使用本站原创首发源码进行商业行为(除本站VIP用户在期限内,版权无使用限制),否则将依法承担相应赔偿责任。
【小程序源码网转载文章版权申明】:
本站所转载的QQ小程序或微信小程序源码与其他资源仅供学习,任何人不得作其他用途,违者自行承担所有责任。
【小程序源码网站长最后的屁话】:
如有您认为本站有任何侵犯您合法权益的文章,或者您有什么疑问需求,欢迎联系站长QQ,站长24小时在线,备注公司名称和源码版权问题或者需要小程序定制开发等站长业务类型可急速处理,如果您只是交流小程序的一些开发问题或源码问题可以加入QQ群讨论,就不用加站长啦,对于白嫖党,QQ群才是处理问题的天堂,当然站长也欢迎大家骚扰~
小程序源码网 » Web直播,你需要先知道这些
嘿,投喂下嘛!