学会这招,可以录制所有 web 端的视频(附完整实现代码)

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


一、思路概述

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

我们只需要:

  1. 获取网页中 <video> 元素的流;
  2. 用 MediaRecorder 录制流数据;
  3. 录制完成后生成 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 及时释放内存。

四、结语

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

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

相关推荐
北海几经夏3 分钟前
React组件中的this指向问题
前端·react.js
程序媛李李李李李蕾9 分钟前
你不能直接用现成的吗?整个前端做笔记管理工具真是折腾人
javascript·vue.js·后端
passer98116 分钟前
列表项切换时同步到可视区域
前端
FogLetter18 分钟前
移动端适配的终极奥义:从lib-flexible到postcss-pxtorem的全方位指南
前端·postcss
易元19 分钟前
设计模式-访问者模式
前端·后端·设计模式
兵临天下api19 分钟前
Elasticsearch 查询性能优化:从 3 秒到 300ms 的 6 个核心参数调优指南
前端
整点可乐20 分钟前
cesium实现鹰眼图
javascript·cesium
艾小码21 分钟前
Web存储指南:彻底掌握localStorage与sessionStorage
javascript
子林super27 分钟前
y1新建cluster集群redis
前端
liangdabiao30 分钟前
一篇文章尽快介绍入门级智能体Agent是什么回事, Starter AI Agents 项目 来自 awesome-llm-apps
前端·后端