Xuất bản: Ngày 5 tháng 3 năm 2026
Tôi, Sam Bhattacharyya, ban đầu đã xây dựng Free AI Video Upscaler (Công cụ tăng độ phân giải video miễn phí bằng AI) như một dự án nguồn mở cho sở thích của mình vào năm 2023. Ứng dụng này đã phát triển một cách tự nhiên và bất ngờ lên đến 250.000 số người dùng hoạt động hằng tháng (MAU) (tính đến tháng 2 năm 2026). Điều này có thể thực hiện được vì dự án được xây dựng bằng quy trình xử lý bằng AI phía máy khách, không tốn chi phí xử lý máy chủ. Bạn có thể nâng cao video trong trình duyệt mà không cần cài đặt phần mềm hoặc đăng nhập.
Tài liệu này giải thích cách tôi sử dụng WebGPU và WebCodecs để thêm quy trình xử lý miễn phí phía máy khách vào ứng dụng của mình.
Thách thức về chi phí máy chủ
Trong một vai trò trước đây, tôi đã quản lý cơ sở hạ tầng AI cho một công cụ phát trực tiếp dựa trên trình duyệt với hàng triệu người dùng và chi phí ngân sách đáng kể để xử lý video ở phía máy chủ.
Xử lý video phía máy chủ chiếm 20% ngân sách. Đây là một chi phí biến đổi lớn đối với công ty, chỉ đứng sau tiền lương. Đối với mọi tính năng AI (chẳng hạn như tính năng chép lời, âm thanh hoặc cải tiến video), nhóm phải đáp ứng các yêu cầu nghiêm ngặt về ngân sách (0,1 USD cho mỗi giờ video) đối với các tính năng mới được triển khai.
AI phía máy khách là trường hợp ngoại lệ duy nhất, với các tính năng như nền ảo và loại bỏ tạp âm được triển khai bằng SDK phía máy khách nội bộ. Các tính năng AI này không phát sinh chi phí xử lý máy chủ vì quá trình suy luận mô hình và xử lý video diễn ra trên thiết bị của người dùng.
Các API như WebCodecs cho phép tạo các quy trình xử lý video hoàn chỉnh, bao gồm cả các bộ chỉnh sửa video đầy đủ tính năng, trong trình duyệt. WebGPU giúp AI phía máy khách hoạt động hiệu quả hơn nhiều.
Xử lý phía máy khách bằng WebCodecs và WebGPU
Công cụ Nâng cấp video bằng AI miễn phí sử dụng WebSR SDK nguồn mở. SDK này chấp nhận một hình ảnh, tăng kích thước hình ảnh đó và vẽ kết quả lên canvas.
Mạng nơ-ron siêu phân giải thực hiện việc nâng cấp bằng cách áp dụng các phép tích chập hình ảnh (phép nhân ma trận) lặp lại để trích xuất các đặc điểm hình ảnh từ một hình ảnh nguồn. Sau đó, nhiều phép tích chập được áp dụng cho các đặc điểm hình ảnh này để tái tạo hình ảnh cuối cùng có chất lượng cao hơn.
WebSR triển khai các lớp tích chập mạng nơ-ron này dưới dạng chương trình đổ bóng tính toán WebGPU. Ví dụ: hãy xem lớp ví dụ và mạng đầy đủ. Khi bạn gọi phương thức kết xuất, SDK sẽ chạy từng lớp của mạng nâng cấp và xuất hình ảnh cuối cùng vào một canvas. Bạn có thể tìm hiểu thêm về việc triển khai mạng nơ-ron.
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);
Xem ví dụ về WebSR SDK trên Codepen.
Bạn có thể thay thế WebSR SDK bằng bất kỳ mô hình nào, bằng cách sử dụng các khung như MediaPipe hoặc TensorflowJS. Quy trình xử lý video sử dụng WebCodecs và được cấu trúc dưới dạng quy trình chuyển mã.
Quy trình được chia thành nhiều giai đoạn:
- Demuxing: Đọc các đoạn video được mã hoá từ một đối tượng Tệp.
- Giải mã: Giải mã các đoạn được mã hoá thành các đối tượng VideoFrame.
- Xử lý: Chuyển đổi VideoFrame đầu vào thành VideoFrame được mở rộng quy mô.
- Mã hoá: Mã hoá các đối tượng VideoFrame được mở rộng quy mô thành các đoạn mã được mã hoá mới.
- Trộn: Ghi các đoạn được mã hoá đầu ra vào tệp đầu ra.
Quy trình này sử dụng Streams API. Việc mã hoá, giải mã và tách hoặc trộn được triển khai dưới dạng các luồng. Đối với bản minh hoạ, dự án này sử dụng các tiện ích truyền trực tuyến và trộn từ thư viện webcodecs-utils. Thư viện này cung cấp trình bao bọc truyền phát trực tiếp cho VideoEncoder và 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();
Xem toàn bộ quy trình trên Codepen.
Streams API đặc biệt hữu ích với WebCodecs vì API này sử dụng áp suất ngược để tự động làm chậm các giai đoạn thượng nguồn (chẳng hạn như giải mã) nếu một giai đoạn (chẳng hạn như mã hoá) bị quá tải. Điều này giúp tránh các vấn đề về bộ nhớ và cải thiện hiệu quả.
Điều này giúp mang lại trải nghiệm đơn giản cho người dùng:
- Bạn tải một video lên bằng một đầu vào tệp.
- Hệ thống xử lý video trên thiết bị.
- Bạn có thể tải kết quả xuống dưới dạng Blob.
Bạn có thể tìm hiểu thêm về cách tạo quy trình chuyển mã trong WebCodecs. Bạn cũng có thể xem toàn bộ quy trình xử lý cho công cụ Nâng cấp video bằng AI miễn phí (chưa đến 400 dòng mã) trên GitHub.
Kết quả
Chương trình khuyến mãi duy nhất của công cụ Video AI Upscaler miễn phí là một bài đăng duy nhất trên Reddit. Mặc dù vậy, công cụ này đã phát triển một cách tự nhiên lên đến 250.000 số người dùng hoạt động hằng tháng, với tỷ lệ tăng trưởng 32% mỗi tháng, nhờ hiệu ứng truyền miệng từ những người dùng chia sẻ công cụ này trên các diễn đàn.
250.000
Số người dùng hoạt động hằng tháng
10.000
Số video được xử lý mỗi ngày
30.000
Số giờ video được xử lý mỗi tháng
0 $
Chi phí xử lý của máy chủ
Công cụ này xử lý 10.000 video mỗi ngày (30.000 giờ video mỗi tháng) mà không tốn chi phí máy chủ.
Công cụ Nâng cấp video bằng AI miễn phí đóng vai trò là công cụ tạo khách hàng tiềm năng cho dịch vụ Nâng cấp bằng AI có tính phí. Tôi cũng đã tạo dịch vụ này bằng các mô hình AI mạnh mẽ hơn chạy phía máy chủ. Phương pháp này tạo ra lợi nhuận mà không cần tiếp thị, trong khi ứng dụng ban đầu vẫn miễn phí và mã nguồn mở.
Đề xuất và tài nguyên
Trước WebCodecs và WebGPU, các ứng dụng xử lý video chuyên sâu yêu cầu phần mềm dành cho máy tính (có thể rườm rà) hoặc quy trình xử lý tốn kém phía máy chủ. Chi phí máy chủ thường chiếm một phần đáng kể trong chi phí vận hành của một ứng dụng video.
Các API trình duyệt này cho phép bạn tạo các ứng dụng xử lý video phía máy khách hiệu quả. Những ứng dụng này trực quan hơn và ít gây khó chịu hơn so với phần mềm dành cho máy tính, đồng thời cũng có giá cả phải chăng và có khả năng mở rộng hơn so với quy trình xử lý phía máy chủ.
Nếu bạn muốn tìm hiểu thêm về WebCodecs và cách tạo các ứng dụng video như Free Video AI Upscaler hoặc Katana, hãy đọc WebCodecsFundamentals. Bạn sẽ tìm hiểu cách tạo các ứng dụng WebCodecs sản xuất, tập trung vào các chi tiết về việc sản xuất và triển khai.