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

关注

原创最新推荐文章于 2026-08-14 08:17:24 发布 3.9k 阅读 AI 写同款· GEO 优化 ›

JavaScript实现一个录屏功能阅读目录1、创建一个HTML2、使用mediaRecorder录制并存入变量中3、停止屏幕共享播放录制视频4、自动下载录制的视频5、完整代码 1、创建一个HTML OBS studio很酷，但 JavaScript 更酷，现在，我们用 JavaScript 创建自己的录屏功能。首先，创建一个HTML文件，包含记录按钮和一个播放标签，内容如下： <!DOCTYPE html> <html> <head> <title>Parcel Sandbox& 阅读详情

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