宜搭能否实现视频录制上传
您好,可以实现录制上传,以下是实现思路及步骤:获取屏幕流:通过 navigator.mediaDevices.getDisplayMedia 方法来获取用户的屏幕流。这个接口会弹出一个窗口,允许用户选择他们想要共享的屏幕或窗口。使用 MediaRecorder:创建一个 MediaRecorder 实例来录制获取的流。用 ondataavailable 事件来收集数据,onstop 事件在录制结束时被调用。 输出 Blob 对象:在 onstop 事件中,创建一个 Blob 对象,该对象由记录的片段组成。之后可以通过 URL.createObjectURL 创建可供下载的链接,让用户能够下载他们录制的内容。js示例:
export async function onClick(){
console.log('onClick');
// 获取屏幕流
const stream = await navigator.mediaDevices.getDisplayMedia({
video: true,
audio: true // 如果需要同时录制音频
});
mediaRecorder = new MediaRecorder(stream);
mediaRecorder.ondataavailable = event => {
if (event.data.size > 0) {
recordedChunks.push(event.data);
}
};
mediaRecorder.onstop = () => {
const blob = new Blob(recordedChunks, {
type: 'video/webm'
});
recordedChunks = []; // 重置记录的片段
const videoUrl = URL.createObjectURL(blob);
let selectedFD = this.$('attachmentField_m03qw1av')
let uploaderRef = selectedFD.uploaderRef;
let fileName = '测试.webm'
let file = new File([blob], fileName, { type: blob.type})
uploaderRef.selectFiles(file)
// 可以在这里进行下载录屏文件到本地
const a = document.createElement('a');
a.href = videoUrl;
a.download = 'recording.webm';
document.body.appendChild(a);
a.textContent = '下载录制的视频';
a.click();
document.body.removeChild(a);
};
mediaRecorder.start();
}
给开始录制按钮绑定点击事件
最终效果:通过点击开始录制按钮,录制视频,停止录制后,会自动给对应的附件组件赋值,且默认将录屏文件下载到本地(如不需要的话,也可以注释对应的代码)
赞10
踩0