基于EasyNVR的H5跨平台直播终端实现
一、前言
在现在这个时代，做开发常会听说的一个词就是“跨平台”。自从移动端的用户需求越来越大，H5逐渐发展，跨平台似乎已经成为了软件开发不可或缺的技术。在为我们带来了巨大遍历的同时，也留给了我们众多的坑，今天，我就说说关于跨平台直播终端的实现。本人还只是大三学生狗一枚，技术方面肯定和网上大牛无法比较，若有错误或不成熟的思想，此次也是因为项目需求对H5实现直播功能有所涉猎，望网友们海涵，不喜勿喷。
本文主要记录在项目开发过程具体流程，还有内网穿透等一些知识，提供了所需工具的下载地址以及运用方式，大多数比较深的知识点没做具体叙述，包括像跨平台的响应式布局这些东西也就就不过多介绍，大家可以针对需求自行学习相关知识。
二、requirements
直播终端的实现笼统的来说一定是需要这三样东西的：摄像头、服务器、显示前端。大致流程图如下：
大概就是这么个东西，说的高尚牛逼点，就是一个完整的视频直播平台可以分为三个部分：硬件设备层、视频能力平台层以及视频应用平台层。硬件设备层咱得自己准备，无非就架个IP Camera，而EasyNVR就为我们提供了视频能力层，也就是接收Camera传回的数据的平台以及一个服务器，视频应用平台层就是我们所说的前端，为了实现跨平台我们采用WEB前端开发，你可以修改EasyNVR自带的WEB源代码，也可以自己写界面，我选择的就是后者，因为在项目后期我需要加入自己的功能。
三、step1
说到IP Camera，附带要讲下摄像机一般的输出协议Onvif，现在大多数安防系统的摄像机都支持这种协议，百度百科上是这么说的：
2008年5月，由安讯士联合博世及索尼公司三方宣布将携手共同成立一个国际开放型网络视频产品标准网络接口开发论坛，取名为ONVIF（Open Network Video Interface Forum，开放型网络视频接口论坛），并以公开、开放的原则共同制定开放性行业标准。
反正记得有这么个输出协议就行了，这对项目没有太大影响，还有一个输出协议就是RTSP，这两个输出协议是EasyNVR主要的规格需求。然后安摄像头的事情我就不多说了，跟本文的主题没有太大的关系，我用的是EasyN的摄像头，挺清楚的。
四、step2
重点是接下来要讲的视频传输协议HLS和RTMP，要讲后端获取的视频流渲染到前端，离不开这两种协议。大家可以先去下载EasyNVR的客户端文件，这是EasyNVR的官方下载地址：
下载之后是一个解压包，是一个绿色文件，直接解压就行，然后按照里面的“EasyNVR互联网直播服务器使用说明书”去配置相关信息，这些东西都很简单，就不过多叙述了。
重点给大家讲一下HLS（HTTP Live Streaming）传输协议，作为H5的御用传输协议，很是好用。它的原理就是在后端生成一个存储视频流的文件夹，里面存放着一个.m3u8的索引文件，索引指向与该索引文件同级的视频流.ts文件，视频能力层不断的截取新的.ts文件，也在不断地刷新.m3u8文件，我们只需要在前端继承的视频播放器中引入.m3u8文件的URL即可不断获取.ts文件。而EasyNVR作为本次项目使用的视频能力层，他也开放了端口我们提供了我们所需的.m3u8的URL。在EasyNVR根目录下的另一个文档“EasyNVR网络摄像机互联网直播方案及二次开发文档”中，就为大家介绍了EasyNVR开放的所有API。找到我们将来最需要的两个接口，记住他们大概的“样子”。包括接收的参数、相应文本中的对象信息等等。
其实到了这一步有经验的人应该都知道了大概的解决方案了。无非就是再写个前端播放器，然后引入后端传回的URL就好了，只需要替换其中的｛host｝或者拼接一下域名就好了。前端播放器的编写我也不做过多叙述了，我把源码托管在了github上，大家直接下载然后修改demo里面的参数就可以了。
在EasyNVR的根目录下开启start.bat，然后咱们自己写个ajax去调咱们自己内网的API接口，获取URL。以下是我写的代码
$.ajax({
type: "get",
url: "http://easynvr.easydarwin.org:10800/api/v1/getchannelstream",
data:{
channel:1,
protocol:"HLS"
},
dataType: "jsonp",
async: true,
success: function(resp) {
console.log(resp);
}
});
我调的是官方提供的域名，响应回的文本是下面这样的：
如果把传输到后端的data的protocol的value改为RTMP将会输出一段“rtmp://{host}:10935/hls/stream_1”这样的URL，这就相当于是引入存储我们视频流的文件，但是这里有一个需要注意的地方，rtmp协议不支持跨域，如果把我们从其他域名获取的URL直接放到src中去，浏览器会console如下信息：
但是HLS协议不论跨不跨域都能支持，因为它是基于HTTP协议的，所以我们尽量使用HLS协议传输，在往后端传递参数的时候，我们尽量使用protocol:"HLS"。对于传回的HLS URL，我们还需要后期为他拼接域名，域名就是我们调用API时候的主域名，这里指的就是“easynvr.easydarwin.org:10800”。最后拼接出的完整的URL如下：“http://easynvr.easydarwin.org:10800/hls/stream_1/stream_1_live.m3u8”，直接塞到大家clone的播放器里面的src就可以了。到了这一步，视频直播的大体原理就基本实现了。最后的效果如下：
video会不断刷新.m3u8，不断获取视频流，实现直播。自己架的EasyNVR同理。
接下来拓展一些内网穿透的知识。要把内网映射到外网，有很多途径，其中不乏购买域名、购买代理服务器等等操作。现在我说个用于测试的比较常用的方法，那就是内网穿透。我选择的内网穿透软件是natapp，自己花了3块钱卖了一年的专属域名（之前我在狗爹网上挑了一个特别漂亮的域名，.com结尾的，带上优惠码都得要300多/5年，最关键的是在我狠下心要买的时候他居然提示我无法付款，并不知道哪里出了问题，就去用内网穿透了），这是natapp的官网地址：
按照官网里面的教程一步步配置就可以了，全部都是图文教程，0基础也可以弄好，不过得注意在配置通道的时候要把默认端口改为10800，因为我们的EasyNVR用的端口就是它。这就是通过外网访问的效果：
由于涉及隐私视频内容就不作展示了，整个直播架构流程大致就是这样。
