如何利用开源解码项目开发js视频解码的web应用（一）

　　很久很久以前，网络安全还不那么引起重视的年代，各大浏览器厂商都有支持嵌入本地应用程序的框架。众所周知得诸如"activex ATL npapi之类的标准框架"都允许原生应用开发者将视频的解码和播放业务放到应用程序内处理，再通过<object>标签等形式借用浏览器提供的窗口句柄来实现html和原生应用窗口的布局和展示。那个时候一切看起来都很和谐。

　　但是伴随互联网的发展，大部分还混得下去的浏览器厂商逐渐意识到要并且原生应用在网页中的嵌入，因为大部分的原生应用都存在安全隐患，如果用户电脑的访问权限控制不严格的话，存在很大的隐患。至此各个视频相关业务公司就开始使出各种奇招。

　　综述整个历史差不多就是这样（整个是鄙人多年以来经验总结）

ocx/npapi ——> atl/nappi　——>chromeapp

                　　　　　　　　——> native messaging 

　　　　 　　　　　　　　 ——> flash ——>video标签

　　　　　　　　　　　　　　　　　　——>sokect通信+本地应用

　　　　　　　　　　　　　　　　　　——>js解码库+canvas

  　　　　　　　　　　　　　　　　　 ——>直接上原生客户端，内嵌浏览器引擎（俗称混合app）

　　上述所有的方案，很不幸的博主都经理过。其中，紫色的即将完全淡出历史舞台，但是绝对算当上功臣了。红色的就是昙花一现，蓝色的使用场景小的可怜，绿色的方案在各自擅长的领域发光发热，黄色的绝对是个异类，但是不得不说能很快的解决所有的厂商五花八门的框架，并且可以快速的出一个产品，说服用户一劳永逸。

　　在这里我们重点分享一下js解码库+canvas这个看起来比较符合时代发展的产物的实现方案和大致步骤。

　　你一定是想直接来一二三四吧？NO,这里我必须说明一下，如果你想将某个开源解码库转成js的软解库实现视频播放功能，而你碰巧是一个web开发，那我要建议你一定要先去看看内存是什么？并且大致了解下什么是编解码。没有这些基础，依葫芦画瓢你都画不像。

　　首先简单说下基础知识部分：

　　　　1）从一段视频流到一个画面播放之间大致经过的过程（我也不是专业编解码的，讲的不准确请勿拍）：

               我们拿到的某个视频文件或者一段直播视频实际内容是一段二进制的数据。

　　　　　　这段数据包含了连续的单帧的编码后的数据，在每一帧数据之上依照不同的文件格式进行封装（这一层可以理解为为不同的播放器程序做一些特定的视频业务而进行的，通常我们所说的mp4 avi等等都数据对视频原始帧的二次封装，加上了一些特定的信息。）而每一帧的原始数据又分不同的编码类型（h264 jpeg等）。

　　　　先对二进制数据流做码流分析，识别出码流的封装格式，拆解帧头部分得到一个个的单帧的裸数据

　　　　对每一帧的裸数据送解码接口进行解码，得到yuv数据，或者rgb

　　　　在客户端的播放窗口上调用系统的API来显示yuv或者rgb，按照帧率来进行yuv的间隔显示（例如帧率为25的视频，则每40ms显示一帧yuv）

              2）浏览器对js的内存操作的支持，web开发可以通过typearray类型将所有的需要的数据都转换成整形或者浮点型的数值，并保存在内存当中，并且由调用者管理内存的申请和释放。在支持webassembly技术的浏览器下，c/c++代码模块转换成wasm文件内申请的内存可以与普通的js文件共享。

　　下一章节，将会对asm.js webassembly ffmpeg 以及emsdk坐下简单的介绍