# WebAssembly 在全民直播的應用 - 趙洋 (Eros Zhao)

{%hackmd j86FNbMoRoeN4Xn0pg5ofw %}

> 請從這裡開始

> 可不可以在微信的 WebView 中放 HTTP-FLV 直播流 [name=講者的CTO]

### 微信 WebView的好與壞
* 直播只允許 HLS
* 延遲在 10s 以上，實時性高的直播無法接受
* MSE 無法使用
* Canvas/WebGL 支援良好
* WebAudio APi 支援良好

### [jsmpeg](https://github.com/phoboslab/jsmpeg)

### 音/視訊解碼的一般過程
* 協議層 (http rtmp file)
* 數據 -> 協議層 ->
* 封裝格式擴展 (mkv flv mp4)
* 封裝資料格式 -> 解封裝 ->
* 編碼層 (h264 h265 mpeg2 aac)
* 視訊碼流 -> 視訊解碼 ->
* 音訊碼流 -> 音訊解碼 ->
* 像素採樣層 (yuv420 rgb pcm)
* 視頻像素數據
* 音頻採樣數據


轉成mp4。瀏覽器普遍支援.

### jsmpeg的執行過程

MPEG-TS -> Demuxer ->
視訊: MPEG1 -> YCBCR -> RGB -> Canvas/WebGL
音訊: MP2 -> Audio buffer -> WebAudio API


我們可以參考JSMPEG的過程在webview裡做Codec

### 遇到的問題
目前沒有成熟可用的H264 Codec的Javascript實現
Javascript能否勝任H264 Codec的大量計算任務？

DEMO: http://7xp7a9.com1.z0.glb.clouddn.com/index.html

* 在2017年中旬時WebAssembly就已經可堪重用
* WebAssembly移植其他平台的代碼十分簡單
* 同時使用ASM.JS, WebAssembly整體能夠有著良好的兼容性

> 當時 IOS 不支援 WEBRTC
> 現在已經支援了，所以現在我們已經拋棄掉了

## 5 分鐘入門 WebAssembly

* WebAssembly 特徵
* 高校
* 開放可調式
* 標準
* 安全

支援編譯WebAsembly
C++ Rust AssemblyScript Kotlin Go HAXE

C/C++代碼 -> WASM模塊 -> javascript膠接代碼 -> HTML文件

1. 編寫 C/C++ 程式碼

extern "C"
int sum(int *arr, int length) {
    int ret = 0;
    for (int i = 0; i < length; i++) {
        ret += arr[i];
    }
    return ret;
}

2. 使用 Emscripten 編譯 C/C++ 程式碼


3. 封裝膠接程式碼 [pic1](https://i.imgur.com/2chJhbE.jpg) [pic2](https://i.imgur.com/btrKPnH.jpg)

function _arrayToHeap(typedArray) {
    const numBytes = typedArray.length * typedArray.BYTES_PER_ELEMENT;
    const ptr = Module._malloc(numBytes);
    const heapBytes = new Uint8Array(Module.HEAPU8.buffer, ptr, numBytes);
    heapBytes.set(new Uint8Array(typedArray.buffer));
}

function _freeArray(heapBytes) {
    Module._free(heapBytes.byteOffset);
}

Module.sum = function(intArray) {
    const heapBytes = _arrayToHeap(intArray);
    const ret = Module.ccall(
        "sum",
        "number",
        ["number", "number"],
        [heapBytes.byteOffset, intArray.length]
    );
    _freeArray(heapBytes);
    return ret;
}
Module.sum(new Int32Array([1, 2, 3, 4]));  // output: 10

需要動態申請WebAssembly使用的記憶體
Module._malloc

確保Javascript傳入的格式與C的格式相同（like Int32）

## 真實專案中的 WebAsembly

- 效率提昇

大部分編解碼的團隊熟悉C/C++
編解碼團隊不熟悉播放器怎麼寫

- 需要安全性

業務相關邏輯封裝

遷移Buffer實現
但是發現編譯出來的buffer好像用的比node多

性能消耗在copy上，只好少new內存並copy資料

盡量使用同一塊記憶體，使用移動指標的方式來copy跟改變其他Buffer的指向
decode多是讀，因此性能提昇很快

> 當WebAssembly和Javascript互相呼叫時效能急遽下降 [name=講者]

發現要call Asembly方法的時候要分配記憶體，因為記憶體獨立，所以需要copy，性能損耗就很大

需要使用SharedArrayBuffer，但是這在瀏覽器因為安全因素而被禁止了

使用ring buffer

使用一大塊的記憶體，然後使用這個大的記憶體來重複使用，自己定義要怎麼彼此呼叫的方式

> Note that `SharedArrayBuffer` was disabled by default in all major browsers on 5 January, 2018 in response to Spectre. [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer) [name=講者]


> 我們彈幕通訊協議被暴露了 [name=講者的安全負責人]

https://github.com/littlecodersh/danmu

Javascript的程式碼壓縮混淆安全係數太低，必須要改進

* 使用 ASM.JS/WebAssembly 進行協議加解密部分的編譯
* 增加部分「障眼法」相關策略已此提昇破解難度

> 這樣後真的一勞永逸了嗎? NO! [name=講者]

WebAssembly因為是開源的，有一些方式可以復原程式碼
雖然變成二進位的檔案，但是還原還是可行，只是成本高。

> WebAssembly 具有一定安全性，但並不是完全安全

###### tags: `MW18`