## 开源仓库

本文介绍的智能视频降噪能力已经集成到开源项目 Timeline Studio：
**GitHub：https://github.com/MartinDelophy/ai-video-editor **
这是一个浏览器本地运行的 AI 视频编辑器，支持视频剪辑、智能降噪、画面修复、AI 配音、字幕、音频处理和视频导出。
如果项目对你有帮助，欢迎访问 GitHub 点 Star、提交 Issue 或参与开发。


----
## 一、为什么要在浏览器中实现视频降噪

暗光拍摄、手机传感器、视频压缩和多次转码都可能给画面带来明显噪点。
常见问题包括：
- 暗部出现亮度噪点；
- 人物皮肤出现彩色颗粒；
- 背景出现闪烁和色块；
- 视频压缩导致文字和产品边缘破碎；
- 经过多次编辑和导出后，画质继续下降。

传统视频降噪通常有两种实现方式：
1. 用户安装桌面端专业软件；
2. 将视频上传到云端 GPU 服务处理。

桌面软件的使用门槛较高，而云端处理涉及文件上传、带宽成本、GPU 费用和素材隐私。
因此，我们尝试在浏览器中建立一条完整的 AI 视频降噪管线。模型下载完成后，视频帧解码、神经网络推理、音频处理和 MP4 编码都在用户设备上完成，素材不需要上传服务器。
## 二、产品能力

这套智能降噪功能提供以下能力：
- 当前帧降噪预览；
- 修复前后拖动对比；
- 自动、轻度、均衡和强力四种模式；
- 自动估计当前画面的噪点程度；
- 按源帧率处理完整视频；
- 保留视频原始音频；
- 处理结果作为新素材加入编辑器；
- 原始视频不会被覆盖；
- WebGPU 不可用时自动回退到 WASM。

功能入口位于编辑器的“画面 → AI 修复 → 智能降噪”。
## 三、整体处理架构

完整管线如下：
```
用户选择视频
  ↓
读取视频轨道和音频轨道
  ↓
WebCodecs 解码视频帧
  ↓
转换为 DRUNet 输入张量
  ↓
ONNX Runtime Web 执行 WebGPU 推理
  ↓
根据降噪强度混合原始帧和增强帧
  ↓
WebCodecs 编码 H.264 视频
  ↓
编码并写入 AAC 音频
  ↓
封装成新的 MP4 素材
```
主要技术组件包括：
- **DRUNet**：负责图像降噪；
- **ONNX Runtime Web**：在浏览器中运行 ONNX 模型；
- **WebGPU**：执行 GPU 推理；
- **WASM**：提供兼容回退；
- **WebCodecs**：解码和编码视频；
- **Mediabunny**：读取媒体轨道、处理时间戳并封装 MP4；
- **Web Worker**：将模型推理与界面线程隔离。

## 四、使用 DRUNet 进行单帧降噪

DRUNet 是一种面向图像恢复任务的神经网络。相比高斯模糊、中值滤波等传统算法，它能够更好地区分随机噪声与真实纹理。
它比较适合处理：
- 暗光环境中的亮度噪声；
- 彩色噪点；
- 视频压缩伪影；
- 人像和背景中的颗粒；
- 产品和文字边缘附近的细碎噪声。

浏览器端推理采用 NCHW 张量格式：
```
const tensor = new ort.Tensor(
  "float16",
  tensorData,
  [1, 3, height, width]
);

const outputMap = await session.run({
  input: tensor
});
```
模型输出不会直接完全覆盖原始帧，而是根据用户选择的强度进行混合：
```
const result =
  original + (denoised - original) * strength;
```
轻度模式会尽量保留原始纹理，强力模式则更适合暗光和彩色噪点明显的画面。
## 五、持续复用 WebGPU Session

视频降噪与普通图片处理最大的区别，是需要连续处理大量帧。
如果每处理一帧都重新下载模型或创建 ONNX Session，初始化成本会非常高。因此，我们将模型 Session 保存在长期运行的 Worker 中：
```
let sessionPromise = null;

async function getSession() {
  if (!sessionPromise) {
    sessionPromise = ort.InferenceSession.create(modelData, {
      executionProviders: [{
        name: "webgpu",
        preferredLayout: "NCHW"
      }],
      graphOptimizationLevel: "all"
    });
  }

  return sessionPromise;
}
```
Session 第一次创建后会持续复用。
即使用户取消当前视频处理，也只取消当前任务，不会销毁已经初始化的模型。用户再次预览或处理视频时，可以直接复用现有 Session。
如果 WebGPU 初始化失败，则切换到 WASM：
```
try {
  return await createWebGpuSession();
} catch (error) {
  console.warn("WebGPU unavailable, fallback to WASM");
  return await createWasmSession();
}
```
## 六、让视频解码与模型推理重叠

最简单的视频处理方式是串行执行：
```
解码一帧 → 推理一帧 → 编码一帧 → 解码下一帧
```
这种方式的问题是：GPU 推理完成后，需要等待 CPU 解码下一帧，硬件资源无法充分利用。
优化后，在当前帧开始推理前就请求下一帧：
```
let nextDecoded = iterator.next();

for (let index = 0; index < totalFrames; index += 1) {
  const decoded = await nextDecoded;
  const bitmap = await createImageBitmap(
    decoded.value.canvas
  );

  // 提前请求下一帧
  nextDecoded = iterator.next();

  // 当前帧执行 AI 推理
  const enhanced = await enhanceFrame(bitmap);

  // 将结果交给视频编码器
  await videoSource.add(
    index * frameDuration,
    frameDuration
  );
}
```
此时管线会形成类似下面的工作状态：
```
CPU：解码第 N+1 帧
GPU：推理第 N 帧
编码器：写入第 N-1 帧
```
这样可以减少 GPU 等待视频解码的时间。
## 七、复用画布、张量和像素缓冲区

频繁创建大尺寸数组会带来明显的垃圾回收压力。
例如，一张 960×540 的 RGBA 画面大约包含 200 万个颜色通道数据。如果每一帧都重新创建多份数组，长视频很容易出现内存波动。
我们根据推理尺寸建立固定缓冲池：
```
const framePool = {
  pixels: new Uint8ClampedArray(width * height * 4),
  tensorData: new Uint16Array(width * height * 3),
  enhanced: new Uint8ClampedArray(width * height * 4),
  inputCanvas: new OffscreenCanvas(width, height),
  outputCanvas: new OffscreenCanvas(width, height)
};
```
输入 Tensor 也只创建一次：
```
framePool.tensor = new ort.Tensor(
  "float16",
  framePool.tensorData,
  [1, 3, height, width]
);
```
后续帧直接覆盖数组内容。
支持相关接口时，视频像素通过 `VideoFrame.copyTo()` 写入固定 RGBA 缓冲区：
```
await frame.copyTo(framePool.pixels, {
  format: "RGBA",
  layout: [{
    offset: 0,
    stride: width * 4
  }]
});
```
不支持该接口时，再回退到复用的 OffscreenCanvas。
## 八、低变化帧复用降噪残差

采访、网课录制、固定机位直播和产品展示视频中，连续帧之间经常只有很小的变化。
如果相邻帧变化非常低，可以复用上一帧的降噪残差。
首先记录完整推理结果：
```
降噪残差 = 增强帧 - 原始帧
```
下一帧满足复用条件时：
```
当前增强帧 = 当前原始帧 + 上一帧降噪残差
```
这种方法不会降低输出帧率。每个时间点仍然会输出完整帧，只是部分帧不再执行完整 DRUNet 推理。
为了避免运动拖影，需要使用保守策略：
- 检查平均像素变化；
- 检查发生明显变化的区域占比；
- 镜头切换时强制重新推理；
- 人物或物体明显移动时禁止残差复用；
- 每个新视频使用独立的残差序列。

残差复用是一种性能优化，不能取代运动估计和时序模型，因此必须把画面稳定性放在处理速度之前。
## 九、使用 WebCodecs 流式生成 MP4

早期版本采用 PNG 帧序列和 FFmpeg 编码：
```
视频解码
→ 每帧生成 PNG
→ 保存全部 PNG
→ FFmpeg 编码
```
该方案虽然兼容性较好，但存在几个问题：
- PNG 编码消耗额外 CPU；
- 中间帧占用大量内存；
- 长视频会产生较大的临时数据；
- 必须等待所有帧处理完成才能进入最终编码。

现在我们使用 WebCodecs 流式编码：
```
const videoSource = new CanvasSource(canvas, {
  codec: "avc",
  bitrate,
  keyFrameInterval: 2,
  latencyMode: "realtime"
});
```
每完成一帧降噪，立即写入编码器：
```
await videoSource.add(
  timestamp,
  frameDuration,
  { keyFrame }
);
```
音频轨道独立解码为 `AudioBuffer`，再编码为 AAC，并与 H.264 视频一起封装到 MP4 文件中。
对于不支持 WebCodecs或无法解码特定格式的浏览器，系统会自动回退到 PNG 与 FFmpeg 管线。
## 十、为什么仍然需要兼容回退

WebCodecs 和 WebGPU 的浏览器支持正在逐步完善，但实际环境仍然比较复杂。
可能出现的问题包括：
- 浏览器不支持 WebGPU；
- GPU 驱动存在兼容问题；
- 视频编码器不支持目标 H.264 配置；
- 输入视频使用浏览器无法解码的格式；
- 移动设备内存不足；
- WebGPU Session 创建失败。

因此，稳定的产品实现不能只保留一条最快路径。
我们的处理策略是：
```
优先：WebGPU + WebCodecs
  ↓ 失败
回退：WASM + WebCodecs
  ↓ 失败
兼容：WASM/WebGPU + PNG/FFmpeg
```
用户无需理解底层执行路径，界面只需要提供统一的处理进度、取消能力和错误提示。
## 十一、本地 AI 视频处理的价值

### 素材无需上传

视频内容始终保留在用户设备中，适合处理人物素材、企业录屏、客户资料和未公开产品视频。
### 降低服务端计算压力

模型由用户设备运行，不需要为每次视频处理分配云端 GPU。
### 单帧预览降低试错成本

用户可以先选择代表性画面，比较降噪前后效果，再决定是否处理整段视频。
### 保留原始素材

处理结果作为新素材加入编辑器，不会直接覆盖源文件。用户可以随时恢复原片。
## 十二、总结

要在浏览器中实现真正可用的视频智能降噪，仅仅运行一个 ONNX 模型是不够的。
还需要处理：
- 视频解码和时间戳；
- WebGPU Session 生命周期；
- CPU、GPU 和编码器之间的流水线；
- Canvas、Tensor 与像素缓冲区复用；
- 相邻帧变化检测；
- 残差复用和运动画面保护；
- 音频保留；
- H.264 与 AAC 编码；
- WebGPU、WASM 和 FFmpeg 多级回退；
- 任务取消和结果恢复。

通过 DRUNet、ONNX Runtime Web、WebGPU、WebCodecs 和 Mediabunny，我们最终建立了一条完全在浏览器本地运行的视频智能降噪管线。
浏览器已经不再只是 AI 视频产品的前端界面。随着 WebGPU 和 WebCodecs 逐渐成熟，越来越多原本只能在桌面软件或云端 GPU 中完成的视频处理任务，都可以转移到用户设备上执行。
项目地址：
**GitHub：https://github.com/MartinDelophy/ai-video-editor **
欢迎 Star、Fork、提交 Issue，一起探索浏览器本地 AI 视频编辑的更多可能。

本文介绍的智能视频降噪能力已经集成到开源项目 Timeline Studio：GitHub：https://github.com/MartinDelophy/ai-video-editor 这是一个浏览器本地运行的 AI 视频编辑器，支持视频剪辑、智能降噪、画面修复、AI 配音、字幕、音频处理和视频导出。如果项目对你有帮助，欢迎访问 GitHub 点 Star、提交 Issue 或参与开发。

浏览器端 AI 视频降噪实战：基于 DRUNet、WebGPU 与 WebCodecs 构建完整处理管线

人工智能

前端

音视频

智能视频降噪能力已集成至开源项目TimelineStudio，浏览器本地运行AI视频编辑器，支持视频剪辑、AI降噪、画面修复、AI配音、字幕和导出。采用DRUNet与ONNXRuntimeWeb实现WebGPU推理，支持四种降噪模式、帧间残差复用及WebCodecs流式编码，素材无需上传，保护隐私，适合暗光拍摄和压缩伪影修复。

图片处理

代码解释

服务器

GitHub

4核4G3M云服务器 新用户低至38元/年！

媒体处理 MPS 普通转码包1元起


9.9元起，最快1天搭建自有直播平台


文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

智能视频降噪能力已集成至开源项目TimelineStudio，浏览器本地运行AI视频编辑器，支持视频剪辑、AI降噪、画面修复、AI配音、字幕和导出。采用DRUNet与ONNXRuntimeWeb实现WebGPU推理，支持四种降噪模式、帧间残差复用及WebCodecs流式编码，素材无需上传，保护隐私，适合暗光拍摄和压缩伪...

浏览器端 AI 视频降噪实战：基于 DRUNet、WebGPU 与 WebCodecs 构建完整处理管线-腾讯云开发者社区-腾讯云

浏览器端 AI 视频降噪实战：基于 DRUNet、WebGPU 与 WebCodecs 构建完整处理管线

浏览器端 AI 视频降噪实战：基于 DRUNet、WebGPU 与 WebCodecs 构建完整处理管线

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐