Open yshaojun opened 4 years ago
在做视频预览的时候有个“可播放不可下载的需求”，一个自然的想法是给视频加密，但是前端都是明文的，无法隐藏密钥，于是想到 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，仍然难以借此实现局部性能提升和代码保密的需求。
在做视频预览的时候有个“可播放不可下载的需求”，一个自然的想法是给视频加密，但是前端都是明文的，无法隐藏密钥，于是想到 WebAssembly，正好趁假期学习一下。
安装
WebAssembly 虽然号称支持多种语言，但目前官方主要支持 C/C++，因此官网 Getting Started 用的也是 C 示例，安装如下：
可以通过如下方式验证安装成功：
注意如果使用其他 shell（比如我用的 zsh），环境变量可能不生效，直接创建软链接即可：
使用
新建文件 hello.c，内容如下：
执行：
会生成 hello.js 和 hello.wasm 两个文件，新建 index.html 代码如下：
本地启一个 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，仍然难以借此实现局部性能提升和代码保密的需求。