开发者社区> 问答> 正文

宜搭能否实现视频录制上传

展开
收起
游客ydyxs3pxjyzts 2024-08-21 09:56:26 69 0
1 条回答
写回答
取消 提交回答
  • 若问题得到了解决,辛苦点下采纳回答哦~

    您好,可以实现录制上传,以下是实现思路及步骤:
    获取屏幕流:通过 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();
    
    }
    

    给开始录制按钮绑定点击事件
    image.png

    最终效果:
    通过点击开始录制按钮,录制视频,停止录制后,会自动给对应的附件组件赋值,且默认将录屏文件下载到本地(如不需要的话,也可以注释对应的代码)
    image.png

    2024-08-21 20:11:21
    赞同 10 展开评论 打赏
问答分类:
问答标签:
问答地址:
关联地址:
问答排行榜
最热
最新

相关电子书

更多
宜搭 - 企业智能化应用搭建平台 立即下载
《云市场-宜搭解决方案》 立即下载
《宜搭开发手册》 立即下载