前端知识进阶：利用 WebAssembly 将 C/C++ 代码跑在浏览器中

2023-09-09 08:09:48

作为一名前端开发者，我一直对探索新的技术和可能性充满热情。最近，我被一个挑战所吸引：将知名视频转码库 ffmpeg （使用 C 编写）跑在浏览器里面。起初，我感到有些难以置信，但经过一番调研和学习，我发现 WebAssembly 技术可以帮助我实现这个目标。

WebAssembly 是一种二进制指令集，可以被各种平台和浏览器理解和执行。这意味着我们可以将 C/C++ 代码编译成 WebAssembly 字节码，然后在浏览器中运行。这种技术为前端开发带来了新的可能性，也对我们的技术栈提出了新的要求。

在本文中，我将分享如何利用 WebAssembly 技术在浏览器中运行 C/C++ 代码。我将提供详细的步骤和示例，帮助前端开发者扩展技能并探索新的可能性。

首先，我们需要将 C/C++ 代码编译成 WebAssembly 字节码。这可以通过使用 Emscripten 工具链来实现。Emscripten 是一个开源工具链，可以将 C/C++ 代码编译成可以在浏览器中运行的 JavaScript 代码或 WebAssembly 字节码。

# 安装 Emscripten
emsdk install latest

# 编译 C/C++ 代码
emcc -O3 -s WASM=1 main.c -o main.wasm

编译完成后，我们就可以将 WebAssembly 字节码嵌入到 HTML 页面中。这可以通过使用 <script> 标签来实现。

<script type="module">
  // 导入 WebAssembly 模块
  const wasmModule = await WebAssembly.compileStreaming(fetch('main.wasm'));

  // 实例化 WebAssembly 模块
  const wasmInstance = await WebAssembly.instantiate(wasmModule);

  // 调用 WebAssembly 函数
  const result = wasmInstance.exports.myFunction(10, 20);

  console.log(result); // 输出：30
</script>