我们来阅读一下WXInlinePlayer的源码，本来像一篇博文写完，但是发现这样不好看也不好写，一口吃不成一个大胖子。这篇先讲一下WXInlinePlayer的整体代码介绍。

代码目录结构

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

# tree . -I 'node_modules|dist|*.o|CMakeFiles|*.c|test|*.a' -L 4
# 下面这些一般来说有后缀的是文件，没后缀的是文件夹，除了LICENSE
.
├── build.sh            # 编译脚本
├── package.json        # 项目所需要的javascript模块
├── LICENSE             # Anti-996协议
├── README.md           
├── example             # 例子目录
│   ├── index.html
│   ├── index.js
│   ├── prod.all.asm.combine.js
│   ├── prod.all.wasm.combine.js
│   ├── prod.baseline.asm.combine.js
│   ├── prod.baseline.wasm.combine.js
│   ├── prod.h265.asm.combine.js
│   └── prod.h265.wasm.combine.js
├── lib                         # 总C++代码部分，包括第三方代码，以及一些胶水js
│   └── codec
│       ├── 3rdparty            # 第三方解码器源码
│       │   ├── de265
│       │   ├── openh264
│       │   └── tinyh264
│       ├── build.sh            # 编译这个lib部分的脚本，包括c++代码和胶水js拼装
│       ├── CMakeLists.txt
│       ├── combine             # js胶水代码
│       │   └── glue.js
│       ├── src                 # WXInlinePlayer自己的c++代码目录
│       │   ├── config.h        # 使用lib/codec/tool/compile.js生成的配置文件
│       │   ├── main.cpp        # C++部分暴露的外部入口
│       │   ├── codec           # 解码器类定义文件夹，外部入口调用这个
│       │   ├── demuxer         # 解封装FLV文件
│       │   ├── factor          # 上报解码器的结果
│       │   ├── helper          # 对最终产品没用，用于编译本地可执行文件的帮助代码
│       │   └── stream          # 定义一些buffer类，适用于流处理
│       └── tool
│           ├── compile.js      # 用于生成CMakeLists.txt和config.h的脚本工具
│           └── wrapper.js      # 用于生成最终js解封装解码js的脚本工具
└── src                         # javascript源码目录
    ├── index.js                # 外部API调用定义
    ├── processor               # 播放器js部分主要逻辑框架代码
    │   └── processor.js
    ├── loader                  # 数据源加载器，这里是下载FLV文件
    │   ├── chunk.js
    │   ├── loader.js
    │   └── stream.js
    ├── drawer                  # 在canvas上绘制YUV图片
    │   └── drawer.js
    ├── sound                   # 音频播放
    │   ├── browser.js
    │   ├── sound.js
    │   └── wechat.js
    └── util                    # 一些javascript工具类
        ├── ticker.js
        └── util.js

整体框架

整体框架

大致代码结构就是这样，javascript部分负责加载数据、绘制YUV图像、用AudioContext播放音频、音视频同步控制；C++代码部分负责解封装FLV文件，并将解封装的视频数据拼成NALUs喂给第三方解码器，音频则封装成ADTS传到javascript部分播放，脚本数据弄成mediaInfo上报给js部分；第三方解码器专心处理视频流数据。