WebAssembly原理及入门_assemblyscript 怎么接收 importobject_cgs1999的博客

1. WebAssembly是什么

WebAssembly/wasm WebAssembly 或者 wasm 是一个可移植、体积小、加载快并且兼容 Web 的全新格式，是由主流浏览器厂商组成的 W3C 社区团体制定的一个新的规范。

WebAssembly具有以下特点：

高效
WebAssembly 有一套完整的语义，实际上 wasm 是体积小且加载快的二进制格式，其目标就是充分发挥硬件能力以达到原生执行效率
安全
WebAssembly 运行在一个沙箱化的执行环境中，甚至可以在现有的 JavaScript 虚拟机中实现。在web环境中，WebAssembly将会严格遵守同源策略以及浏览器安全策略。
开放
WebAssembly 设计了一个非常规整的文本格式用来、调试、测试、实验、优化、学习、教学或者编写程序。可以以这种文本格式在web页面上查看wasm模块的源码。
标准
WebAssembly 在 web 中被设计成无版本、特性可测试、向后兼容的。WebAssembly 可以被 JavaScript 调用，进入 JavaScript 上下文，也可以像 Web API 一样调用浏览器的功能。当然，WebAssembly 不仅可以运行在浏览器上，也可以运行在非web环境下。

2. 为什么需要 WebAssembly

自从 JavaScript 诞生起到现在已经变成最流行的编程语言，这背后正是 Web 的发展所推动的。Web 应用变得更多更复杂，但这也渐渐暴露出了 JavaScript 的问题：

语法太灵活导致开发大型 Web 项目困难；
性能不能满足一些场景的需要。

针对以上两点缺陷，近年来出现了一些 JS 的代替语言，例如：

微软的 TypeScript 通过为 JS 加入静态类型检查来改进 JS 松散的语法，提升代码健壮性；
谷歌的 Dart 则是为浏览器引入新的虚拟机去直接运行 Dart 程序以提升性能；
火狐的 asm.js 则是取 JS 的子集，JS 引擎针对 asm.js 做性能优化。

以上尝试各有优缺点，其中：

TypeScript 只是解决了 JS 语法松散的问题，最后还是需要编译成 JS 去运行，对性能没有提升；
Dart 只能在 Chrome 预览版中运行，无主流浏览器支持，用 Dart 开发的人不多；
asm.js 语法太简单、有很大限制，开发效率低。

三大浏览器巨头分别提出了自己的解决方案，互不兼容，这违背了 Web 的宗旨；是技术的规范统一让 Web 走到了今天，因此形成一套新的规范去解决 JS 所面临的问题迫在眉睫。

于是 WebAssembly 诞生了，WebAssembly 是一种新的字节码格式，主流浏览器都已经支持 WebAssembly。和 JS 需要解释执行不同的是，WebAssembly 字节码和底层机器码很相似可快速装载运行，因此性能相对于 JS 解释执行大大提升。也就是说 WebAssembly 并不是一门编程语言，而是一份字节码标准，需要用高级编程语言编译出字节码放到 WebAssembly 虚拟机中才能运行，浏览器厂商需要做的就是根据 WebAssembly 规范实现虚拟机。

3. WebAssembly 原理

要搞懂 WebAssembly 的原理，需要先搞懂计算机的运行原理。电子计算机都是由电子元件组成，为了方便处理电子元件只存在开闭两种状态，对应着 0 和 1，也就是说计算机只认识 0 和 1，数据和逻辑都需要由 0 和 1 表示，也就是可以直接装载到计算机中运行的机器码。机器码可读性极差，因此人们通过高级语言 C、C++、Rust、Go 等编写再编译成机器码。

由于不同的计算机 CPU 架构不同，机器码标准也有所差别，常见的 CPU 架构包括 x86、AMD64、ARM，因此在由高级编程语言编译成可自行代码时需要指定目标架构。

WebAssembly 字节码是一种抹平了不同 CPU 架构的机器码，WebAssembly 字节码不能直接在任何一种 CPU 架构上运行，但由于非常接近机器码，可以非常快的被翻译为对应架构的机器码，因此 WebAssembly 运行速度和机器码接近，这听上去非常像 Java 字节码。

相对于 JS，WebAssembly 有如下优点：

体积小：由于浏览器运行时只加载编译成的字节码，一样的逻辑比用字符串描述的 JS 文件体积要小很多；
加载快：由于文件体积小，再加上无需解释执行，WebAssembly 能更快的加载并实例化，减少运行前的等待时间；
兼容性问题少：WebAssembly 是非常底层的字节码规范，制订好后很少变动，就算以后发生变化,也只需在从高级语言编译成字节码过程中做兼容。可能出现兼容性问题的地方在于 JS 和 WebAssembly 桥接的 JS 接口。

每个高级语言都去实现源码到不同平台的机器码的转换工作是重复的，高级语言只需要生成底层虚拟机(LLVM)认识的中间语言(LLVM IR)， LLVM 能实现：

LLVM IR 到不同 CPU 架构机器码的生成；
机器码编译时性能和大小优化。

除此之外 LLVM 还实现了 LLVM IR 到 WebAssembly 字节码的编译功能，也就是说只要高级语言能转换成 LLVM IR，就能被编译成 WebAssembly 字节码，目前能编译成 WebAssembly 字节码的高级语言有：

AssemblyScript:语法和 TypeScript 一致，对前端来说学习成本低，为前端编写 WebAssembly 最佳选择；
c\c++:官方推荐的方式，详细使用见文档;
Rust:语法复杂、学习成本高，对前端来说可能会不适应。详细使用见文档;
Kotlin:语法和 Java、JS 相似，语言学习成本低，详细使用见文档;
Golang:语法简单学习成本低。但对 WebAssembly 的支持还处于未正式发布阶段，详细使用见文档。

通常负责把高级语言翻译到 LLVM IR 的部分叫做编译器前端，把 LLVM IR 编译成各架构 CPU 对应机器码的部分叫做编译器后端；现在越来越多的高级编程语言选择 LLVM 作为后端，高级语言只需专注于如何提供开发效率更高的语法同时保持翻译到 LLVM IR 的程序执行性能。

4. 编写 WebAssembly

4.1 AssemblyScript 初体验

接下来详细介绍如何使用 AssemblyScript 来编写 WebAssembly，实现斐波那契序列的计算。用 TypeScript 实现斐波那契序列计算的模块 f.ts 如下：

export function f(x: i32): i32 {
    if (x === 1 || x === 2) {
        return 1;
    return f(x - 1) + f(x - 2)
在按照 AssemblyScript 提供的安装教程 成功安装后， 再通过 
asc f.ts -o f.wasm
就能把以上代码编译成可运行的 WebAssembly 模块。 
为了加载并执行编译出的 f.wasm 模块，需要通过 JS 去加载并调用模块上的 f 函数，为此需要以下 JS 代码： 
fetch('f.wasm') // 网络加载 f.wasm 文件
    .then(res => res.arrayBuffer()) // 转成 ArrayBuffer
    .then(WebAssembly.instantiate) // 编译为当前 CPU 架构的机器码 + 实例化
    .then(mod => { // 调用模块实例上的 f 函数计算
    console.log(mod.instance.f(50));
    });
以上代码中出现了一个新的内置类型 i32，这是 AssemblyScript 在 TypeScript 的基础上内置的类型。 AssemblyScript 和 TypeScript 有细微区别，AssemblyScript 是 TypeScript 的子集，为了方便编译成 WebAssembly 在 TypeScript 的基础上加了更严格的 类型限制 ，区别如下： 
比 TypeScript 多了很多更细致的内置类型，以优化性能和内存占用，详情 文档;
不能使用 any 和 undefined 类型，以及枚举类型；
可空类型的变量必须是引用类型，而不能是基本数据类型如 string、number、boolean；
函数中的可选参数必须提供默认值，函数必须有返回类型，无返回值的函数返回类型需要是 void；
不能使用 JS 环境中的内置函数，只能使用 AssemblyScript 提供的内置函数 。 
总体来说 AssemblyScript 比 TypeScript 又多了很多限制，编写起来会觉得局限性很大； 用 AssemblyScript 来写 WebAssembly 经常会出现 tsc 编译通过但运行 WebAssembly 时出错的情况，这很可能就是你没有遵守以上限制导致的；但 AssemblyScript 通过修改 TypeScript 编译器默认配置能在编译阶段找出大多错误。 
AssemblyScript 的实现原理其实也借助了 LLVM，它通过 TypeScript 编译器把 TS 源码解析成 AST，再把 AST 翻译成 IR，再通过 LLVM 编译成 WebAssembly 字节码实现； 上面提到的各种限制都是为了方便把 AST 转换成 LLVM IR。 
4.2 为什么选 AssemblyScript 作为 WebAssembly 开发语言
 
AssemblyScript 相对于 C、Rust 等其它语言去写 WebAssembly 而言，好处除了对前端来说无额外新语言学习成本外，还有对于不支持 WebAssembly 的浏览器，可以通过 TypeScript 编译器编译成可正常执行的 JS 代码，从而实现从 JS 到 WebAssembly 的平滑迁移。 
4.3 接入 Webpack 构建
 
任何新的 Web 开发技术都少不了构建流程，为了提供一套流畅的 WebAssembly 开发流程，接下来介绍接入 Webpack 具体步骤。 
安装以下依赖，以便让 TS 源码被 AssemblyScript 编译成 WebAssembly。 
  "devDependencies": {
    "assemblyscript": "github:AssemblyScript/assemblyscript",
    "assemblyscript-typescript-loader": "^1.3.2",
    "typescript": "^2.8.1",
    "webpack": "^3.10.0",
    "webpack-dev-server": "^2.10.1"
修改 webpack.config.js，加入 loader： 
module.exports = {
    module: {
        rules: [
                test: /\.ts$/,
                loader: 'assemblyscript-typescript-loader',
                options: {
                    sourceMap: true,
修改 TypeScript 编译器配置 tsconfig.json，以便让 TypeScript 编译器能支持 AssemblyScript 中引入的内置类型和函数。 
  "extends": "../../node_modules/assemblyscript/std/portable.json",
  "include": [
    "./**/*.ts"
配置直接继承自 assemblyscript 内置的配置文件。 
4.4 WebAssembly 相关文件格式
 
前面提到了 WebAssembly 的二进制文件格式 wasm，这种格式的文件人眼无法阅读，为了阅读 WebAssembly 文件的逻辑，还有一种文本格式叫 wast； 以前面讲到的计算斐波那契序列的模块为例，对应的 wast 文件如下： 
func $src/asm/module/f (param f64) (result f64)
(local i32)
  get_local 0
  f64.const 1
  f64.eq
  tee_local 1
  if i32
    get_local 1
    get_local 0
    f64.const 2
    f64.eq
  i32.const 1
  i32.and
    f64.const 1
    return
  get_local 0
  f64.const 1
  f64.sub
  call 0
  get_local 0
  f64.const 2
  f64.sub
  call 0
  f64.add
这和汇编语言非常像，里面的 f64 是数据类型，f64.eq f64.sub f64.add 则是 CPU 指令。 
为了把二进制文件格式 wasm 转换成人眼可见的 wast 文本，需要安装 WebAssembly 二进制工具箱 WABT ， 在 Mac 系统下可通过 brew install WABT 安装，安装成功后可以通过命令 wasm2wast f.wasm 获得 wast；除此之外还可以通过 wast2wasm f.wast -o f.wasm 逆向转换回去。 
5. WebAssembly 相关工具
 
除了前面提到的 WebAssembly 二进制工具箱，WebAssembly 社区还有以下常用工具： 
Emscripten: 能把 C、C++代码转换成 wasm、asm.js；
Binaryen: 提供更简洁的 IR，把 IR 转换成 wasm，并且提供 wasm 的编译时优化、wasm 虚拟机，wasm 压缩等功能，前面提到的 AssemblyScript 就是基于它。 
5.1 WebAssembly JS API
 
目前 WebAssembly 只能通过 JS 去加载和执行，但未来在浏览器中可以通过像加载 JS 那样 
<script src='f.wasm'></script>
去加载和执行 WebAssembly，下面来详细介绍如何用 JS 调 WebAssembly。 
JS 调 WebAssembly 分为 3 大步： 加载字节码 > 编译字节码 > 实例化 ，获取到 WebAssembly 实例后就可以通过 JS 去调用了，以上 3 步具体的操作是： 
对于浏览器可以通过网络请求去加载字节码，对于 Nodejs 可以通过 fs 模块读取字节码文件；
在获取到字节码后都需要转换成 ArrayBuffer 后才能被编译，通过 WebAssembly 通过的 JS API WebAssembly.compile 编译后会通过 Promise resolve 一个 WebAssembly.Module ，这个 module 是不能直接被调用的需要；
在获取到 module 后需要通过 WebAssembly.Instance API 去实例化 module，获取到 Instance 后就可以像使用 JS 模块一个调用了。 
其中的第 2、3 步可以合并一步完成，前面提到的 WebAssembly.instantiate 就做了这两个事情。 
WebAssembly.instantiate(bytes).then(mod=>{
  mod.instance.f(50);
5.2 WebAssembly 调 JS
 
之前的例子都是用 JS 去调用 WebAssembly 模块，但是在有些场景下可能需要在 WebAssembly 模块中调用浏览器 API，接下来介绍如何在 WebAssembly 中调用 JS。 
WebAssembly.instantiate 函数支持第二个参数 WebAssembly.instantiate(bytes,importObject)，这个 importObject 参数的作用就是 JS 向 WebAssembly 传入 WebAssembly 中需要调用 JS 的 JS 模块。举个具体的例子，改造前面的计算斐波那契序列在 WebAssembly 中调用 Web 中的 window.alert 函数把计算结果弹出来，为此需要改造加载 WebAssembly 模块的 JS 代码： 
WebAssembly.instantiate(bytes,{
  window:{
    alert:window.alert
}).then(mod=>{
  mod.instance.f(50);
对应的还需要修改 AssemblyScript 编写的源码： 
// 声明从外部导入的模块类型
declare namespace window {
    export function alert(v: number): void;
function _f(x: number): number {
    if (x == 1 || x == 2) {
        return 1;
    return _f(x - 1) + _f(x - 2)
export function f(x: number): void {
    // 直接调用 JS 模块
    window.alert(_f(x));
修改以上 AssemblyScript 源码后重新用 asc 通过命令 asc f.ts 编译后输出的 wast 文件比之前多了几行： 
(import "window" "alert" (func $src/asm/module/window.alert (type 0)))
(func $src/asm/module/f (type 0) (param f64)
    get_local 0
    call $src/asm/module/_f
    call $src/asm/module/window.alert)
多出的这部分 wast 代码就是在 AssemblyScript 中调用 JS 中传入的模块的逻辑。 
除了以上常用的 API 外，WebAssembly 还提供一些 API，你可以通过这个 d.ts 文件 去查看所有 WebAssembly JS API 的细节。 
6. 不止于浏览器
 
WebAssembly 作为一种底层字节码，除了能在浏览器中运行外，还能在其它环境运行。 
6.1 直接执行 wasm 二进制文件
 
前面提到的 Binaryen 提供了在命令行中直接执行 wasm 二进制文件的工具，在 Mac 系统下通过 brew install binaryen 安装成功后，通过 wasm-shell f.wasm 文件即可直接运行。 
6.1 在 Node.js 中运行
 
目前 V8 JS 引擎已经添加了对 WebAssembly 的支持，Chrome 和 Node.js 都采用了 V8 作为引擎，因此 WebAssembly 也可以运行在 Node.js 环境中； 
V8 JS 引擎在运行 WebAssembly 时，WebAssembly 和 JS 是在同一个虚拟机中执行，而不是 WebAssembly 在一个单独的虚拟机中运行，这样方便实现 JS 和 WebAssembly 之间的相互调用。 
要让上面的例子在 Node.js 中运行，可以使用以下代码： 
const fs = require('fs');
function toUint8Array(buf) {
    var u = new Uint8Array(buf.length);
    for (var i = 0; i < buf.length; ++i) {
        u[i] = buf[i];
    return u;
function loadWebAssembly(filename, imports) {
    // 读取 wasm 文件，并转换成 byte 数组
    const buffer = toUint8Array(fs.readFileSync(filename));
    // 编译 wasm 字节码到机器码
    return WebAssembly.compile(buffer)
        .then(module => {
            // 实例化模块
            return new WebAssembly.Instance(module, imports)
loadWebAssembly('../temp/assembly/module.wasm')
    .then(instance => {
        // 调用 f 函数计算
        console.log(instance.exports.f(10))
    });
在 Nodejs 环境中运行 WebAssembly 的意义其实不大，原因在于 Nodejs 支持运行原生模块，而原生模块的性能比 WebAssembly 要好。 如果你是通过 C、Rust 去编写 WebAssembly，你可以直接编译成 Nodejs 可以调用的原生模块。 
7. WebAssembly 展望
 
从上面的内容可见 WebAssembly 主要是为了解决 JS 的性能瓶颈，也就是说 WebAssembly 适合用于需要大量计算的场景，例如： 
在浏览器中处理音视频， flv.js 用 WebAssembly 重写后性能会有很大提升；
React 的 dom diff 中涉及到大量计算，用 WebAssembly 重写 React 核心模块能提升性能。Safari 浏览器使用的 JS 引擎 JavaScriptCore 也已经支持 WebAssembly，RN 应用性能也能提升；
突破大型 3D 网页游戏性能瓶颈， 白鹭引擎已经开始探索用 WebAssembly 。 
8. 结束语
 
WebAssembly 标准虽然已经定稿并且得到主流浏览器的实现，但目前还存在以下问题： 
浏览器兼容性不好，只有最新版本的浏览器支持，并且不同的浏览器对 JS WebAssembly 互调的 API 支持不一致；
生态工具不完善不成熟，目前还不能找到一门体验流畅的编写 WebAssembly 的语言，都还处于起步阶段；
学习资料太少，还需要更多的人去探索去踩坑。 
总之现在的 WebAssembly 还不算成熟，如果你的团队没有不可容忍的性能问题，那现在使用 WebAssembly 到产品中还不是时候， 因为这可能会影响到团队的开发效率，或者遇到无法轻易解决的坑而阻塞开发。 
9. 参考资料
 
 WASM中文网
 https://www.wasm.com.cn/
 
 WebAssembly 现状与实战
 https://developer.ibm.com/zh/articles/wa-lo-webassembly-status-and-reality/
 
                    文章目录1. WebAssembly是什么2. 为什么需要 WebAssembly3. WebAssembly 原理4. 编写 WebAssembly4.1 AssemblyScript 初体验4.2 为什么选 AssemblyScript 作为 WebAssembly 开发语言4.3 接入 Webpack 构建4.4 WebAssembly 相关文件格式5. WebAssembly 相关工具5.1 WebAssembly JS API5.2 WebAssembly 调 JS6. 不止于浏览器6.1 直接执
				Hands-On Game Development with WebAssembly
by Rick Battagline
Packt Publishing English 2019-05-31 596 pages
5.0/5.0  1 reviews
Details
Title: Hands-On Game Development with WebAssembly
Author: Rick Battagline
Length: 596 pages
Edition: 1
Language: English
Publisher: Packt Publishing
Publication Date: 2019-05-31
ISBN-10: 1838644652
ISBN-13: 9781838644659
Sales Rank: #1428959 (See Top 100 Books)
Categories
Computers & Technology
Digital Audio, Video & Photography
Programming
Description
Make your WebAssembly journey fun while making a game with it
Key Features
Create a WebAssembly game that implements sprites, animations, physics, particle systems, and other game development fundamentals
Get to grips with advanced game mechanics in WebAssembly
Learn to use WebAssembly and WebGL to render to the HTML5 canvas element
Book Description
Within the next few years, WebAssembly will change the web as we know it. It promises a world where you can write an application for the web in any language, and compile it for native platforms as well as the web.
This book is designed to introduce web developers and game developers to the world of WebAssembly by walking through the development of a retro arcade game. You will learn how to build a WebAssembly application using C++, Emscripten, JavaScript, WebGL, SDL, and HTML5.
This book covers a lot of ground in both game development and web application development. When creating a game or application that targets WebAssembly, developers need to learn a plethora of skills and tools. This book is a sample platter of those tools and skills. It covers topics including Emscripten, C/C++, WebGL, OpenGL, JavaScript, HTML5, and CSS. The reader will also learn basic techniques for game development, including 2D sprite animation, particle systems, 2D camera design, sound effects, 2D game physics, user interface design, shaders, debugging, and optimization. By the end of the book, you will be able to create simple web games and web applications targeting WebAssembly.
What you will learn
Build web applications with near-native performance using WebAssembly
Become familiar with how web applications can be used to create games using HTML5 Canvas, WebGL, and SDL
Become well versed with game development concepts such as sprites, animation, particle systems, AI, physics, camera design, sound effects, and shaders
Deploy C/C++ applications to the browser using WebAssembly and Emscripten
Understand how Emscripten HTML shell templates, JavaScript glue code, and a WebAssembly module interact
Debug and performance tune your WebAssembly application
Who this book is for
Web developers and game developers interested in creating applications for the web using WebAssembly.
Game developers interested in deploying their games to the web
Web developers interested in creating applications that are potentially orders of magnitude faster than their existing JavaScript web apps
C/C++ developers interested in using their existing skills to deploy applications to the web
Table of Contents
Introduction to WebAssembly and Emscripten
HTML5 and WebAssembly
Introduction to WebGL
Sprite Animations in WebAssembly with SDL
Keyboard Input
Game Objects and the Game Loop
Collision Detection
Basic Particle System
Improved Particle Systems
AI and Steering Behaviors
Designing a 2D Camera
Sound FX
Game Physics
UI and Mouse Input
Shaders and 2D Lighting
Debugging and Optimization




    

优质视频教程福利一：http://www.longstudy.club/tuiguan/js.html
服务器如何搭建博客:http://www.longstudy.club/tuiguan/t1/index.html
点赞再看，微信搜索 【大迁世界】 关注这个没有大厂背景，但有着一股向上积极心态人。本文 GitHub https://github.com/qq449245884/xiaozhi 上已经收录，文章的已分类，也整理了很多.
前两篇文章中:
WebAssembly 与 Rust 编程系列02 WebAssembly 调试工具的安装及使用
WebAssembly 与 Rust 编程系列03 手撕 WebAssembly 文本格式
我们手写了简单的wat代码,以及生成对应的wasm 二进制模块;
本篇文章主要演示下:如何在js中加载和使用这些模块;
这里我们只是用最简单示例,并没有多大工程参考意义,仅仅是演示WebAsse
编译器的结构相对保守。
提供源文件，其文本被标记化并解析为抽象语法树。 这里执行语法级检查。
一旦解析了所有引用的源文件，就构造一个程序并从AST初始化。 在这里进行合理性检查。 然后，程序及其元素充当代码生成中的中间表示，包含解析类型，标识符，属性访问等所需的所有信息。
然后，执行将程序元素编译到Binaryen模块。 在此处执行对单个语句和表达式的最终检查。 ...
				作者：Lin Clark 编译：胡子大哈 
翻译原文：huziketang.com/blog/posts/… 英文原文：Creating and working with WebAssembly modules
 转载请注明出处，保留原文链接以及作者信息
本文是关于 WebAssembly 系列的第四篇文章（本系列共六篇文章）。如果你没有读先前文章的话，建议先读这里。如果对 WebAssembl...
				本文是图说 WebAssembly 系列文章的第四篇。如果您还未阅读之前的文章，建议您从第一篇入手。
WebAssembly 是一种使得除 JavaScript 以外的编程语言也能运行在网页上的技术。在过去，当我们需要通过编程来控制网页内容时，我们的选择只有 JavaScript 。
所以当大家都说 WebAssembly 运行速度很快时...
WebAssembly（缩写为Wasm）是基于堆栈的虚拟机的二进制指令格式。Wasm被设计为可移植目标，用于编译高级语言（如C / C ++ / Rust），从而可以在Web上为客户端和服务器应用程序进行部署。
webassembly的背景
我们为什么需要wasm？它可以解决什么问题？
javascript从最开始诞生起，它的定位就是一门解释性语言，它...
				以下是一个简单的WebAssembly示例，它将两个数字相加并返回结果：
首先，我们需要创建一个 C 或 C++ 文件，将代码编写为一个函数，该函数接受两个数字作为参数并返回它们的和。例如，我们将创建一个叫做 "add.c" 的文件，代码如下：
int add(int a, int b) {
  return a + b;
接下来，我们需要使用 emscripten 编译器编译该代码，生成 WebAssembly 模块文件和 JavaScript 包装器。emscripten 编译器是一个工具集，它可以将 C/C++ 代码编译为 WebAssembly 模块和 JavaScript 包装器。我们可以使用以下命令进行编译：
emcc add.c -s WASM=1 -o add.js
这将生成一个名为 "add.js" 的 JavaScript 文件和一个名为 "add.wasm" 的 WebAssembly 模块文件。
现在我们可以在 HTML 文件中加载这些文件并使用它们。我们创建一个 HTML 文件，将其引入生成的 JavaScript 文件和 WebAssembly 模块文件，并使用以下代码调用 "add" 函数：
<script>
  // 加载 WebAssembly 模块
  const wasmModule = new WebAssembly.Module(await fetch('add.wasm').then(response => response.arrayBuffer()));
  // 创建 WebAssembly 实例
  const wasmInstance = new WebAssembly.Instance(wasmModule);
  // 调用 "add" 函数
  const result = wasmInstance.exports.add(2, 3);
  console.log(result); // 输出 5
</script>
这将加载 WebAssembly 模块文件，创建 WebAssembly 实例并调用 "add" 函数，将 2 和 3 作为参数传递，并将结果打印到控制台。
                    cgs1999: 
                    1、这应该是浏览器的兼容性问题，需要对该版本的浏览器功能进行调试解决。
2、目前没有环境验证这个问题，对于看不到远程视频，需要先确定是发送端没有发，还是接收端没有收到或收到解码不了，可以抓包确定一下问题原因。
3、发送和接收的问题可以从SDP入手排查，可能是发送接收双方的码流协商不出一致的编解码格式，另外可以跟踪一下整个码流链路
                搭建Janus的HTTPS环境
                    sfxy_net01: 
                    chrome111版看不了远程视频，有解决办法吗
                Emscripten简介及初体验
                    Linkinbeyond: 
                最新libwebsockets库的编译与测试方法
                    helloccsy: 
                    下载发行版：
wget https://github.com/warmcat/libwebsockets/archive/refs/tags/v4.3.2.zip
                浏览器支持H.265解码总结
                    cgs1999: 
                    不好意思，Firefox浏览器底层的编解码代码不熟悉，帮不到你哈。