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

最新推荐文章于 2025-04-10 22:55:08 发布

言只石皮

最新推荐文章于 2025-04-10 22:55:08 发布

阅读量3.5k

点赞数

文章标签： javascript 音视频前端

本文链接：https://blog.youkuaiyun.com/webtext/article/details/129318700

版权

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();
      }