本文将带你了解WEBAPP开发[微信小程序直播平台开发]___（一）介绍与流程，希望本文对大家学WEBAPP有所帮助。

1.一个可以忽略的前言

最近在做的一个项目，客户要做一个直播平台，主播发起视频直播，然后其他人进入房间观看这样子，跟其他直播平台不同的是，主播可以打赏观众,噗，不过这些千奇百怪的想法我也见怪不怪了，而且也不是技术难点所在。

因为客户要做的是一个民宿的微信小程序，所以这个直播发起也是在微信小程序中完成的，好在后来查到微信小程序中有这种组件,之前想说用H5来做但是发现在移动端不同型号的兼容性问题非常不理想基本放弃了，

还有一种方式就是做个app了，但这就在我的知识范围之外了，用webApp的话也没找到这种采集摄像头视频的api，只找到发起摄像头摄像的api，并且这样就要脱离开微信小程序就跟客户的要求不一致了。

2.直播流程

大概三步走，第一步，视频采集端：   可以是电脑上的音视频输入设备、或手机端的摄像头、或麦克风，今天的主题则是通过移动端手机视频。

第二步，直播流视频服务端：开通一个云直播服务（比如   腾讯云 ），或者自己搭建一个rtmp服务器（例如 nginx-rtmp   服务）。

采集视频录制端传输的视频流(H264/ACC编码)，由服务器端进行解析编码，推送RTMP/HLS格式视频流至视频播放端。

第三步,视频播放端：可以是电脑上的播放器（QuickTime   Player、VLC），手机端的native播放器，还有就是 H5   的video标签等

3.视频流协议

一. HTTP   Live Streaming

HTTP Live Streaming（简称   HLS）是一个基于 HTTP 的视频流协议，由 Apple 公司实现，Mac OS 上的 QuickTime、Safari 以及 iOS 上的   Safari 都能很好的支持 HLS，高版本 Android 也增加了对 HLS 的支持。一些常见的客户端如：MPlayerX、VLC 也都支持 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 文件格式如下：

#EXTM3U#EXT-X-STREAM-INF:PROGRAM-ID=1,   BANDWIDTH=200000gear1/prog_index.m3u8#EXT-X-STREAM-INF:PROGRAM-ID=1,   BANDWIDTH=311111gear2/prog_index.m3u8#EXT-X-STREAM-INF:PROGRAM-ID=1,   BANDWIDTH=484444gear3/prog_index.m3u8#EXT-X-STREAM-INF:PROGRAM-ID=1,   BANDWIDTH=737777gear4/prog_index.m3u8

 HLS   协议本质还是一个个的 HTTP 请求 / 响应，所以适应性很好，不会受到防火墙影响。但它也有一个致命的弱点：延迟现象非常明显。如果每个 ts 按照 5   秒来切分，一个 m3u8 放 6 个 ts 索引，那么至少就会带来 30 秒的延迟。如果减少每个 ts 的长度，减少 m3u8   中的索引数，延时确实会减少，但会带来更频繁的缓冲，对服务端的请求压力也会成倍增加。所以只能根据实际情况找到一个折中的点。

二.   Real Time Messaging Protocol

Real Time   Messaging Protocol（简称 RTMP）是 Macromedia 开发的一套视频直播协议，现在属于 Adobe。这套方案需要搭建专门的   RTMP 流媒体服务如 Adobe Media Server，并且在浏览器中只能使用 Flash 实现播放器。它的实时性非常好，延迟很小，但无法支持移动端   WEB 播放是它的硬伤。

虽然无法在iOS的H5页面播放，但是对于iOS原生应用是可以自己写解码去解析的, RTMP   延迟低、实时性较好。浏览器端，HTML5 video

标签无法播放 RTMP 协议的视频，可以通过 video.js   来实现。

本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标移动开发之WebApp频道！