js 使用MediaRecorder 录制video,生成视频


最近在项目中有需求是录制视频,并保存起来,最后选用了MediaRecorder API。
具体方法如下

//开始录屏
startLp(){
        console.log('开始录屏')
        // 获取video节点
        const video =  document.getElementById("videoFlv");

        // 存储视频流
        const videoData = [];
        // 浏览器兼容Chrome和firefox
        video.captureStream = video.captureStream || video.mozCaptureStream;
        // 生成MediaRecorder对象
        this.mediaRecorder = new MediaRecorder(video.captureStream());
        this.mediaRecorder.start();
        // 当 MediaRecorder 将媒体数据传递到您的应用程序以供使用时,将触发该事件
        this.mediaRecorder.ondataavailable = (e) => {
          console.log(e)
          // 添加视频流
          videoData.push(e.data);
        };

        // 录制结束回调
        this.mediaRecorder.onstop = (e) => {
          const blob = new Blob(videoData, { type: 'video/mp4;codecs=vp8,opus' });

          const videoUrl = window.URL.createObjectURL(blob);
           open(videoUrl)
        }

      },
      //停止录屏
      stopLp(){
        console.log('停止录屏')
        this.mediaRecorder.stop();
      }

参考:
https://blog.csdn.net/qq_36958916/article/details/108529705

https://www.jianshu.com/p/d0d6c61dfafd

https://www.jianshu.com/p/ad7dfd50880e?utm_campaign=maleskine…&utm_content=note&utm_medium=seo_notes

https://jimmy.blog.csdn.net/article/details/118282882

https://blog.csdn.net/lan123456_/article/details/128324851

Logo

一站式 AI 云服务平台

更多推荐