学会这招，可以录制所有 web 端的视频（附完整实现代码）

在日常浏览网页时，我们经常会遇到需要录制网页中视频的场景，比如保存一段公开课、会议回放或者喜欢的节目片段。只需几行 JavaScript 代码，就能轻松实现网页端视频的录制和下载，既简单又安全！

一、思路概述

现代浏览器为我们提供了强大的 MediaRecorder API，可以很方便地将音视频流录制为文件。同时，HTML5 的 <video> 元素也支持 captureStream() 方法，将正在播放的视频内容转化成 MediaStream。

我们只需要：

获取网页中 <video> 元素的流；
用 MediaRecorder 录制流数据；
录制完成后生成 Blob，自动下载。

二、完整代码及解析

javascript 复制代码

(() => {
  let chunks = [];
  let mediaRecorder = null;

  const startRecord = (stream) => {
    chunks = [];
    mediaRecorder = new MediaRecorder(stream);
    mediaRecorder.start();
    // 监听数据可用事件
    mediaRecorder.addEventListener('dataavailable', (event) => {
      chunks.push(event.data);
    });

    // 监听录制停止事件
    mediaRecorder.addEventListener('stop', () => {
      // 创建 Blob 对象
      const blob = new Blob(chunks, { type: mediaRecorder.mimeType });

      // 创建下载链接
      const url = URL.createObjectURL(blob);

      // 创建一个下载链接元素
      const link = document.createElement('a');
      link.href = url;
      link.download = 'video.mp4'; // 文件名可自定义
      link.click();

      // 释放资源
      URL.revokeObjectURL(url);

      chunks = [];
      mediaRecorder = null;
    });
  };

  const stopRecord = () => {
    mediaRecorder && mediaRecorder.stop();
  };

  // 创建按钮容器
  const container = document.createElement('div');
  container.style.position = 'fixed';
  container.style.right = '30px';
  container.style.bottom = '30px';
  container.style.display = 'flex';
  container.style.flexDirection = 'column';
  container.style.gap = '10px';
  container.style.zIndex = '9999';

  // 创建"开始"按钮
  const startBtn = document.createElement('button');
  startBtn.innerText = '开始';
  startBtn.style.padding = '3px 15px';
  startBtn.style.fontSize = '14px';
  startBtn.onclick = function() {
    startBtn.disabled = true;
    stopBtn.disabled = false;
    const stream = document.querySelector('video').captureStream();
    startRecord(stream);
  };

  // 创建"结束"按钮
  const stopBtn = document.createElement('button');
  stopBtn.innerText = '结束';
  stopBtn.style.padding = '3px 15px';
  stopBtn.style.fontSize = '14px';
  stopBtn.disabled = true;
  stopBtn.onclick = function() {
    startBtn.disabled = false;
    stopBtn.disabled = true;
    stopRecord();
  };

  // 添加按钮到容器
  container.appendChild(startBtn);
  container.appendChild(stopBtn);

  // 添加容器到页面
  document.body.appendChild(container);
})();

三、核心知识点详解

1. 获取视频流

javascript 复制代码

const stream = document.querySelector('video').captureStream();

captureStream() 是 HTMLVideoElement 的原生方法，能直接获取视频 DOM 的播放流（MediaStream）。
适用于大部分现代浏览器（如 Chrome、Edge、Firefox）。

2. 使用 MediaRecorder 录制

javascript 复制代码

mediaRecorder = new MediaRecorder(stream);
mediaRecorder.start();

MediaRecorder 构造函数接收 MediaStream 作为参数，即可对其进行录制。
录制的数据通过 dataavailable 事件分片收集，最终合成为一个完整的 Blob。

3. 自动下载录制文件

javascript 复制代码

const blob = new Blob(chunks, { type: mediaRecorder.mimeType });
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.download = 'video.mp4';
link.click();
URL.revokeObjectURL(url);

使用 Blob 对象将录制内容拼接成完整视频文件。
通过 URL.createObjectURL 生成临时链接，并模拟点击 <a> 标签，自动触发下载。
下载完成后用 URL.revokeObjectURL 及时释放内存。

四、结语

通过掌握上述技巧，你无需安装任何插件或软件，就能轻松录制网页端的视频。不仅高效便捷，还能灵活定制功能。赶紧试试吧，让你的网页视频录制变得前所未有的简单！

如果你觉得有用，欢迎转发分享，更多实用前端技巧敬请关注！