H5直播总结

1,343 阅读12分钟

直播流程

直播流程大致分为:

  • 录制端:一般是电脑上的音视频输入设备或者手机端的摄像头或者麦克风,目前以移动端的手机视频为主。
  • 播放端:可以是电脑上的播放器,手机端的 native 播放器,还有就是 h5 的 video 标签等,目前还是已手机端的 native 播放器为主。
  • 视频服务器端:一般是一台 nginx 服务器,用来接受视频录制端提供的视频源,同时提供给视频播放端流服务。

音视频采集

当首先明确几个概念:

视频编码:所谓视频编码就是指通过特定的压缩技术,将某个视频格式的文件转换成另一种视频格式文件的方式,我们使用的 iphone 录制的视频,必须要经过编码,上传,解码,才能真正的在用户端的播放器里播放。

编解码标准:视频流传输中最为重要的编解码标准有国际电联的H.261、H.263、H.264,其中 HLS 协议支持 H.264 格式的编码。

音频编码:同视频编码类似,将原始的音频流按照一定的标准进行编码,上传,解码,同时在播放器里播放,当然音频也有许多编码标准,例如 PCM 编码,WMA 编码,AAC 编码等等,这里我们 HLS 协议支持的音频编码方式是AAC编码。

下面将利用 ios 上的摄像头,进行音视频的数据采集,主要分为以下几个步骤:

  • 1 音视频的采集,ios 中,利用 AVCaptureSession和AVCaptureDevice 可以采集到原始的音视频数据流。
  • 2 对视频进行 H264 编码,对音频进行 AAC 编码,在 ios 中分别有已经封装好的编码库来实现对音视频的编码。
  • 3 对编码后的音、视频数据进行组装封包;
  • 4 建立 RTMP 连接并上推到服务端。

ps:由于编码库大多使用 c 语言编写,需要自己使用时编译,对于 ios,可以使用已经编译好的编码库。

x264编码:github.com/kewlbear/x2…
faac编码:github.com/fflydev/faa…
ffmpeg编码:github.com/kewlbear/FF…

关于如果想给视频增加一些特殊效果,例如增加滤镜等,一般在编码前给使用滤镜库,但是这样也会造成一些耗时,导致上传视频数据有一定延时。

简单流程:

音视频获取播放流程

一般情况下,视频流从加载都准备播放是需要经过解协议、解封装、解编码这样的过程,其中协议指的就是流媒体协议;封装是的是视频的封装格式;编码又分为视频编码和音频编码。

协议一般有 HTTP 、RTSP、RTMP 等,我们就最常见的就是 HTTP 网络协议,而 RTSP 和 RTMP 一般用于直播流或支持带有控制信令的常见,比如远程监控。

视频封装协议指的是我们常见的MP4 、AVI 、RMVB 、MKV、TS、FLV 等常见后缀格式,它们所表示的就是多媒体的封装协议,就是在传输过程中把音频和视频打包都一起的封装,所以播放前是需要把这部分内容解开,提取出对应音频编码和视频编码。

所以如果以后有人问你,你是视频编码是什么,专业的你不能再回答 “我的视频编码是 MP4” 这样的回复哟。

直播协议

目前 WEB 上主流的视频直播方案有 HLS 和 RTMP,移动 WEB 端目前就只有 HLS 能用。

HTTP Live Streaming(HLS)

HLS 协议基于 HTTP,非常简单。一个提供 HLS 的服务器需要做两件事:

  • 编码:以 H.263 格式对图像进行编码,以 MP3 或者 HE-AAC 对声音进行编码,最终打包到 MPEG-2 TS(Transport Stream)容器之中;
  • 分割:把编码好的 TS 文件等长切分成后缀为 ts 的小文件,并生成一个 .m3u8 的纯文本索引文件;

浏览器使用的是 m3u8 文件。m3u8 跟音频列表格式 m3u 很像,可以简单的认为 m3u8 就是包含多个 ts 文件的播放列表。播放器按顺序逐个播放,全部放完再请求一下 m3u8 文件,获得包含最新 ts 文件的播放列表继续播,周而复始。整个直播过程就是依靠一个不断更新的 m3u8 和一堆小的 ts 文件组成,m3u8 必须动态更新,ts 可以走 CDN。

实质上.m3u8 文件,其实就是以 UTF-8 编码的 m3u 文件,这个文件本身不能播放,只是存放了播放信息的文本文件:

HLS 协议本质还是一个个的 HTTP 请求 / 响应,所以适应性很好,不会受到防火墙影响。但它也有一个致命的弱点:延迟现象非常明显。对于支持 HLS 的浏览器来说,直接这样写就能播放了:

<video src="http://devimages.apple.com/iphone/samples/bipbop/bipbopall.m3u8" height="300" width="400"></video>  

Real Time Messaging Protocol(RTMP)

RTMP是 Macromedia 开发的一套视频直播协议,现在属于 Adobe。这套方案需要搭建专门的 RTMP 流媒体服务如 Adobe Media Server,并且在浏览器中只能使用 Flash 实现播放器。它的实时性非常好,延迟很小,但无法支持移动端 WEB 播放是它的硬伤。所以一般使用这种协议来上传视频流,也就是视频流推送到服务器。

总结下两者的区别:

BLOB URL

问题场景:

想获取虎牙直播源直接在自己的项目中播放,发现链接是这样

<video src="blob:http://liveshare.huya.com/413f2f1c-1f95-4c87-b79e-fff49f4e5f5e"></video>

原因

blob:https并不是一种协议,而是html5中blob对象在赋给video标签后生成的一串标记,blob对象对象包含的数据,浏览器内部会解析;

在web容器中的页面代码

浏览器访问后的页面代码

这是因为在浏览器中执行了如下js

主流视频网站现状

现在很多主流的视频网站几乎都是用到了blob的加密(其实也不算是加密),效果是隐藏了视频源的地址,其背后的本质还是通过一段执行一段js拿到视频的切片文件,也就是请求服务器返回m3u8文件,这个文件相当于指引你找到各个分片文件的目录,然通过这个文件,浏览器可以不断的请求到下一个切片文件,让后进行拼接播放。

但是有的网站会防止爬虫,所以会搞个key文件,这样一来缺少key文件的情况下拼接是不可能成功的。另外再加上js混淆,ip限制,refer等等,算是比较难搞的一个视频网站了。

IM即时通讯

不论是一对多直播还是一对一直播,即时通讯技术都是很重要的技术,用户通过一对一直播系统交流或者是礼物打赏都是运用了即时通讯技术,那么这种即使在一对一直播源码开发中中是如何实现的呢?

即时通讯是什么?

即时通讯简称IM,是一个终端服务,允许两人或多人使用网络即时的传递文字讯息、档案、语音与视频交流。

即时通讯技术的原理(socket)是什么?

Socket即用于描述IP地址和端口号,是一种网络的通信机制。网络通信底层都是通过socket建立连接的,因为它包含IP和端口,只要有这两个就能准确找到一台主机上的某个应用。

IM通信原理是什么?

举个简单的例子,客户端A要想和客户端B产生通信,但是无法直接进行,这个时候就需要通过IM服务器,从而使两者之间产生通信。客户端A通过socket与IM服务器产生链接,客户端B也通过socket与IM服务器产生链接,客户端A把信息发送给IM应用服务器并且指定发送给客户端B,服务器根据客户端A信息中描述的接收者,将它转发给B。客户端B到客户端A也是同样的道理。(在这里需要注意的是:服务器是不可以主动连接客户端的,只能客户端主动连接服务器)

如何实现即时通讯技术?

实现即时通讯目前有四种方式:短轮询、长轮询、SSE、websocket,接下来我们来按顺序简单了解一下。

(1)短轮询即每隔一小段时间就发送一个请求到服务器,服务器返回最新数据然后客户端根据获得的数据来更新界面,这样就间接地实现了即时通信。这一方式的优点是简单,缺点是对服务器的压力较大,浪费带宽的流量,但通常情况下数据都是没有发生改变的。

(2)长轮询即客户端发送一个请求到服务器,然后服务器查看客户端请求的数据(就是服务器中的数据)是否发生变化,如果发生变化,就会立即响应返回,否则保持这个链接并定期检查最新数据,直到发生了数据更新或者连接超时。因此,客户端连接一旦断开,就会再次发出请求,这样一来,在相同的时间内大大减少了客户端请求服务器的次数。这一方式有一个弊端:服务器长时间的连接会消耗资源,返回数据的顺序无法保证,管理和维护困难。

(2)SSE即服务器推送事件,为了解决浏览器只能够单向传输数据到服务端,HTML5提供了一种新的技术叫做服务器推送事件SSE。SSE技术提供的是从服务器单向推送数据给浏览器的功能,但是配合浏览器主动请求,实际上就是实现客户端与服务器之间的双向通信。

(3)Websocket在HTML5中,为了加强web的功能,提供了websocket技术,它不仅是一种web通信方式,也是一种应用层协议。它提供了浏览器和服务器之间原生的全双工跨域通信。通过浏览器和服务器之间所建立的websocket连接,在同一时刻能够实现客户端到服务器和服务器到客户端的数据发送。

云服务商选择

越来越多的商家看中了直播平台的影响力,其实大家也是应该很清楚,这样的一个平台影响力非常大,而且也可以让我们快速找到适合的一个推广方案,想要提升我们的影响力,这样的一个平台也是不错的选择。而网络直播系统开发也是大家都非常看中的,但是并不是说简单使用基础的一个方案,就可以让我们看到好的一个效果,所以肯定也是要做好以下几点的确认。

  • 第一,功能和费用必须要确定好。

网络直播系统开发具体的费用和功能肯定也是成正比的,如果说我们需要的平台功能非常多,那么肯定也是需要有一定的高费用,这一点也是必然的。现在直播平台涉及到了很多方面的工作,并不是一般服务就可以完成的,所以必须要特别注意好整体上的一个功能确认工作。只有如此才能够真正让我们看到好的一个建设效果,这样也是可以让我们更加放心的。

  • 第二,平台收益和功能的检测。

网络直播系统开发必须要有一定的收益,我们需要确定好制作平台的功能是否可以满足我们的后续盈利需要,尤其是有一些平台可能还会有礼物分成等,大家也是要确定好这方面的一个平台搭建工作,需要有充值和提现的一个通道才行。而且所有的功能都是要在平台推广之前,做好基础的一个测试工作,这样就可以让我们看到非常好的一个呈现效果。企业视频直播,选获得场景视频!

在这一过程中,有几点事项一定要提前考虑。

    1. 想要获得低延时的直播体验,在进行视频直播软件开发时就要使用RTMP流媒体传输协议,这样才能保证直播流畅不卡顿,才能更好的拉进主播与用户之间的距离,如果因为直播卡顿造成种种交流不便,那恐怕再精彩的内容、再貌美的主播都无法吸引用户。
    1. CDN是内容分发网络,主要作用是给直播加速的,国内的CDN三方服务商有很多,按理说,搭建直播平台的朋友是可以从中进行挑选的。然而,有些直播源码是只支持一家CDN,所以大家在选择直播系统时要注意咨询该系统是否支持任意CDN。

注意

    1. H5使用video标签播放视频时,给 video 标签增加 webkit-playsinline 属性,这个属性是为了让 video 视频在 ios 的 uiwebview 里面可以不全屏播放,默认 ios 会全屏播放视频,需要给 uiwebview 设置 allowsInlineMediaPlayback=YES。 业界比较成熟的 videojs,可以根据不同平台选择不同的策略,例如 ios 使用 video 标签,pc 使用 flash 等。

参考:视频直播网站所需牌照