web 直播流的解析

Web 進制操做是一個比較底層的話題，由於日常作業務的時候根本用不到太多，或者說，根本用不到。

老鐵，沒毛病

那什麼狀況會用到呢？

• canvas

• websocket

• file

• fetch

• webgl

• ...

上面只是列了部份內容。如今比較流行的就是音視頻的處理，怎麼說呢？

若是，有涉及直播的話，那麼這應該就是一個很是！很是！很是！重要的一塊內容。我這裏就不廢話了，先主要看一下里面的基礎內容。

總體架構

首先，一開始咱們是怎麼接觸到底層的 bit 流呢？

記住：只有一個對象咱們能夠搞到 bit 流 --> ArrayBuffer

這很似曾相識，例如在 fetch 使用中，咱們能夠經過 res.arrayBuffer(); 來直接獲取 ArrayBuffer 對象。websocket 中，監聽 message，返回來的 event.data 也是 arraybuffer。

let socket = new WebSocket('ws://127.0.0.1:8080');
socket.binaryType = 'arraybuffer';

socket.addEventListener('message', function (event) {
    let arrayBuffer = event.data;
    ···
});

可是，ArrayBuffer 並不能直接提供底層流的獲取操做！！！

你能夠經過 TypeArray 和 DataView 進行相關查看：

接下來，咱們具體看一下 TypeArray 和 DataView 的具體細節吧。

TypedArray

首先聲明這並非一個具體的 array 對象，而是一整個底層 Buffer 的概念集合。首先，咱們瞭解一下底層的二進制：

二進制

在通常程序語言裏面，最底層的數據大概就能夠用 0 和 1 來表示：

00000000000000000000000100111010

根據底層的比特的數據還能夠劃分爲兩類：

• signed: 從左到右第一位開始，若是爲 0 則表示爲正，爲 1 則表示爲負。例如：-127~+127

• unsigned: 從左到右第一位不做爲符號的表示。例如：0~255

而咱們程序表達時，爲了易讀性和簡便性經常會結合其餘進制一塊兒使用。

• 八進制(octet)

• 十進制(Decimal)

• 十六進制(Hexadecimal)

特別提醒的是：

在 JS 中:
使用 0x 字面上表示十六進制。每一位表明 4bit(2^4)。
使用 0o 字面上表示八進制。每一位表明 3bit(2^3)。還有一種是直接使用 0 爲開頭，不過該種 bug 較多，不推薦。
使用 0b 字面上表示二進制。每一位表明 1bit(2^1)。

瞭解了二進制以後，接下來咱們主要來了解一下 Web 比特位運算的基本內容。

位運算

Web 中的位運算和其它語言中相似，有基本的 7 個。

與 (&)

在相同位上，都爲 1 時，結果才爲 1：

// 在 Web 中二進制不能直接表示
001 & 101 = 001

而且，該運算經常會和叫作 bitmask（屏蔽字）結合起來使用。好比，在音視頻的 Buffer 中，第 4 位 bit 表示該 media segments 裏面是否存在 video。那麼爲了檢驗，則須要提取第 4 位，這時候就須要用到咱們的 bitmask。

// 和 1000 進行相與
buf & 8

或 (|)

在相同位上，有一個爲 1 時，結果爲 1。

// FROM MDN
    9 (base 10) = 00000000000000000000000000001001 (base 2)
    14 (base 10) = 00000000000000000000000000001110 (base 2)
                   --------------------------------
14 ^ 9 (base 10) = 00000000000000000000000000000111 (base 2) = 7 (base 10)

非 (~)

只和本身作運算，若是爲 0，結果爲 1。若是爲 1 結果爲 0。反正就是相反的意思了：

// FROM MDN
 9 (base 10) = 00000000000000000000000000001001 (base 2)
               --------------------------------
~9 (base 10) = 11111111111111111111111111110110 (base 2) = -10 (base 10)

異或 (^)

當二者中只有一個 1 那麼結果才爲 1。

// FROM MDN
    9 (base 10) = 00000000000000000000000000001001 (base 2)
    14 (base 10) = 00000000000000000000000000001110 (base 2)
                   --------------------------------
14 ^ 9 (base 10) = 00000000000000000000000000000111 (base 2) = 7 (base 10)

左移 (<<)

基本格式爲：x << y

將 x 向左移動 y 位數。空出來的補 0

// FROM MDN
9 (base 10): 00000000000000000000000000001001 (base 2)
                  --------------------------------
9 << 2 (base 10): 00000000000000000000000000100100 (base 2) = 36 (base 10)

帶位右移 (>>)

什麼叫帶位呢?

上面咱們提到過 signed 和 unsigned。那麼這裏針對的就是 signed 的位移類型。

格式爲： x >> y

將 x 向右移動 y 位數。左邊空出來的位置根據最左邊的第一位決定，若是爲 1 則補 1，反之。

1001 >> 2 = 1110

直接右移 (>>>)

該方式和上面具體區別就是，該運算針對的是 unsigned 的移動。無論你左邊是啥，都給我補上 0。

格式爲： x >> y

1001 >> 2 = 0010

上面這些運算符主要是針對 32bit 的。不過有時候爲了簡便，能夠省去前面多餘的 0。不過你們要清楚，這是針對 32 位的便可。

優先級

上面簡單介紹了位操做符，可是他們的優先級是怎麼樣的呢？詳情能夠參考：precedence;

簡單來講：(按照下列順序，優先級下降)

~
>> << >>>
& ^ |

位運算具體運用

狀態改變

後臺在保存數據的時候，經常會遇到某一個字段有多種狀態。例如，填表狀態：填完，未填，少填，填錯等。通常狀況下直接用數字來進行代替就行，只要文檔寫清楚就沒事。例如：

• 0： 填完

• 1： 未填

• 2：少填

• 3：填錯

不過，咱們還能夠經過比特位來進行表示，每一位表示一個具體的狀態。

• 0001： 填完

• 0010： 未填

• 0100：少填

• 1000：填錯

這樣咱們只要找到每一位是否爲 1 就能夠知道里面有哪些狀態存在。而且，還能夠對狀態進行組合，例如，填完而且填錯，若是按照數字來講就沒啥說明這樣的狀況。

那麼基本的狀態值有了，接下來就是怎麼進行賦值和修改。

如今假設，某人的填寫狀態爲 填完 + 填錯。那麼結果能夠表示爲：

var mask = 0001 | 1000;

後面若是涉及條件判斷，例如：該人是否填錯，則可使用 & 來表示：

// 是否填錯
if(mask & 1000) doSth;

或者，是否即填完又填錯

if(mask & (1000 | 0001)) doSth;

後面涉及到狀態改變的話，則須要用到 | 運算。假設，如今該人爲填完，如今變爲少填。那麼狀態改變應該爲：

// 取填完的反狀態
var done = ~0001; // 1110
mask &= done;

// 添加少填狀態;
mask |= 0100

進制轉換

在 JS 中進制轉換有兩種方式：toString 和 parseInt。

• toString(radix): 該能夠將任意進制轉換爲 2-36 的進制。radix 默認爲 10。

• parseInt(string,radix): 將指定 string 根據 radix 的標識轉換成爲 10 進制。radix 默認爲 10。另外它主要用做於字符串的提取。

• Number(string): 字面上轉換字符串爲十進制。

parseInt 用於字符串過濾，例如：

parseInt('15px', 10); // return 15

裏面的字符不只只有數字，並且還包括字母。

不過須要注意的是，parseInt 是不承認，以 0 開頭的八進制，但承認 0o。因此，在使用的時候須要額外注意。

上面說過，parseInt 是將其它進制轉換爲 10 進制，其第二個參數主要就是爲了表示前面內容的進制，若是沒寫，引擎內部會進行相關識別，但不保證必定正確。因此，最好寫上。

parseInt(' 0xF', 16); // return 15

若是你只是想簡單轉換一下字符串，那麼使用 Number() 無疑是最簡單的。

Number('0x11')    // 17
Number('0b11')    // 3
Number('0o11')    // 9

toString

toString 裏面的坑就沒有 parseInt 這麼多了。它也是進制轉換很是好用的一個工具。由於是 字符串，因此，這裏就只能針對字面量進制進行轉換了--2,8,(10),16。這四種進制的相關之間轉換。

提醒：若是你是直接使用字面量轉換的話，須要注意使用 10 進制轉換時，隱式轉換會失效。即，100.toString(2) 會報錯。

例如：

0b1101101.toString(8); // 155
0b1101101.toString(10); // 109
0b1101101.toString(8); // 6d

如上面所述，他們轉換後的結果通常沒有進制前綴。這個時候，就須要手動加上相關的前綴便可。

例如：16 進制轉換

function hexConvert(str){
    return "0x" + str.toString(16);
}

到這裏，進制轉換基本就講完了。後面咱們來看一下具體的 TypeArray

總體架構

TypeArray 不是一個能夠用程序寫出來的概念，它是許多 TypeArray 的總稱。參考: TypeArray。能夠了解到，它的子類以下：

• Int8Array();

• Uint8Array();

• Uint8ClampedArray();

• Int16Array();

• Uint16Array();

• Int32Array();

• Uint32Array();

• Float32Array();

• Float64Array();

看上去不少，不過在 JS 中，由於它天生都不是用來處理 signed 類型的。因此，Uint 系列在 JS 中應該算是主流。大概排個序：

Uint8Array > Uint16Array > Int8Array > ...

他們之間的具體不一樣，參照：

數據類型	字節長度	含義	對應的C語言類型
Int8	1	8位帶符號整數	signed char
Uint8	1	8位不帶符號整數	unsigned char
Uint8C	1	8位不帶符號整數（自動過濾溢出）	unsigned char
Int16	2	16位帶符號整數	short
Uint16	2	16位不帶符號整數	unsigned short
Int32	4	32位帶符號整數	int
Uint32	4	32位不帶符號的整數	unsigned int
Float32	4	32位浮點數	float
Float64	8	64位浮點數	double

雖然口頭上說 TypeArray 沒有一個具體的實例，可是私下,上面那幾個 array 都是叫他爸爸。由於他定義了一些 uintArray 的基本功能。首先是實例化：

TypeArray 的實例化有 4 種：

new TypedArray(length); // 建立指定長度的 typeArray
new TypedArray(typedArray); // 複製新的 typeArray
new TypedArray(object); // 不經常使用
new TypedArray(buffer [, byteOffset [, length]]); // 參數爲 arrayBuffer。

上面 4 中最經常使用的應該爲 1 和 4。接着，咱們瞭解一下，具體才建立的時候，TypeArray 到底作了些什麼。

當建立實例 TypeArray 的構造函數時，內部會同時建立一個 arrayBuffer 用來做爲數據的存儲。若是是經過 TypedArray(buffer); 方式建立，那麼 TypeArray 會直接使用該 buffer 的內存地址。

接下來，咱們就以 Uint8Array 爲主要參照，來看一下基本的處理和操做。

該例直接來源於 MDN

// From a length
var uint8 = new Uint8Array(2);
uint8[0] = 42;
console.log(uint8[0]); // 42
console.log(uint8.length); // 2
console.log(uint8.BYTES_PER_ELEMENT); // 1

// From an array
var arr = new Uint8Array([21,31]);
console.log(arr[1]); // 31

// From another TypedArray
var x = new Uint8Array([21, 31]);
var y = new Uint8Array(x);
console.log(y[0]); // 21

// From an ArrayBuffer
var buffer = new ArrayBuffer(8); // 建立 8個字節長度的 arrayBuffer
var z = new Uint8Array(buffer, 1, 4);

它上面的方法你們直接參考 MDN 的上的就 OK。一句話總結就是，你能夠想操做 Array 同樣，操做裏面的內容。

根據 ArrayBuffer 的描述，它自己的是從 files 和 base64 編碼來獲取的。若是隻是初始化，他裏面的每一位都是 0.不過，爲了容易測試，咱們能夠直接本身指定：

var arrBuffer = Uint8Array.from('123'); // [1,2,3]

// 或者

var arrBuffer = Uint8Array.of(1,2,3); // [1,2,3]

多字節圖

假如一個 Buffer 很長，假設有 80 位，算下來就是 10B。一開始咱們的想法就是直接建立一個 typeArray就 OK。不過，根據上面的構造函數上看，其實，能夠將一整個 buffer 拆成不一樣的 typeArray 進行讀取。

buf; // 10B 的 buf

var firstB = new Uint8Array(buf,0,1); // buf 中第一個字節內容

var theRestB = new Uint8Array(buf,1,9); // buf 中 2~10 的字節內容

字節概念

在字節中，還有幾個相關的概念須要理解一下。一個是溢出，一個是字節序。一樣，仍是根據 Uint8 來講明。

Uint8 每個數組位，表示 8 位二進制，即範圍爲 0~255。

溢出

var arrBuffer = Uint8Array.from('61545');
arrBuffer; // [6, 1, 5, 4, 5]

而後咱們作一下加法：

arrBuffer[0] += 1; // 7

arrBuffer[0] += 0xfe; // 6。由於 7 + 254 溢出 6

而後是字節序。

字節序

在 JS，Java，C 等高級語言中，字節序通常都是大字節序。而一些硬件則會以小字節序做爲標準。

• 大字節序：假如 0xAABB 被 Uint16 存儲爲 2 位。那麼按照大字節序就是按順序來，即 0: 0xAA, 1:0xBB。

• 小字節序：和上面相反，即，0:0xBB,1:0xAA。

固然若是隻是在 PC 上操做了的話，字節序可使用 IIFE 檢測一下：

(function () {
    let buf = new ArrayBuffer(2);
    (new DataView(buf)).setInt16(0, 256, true);  // little-endian write
    return (new Int16Array(buf))[0] === 256;  // platform-spec read, if equal then LE
})();

關於 TypeArray 的內容差很少就是上面將的。接下來， 咱們再來看另一個重要的對象 DataView。

DataView

DataView 沒有 TypeArray 這麼複雜，衍生出這麼多個 Uint/IntArray。它就是一個構造函數。一樣，它的目的也是對底層的 arrayBuffer 進行讀取。那麼，爲何它會被建立出來呢？

是由於有 字節序 的存在。上面說過字節序有兩種。一般，PC 和目前流行的電子設備都是大字節序，而若是是接收一些外部資源，就不能排除會接受一些小字節序的文件。爲了解決這個問題，就出現了 DataView。它的實例格式爲：

new DataView(buffer [, byteOffset [, byteLength]])

一樣，它的格式和 TypeArray 相似，也是用來做爲 buffer 的讀寫對象。

• buffer: 須要接入的底層 ArrayBuffer

• byteOffset: 偏移量，單位爲字節

• byteLength: 獲取長度，單位爲字節

它的具體操做不是直接經過 [] 獲取，而是使用相關的 get/set 方法來完成。而他針對 字節序 的操做，主要是針對 >=16 比特的流來區別，即，get/setInt8() 是沒有 字節序 的概念的。

先以 16 位的做爲例子：

dataview.getInt16(byteOffset [, littleEndian]);
// 根據字節序，得到偏移字節後的兩個字節。

• byteOffset: 單位爲 字節。

• littleEndian[boolean]: 字節序。默認爲 false。表示大字節序。

var buffer = new ArrayBuffer(8);
var dataview = new DataView(buffer);
dataview.getInt16(1,true); // 0

Buffer 場景

如上面所述，Buffer 的場景有：

• canvas

• websocket

• file

• fetch

• webgl

file

直接看代碼吧：

let fileInput = document.getElementById('fileInput');
let file = fileInput.files[0];
let reader = new FileReader();
reader.readAsArrayBuffer(file);
reader.onload = function () {
   let arrayBuffer = reader.result;
   ···
};

AJAX

這裏和 fetch 區分一下，做爲一種兼容性比較好的選擇。

let xhr = new XMLHttpRequest();
xhr.open('GET', someUrl);
xhr.responseType = 'arraybuffer';

xhr.onload = function () {
    let arrayBuffer = xhr.response;
    ···
};

xhr.send();

fetch

fetch(url)
.then(request => request.arrayBuffer())
.then(arrayBuffer => ···);

canvas

let canvas = document.getElementById('my_canvas');
let context = canvas.getContext('2d');
let imageData = context.getImageData(0, 0, canvas.width, canvas.height);
let uint8ClampedArray = imageData.data;

websocket

let socket = new WebSocket('ws://127.0.0.1:8080');
socket.binaryType = 'arraybuffer';

socket.addEventListener('message', function (event) {
    let arrayBuffer = event.data;
    ···
});

上面這些都是能夠和 Buffer 進行交流的對象。那還有其餘的嗎？有的，總的一句話：

能提供的 arrayBuffer 的均可以進行底層交流。