Dipublikasikan: 5 Maret 2026
Saya, Sam Bhattacharyya, awalnya membuat Free AI Video Upscaler sebagai project hobi open source pada tahun 2023. Aplikasi ini tumbuh secara organik dan tidak terduga hingga mencapai 250.000 pengguna aktif bulanan (MAU) (per Februari 2026). Hal ini dapat dilakukan karena project dibangun dengan pemrosesan AI sisi klien, yang tidak memiliki biaya pemrosesan server. Anda dapat meningkatkan kualitas video di browser, tanpa perlu menginstal software atau login.
Dokumen ini menjelaskan cara saya menggunakan WebGPU dan WebCodecs untuk menambahkan pemrosesan sisi klien gratis ke aplikasi saya.
Tantangan terkait biaya server
Dalam peran sebelumnya, saya mengelola infrastruktur AI untuk alat live streaming berbasis browser dengan jutaan pengguna dan biaya anggaran yang signifikan untuk memproses video di sisi server.
Pemrosesan video sisi server menyumbang 20% anggaran. Ini adalah biaya variabel utama bagi perusahaan, kedua setelah gaji. Untuk setiap fitur AI, seperti transkripsi, peningkatan kualitas audio, atau video, tim menghadapi persyaratan anggaran yang ketat ($0,1 per jam video) untuk penerapan baru.
AI sisi klien adalah satu-satunya pengecualian, dengan fitur seperti latar belakang virtual dan penghapusan suara bising di latar belakang yang diimplementasikan menggunakan SDK sisi klien internal. Fitur AI ini tidak menimbulkan biaya pemrosesan server karena inferensi model dan pemrosesan video terjadi di perangkat pengguna.
API seperti WebCodecs memungkinkan pembuatan pipeline pemrosesan video lengkap, termasuk rangkaian pengeditan video yang canggih, di browser. WebGPU membuat AI sisi klien menjadi jauh lebih efisien.
Pemrosesan sisi klien dengan WebCodecs dan WebGPU
Free AI Video Upscaler menggunakan WebSR SDK open source. SDK ini menerima gambar, meningkatkan skalanya, dan melukis hasilnya ke kanvas.
Jaringan neural resolusi super menyelesaikan peningkatan skala dengan menerapkan konvolusi gambar (perkalian matriks) berulang untuk mengekstrak fitur gambar dari gambar sumber. Kemudian, lebih banyak konvolusi diterapkan pada fitur gambar ini untuk merekonstruksi gambar akhir yang berkualitas lebih tinggi.
WebSR mengimplementasikan lapisan konvolusi jaringan neural ini sebagai shader komputasi WebGPU. Misalnya, lihat contoh layer dan jaringan lengkap. Saat Anda memanggil metode render, SDK menjalankan setiap lapisan jaringan peningkatan kualitas dan menampilkan gambar akhir ke kanvas. Anda dapat mempelajari lebih lanjut penerapan jaringan neural.
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);
Lihat contoh WebSR SDK di Codepen.
Anda dapat mengganti WebSR SDK dengan model apa pun, menggunakan framework seperti MediaPipe atau TensorflowJS. Pipeline pemrosesan video menggunakan WebCodecs dan disusun sebagai pipeline transcoding.
Pipeline dibagi menjadi beberapa tahap:
- Demuxing: Membaca potongan video yang dienkode dari objek File.
- Mendekode: Mendekode potongan yang dienkode menjadi objek VideoFrame.
- Pemrosesan: Mengonversi VideoFrame input menjadi VideoFrame yang di-upgrade.
- Encoding: Mengenkode objek VideoFrame yang di-upscale ke chunk yang dienkode baru.
- Muxing: Menulis potongan yang dienkode output ke file output.
Pipeline menggunakan Streams
API. Encoding, decoding, dan demuxing atau muxing diimplementasikan sebagai stream. Untuk demo, project ini menggunakan utilitas streaming dan muxing dari library webcodecs-utils. Library ini menyediakan
wrapper streaming untuk
VideoEncoder
dan
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();
Lihat pipeline lengkap di Codepen.
Streams API sangat berguna dengan WebCodecs karena menggunakan tekanan balik untuk memperlambat tahap upstream secara otomatis, seperti decoding, jika satu tahap, seperti encoding, kelebihan beban. Hal ini menghindari masalah memori dan meningkatkan efisiensi.
Hal ini menciptakan pengalaman pengguna yang mudah:
- Anda mengupload video dengan input file.
- Sistem memproses video secara lokal.
- Anda dapat mendownload hasilnya sebagai Blob.
Anda dapat mempelajari lebih lanjut cara membangun pipeline transcoding di WebCodecs. Anda juga dapat melihat pipeline pemrosesan lengkap untuk Peningkat Kualitas Video AI Gratis, yang terdiri dari kurang dari 400 baris kode, di GitHub.
Hasil
Satu-satunya promosi Free AI Video Upscaler adalah satu postingan Reddit. Meskipun demikian, aplikasi ini telah berkembang secara organik menjadi 250.000 pengguna aktif bulanan, dengan rasio pertumbuhan 32% dari bulan ke bulan, berkat promosi dari mulut ke mulut oleh pengguna yang membagikan alat ini di forum.
250.000
Pengguna aktif bulanan
10.000
Video yang diproses per hari
30.000
Jam video yang diproses per bulan
0 $
Biaya pemrosesan server
Aplikasi ini memproses 10.000 video per hari (30.000 jam video per bulan) tanpa biaya server.
Peningkatan Kualitas Video AI Gratis berfungsi sebagai alat pembuatan prospek untuk layanan Peningkatan Kualitas AI berbayar. Saya juga membangun layanan ini menggunakan model AI yang lebih canggih yang berjalan di sisi server. Pendekatan ini menghasilkan profitabilitas tanpa pemasaran, sementara aplikasi awal tetap gratis dan open source.
Rekomendasi dan referensi
Sebelum WebCodecs dan WebGPU, aplikasi yang intensif dalam pemrosesan video memerlukan software desktop, yang bisa merepotkan, atau pemrosesan sisi server yang mahal. Biaya server sering kali merupakan sebagian besar biaya operasional aplikasi video.
API browser ini memungkinkan Anda membuat aplikasi pemrosesan video sisi klien yang efisien. Aplikasi ini lebih intuitif dan menawarkan lebih sedikit hambatan daripada software desktop, serta lebih terjangkau dan dapat diskalakan daripada pemrosesan sisi server.
Jika Anda tertarik untuk mempelajari lebih lanjut WebCodecs dan cara membuat aplikasi video seperti Free AI Video Upscaler atau Katana, baca WebCodecsFundamentals. Anda akan mempelajari cara membangun aplikasi WebCodecs produksi dengan berfokus pada produksi dan detail penerapan.