DEV Community: Mohit Dubey

MoQ Support Is Now Available in Ant Media Server

Mohit Dubey — Wed, 29 Apr 2026 10:36:31 +0000

We're excited to announce that MoQ (Media over QUIC) support is now available in Ant Media Server via a new plugin. MoQ is one of the most interesting developments in live streaming right now, and we wanted to ship early access so you can start experimenting with it alongside us.

In this post, we'll walk through what the AMS MoQ plugin offers, how it works under the hood, and everything you need to get started.

⚠️ Heads up: MoQ is still an evolving protocol. The IETF standard is actively being developed, and the current plugin is based on moq-lite — a pragmatic, deployable subset of the full spec. We're continuously monitoring progress and will ship updates as it matures.

What Is Media over QUIC (MoQ)?

Media over QUIC is an emerging live media protocol built on QUIC and WebTransport. It's being standardized by the IETF working group, with backing from Google, Cisco, Akamai, Cloudflare, and others — which gives a strong signal of where the industry is heading.

At its core, MoQ is built on QUIC: a modern transport protocol that handles multiple streams of data independently over a single connection. This means:

No head-of-line blocking — one dropped packet doesn't stall other streams
Built-in multiplexing — audio, video, and metadata travel independently
Native browser support via WebTransport — no plugins, no peer connections

For a deeper technical comparison, check out our article WebRTC vs. MoQ — Two Protocols, One Platform. In this post, we focus on the practical: what the plugin does and how to use it.

What the AMS MoQ Plugin Does

The AMS MoQ plugin adds bidirectional MoQ support to any Ant Media Server deployment:

Live streams published to AMS are automatically broadcast as MoQ tracks
Browser clients connect via WebTransport and receive video with sub-second latency
No plugins, no WebRTC peer connections, and no SFU infrastructure required on the playback side

Each quality level is exposed as a separate named track. For example, a stream with ID myStream would surface its source quality at:

moq://your-ams-server:4443/myStream/source

Prerequisites

Before opening the MoQ player pages, make sure the following are in place:

HTTPS is required on real servers. MoQ uses WebTransport, and browsers only allow it over HTTPS. If your server has a real domain or IP address, it needs a valid SSL certificate. localhost is the one exception browsers allow without SSL.

Port 4443 must be open. The embedded MoQ relay listens on UDP/TCP port 4443. If your server is behind a firewall, open that port to inbound traffic or the browser won't be able to reach the relay.

Getting Started

Once a stream is live on AMS, viewers can connect via the built-in MoQ player or any moq-compatible client.

Publishing a Stream

Publish a stream to Ant Media Server the same way you always would — via WebRTC, RTMP, SRT, or WHIP. The MoQ plugin picks it up automatically and broadcasts it as a MoQ relay.

Watching via the MoQ Player

Open the standalone MoQ player page (served by AMS) and enter your stream's MoQ URL:

moq://your-ams-server:4443/streamId/source

The player connects via WebTransport, decodes video using WebCodecs, and renders it with sub-second latency — all natively in the browser, no extensions required.

📝 Note: The standalone MoQ player pages are temporary. MoQ playback and publishing will be built directly into the main Ant Media Server web player in a future release.

MoQ vs. WebRTC: Not a Replacement

It's worth being clear: MoQ is not a replacement for WebRTC — at least not today.

	WebRTC	MoQ (moq-lite)
Latency	~0.5s	Sub-second
Browser support	Universal	Partial (WebTransport required)
Fan-out model	SFU-based	Relay/CDN-native
Spec maturity	Production-ready	Evolving (IETF WG)
Best for	Interactive, bidirectional	Large-scale, one-to-many

WebRTC is the right answer for telehealth, live auctions, drone monitoring, and anything that requires interactive, bidirectional communication. MoQ is compelling for massive concurrent audiences and CDN-native delivery — once cross-browser support closes.

At Ant Media, our strategy is simple: the future of streaming is multi-protocol capability in one platform, so your infrastructure can adapt without rewriting your application.

What's Next

The AMS MoQ plugin is an early but functional step toward next-generation live streaming infrastructure. By building on moq-lite today, you get a hands-on way to explore what MoQ brings to the table:

Sub-second latency
CDN-scale fan-out
A modern browser stack built on WebTransport and WebCodecs

We'll keep shipping updates as moq-lite evolves and as the IETF spec progresses.

Try It Out

Read more about MoQ implementation on Ant Media Server.

If you're experimenting with the MoQ plugin or building something on top of it, we'd love to hear about it. Join us on the Ant Media Community Forum or reach out directly.

And if you want to dive deeper into the protocol comparison, read: WebRTC vs. MoQ — Two Protocols, One Platform Completely Built for Both.

Happy streaming! 🎥

How I Added Real-Time AR Filters and Custom Overlays to a Live Android Stream 🎭📱

Mohit Dubey — Wed, 01 Apr 2026 10:59:06 +0000

Live streaming is everywhere. But just streaming a plain camera feed feels boring in 2026. Viewers expect filters, effects, branding — the kind of stuff you see on TikTok and Instagram Live.

In this post I'll show you how to build exactly that: an Android app that applies real-time DeepAR AR filters (think viking helmets, neon devil horns, cat ears) and custom canvas overlays (your logo, watermark, live badge) — and streams the whole thing live via Ant Media Server over WebRTC with ~0.5s latency.

The full sample project is on GitHub → AntMedia-DeepAR-And-Overlay

What you'll build

Two Activities, both streaming live:

DeepARActivity — real-time AR face filters powered by DeepAR SDK
CustomCanvasActivity — custom bitmap/text overlays drawn with Android Canvas

Prerequisites

Before you start, make sure you have:

Android Studio (Hedgehog or newer)
A physical Android device (API 21+) — emulators don't do face tracking justice
A DeepAR account and license key (free tier available)
Git installed — Android Studio does not include Git, install it separately from git-scm.com first

Step 1 — Clone the project

git clone https://github.com/USAMAWIZARD/AntMedia-DeepAR-And-Overlay.git

Open Android Studio → File → Open → select the cloned folder. Wait for Gradle sync to finish.

💡 Good news: The repo already has settings.gradle, build.gradle, and the assets folder pre-configured. You don't need to add dependencies manually — they're already there.

Step 2 — Get your DeepAR license key

Sign up at developer.deepar.ai
Create a new project → Add Android App
Enter your exact package name: com.example.antmediacustomcanvasstreaming
Copy the generated license key

Open res/values/strings.xml and paste it:

<resources>
    <string name="app_name">AntMediaDeepAR</string>
    <string name="deepar_license_key">YOUR_LICENSE_KEY_HERE</string>
</resources>

⚠️ The license key is tied to your exact package name. If the app crashes on launch, this is almost certainly why — double-check the package name matches exactly.

Step 3 — Add the DeepAR effect files

Here's a gotcha that isn't obvious from the code: DeepARActivity references 17 specific effect files by name. If any of them are missing from your assets folder, the app crashes with no clear error message.

Go to developer.deepar.ai/downloads and download the DeepAR Filter Pack (Legacy) — this zip contains all the effects the code needs. Unzip it and copy the .deepar files into:

app/src/main/assets/

The code expects these files specifically:

viking_helmet.deepar
MakeupLook.deepar
Emotions_Exaggerator.deepar
Neon_Devil_Horns.deepar
Elephant_Trunk.deepar
flower_face.deepar
Humanoid.deepar
... (and more)

✅ Don't just download a couple — copy everything from the zip.

Step 4 — How the DeepAR integration works

This is the interesting part. The key to making DeepAR and Ant Media work together is one line:

.setVideoSource(IWebRTCClient.StreamSource.CUSTOM)

By default IWebRTCClient opens the camera itself. Setting CUSTOM tells it: "I'll push frames to you manually." That's what lets you insert DeepAR (or Canvas drawing) between the camera and the WebRTC encoder.

Here's the flow:

CameraX → feedDeepAR() → DeepARRenderer (GLSurfaceView) → IWebRTCClient → Ant Media Server

The IWebRTCClient is set up like this:

webRTCClient = IWebRTCClient.builder()
    .setServerUrl("wss://test.antmedia.io/LiveApp/websocket")
    .setActivity(this)
    .setVideoSource(IWebRTCClient.StreamSource.CUSTOM)
    .setWebRTCListener(createWebRTCListener())
    .setInitiateBeforeStream(true)
    .build();

CameraX feeds each frame into DeepAR via receiveFrame():

deepAR.receiveFrame(
    buffers[currentBuffer],
    width,
    height,
    image.getImageInfo().getRotationDegrees(),
    lensFacing == CameraSelector.LENS_FACING_FRONT, // mirror for selfie
    DeepARImageFormat.YUV_420_888,
    uPixelStride
);

DeepAR processes the frame (applies the AR effect using GPU), then DeepARRenderer pushes the result to the WebRTC client.

Switching effects mid-stream is one line and doesn't interrupt the broadcast at all:

deepAR.switchEffect("effect", "file:///android_asset/viking_helmet.deepar");

Step 5 — Custom Canvas overlays

CustomCanvasActivity takes a different approach — no DeepAR needed. It grabs each camera frame as a Bitmap and paints your graphics on top using Android's Canvas API before pushing to IWebRTCClient.

private Bitmap addOverlay(Bitmap frame) {
    Bitmap mutable = frame.copy(Bitmap.Config.ARGB_8888, true);
    Canvas canvas = new Canvas(mutable);

    // Logo — bottom-right corner
    int lx = mutable.getWidth()  - overlayBitmap.getWidth()  - 20;
    int ly = mutable.getHeight() - overlayBitmap.getHeight() - 20;
    canvas.drawBitmap(overlayBitmap, lx, ly, null);

    // Text watermark — top-left with drop shadow
    Paint paint = new Paint();
    paint.setColor(Color.WHITE);
    paint.setTextSize(40f);
    paint.setAntiAlias(true);
    paint.setShadowLayer(4f, 2f, 2f, Color.BLACK);
    canvas.drawText("@YourBrand", 24, 60, paint);

    return mutable;
}

The same StreamSource.CUSTOM pattern applies — same builder, same sendFrameForProcessing() call.

Step 6 — Run it

Connect your Android phone via USB, enable USB Debugging, and hit ▶ Run in Android Studio.

Grant camera and microphone permissions when prompted.

The repo already points to Ant Media's public test server — you don't need your own server to test this. Just tap Start in the app, then open this URL in your browser:

https://test.antmedia.io/LiveApp/player.html?id=test1

You should see your AR-filtered live stream playing in the browser within a second. 🎉

When you're ready to use your own server, just swap this line in setupStreamingAndPreview():

.setServerUrl("wss://YOUR-SERVER/LiveApp/websocket")

Things that tripped me up (so they don't trip you up)

After going through this end-to-end, here's what I wish I'd known:

1. Install Git before you do anything else.
Android Studio doesn't come with Git. If you run git clone and get 'git' is not recognized, go install it from git-scm.com first, then reopen your terminal.

2. The Filter Pack zip is not obvious.
The downloads page shows "DeepAR Android SDK" which is the SDK itself. The effect files are in a separate "Filter Pack (Legacy)" download. Easy to miss, causes a silent crash.

3. Missing effect files = instant crash, no clear error.
The crash log shows an EGL surface error which looks completely unrelated to missing files. If your DeepAR activity crashes immediately, check your assets folder first.

4. The test server is genuinely useful.
wss://test.antmedia.io is Ant Media's public test server — it's real, it works, and it means you can verify your stream end-to-end without any server setup.

5. Use a physical device for DeepAR.
Emulator cameras are simulated and face tracking won't work meaningfully. The custom canvas overlay works fine on emulators though.

What to build next

Once you have this running, some natural next steps:

Filter picker UI — a horizontal RecyclerView that calls deepAR.switchEffect() on tap
Local recording — deepAR.startVideoRecording() saves an AR copy to the gallery simultaneously while streaming
Custom effects — build your own branded AR filter in DeepAR Creator Studio
Your own server — sign up for Ant Media's free 14-day trial to get a cloud server with your own stream URLs

WebRTC Browser Support & Compatibility

Mohit Dubey — Wed, 01 Oct 2025 10:56:20 +0000

WebRTC (Web Real-Time Communication) is a set of open-source standards, APIs, and protocols developed by the IETF and W3C to enable real-time communication directly inside browsers and applications. Its significance lies in allowing seamless video, audio, and data transfer without requiring external plugins, legacy technologies (such as Flash), or additional installations. Learn more about what WebRTC is and how it works.

What is WebRTC and how does it work?

Mohit Dubey — Wed, 03 Sep 2025 06:13:17 +0000

WebRTC stands for Web Real-Time Communications. It is a very exciting, powerful, and highly disruptive cutting-edge technology and streaming protocol.

WebRTC is HTML5 compatible, and you can use it to add real-time media communications directly between browsers and devices. One of the main advantages of using WebRTC is that it does not require any browser plugins as a prerequisite.

Webrtc is progressively becoming supported by all major modern browser vendors, including Safari, Google Chrome, Firefox, Opera, and others.

Tutorial Source

What it includes:

What is WebRTC?
History of WebRTC
WebRTC Components
WebRTC Video Streaming
Types of WebRTC Servers

This is great for anyone who is looking to get started with WebRTC & learn about it.
Feel free to check it out, give it a ⭐️ if it helps, and let me know what you think!

DEV Community: Mohit Dubey

MoQ Support Is Now Available in Ant Media Server

What Is Media over QUIC (MoQ)?

What the AMS MoQ Plugin Does

Prerequisites

Getting Started

Publishing a Stream

Watching via the MoQ Player

MoQ vs. WebRTC: Not a Replacement

What's Next

Try It Out

How I Added Real-Time AR Filters and Custom Overlays to a Live Android Stream 🎭📱

What you'll build

Prerequisites

Step 1 — Clone the project

Step 2 — Get your DeepAR license key

Step 3 — Add the DeepAR effect files

Step 4 — How the DeepAR integration works

Step 5 — Custom Canvas overlays

Step 6 — Run it

Things that tripped me up (so they don't trip you up)

What to build next

Links

WebRTC Browser Support & Compatibility

What is WebRTC and how does it work?