文件对象

// 创建指定字节长度的二进制对象
var buffer1 = new ArrayBuffer(8);

// 从Blob对象获取
var blob = new Blob(["文本内容"], { type: "text/plain" });
blob.arrayBuffer().then(function(buffer) {
    var buffer2 = buffer;
})

// 从类型化数组获取
var array = new Int8Array([1, 2, 3]);
var buffer3 = array.buffer;


// 从base64字符串获取??
// 从本地文件获取??

// 空类型化数组
var arr1 = new Int8Array();

// 长度为20的类型化数组
var arr2 = new Int8Array(20); 

// 复制类型化数组或Array数组
var arr3 = new Int16Array(arr2);

// ArrayBuffer对象作为参数创建类型化数组
var buffer = new ArrayBuffer(20);

// new Int8Array(buffer[, byteOffset, length]);
var arr4 = new Int8Array(buffer, 2, 10);

// ArrayBuffer对象作为参数创建数据视图对象
var buffer = new ArrayBuffer(20);

// new DataView(buffer[, byteOffset, length]);
const view1 = new DataView(buffer);
const view2 = new DataView(buffer, 12, 4);

// new Blob(array[, options])
// array：ArrayBuffer，TypeArray，DataView，Blob，String 等对象构成的 Array
var blob = new Blob(["文本内容"], {
    type : "text/plain", // MIME类型
    endings: "transparent", // 行结束符：transparent 不变（默认值），native 根据操作系统更改
});

// 构建函数 new File() 参考 new Blob()

// 通过input[type=file]选择的文件
var file = document.querySelector("input[type=file]").files[0];

// 通过拖拽选择的文件
document.querySelector(".box").addEventListener("drop",function(event){
    var file = event.dataTransfer.files[0];
});

var files = document.getElementById('fileInput').files;

var reader = new FileReader();

// new FormData(form?: HTMLFormElement)
var formData = new FormData();

// 空对象
var stream1 = new MediaStream();
// steam：另一个 MediaStream 对象
var stream2 = new MediaStream(stream);
// tracks：MediaStreamTrack 对象数组
var stream3 = new MediaStream(tracks);

// 获取用户本地摄像机和麦克风的实时媒体流
navigator.mediaDevices
    .getUserMedia({
        audio: true,
        video: true,
    })
    .then(function (stream) {
        video.srcObject = stream;
        video.play();
    });
// 获取用户屏幕的实时媒体流
navigator.getDisplayMedia
    .getUserMedia({
        audio: true,
        video: true,
    })
    .then(function (stream) {
        video.srcObject = stream;
        video.play();
    });
// 获取画布的实时媒体流
canvas.captureStream().then(function (stream) {
    video.srcObject = stream;
    video.play();
});

var mediaSource = new MediaSource;

const video = document.querySelector("video");
const mimeType = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"';

if (MediaSource.isTypeSupported(mimeType)) {
    const mediaSource = new MediaSource();
    //console.log(mediaSource.readyState); // closed
    video.src = URL.createObjectURL(mediaSource);
    mediaSource.addEventListener("sourceopen", sourceOpen);
} else {
    console.log("不支持mimeType：" + mimeType);
}

function sourceOpen() {
    //console.log(this.readyState); // open
    const mediaSource = this;
    const sourceBuffer = mediaSource.addSourceBuffer(mimeType);

    sourceBuffer.addEventListener("updateend", function () {
        mediaSource.endOfStream();
        video.play();
        console.log(mediaSource.readyState); // ended
    });

    const xhr = new XMLHttpRequest();
    xhr.open("get", "../../static/video/frag_bunny.mp4");
    xhr.responseType = "arraybuffer";
    xhr.onload = function () {
        sourceBuffer.appendBuffer(xhr.response);
    };
    xhr.send();
}