题记：现在流行用wasm处理视频技术。B站为了省带宽，居然强行在Web端开了hevc播放，用8个wasm worker来软解，1080p高码率能吃掉接近2个核，我说怎么一看B站风扇就转起来了，还好留了个口子能改回avc1，改回去后就正常了。WASM 的概念，这几年还是挺火的，新的语言，比如 Rust、Go、Swift 等，都对 WASM 提供支持。相比之下，Go 语言的简单性，使得对 WASM 的支持，使用起来也较简单。本文是目前公开资料中为数不多较完整的教程，希望能对你有帮助。

01 WASM 是什么

标题说：“Golang 中的 Wasm 太棒了。”，但请用几句话来说“Wasm”是什么？
WebAssembly 主页说：“WebAssembly（缩写为 Wasm）是一种基于堆栈的虚拟机的二进制指令格式。Wasm 被设计为编程语言的可移植编译目标，支持在 Web 上部署客户端和服务器应用程序。”
总结就是：

  • “Wasm 是一种可移植的格式（如 Java 或 .Net），你可以在任何有支持它的主机的地方执行它。最初，主要的主机是带有浏览器的 JavaScript”。

现在，你可以用 JavaScript 和 NodeJS 运行 Wasm，我们最近看到了像 Wasmer 项目这样的 Wasm 运行时的诞生，允许在任何地方运行 Wasm。
我喜欢说“一个 wasm 文件就像一个容器镜像，但更小，没有操作系统”。

02 Wasm 是多语言的，但是…

你可以用多种语言编译一个 Wasm 文件：C/C++、Rust、Golang、Swift ……我们甚至看到了专门用于构建 Wasm 的语言的出现，比如 AssemblyScript[1] 或有前途的 Grain[2]（可以密切关注它，语法很可爱）。
今年夏天，我决定开始使用 Wasm。这种趋势似乎是使用 Rust，但我很快就明白我的小步骤会很复杂。困难不一定来自语言本身。最乏味和困难的部分是我在浏览器中运行一个简单的“Hello World”所需的所有工具。经过一番搜索，我发现 Golang 为 Wasm 提供了非常简单的支持（比 Rust 简单得多）。所以，我的假期作业是用 Golang 完成的。
Golang 对 Wasm 的支持非常棒。通常，WebAssembly 有四种数据类型（32 和 64 位整数，32 和 64 位浮点数），使用带有字符串参数（甚至 JSON 对象）的函数可能会很混乱。幸运的是，Go 提供了wasm_exec.js 与 JavaScript API 交互的文件。

03 先决条件

要运行此博客文章的示例，你需要：

  • Golang 1.16
  • TinyGo 0.19.0（注意：TinyGo 0.19.0 不适用于 GoLang 1.17）
  • 为你的网页提供服务的 http 服务器

顺便说一句，为了提供我的页面，我使用带有以下代码的 Fastify[3] 项目：
index.js

  1. const fastify = require('fastify')({ logger: true })
  2. const path = require('path')
  4. // Serve the static assets
  5. fastify.register(require('fastify-static'), {
  6.   root: path.join(__dirname, ''),
  7.   prefix: '/'
  8. })
  10. const start = async () => {
  11.   try {
  12.     await fastify.listen(8080, "0.0.0.0")
  13.     fastify.log.info(`server listening on ${fastify.server.address().port}`)
  15.   } catch (error) {
  16.     fastify.log.error(error)
  17.   }
  18. }
  19. start()

我使用这个package.json文件来安装 Fastify（使用npm install）：
package.json

  1. {
  2.     "dependencies": {
  3.         "fastify": "^3.6.0",
  4.         "fastify-static": "^3.2.1"
  5.     }
  6. }

我在这里创建了一个项目 https://gitlab.com/k33g_org/suborbital-demo，如果你用 GitPod[4] 打开它，你会得到一个准备好的开发环境，你不需要安装任何东西。

04 必不可少的 “Hello World！”

创建一个项目

首先，创建一个hello-world目录，然后在该目录中创建 2 个文件：

  • main.go
  • index.html

使用以下源代码：
main.go

  1. package main
  3. import (
  4.     "fmt"
  5. )
  7. func main() {
  8.   fmt.Println("👋 Hello World 🌍")
  9.     // Prevent the function from returning, which is required in a wasm module
  10.     <-make(chan bool)
  11. }

index.html

  1. <html>
  2.     <head>
  3.         <meta charset="utf-8"/>
  4.         <script src="wasm_exec.js"></script>
  6.     </head>
  7.     <body>
  8.         <h1>WASM Experiments</h1>
  9.         <script>
  10.             // This is a polyfill for FireFox and Safari
  11.             if (!WebAssembly.instantiateStreaming) { 
  12.                 WebAssembly.instantiateStreaming = async (resp, importObject) => {
  13.                     const source = await (await resp).arrayBuffer()
  14.                     return await WebAssembly.instantiate(source, importObject)
  15.                 }
  16.             }
  18.             // Promise to load the wasm file
  19.            function loadWasm(path) {
  20.              const go = new Go()
  22.              return new Promise((resolve, reject) => {
  23.                WebAssembly.instantiateStreaming(fetch(path), go.importObject)
  24.                .then(result => {
  25.                  go.run(result.instance)
  26.                  resolve(result.instance)
  27.                })
  28.                .catch(error => {
  29.                  reject(error)
  30.                })
  31.              })
  32.            }
  34.          // Load the wasm file
  35.          loadWasm("main.wasm").then(wasm => {
  36.              console.log("main.wasm is loaded 👋")
  37.          }).catch(error => {
  38.              console.log("ouch", error)
  39.          }) 
  41.         </script>
  42.     </body>
  43. </html>

备注：最重要的部分是：

  • 这行代码
  • 和这一行WebAssembly.instantiateStreaming，它是允许加载 wasm 文件的 JavaScript API。

你还需要go.mod文件，使用以下命令生成一个：go mod init hello-world，它的内容如下：

  1. module hello-world
  3. go 1.16

构建你的第一个 Wasm 模块

在构建 Wasm 模块之前，你需要获取wasm_exec.js文件，然后才能启动编译：

  1. $ cp "$(go env GOROOT)/misc/wasm/wasm_exec.js" .
  2. $ GOOS=js GOARCH=wasm go build -o main.wasm

现在，使用命令 node index.js 为你的 html 页面提供服务，以运行 Fastify http 服务器，并使用你喜欢的浏览器打开 http://localhost:8080，然后打开开发人员控制台工具：
go 实现 wasm处理视频技术（B站HEVC） - 图1
wasm experiments

所以，上手很简单，但是如果你查看 main.wasm 的大小，你会发现生成的文件大小在 2.1M 左右！！！老实说，我觉得这是不可接受的。幸运的是，使用 TinyGo 是一个较友好的解决方案。让我们看看。

  1. source code: https://gitlab.com/k33g_org/suborbital-demo/-/tree/main/01-hello-world

05 TinyGo 版的 “Hello World”

首先，什么是 TinyGo？TinyGo 允许为微控制器编译 Golang 源代码，它也可以将 Go 代码编译为 Wasm。TinyGo 是一个用于“小地方”的编译器，因此生成的文件要小得多。
将你的 hello-world 项目复制到一个新目录 hello-world-tinygo 并更改go.mod文件的内容：

  1. module hello-world-tinygo
  3. go 1.16

在构建 Wasm 文件之前，这一次，你需要获取 wasm_exec.js 与 TinyGo 的相关信息，然后才能编译：

  1. $ wget https://raw.githubusercontent.com/tinygo-org/tinygo/v0.19.0/targets/wasm_exec.js
  2. $ tinygo build -o main.wasm -target wasm ./main.go

如果你提供 html 页面，你将获得与前一个示例相同的结果。但是看看 main.wasm 的大小。现在大小是 223K，小好多。
请记住，TinyGo 支持 Go 语言的一个子集，因此并非所有语言都可用（https://tinygo.org/docs/reference/lang-support/）。对于我的实验来说，这就足够了。

  1. 源代码：https://gitlab.com/k33g_org/suborbital-demo/-/tree/main/02-hello-world-tinygo

06 我的私藏货

我看过太多冗长的教程，最终停留在这个简单的“hello world”上而没有进一步。他们甚至没有解释如何将参数传递给函数。通常，这只是项目“入门”的掩饰，没有后续深入的讲解。
今天，我给你分享所有让你对 WASM 理解更多的私藏货。
以下是我今天将介绍的 Wasm 和浏览器之间的不同交互：

  • 与 DOM 交互
  • 以字符串为参数调用 Golang 函数来获取字符串
  • 如何通过 JavaScript 返回“可读”的对象？
  • 如何使用 JSON 对象作为参数？
  • 如何使用数组作为参数？

  • 如何返回一个数组？

    与 DOM 交互

    我们将使用”syscall/js” 这个 Go 包从 Go 代码向 Html 文档对象模型添加子标签。根据文档：“使用 js/wasm 架构时，Package js 可以访问 WebAssembly 主机环境。它的 API 基于 JavaScript 语义。” . 这个包公开了一小组功能：类型 Value（Go JavaScript 数据表示）和从 JavaScript 主机请求 Go 的方式。

  • 通过复制前一个目录创建一个新目录并命名为 dom

  • 更新 go.mod 文件： ```java module dom

go 1.16

  1. 只需更改以下代码 **main.go**：
  2. ```java
  3. package main
  5. import (
  6.     "syscall/js"
  7. )
  9. func main() {
  10.   message := "👋 Hello World 🌍"
  12.   document := js.Global().Get("document")
  13.   h2 := document.Call("createElement", "h2")
  14.   h2.Set("innerHTML", message)
  15.   document.Get("body").Call("appendChild", h2)
  17.   <-make(chan bool)
  18. }

编译代码：tinygo build -o main.wasm -target wasm ./main.go 并提供 html 页面 node index.js，然后打开 http://localhost:8080/。
go 实现 wasm处理视频技术（B站HEVC） - 图2

  • 我们得到了对 DOM 的引用 js.Global().Get(“document”)
  • 我们创建了

    元素 document.Call(“createElement”, “h2”)
  • 我们通过 h2.Set(“innerHTML”, message) 来设置 innerHTML 的值
  • 最后将元素添加到 body 中 document.Get(“body”).Call(“appendChild”, h2)
    1. 完整源码：https://gitlab.com/k33g_org/suborbital-demo/-/tree/main/03-dom
    现在，让我们看看如何创建一个可调用的 Go 函数，我们将在我们的 html 页面中使用它。

    调用 Go 函数

    这一次，我们需要将函数“导出”到全局上下文中（即浏览器中的 window，或 NodeJS 中的 global）。”syscall/js” 这个 Go 包再次提供了必要的帮助程序来做到这一点。
    像往常一样，创建一个新目录 first-function（使用前面的示例）并通过 go.mod 更改模块的值来更新文件：module first-function。
    这是的源代码main.go： ```java package main

import ( “syscall/js” )

func Hello(this js.Value, args []js.Value) interface{} { message := args[0].String() // get the parameters return “Hello “ + message }

func main() { js.Global().Set(“Hello”, js.FuncOf(Hello))

  1. <-make(chan bool)

}

  2. - 为了导出函数到全局上下文，我们使用的 FuncOf 函数：js.Global().Set("Hello", js.FuncOf(Hello))。该 FuncOf 函数用于创建 Func 类型。
  3. - 该 Hello 函数接受两个参数并返回一个 interface{} 类型。该函数将从 Javascript 同步调用。第一个参数 ( this) 指的是 JavaScript 的global对象。第二个参数是 []js.Value 表示传递给 Javascript 函数调用的参数的切片。
  5. 我们需要修改 index.html 文件来调用 Go 函数 Hello：<br />**index.html**:
  6. ```java
  7. <html>
  8.     <head>
  9.         <meta charset="utf-8"/>
  10.         <script src="wasm_exec.js"></script>
  12.     </head>
  13.     <body>
  14.         <h1>WASM Experiments</h1>
  15.         <script>
  16.             // polyfill
  17.             if (!WebAssembly.instantiateStreaming) { 
  18.                 WebAssembly.instantiateStreaming = async (resp, importObject) => {
  19.                     const source = await (await resp).arrayBuffer()
  20.                     return await WebAssembly.instantiate(source, importObject)
  21.                 }
  22.             }
  24.       function loadWasm(path) {
  25.         const go = new Go()
  26.         return new Promise((resolve, reject) => {
  27.           WebAssembly.instantiateStreaming(fetch(path), go.importObject)
  28.           .then(result => {
  29.             go.run(result.instance)
  30.             resolve(result.instance)
  31.           })
  32.           .catch(error => {
  33.             reject(error)
  34.           })
  35.         })
  36.       }
  38.     loadWasm("main.wasm").then(wasm => {
  39.         console.log("main.wasm is loaded 👋")
  40.         console.log(Hello("Bob Morane"))
  41.         document.querySelector("h1").innerHTML = Hello("Bob Morane")
  42.             }).catch(error => {
  43.         console.log("ouch", error)
  44.       }) 
  46.         </script>
  47.     </body>
  48. </html>

发生了什么变化？，只有这两行：

  • console.log(Hello(“Bob Morane”))：使用”Bob Morane” 作为参数调用 Go 函数 Hello 并在浏览器控制台中显示结果。
  • document.querySelector(“h1”).innerHTML = Hello(“Bob Morane”)：使用”Bob Morane” 作为参数调用 Go 函数 Hello 并使用结果更改 h1 的值。

所以，

  • 构建 Wasm 文件：tinygo build -o main.wasm -target wasm ./main.go
  • 提供 html 页面：node index.js

go 实现 wasm处理视频技术（B站HEVC） - 图3
你可以看到页面内容已更新，但我们在控制台中有一些错误消息。不用担心，它很容易修复；这是一个已知错误 https://github.com/tinygo-org/tinygo/issues/1140，解决方法很简单：

  1. function loadWasm(path) {
  2.     const go = new Go()
  3.     //remove the message: syscall/js.finalizeRef not implemented
  4.     go.importObject.env["syscall/js.finalizeRef"] = () => {}
  6.     return new Promise((resolve, reject) => {
  7.         WebAssembly.instantiateStreaming(fetch(path), go.importObject)
  8.         .then(result => {
  9.             go.run(result.instance)
  10.             resolve(result.instance)
  11.         })
  12.         .catch(error => {
  13.             reject(error)
  14.         })
  15.     })
  16. }
  • 我只添加了这一行 go.importObject.env[“syscall/js.finalizeRef”] = () => {} 以避免错误消息。

刷新页面，没有问题了。
go 实现 wasm处理视频技术（B站HEVC） - 图4
现在，你几乎拥有深入 WASM 所需的一切。不过，我想把我的更多私藏货分享给你。

  1. 完整代码：https://gitlab.com/k33g_org/suborbital-demo/-/tree/main/04-first-function

07 我的其他私藏货

如何通过 JavaScript 返回“可读”的对象？

这一次，我们将 2 个字符串参数传递给 Hello 函数 ( firstName 和 lastName)，并使用类型 map[string]interface{} 返回一个 json 对象 ：
Golang 函数：

  1. func Hello(this js.Value, args []js.Value) interface{} {
  3.     firstName := args[0].String()
  4.     lastName := args[1].String()
  6.     return map[string]interface{}{
  7.         "message": "👋 Hello " + firstName + " " + lastName,
  8.         "author":  "@k33g_org",
  9.     }
  11. }

从 JavaScript 调用 Hello 函数很简单：

  1. loadWasm("main.wasm").then(wasm => {
  2.     let jsonData = Hello("Bob", "Morane")
  3.     console.log(jsonData)
  4.     document.querySelector("h1").innerHTML = JSON.stringify(jsonData)
  6. }).catch(error => {
  7.     console.log("ouch", error)
  8. })

为你的页面提供服务 node index.js：
go 实现 wasm处理视频技术（B站HEVC） - 图5

  1. 完整源码：https://gitlab.com/k33g_org/suborbital-demo/-/tree/main/05-return-object

调用 Hello 时如何使用 Json 对象作为参数？

如果我想在 JavaScript 中使用 Json 对象作为参数，就像这样：

  1. let jsonData = Hello({firstName: "Bob", lastName: "Morane"})

我会像这样写我的 Golang 函数：

  1. func Hello(this js.Value, args []js.Value) interface{} {
  3.     // get an object
  4.     human := args[0]
  5.     // get members of an object
  6.     firstName := human.Get("firstName")
  7.     lastName := human.Get("lastName")
  9.     return map[string]interface{}{
  10.         "message": "👋 Hello " + firstName.String() + " " + lastName.String(),
  11.         "author":  "@k33g_org",
  12.     }
  14. }
  • args[0] 包含 Json 对象

  • 使用 Get(field_name) 方法检索字段的值

    1. 完整代码：https://gitlab.com/k33g_org/suborbital-demo/-/tree/main/06-json-as-parameter

    调用 Hello 时如何使用数组作为参数？

    JavaScript 调用：

    1. let jsonData = Hello(["Bob", "Morane", 42, 1.80])

    Golang 函数：

    1. func Hello(this js.Value, args []js.Value) interface{} {
    3.   // get members of an array
    4.   firstName := args[0].Index(0)
    5.   lastName := args[0].Index(1)
    6.   age := args[0].Index(2)
    7.   size := args[0].Index(3)
    9.   return map[string]interface{}{
    10.       "message":   "👋 Hello",
    11.       "firstName": firstName.String(),
    12.       "lastName":  lastName.String(),
    13.       "age":       age.Int(),
    14.       "size":      size.Float(),
    15.       "author":    "@k33g_org",
    16.   }
    17. }
    1. 完整代码：https://gitlab.com/k33g_org/suborbital-demo/-/tree/main/07-array-as-parameter

    如何返回一个数组？

    Golang 函数：

    1. func GiveMeNumbers(_ js.Value, args []js.Value) interface{} {
    2.   return []interface{} {1, 2, 3, 4, 5}
    3. }
    1. 完整代码：https://gitlab.com/k33g_org/suborbital-demo/-/tree/main/08-return-an-array

    就这些了吧。目前，我仍在学习 Wasm 和 Golang 的 Js 包，但我已经从中获得了一些乐趣。希望你也一样。
    原文链接：https://blog.suborbital.dev/foundations-wasm-in-golang-is-fantastic

    参考资料

    [1][2][3][4]
    AssemblyScript: https://www.assemblyscript.org/
    Grain: https://grain-lang.org/
    Fastify: https://www.fastify.io/
    GitPod: https://www.gitpod.io/