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

js解码库的目标产物

ASM.JS

asm.js是⼀种提升js执⾏效率的解决⽅案 与传统js的区别

1. 提⾼js的执⾏效率免去语法解析，还⽀持部分的虚拟及其 指令。另外，浏览器还会通过 GPU 调⽤ WebGL 执⾏ asm.js，使 其运⾏得更快。

2. asm.js 为带类型声明的⽅式，数据类型为整数何带符号浮 点数，保存在内存中，通过 TypedArray 调⽤。

3. 对内存的控制由开发⾃⾏维护。

4. 可读性很差。想要开发应⽤，基本不可能直接编写asm.js。

WEBASSEMBLY

WebAssembly是⼀种⼆进制字节码编码的⽂件，后缀常为wasm。

　　不再是js语⾔。需要浏览器或者其他的⽀持wasm⽂件解析的环境下（browser、 node.js、kernel）

　　 1） 加载wasm产物

　　 2） 浏览器解析wasm产物中的虚拟机器语⾔

　　 3） 浏览器每个函数的指令序列编译成⺫标机器的汇编代码

　　 4） js代码调⽤到wasm提供的函数⼊⼝地址，浏览器执⾏对应的汇编指令

ASM.JS WEBASSEMBLY的⽣成

　　不论是asm.js还是webassembly 我们都⽆法直接编写目标⽂件，通常的做法是使⽤C/C++这样的静态类型和⼿动回收内存的语⾔编写程序，然后使用编译器将编写的程序编译为asm.js或者.wasm⽂件 　　

webassembly的编译过程

　　1. C/C++ LLVM ==> LLVM IR

　　2. LLVM IR ==> WebAssembly （wams后缀的⼆进制⽂件）

（图来自互联网，非原创）

 

 asm.js的编译过程

　　C/C++ LLVM ==> LLVM bytecode ==> asm.js

（图来自互联网，非原创）

 

 

编译器EMSDK

　　Emscripten is a toolchain for compiling to asm.js and WebAssembly, built using LLVM, that lets you run C and C++ on the web at near-native speed without plugins 虚拟指令⽣成器

　　安装（macos下）

　　　　emsdk git clone https://github.com/juj/emsdk.git

　　　　在控制台切换⾄emsdk所在目录

　　　　./emsdk update

　　　　./emsdk install latest

　　　　执⾏以下命令配置并激活已安装的Emscripten

　　　　./emsdk activate latest source

　　　　./emsdk_env.sh(windows 上有所不同)

　　　　 ps：请使⽤科学的上网⽅法，⼀切顺利的话半个⼩时内即可完成上述步 骤，如果没有可续的上⺴⽅法，你将因为被墙⽽返回失败。

FFMPEG

　　ffmpeg是开源的编解码库，⽀持视频操作的基本命令，也提供各个模块⽤于视 频编解码的操作。这⾥主要⽤到avcodec，来解码视频。 　　

　　因为此开源库较为成熟，使⽤⼴泛，所以这⾥我们down⼀份ffmpeg的代码⽤于编译。

　　这里我下载源码版本用于编译。

　　访问 http://www.ffmpeg.org/download.html

      

 

 

　　解压以后如下所示

 

     

 

　　ffmpeg中解码流程如下