WebAssembly 使用

win安装 Emscripten (用来编译到 WebAssembly（wasm）)

git clone https://github.com/emscripten-core/emsdk.git

cd emsdk

git pull

#下面步骤用cmd操作

emsdk install latest // 下载并安装最新的SDK工具（需要点时间）

emsdk activate latest // 使当前用户的“最新”SDK处于“活动”状态。（写入.emscripten文件）

emsdk_env.bat // 激活当前终端中的PATH和其他环境变量，windows上可以不用这个 activate 就好了

# 注意：
　　1. 如果我们修改了 SDK 的位置（例如把它带到另一台电脑上），需要重新运行 emsdk activate latest和 emsdk_env.bat 命令。
　　2. 在上面的描述中，我们把emsdk安装并激活了latest， 这是最新的标记版本。也可以通过指定来安装特定版本：emsdk install 1.38.45
　　3.这里提供安装好的链接（解压后1.39G左右）：链接：https://pan.baidu.com/s/1v4NVFJhPwj-gwuPXgP9Epg?pwd=fx99 提取码：fx99

 

简单使用 Emscripten

emsdk activate latest

#准备一个 ts.c，内容如下：
    #include <stdio.h>
    int main()
    {
        printf("fx ts \n");
        return 0;
    }

emcc ts.c -o ts.js // 生成 ts.js、ts.wasm  ；随意启动一个http服务器，将这些文件放进去加载后默认执行 main 函数

# 补充：
　　1.导出其它函数：
　　　编译时导出c函数：emcc -s EXPORTED_RUNTIME_METHODS=['cwrap','ccall'] -s EXPORTED_FUNCTIONS=['_add'] ts.c -o ts.js 
　　　js调用add(加载胶水js后点击按钮触发): 
　　　　1. var add = Module.cwrap('add', 'number', ['number','number']); console.log(add(10,20))
　　　　2. console.log(Module._add(10,20)) 
　　　　3. console.log(Module.asm.add(10,20))
　　　总结：可以看到 2 和 3 都没有使用 cwrap 和 ccall 内置函数，所有编译的时候直接 emcc -s EXPORTED_FUNCTIONS=['_add'] ts.c -o ts.js 即可

　　2.查看wasm函数：
　　<script>
   　　Module = {};
    　 Module.onRuntimeInitialized = function() { console.log(Module)} //此时才能获得完整Module对象
    </script>
    <script src="./HelloTools.js"></script>

 

linux简单编译ffmpeg(先在linux上面玩，windows需要下载个模拟环境，其实也一样的)

1. 下载一个git吧（apt install git-all），git比较方便，不然就自己找链接去下载 

2. 然后直接用git 下载 emscripten (里面有emcc、em++，它的官网是https://emscripten.org/docs/getting_started/downloads.html 照着这个步骤来就可以使用 emcc 咯，跟着我的也可以) ：
      git clone https://github.com/emscripten-core/emsdk.git  // 这里的源换成默认的反而还快一点
      cd emsdk
      git pull
      ./emsdk install latest //这一步时间有点久
      ./emsdk activate latest
      source ./emsdk_env.sh
      emcc -v // 有信息表示激活成功，可以使用

 3. 下载一个ffmpeg源码 然后编译源码（git clone https://github.com/FFmpeg/FFmpeg）
    这里我是去它官网 http://www.ffmpeg.org/releases 挑了一个 4.1.9 版本的（下载的挺慢，这里我给个链接：链接：https://pan.baidu.com/s/1MG3h10rx3q1aPc6-Z_jDsw?pwd=fx99 提取码：fx99）　　

编译ffmpeg的 .sh

echo 'in fx-config.sh'

read -p '开始配置按1: ' n

if [ $n -ne 1 ];then
exit
fi

emconfigure ./configure --cc="emcc" --cxx="em++" --ar="emar" --ranlib="emranlib" \
--prefix=$(pwd)/../build \
--enable-cross-compile \
--target-os=none \
--arch=x86_32 \
--cpu=generic \
--enable-gpl \
--enable-version3 \
--disable-swresample \
--disable-postproc \
--disable-logging \
--disable-everything \
--disable-programs \
--disable-asm \
--disable-doc \
--disable-network \
--disable-debug \
--disable-iconv \
--disable-sdl2 \
--disable-avdevice \
--disable-avformat \
--disable-avfilter \
--disable-decoders \
--disable-encoders \
--disable-hwaccels \
--disable-demuxers \
--disable-muxers \
--disable-parsers \
--disable-protocols \
--disable-indevs \
--disable-outdevs \
--disable-filters \
--enable-decoder=hevc \
--enable-parser=hevc

: ' 部分解释
    --disable-sdl2 \ # 三方库
    --disable-avdevice \  # 设备
    --disable-avformat \ # 格式
    --disable-avfilter \  # 滤镜
    --disable-decoders \  # 解码器
    --disable-encoders \  # 编码器
    --disable-hwaccels \ # 硬件加速
    --disable-demuxers \ # 解封装
    --disable-muxers \  # 封装
    --disable-parsers \ # 解析器
    --disable-protocols \  # 协议
    --disable-bsfs \  # bit stream filter，码流转换
    --disable-indevs \  # 输入设备
    --disable-outdevs \ #输出设备
    --disable-filters \ # 滤镜

'

echo 'out fx-config.sh'

   你们也可以用自己的选项，我是在网上随便看了一下禁用的还挺多，感觉没啥问题就用了，配置完了就编译然后把生成的东西拷贝一下 make && make install

4.去拷贝好了的目录(就是就编译后的结果，库呀什么的)随便建个 .c 文件，然后拿 emcc 编译c文件(其实和gcc 没什么两样), 我的c文件就是测试一下是否成功引用ffmpeg,内容如下：

c 语言测试代码

 #include <stdio.h>
#include <libavcodec/avcodec.h>

int add(int x, int y);
int subtract(int x, int y);
int multiply(int x, int y);
float divide(float x, float y);

int main(){
   
   printf("Fx %s\n",avcodec_configuration());

   return 0;
}

int add(int x, int y){

   return x + y;
}

int subtract(int x, int y){
   if(x > y) return x - y;
   
   return y - x;
}

int multiply(int x, int y){

   return x * y;
}

float divide(float x, float y){

   return x / y;
}

编译C代码(引用了ffmpeg)的 .sh

export TOTAL_MEMORY=67108864 # emcc: error: invalid byte size

# 这样也可以，注意加 ,
# export EXPORTED_FUNCTIONS="[ \
#  '_add', \
#  '_subtract', \
#  '_multiply', \
#  '_divide', \
# ]"

echo "Running Emscripten..."

emcc ts.c \
lib/libavcodec.a \
lib/libavutil.a \
lib/libswscale.a \
-O2 -I "include" \
-s WASM=1 \
-s ASSERTIONS=1 \
-s LLD_REPORT_UNDEFINED \
-s NO_EXIT_RUNTIME=1 \
-s DISABLE_EXCEPTION_CATCHING=1 \
-s TOTAL_MEMORY=${TOTAL_MEMORY} \
-s EXPORTED_FUNCTIONS="${EXPORTED_FUNCTIONS}" \
-s EXTRA_EXPORTED_RUNTIME_METHODS="['addFunction', 'removeFunction']" \
-s EXPORTED_FUNCTIONS="['_add','_subtract','_multiply','_divide']" \
-s RESERVED_FUNCTION_POINTERS=14 \
-s FORCE_FILESYSTEM=1 \
-o ./ts.js

// 现在就先这样，下次再继续搞搞