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 的均可以进行底层交流。