web摄像头连拍&大文件分段上传调用摄像头，设置摄像头分辨率，移动设备前置或后置摄像头 + canvas实现视频截图并

摄像头 + video + canvas

调用摄像头

navigator.mediaDevices.getUserMedia 设置参数

音频和视频： { audio: true, video: true }

摄像头分辨率：

{
  audio: true,
  video: {
    width: { min: 1280 },
    height: { min: 720 }
  }
}

ideal 理想值 min 最小值 max 最大值 exact 精准值

移动设备：

前置摄像头

{  video: { facingMode: "user" } }

后置摄像头：

{  video: { facingMode: { exact: "environment" } } }

帧率控制：WebRTC 上使用受限带宽传输时，低帧率

{ video: { frameRate: { ideal: 10, max: 15 } } }

navigator.mediaDevices.getUserMedia({ 
    video: {
        width: {
            exact: 400
        }, 
        height: {
            exact: 400
        }
    }, 
    audio: false 
}).then((stream) => {
    video.srcObject = stream;
    video.play();
}).catch(function(err) {
    console.log("An error occurred! " + err);
});

video 加载媒体流

    video.srcObject = stream;
    video.play();

video 撑满

video{
    /* 填满 */
    object-fit: fill;
    width: 400px;
    height: 400px;
}

canvas 截图

img 标签的 src： URL.createObjectURL(blob) Blob类型

上传数据：FormData FormData.append(name, value) ： value 是 Blob类型 File类型是 Blob的子类型

大文件分段上传

1）FileReader readAsArrayBuffer得到二进制值文件 ArrayBuffer类型数据

2）分段切割二进制文件 binary.slice((num - 1) * blockSize, nextSize)

3）切割完的二进制文件转化为 File文件

var myFile = new File(bits, name[, options]);

bits 是个数组 [ArrayBuffer]

const canvas = document.createElement('canvas')
const ctx = canvas.getContext('2d')
canvas.width = video.width 
canvas.height = video.height 
ctx.drawImage(video, 0, 0, canvas.width, canvas.height)

// const url = canvas.toDataURL()
// url base64 编码

canvas.toBlob(blob => {
   const url = URL.createObjectURL(blob);
   this.videoImg = url
})