本文介绍: 切片式上传 segmentUploadVideoByBlob 实时上传bolb到后端。整个视频上传就直接传blob uploadMeetVideoByBlob。获取音频流之后可使用MediaStream将两个流合并实现有声视频。写在同一个本地文件最后一起上传到文件服务器。
前端
screenShot(){
// 获取屏幕共享流
navigator.mediaDevices.getDisplayMedia({
video: true,
audio: true,
//preferCurrentTab 共享本次操作的页面
preferCurrentTab: true
}).then(async stream => {
const mediaRecorder = new MediaRecorder(stream, { mimeType: 'video/webm; codecs=vp9' });
const chunks = [];
mediaRecorder.ondataavailable = e => {
//MediaRecorder.start(timeslice)开始有时间参数为切片存储调以下接口实现切片式上传
//MediaRecorder.start()没有时间参数 只有mediaRecorder.onstop调用最后一次整个视频上传
segmentUploadVideoByBlob(that.meetInfo.id, e.data).then(resData => {
// console.info(resData);
});
chunks.push(e.data);
};
mediaRecorder.onstop = () => {
const blob = new Blob(chunks, { type: 'video/webm' });
const url = URL.createObjectURL(blob);
// 在这里可以使用录制好的视频数据
// console.log("url",url);URL可实现实时录播
// uploadMeetVideoByBlob(1,blob).then(res=>{
// console.log("res",res)
// })
};
// 开始录制MediaRecorder.start(timeslice)：开始录制，timeslice 为可选参数，单位：毫秒，如果设置了则会按时间切片存储数据。
mediaRecorder.start(5 * 1000);
//
// // 录制一段时间后停止
// setTimeout(() => {
// mediaRecorder.stop();
// }, 5000);
})
.catch(error => {
console.error('获取屏幕共享流失败：', error);
});
},后端
整个视频上传就直接传blob uploadMeetVideoByBlob
切片式上传 segmentUploadVideoByBlob 实时上传bolb到后端
补充
// 获取电脑音频流
const _selfstream = await navigator.mediaDevices.getUserMedia({ audio: true });获取音频流之后可使用MediaStream将两个流合并实现有声视频
原文地址:https://blog.csdn.net/Caoshilong1/article/details/134717227
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若转载，请注明出处：http://www.7code.cn/show_19974.html
如若内容造成侵权/违法违规/事实不符，请联系代码007邮箱：suwngjj01@126.com进行投诉反馈，一经查实，立即删除！
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
