// 开始录制视频
start() {
//设置画布背景
let canvasElement = document.createElement("canvas"); // 生成canvas;
this.canvasContext = canvasElement.getContext("2d")
this.canvasContext.fillStyle = "deepskyblue";
this.canvasContext.fillRect(0, 0, 500, 522);
//创建MediaRecorder,设置媒体参数
this.stream = canvasElement.captureStream(60);
this.recorder = new MediaRecorder(this.stream, {
mimeType: "video/webm;codecs=vp8"
});
//收集录制数据
this.recorder.ondataavailable = e => {
this.chunks.push(e.data);
};
this.recorder.start(10);
this.drawFrame();
},
drawFrame() { // this.videoOk = $(`#video_${remoteStream.id_}`).get(0); // 获取video 视频id
this.canvasContext.drawImage(this.videoOk, 0, 0, 300, 180);
this.frameId = window.requestAnimationFrame(this.drawFrame);
},
// 停止视频录制
stop() {
this.recorder.stop();
cancelAnimationFrame(this.frameId);
this.download();
},
// 下载 或 上传
download() {
let blob = new Blob(this.chunks);
let url = window.URL.createObjectURL(blob);
// debugger
// let link = document.createElement("a");
// link.href = url;
let formData = new FormData();
let media = new File([blob], "mark.mp4");
formData.append("file", media); // 变formData 进行上传
upload(formData).then(response => {
this.formData.evidenceVideo = response.fileName
})
},
video js的录制
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
推荐阅读更多精彩内容
- 1.背景 对于正在播放的视频,期望做到 录制这个视频流,并上传到后端服务。 2.实现思路: 1.通过 video ...
- 高清音视频录制存储目前需求日益增加,如医疗影像、导播视频、视频会议、电视节目、电脑手机视频、蓝光摄像机等都有对视频...
- 背景描述: 实现一款视频播放器,同时支持直播和录播功能 功能清单: 支持解析m3u8或flv两种直播流,支持录播且...