WebAssembly之客户端与网页进行画面实时传输实现简易1对1视频-Web端

1、引言

前两篇：

• 音视频（5）客户端与网页进行画面实时传输实现简易1对1视频-客户端开发

• 音视频（6）客户端与网页进行画面实时传输实现简易1对1视频-服务端Node开发 此篇以Web前端解码H.264并以Canvas进行画面输出。需要用到WebAssembly这项技术

2、WebAssembly

WebAssembly（简称wasm）是一个虚拟指令集体系架构（virtual ISA），整体架构包括核心的ISA定义、二进制编码、程序语义的定义与执行，以及面向不同的嵌入环境（如Web）的应用编程接口（WebAssembly API）。其初始目标是为C/C++等语言编写的程序经过编译，在确保安全和接近原生应用的运行速度更好地在Web平台上运行。

简单的解释就是：可以通过WebAssembly建立c/c++与JavaScript的通信

3、为什么需要c/c++

因为要用FFmpeg库去解码传输过来的H.264裸流，FFmpeg基于c编写的，故需要c解码之后传输给JavaScript。

4、如何使用WebAssembly技术

4.1 FFmpeg源码下载

在 音视频（5）客户端与网页进行画面实时传输实现简易1对1视频-客户端开发 已经讲过了，读者可以自行跳转去看如何操作～

4.2 Emscripten编译工具下载与环境搭建

下载地址: Emscripten

按照官方文档中的步骤一步一步可以将环境搭建起来

5、编译FFmpeg为静态文件(.a)

当环境搭建完成后并且确保命令emc以及emc++是存在的 /ffmpeg/目录下创建 js_build.sh脚本文件

CPPFLAGS="-D_POSIX_C_SOURCE=200112 -D_XOPEN_SOURCE=600" \
​
emconfigure ./configure \
     --cc="emcc" \
     --cxx="em++" \
     --ar="emar" \
     --prefix=$(pwd)/dist2 \
     --cpu=generic \
     --target-os=none \
     --ranlib=emranlib \
     --arch=x86_64 \
     --disable-doc \
     --disable-debug \
     --disable-ffmpeg \
     --disable-ffplay \
     --disable-ffprobe \
     --disable-symver \
     --disable-everythin