Base64,MIME,arraybuffer,blob,blob URL,FileReader,ts,Codec

二进制

Base64
网络上最常见的用于传输8Bit字节码的编码方式之一，Base64就是一种基于64个可打印字符来表示二进制数据的方法

MIME
(Multipurpose Internet Mail Extensions) 是描述消息内容类型的因特网标准。
MIME 消息能包含文本、图像、音频、视频以及其他应用程序专用的数据。
不同的应用程序支持不同的 MIME 类型。
MIME 类型大约有191种类型，是的没错，191种。

arrayBuffer
ArrayBuffer表示二进制数据的原始缓冲区，该缓冲区用于存储各种类型化数组的数据。是最基础的原始数据容器，无法直接读取或写入， 需要通过其他方式来读写。 但可根据需要将其传递到类型化数组或 DataView 对象来解释原始缓冲区。

也就是说他是一个二进制数据的原始缓冲区，虽然 JavaScript 是弱类型语言，但是他本身是对数据的类型和大小都有限制的，我们需要通过某种数据结构将缓冲区的内容有序的读取出来或写进去

例如：
Int8Array 8位有符号整数
Uint8Array 8位无符号整数
Uint8ClampedArray 同上，像素操作
Int16Array
Uint16Array
Int32Array
Uint32Array
Float32Array
Float64Array

以上是Typed Array类型化数组，类型化数组类型表示可编制索引和操纵的 ArrayBuffer 对象 的各种视图。 所有数组类型的长度均固定。而DataView视图对象对数据的操作更加细致

ArrayBuffer是一个固定长度的字节序列，通过new ArrayBuffer(length)来得到一片空间，内部实现与数组应该是不一样（内存分配和布局与Array不一样），ArrayBuffer是连续内存，因此对于高密度的访问（如音频数据）操作而言它比JS中的Array速度会快很多

ArrayBuffer是不能直接被访问的，因此需要借助Typed Array

Typed Array的背后是一个ArrayBuffer，也就是说，事实上的数据是存在ArrayBuffer里面的，而Typed Array只是给你提供了一个某种类型的读写接口

总结一句话: Typed Array不直接存放任何数据，所有对Typed Array进行读写的操作，最终都会落实到它背后所持有的ArrayBuffer的身上。 ArrayBuffer才是真正的元始数据字节，而Typed Array只是一个操作窗口/操作视图（View）

获取二进制数据
常见的在网页里获取二进制数据有三种:

XMLHttpRequest2
File
Blob

通过XMLHttpRequest 2
XHR2的接口跟XHR几乎是一样的，当制定xhr.responseType = 'arraybuffer'以后，在成功获取数据的回调里就可以通过xhr.response来得到请求结果的ArrayBuffer了，然后就可以按照你的意愿来构造各种Typed Array进行访问。
responseType还可以有blob取值，可以用xhr.response获得Blob对象。

​通过File和Blob
在H5的表单File控件中，通过files对象来获取一个FileList，此列表对象中的每一个都是files对象
也可以通过H5的拖拽drop事件捕获到files对象或blob对象
File继承了Blob，并提供了name， lastModifiedDate， size ，type 等基础元数据
Blob 与ArrayBuffer的区别是除了 原始字节 以外它还提供了mime type作为元数据
它们都可以借助 FileReader将Blob读取为更为实用的数据类型去使用

readAsArrayBuffer()
readAsBinaryString()
readAsDataURL()
readAsText()

blob
Binary Large Object （二进制大型对象）
Blob对象代表了一段二进制数据，提供了一系列操作接口，file对象的父类型是Blob对象。
生成 Blob 对象有两种方法：

使用 Blob 构造函数
另一种是对现有的 Blob 对象使用 slice 方法切出一部分

Blob 构造函数，接受两个参数。
第一个参数是一个包含实际数据的数组
第二个参数是数据的类型
这两个参数都不是必需的

var arr = [“hello”, “world”]
var Blob = new Blob(arr, { “type” : “text/xml” })
console.log(Blob)

Blob 对象的 slice 方法，将二进制数据按照字节分块，返回一个新的 Blob 对象
var arr = [“hello”, “world”]
var Blob = new Blob(arr, { “type” : “text/xml” })
var newBlob = Blob.slice(0, 5)
console.log(newBlob)

Blob 对象有两个只读属性：
size：二进制数据的大小，单位为字节。（文件上传时可以在前端判断文件大小是否合适）
type：二进制数据的 MIME 类型，全部为小写，如果类型未知，则该值为空字符串。（文件上传时可以在前端判断文件类型是否合适）
gbk编码： 数字字母 一字节 1KB= 1024字节 一中文汉字是 2字节
UTF-8编码： 数字字母 一字节 1KB= 1024字节 一个中文汉字是 3字节

Silce 读取部分内容
有时候我们读取一部分而不是全部内容，Filereader对象支持一个slice( )方法，在火狐中用mozSlice( )，在chrome中webkitSilde()

silce(start,end)
start 开始索引，默认为0
end 截取结束索引（不包括end）
contentType 新Blob的MIME类型，默认为空字符串

这个方法返回一个Blob实例，Blog是File类型的父类型，Blog类型有一个size属性和一个type属性，它也支持slice方法，以便进一步切割数据，通过FileReader也可以从Blob中读取数据

function blogSlice( blob,start,end ){
    if( blog.slice ){
        return blob.slice(start,end)
    }else if( blob.webkitSlice ){
        return blob.webkitSlice(start,end)
    }else if( blob.mozSlice ){
        return blob.mozSlice(start,end)         
    }else{
        return null
    }
}

blob类型读取FileReader的20B内容

var reader = new FileReader()
var blob = blogSlice( e.dataTransfer.files[0] , 0 , 20 )
reader.readAsText( blob )
if( blob ){
    reader.onload = function(){
        box.innerHTML = this.result
    }
}else{
    alert('no data')
}

只读取文件的一部分可以节省时间，非常适合只关注数据中某个特定部分（如文件文件）的情况

FileList对象
当用户通过 file 控件 选取文件后，这个控件的 this.files 属性值就是 FileList 对象。是个类数组，带上multiple 属性用户可选取多个文件，否则只能选择一个元素。

<input type='file' multiple id='oInput'/>
<script>
    oInput.onchange = function() {
        console.log(this.files)
    };
</script>

拖拽也可以获取 FileList 对象

oInput.ondrop = function(e) {
    e.stopPropagation()
    e.preventDefault()
    var files = e.dataTransfer.files
    console.log(files)
  };

在表单选择文件或者拖拽文件中，用户通过事件触发，只能被动地读取FileList 文件列表

对象URL
对象URL也被称为 blob URL，指的是引用保存在File或Blob中数据的URL，使用对象URL的好处是没必要把内容读取到js中，而直接使用文件内容，能生成一个链接，例如 Img的src = URL

​ 创建对象URL，用 window.URL.createObjectURL( blob )方法，并传入flle或Blob对象，对二进制数据生成一个 临时的URL，这个 URL 可以放置于任何通常可以放置 URL 的地方，比如 img 标签的 src 属性，出于一些特殊的需要，也可以使URL失效，调用 URL.revokeObjectURL( url ) 方法，使 URL 失效

function createObject(blob){
    if( window.URL ){
        return window.URL.createObjectURL(blob)
    }else if( window.webkitURL ){
        return window.webkitURL.createObjectURL(blob)
    }else{
        return null
    }
}

createObject函数的返回值是一个字符串，指向一块内存地址。因为这个字符串是URL，所 以在DOM中也能使用，例如下用法

var reader = new FileReader()
var url = createObject( files[0] )
if( url ){
    if( /image/.test(files[0].type) ){
        box.innerHTML = '<img src="'+url+'" />'
    }else{
        alert( 'no img' )
    }
}else{
    alert( 'no data' )
}

直接把对象URL放在img标签中，就省去了把数据先读取js中，另一方面img标签则会找到相应的内存地址，直接读取数据并将图像显示到页面中

FileReader
用于读取文件，即把文件内容读入内存，是一种异步文件读取机制，它的参数是 File 对象或 Blob 对象。对于不同类型的文件，FileReader 提供不同的方法读取文件。

创建读取文件的对象
var reader = new FileReader()

readAsDataURL(Blob|File)
读取文件并将文件以数据URI的形式保存在result属性中，返回一个基于 Base64 编码的 data-uri 对象
reader.readAsDataURL(files[0])

readAsText(Blob|File, opt_encoding)
返回文本字符串。默认情况下，文本编码格式是 UTF-8，可以通过可选的格式参数，指定其他编码格式的文本
以纯文本形式读取文件，将读取到的文本保存在result属性中，第二个参数用于指定编码类型，可选的
reader.readAsText( files[0],encoding )

readAsBinaryString(Blob|File) IE可能不支持
返回二进制字符串，该字符串每个字节包含一个 0 到 255 之间的整数。（已废弃）
读取文件并将一个字符保存在result属性中，字符串的每个字符表示一字节
reader.readAsBinaryString(files)

readAsArrayBuffer(Blob|File) IE可能不支持
返回一个 ArrayBuffer 对象
读取文件并将一个包含文件内容的ArrayBuffer保存在result属性中
reader.readAsArrayBuffer(files)

流媒体

m3u8
M3U8是Unicode版本的M3U，用UTF-8编码。”M3U” 和 “M3U8” 文件都是苹果公司使用的 HTTP Live Streaming（HLS） 协议格式的基础，这种协议格式可以在 iPhone 和 Macbook 等设备播放。m3u8文件其实是 HTTP Live Streaming（缩写为 HLS） 协议的部分内容，而 HLS 是一个由苹果公司提出的基于 HTTP 的流媒体网络传输协议。

HLS 的工作原理是把整个流分成一个个小的基于 HTTP 的文件来下载，每次只下载一些。当媒体流正在播放时，客户端可以选择从许多不同的备用源中以不同的速率下载同样的资源，允许流媒体会话适应不同的数据速率。在开始一个流媒体会话时，客户端会下载一个包含元数据的 extended M3U (m3u8) playlist文件，用于寻找可用的媒体流。

m3u8文件实质是一个播放列表（playlist），其可能是一个媒体播放列表（Media Playlist），或者是一个主列表（Master Playlist）。但无论是哪种播放列表，其内部文字使用的都是 utf-8 编码。 当 m3u8 文件作为媒体播放列表（Meida Playlist）时，其内部信息记录的是一系列媒体片段资源，顺序播放该片段资源，即可完整展示多媒体资源，由此可知，整个视频的总时长就是各个.ts切片资源的时长之和。

TS流文件
TS的全称则是Transport Stream，TS流文件，是一种DVD的文件格式，MPEG2-TS格式的特点就是要求从视频流的任一片段开始都是可以独立解码的。

Codec
COder-DECoder编译码器。指的是数字通信中具有编码、译码功能的器件。

视频封装格式
视频文件的后缀名如 .mp4、.avi、.rmvb 都是属于视频文件的封装格式。所谓封装格式，就是以怎样的方式将视频轨、音频轨、字幕轨等信息组合在一起。

视频文件的封装格式并不影响视频的画质，影响视频画面质量的是视频的编码格式。

WebRTC
Web Real-Time Communication，web实时通信技术。

相关软件
ffmpeg
videojs
flv.js
hls.js

参考链接：https://blog.csdn.net/simon_xing/article/details/81519443