发布时间：2026 年 3 月 5 日
本人 Sam Bhattacharyya 最初于 2023 年将免费 AI 视频放大器作为开源业余项目进行开发。出乎意料的是，该应用自然而然地增长到了 25 万月活跃用户数（截至 2026 年 2 月）。之所以能实现这一点，是因为该项目采用客户端 AI 处理技术构建，因此服务器处理费用为零。您可以在浏览器中增强视频效果，无需安装软件或登录。
本文档介绍了如何使用 WebGPU 和 WebCodecs 为我的应用添加免费的客户端处理功能。
服务器成本方面的挑战
在我之前的职位中，我负责管理一款基于浏览器的直播工具的 AI 基础设施，该工具拥有数百万用户，并且在服务器端处理视频的预算成本很高。
服务器端视频处理占预算的 20%。这是该公司仅次于薪资的主要可变成本。对于每项 AI 功能（例如转写、音频或视频增强），团队都面临着严格的预算要求（每小时视频 0.1 美元）才能实现新功能。
客户端 AI 是唯一的例外，虚拟背景和背景噪声消除等功能均使用内部客户端 SDK 实现。这些 AI 功能未产生任何服务器处理费用，因为模型推理和视频处理是在用户设备上进行的。
借助 WebCodecs 等 API，您可以在浏览器中构建完整的视频处理流水线，包括功能完善的视频编辑套件。WebGPU 可大幅提高客户端 AI 的效率。
使用 WebCodecs 和 WebGPU 进行客户端处理
免费 AI 视频放大器使用开源 WebSR SDK。此 SDK 接受图片，对其进行放大，并将结果绘制到画布上。
超分辨率神经网络通过对源图像应用重复的图像卷积（矩阵相乘）来提取图像特征，从而实现放大。然后，对这些图像特征应用更多卷积，以重建最终的高画质图像。
WebSR 将这些神经网络卷积层实现为 WebGPU 计算着色器。例如，请参阅示例层和完整网络。 当您调用 render 方法时，SDK 会运行放大网络的每一层，并将最终图像输出到画布。您可以详细了解神经网络实现。
import WebSR from "https://esm.sh/@websr/websr@0.0.15";
const gpu = await WebSR.initWebGPU();
const canvas = document.getElementById("canvas");
const websr = new WebSR({
network_name: "anime4k/cnn-2x-l",
weights: await (
await fetch("https://katana.video/files/cnn-2x-lg-2d-animation.json")
).json(),
gpu,
canvas,
});
const img = document.getElementById("source");
const bitmap = await createImageBitmap(img);
await websr.render(bitmap);
您可以使用 MediaPipe 或 TensorflowJS 等框架，将 WebSR SDK 替换为任何模型。视频处理流水线使用 WebCodecs，并以转码流水线的形式构建。
流水线分为以下几个阶段：
- 解复用：从 File 对象读取编码后的视频块。
- 解码：将编码后的块解码为 VideoFrame 对象。
- 处理：将输入 VideoFrame 转换为放大后的 VideoFrame。
- 编码：将放大后的 VideoFrame 对象编码为新的编码块。
- 混合：将编码后的输出块写入输出文件。
流水线使用 Streams API。编码、解码、解复用或复用以流的形式实现。对于演示，该项目使用 webcodecs-utils 库中的多路复用和流实用程序。此库为 VideoEncoder 和 VideoDecoder 提供流式封装容器。
import {
SimpleDemuxer,
VideoDecodeStream,
VideoProcessStream,
VideoEncodeStream,
SimpleMuxer,
} from "https://esm.sh/webcodecs-utils";
import WebSR from "https://esm.sh/@websr/websr@0.0.15";
// Fetch demo video
const arrayBuffer = await (
await fetch("https://katana.video/files/hero-small.mp4")
).arrayBuffer();
const videoFile = new File([arrayBuffer], "hero-small.mp4", {
type: "video/mp4",
});
// Initialize WebGPU and WebSR
const gpu = await WebSR.initWebGPU();
const weights = await (
await fetch("https://katana.video/files/cnn-2x-lg-2d-animation.json")
).json();
const websr = new WebSR({
network_name: "anime4k/cnn-2x-l",
weights,
gpu,
canvas,
});
// Set up demuxer
const demuxer = new SimpleDemuxer(videoFile);
await demuxer.load();
const decoderConfig = await demuxer.getVideoDecoderConfig();
const encoderConfig = {
codec: "avc1.4d0034", // https://webcodecsfundamentals.org/codecs/avc1.4d0034.html
width: 640,
height: 360,
bitrate: 1000000,
framerate: 30,
};
// Set up muxer
const muxer = new SimpleMuxer({ video: "avc" });
// Build the upscaling pipeline
await demuxer
.videoStream()
.pipeThrough(new VideoDecodeStream(decoderConfig))
.pipeThrough(
new VideoProcessStream(async (frame) => {
// AI upscale with WebSR
await websr.render(frame);
const upscaledFrame = new VideoFrame(canvas, {
timestamp: frame.timestamp,
duration: frame.duration,
});
return upscaledFrame;
}),
)
.pipeThrough(new VideoEncodeStream(encoderConfig))
.pipeTo(muxer.videoSink());
// Get output
const blob = await muxer.finalize();
请参阅 Codepen 上的完整流水线。
Streams API 在与 WebCodecs 搭配使用时尤其有用，因为如果某个阶段（例如编码）过载，它会使用背压自动减慢上游阶段（例如解码）的速度。这样可以避免内存问题并提高效率。
这样可以带来简单明了的用户体验：
- 您通过文件输入上传视频。
- 系统会在本地处理视频。
- 您可以将结果下载为 Blob。
您可以详细了解如何在 WebCodecs 中构建转码流水线。您还可以在 GitHub 上查看 Free AI Video Upscaler 的完整处理流水线，该流水线的代码不到 400 行。
结果
免费 AI 视频画质提升器的唯一宣传方式是一篇 Reddit 帖子。 尽管如此，该工具还是通过用户在论坛上口口相传，实现了自然增长，月活跃用户数达到 25 万，月环比增长率达到 32%。
250,000
月活跃用户数
10,000
每天处理的视频数量
30,000
每月处理的视频时长
0 $
服务器处理费用
每天处理 1 万个视频（每月 3 万小时的视频），服务器费用为零。
免费 AI 视频画质提升工具可作为付费 AI 画质提升服务的潜在客户发掘工具。我还使用在服务器端运行的更强大的 AI 模型构建了这项服务。这种方法无需营销即可产生利润，同时初始应用仍保持免费和开源。
建议和资源
在 WebCodecs 和 WebGPU 出现之前，需要进行大量视频处理的应用要么需要桌面软件（可能很麻烦），要么需要昂贵的服务器端处理。服务器费用通常占视频应用运营费用的很大一部分。
借助这些浏览器 API，您可以构建高效的客户端视频处理应用。与桌面软件相比，这些应用更直观，使用起来更顺畅；与服务器端处理相比，这些应用也更经济实惠且更具可伸缩性。
如果您有兴趣详细了解 WebCodecs 以及如何构建 Free AI 视频 Upscaler 或 Katana 等视频应用，请参阅 WebCodecsFundamentals。您将学习如何构建生产 WebCodecs 应用，重点是生产和实现细节。