初探 WebAssembly

[yshaojun]

在做视频预览的时候有个“可播放不可下载的需求”，一个自然的想法是给视频加密，但是前端都是明文的，无法隐藏密钥，于是想到 WebAssembly，正好趁假期学习一下。

安装

WebAssembly 虽然号称支持多种语言，但目前官方主要支持 C/C++，因此官网 Getting Started 用的也是 C 示例，安装如下：

$ git clone https://github.com/emscripten-core/emsdk.git
$ cd emsdk
$ ./emsdk install --build=Release sdk-incoming-64bit binaryen-master-64bit
$ ./emsdk activate --build=Release sdk-incoming-64bit binaryen-master-64bit
$
$ source ./emsdk_env.sh --build=Release

可以通过如下方式验证安装成功：

$ emcc

# output: emcc:WARNING: no input files

注意如果使用其他 shell（比如我用的 zsh），环境变量可能不生效，直接创建软链接即可：

$ ln -s <workspace>/emsdk/upstream/emscripten/emcc /usr/local/bin/emcc

使用

新建文件 hello.c，内容如下：

#include <stdio.h>
int main(int argc, char ** argv) {
  printf("Hello, world!\n");
}

执行：

$ emcc hello.c -o hello.js

会生成 hello.js 和 hello.wasm 两个文件，新建 index.html 代码如下：

<script src='index.js'></script>

本地启一个 HTTP 服务器，比如 serve，可以看到控制台输出 'Hello World!'。

而在 Network 中，能看到对 hello.wasm 的请求。

感想

当然要用于生产环境，那么 js、C/C++ 互调是必备的，WebAssembly 提供这样的能力，但是现在要实现这样的互调在写法上较为繁琐。

从效果看，WebAssembly 能让其他语言比如 C/C++ 编译成 .wasm，通过一个“胶水” js 引入 (hello.js)，从而在浏览器运行，这使 js 调用 C 库成为可能，于是浏览器也可以做很多事，比如调用 FFmpeg 进行视频转码。

但是目前官方主要支持 C/C++，距离使用 js 或 ts 来写 WebAssembly 还有一段时间。由于前端同学的主力开发语言是 js 或 ts，因此短时间里前端还是不能用自己擅长的语言编写核心模块、去打包成 .wasm，仍然难以借此实现局部性能提升和代码保密的需求。