czy-avue-form-design
Version:
Vue3.0版本，因Avue还存在一些bug，请慎重使用。
91 lines (84 loc) • 2.1 kB
JavaScript
export default class RecordVideo {
/**
* 构造函数
*
* @param {Object} videoObj 视频对象
*/
constructor(videoObj) {
this.video = videoObj;
this.mediaRecorder = null;
this.chunks = [];
}
/**
* 初始化
*
* @return {Object} promise
*/
init() {
// 返回Promise对象
// resolve 正常处理
// reject 处理异常情况
return new Promise((resovle, reject) => {
navigator
.mediaDevices
.getUserMedia({
audio: true,
video: true
// video: {
// width: this.videoWidth,
// height: this.videoHeight
// }
})
// 返回一个媒体内容的流
.then(stream => {
// 检测是否支持 srcObject，该属性在新的浏览器支持
if ('srcObject' in this.video) {
this.video.srcObject = stream;
} else {
// 兼容旧的浏览器
this.video.src = window.URL.createObjectURL(stream);
}
// 当视频的元数据已经加载时触发
this.video.addEventListener('loadmetadata', () => {
this.video.play();
});
this.mediaRecorder = new MediaRecorder(stream);
this.mediaRecorder.addEventListener('dataavailable', e => {
this.chunks.push(e.data);
});
resovle();
})
// 异常抓取，包括用于禁用麦克风、摄像头
.catch(error => {
reject(error);
});
});
}
/**
* 视频开始录制
*/
startRecord() {
if (this.mediaRecorder.state === 'inactive') {
this.mediaRecorder.start();
}
}
/**
* 视频结束录制
*/
stopRecord() {
if (this.mediaRecorder.state === 'recording') {
this.mediaRecorder.stop();
}
}
/**
* 检测当前浏览器对否支持
*
* @return {boolean} 当前浏览器是否支持
*/
isSupport() {
const flag = navigator.mediaDevices && navigator.mediaDevices.getUserMedia;
if (flag) {
return true;
}
}
}