🚀 Enhance Your Android Live Streams with DeepAR & Custom Overlays Using Ant Media SDK

Live streaming has come a long way. Viewers today expect engaging, interactive experiences — not just a static camera feed. With the Ant Media Android SDK, you can bring Augmented Reality (AR) effects and branded overlays right into your live streams. In this post, we’ll explore how to add DeepAR effects and Custom Canvas Overlays to Android live streams using Ant Media Server’s WebRTC SDK.

🔧 Getting Started

There are two sample activities available in the companion GitHub repo:

DeepARActivity.java — for AR effects

CustomCanvasActivity.java — for custom overlays

📌 To get started:

1. Clone the sample:

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

1. Build and run on your Android device.

2. Start streaming with dynamic effects or branded overlays!

🪄 Section 1: DeepAR Activity — Augmented Reality for Live Streaming

What is DeepAR?

DeepAR is an AR SDK for real-time face tracking, filters, and visual effects. When integrated with the Ant Media Server SDK, you can stream AR-enhanced video with ultra-low latency to your viewers.

*How It Works
*

• The camera captures the video feed.
• Frames pass through the DeepAR SDK.
• DeepAR applies selected AR effects.

Processed frames are sent via WebRTC to the Ant Media Server and streamed live to viewers.

Example effects include:

• Viking helmets
• Neon devil horns
• Playful AR elements

*Code Snippet — Initialize DeepAR
*

deepAR = new DeepAR(this);
deepAR.setLicenseKey("your-license-key");
deepAR.initialize(this, this);

initializeEffects();
setupCamera();
setupStreamingAndPreview();

*WebRTC Client Setup
*

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

*Camera Frame Processing
*

imageAnalysis.setAnalyzer(ContextCompat.getMainExecutor(this), image -> {
    try {
        feedDeepAR(image);
    } finally {
        image.close();
    }
});

You can also cycle through effects with simple UI controls.

*🎨 Section 2: Custom Canvas Activity — Branded Overlays
*
While AR effects are fun, sometimes streams need branding elements, such as:

• Logos
• Watermarks
• Text captions

That’s where Custom Canvas Overlays come in.

*Built-in Overlay Types
*

1. Image Overlay
   Use your own logo or branding graphic, positioned anywhere on the screen.

2. Text Overlay
   Show custom text like titles or hashtags, with adjustable font size and color.

• How It Works
• CameraX captures frames.
• An OpenGL ES renderer composites overlays.
• Final frames are streamed via WebRTC. *Sample Overlay Setup *

imageProxyRenderer = new ImageProxyRenderer(webRTCClient, this, surfaceView, new CanvasListener() {
    @Override
    public void onSurfaceInitialized() {
        // Image overlay
        logoOverlay = new Overlay(getApplicationContext(), R.drawable.test, 0.8f, 0.8f);
        logoOverlay.setSize(0.2f);

        // Text overlay
        textOverlay = new Overlay(getApplicationContext(), "Hello", 64, Color.RED, 0f, -0.3f);
        textOverlay.setSize(0.12f);
    }
});

*🚀 Why Ant Media Server?
*
Using WebRTC with Ant Media Server gives you:

✔ Ultra-low latency streaming
✔ Scalable streaming to thousands of viewers
✔ Adaptive bitrate support
✔ Cross-platform playback on any device or browser

*🏁 Wrap Up
*
Whether you want fun AR effects or professional overlays, the Ant Media Android SDK gives you powerful tools to elevate your Android live streaming.

*👉 Clone the project and start experimenting!
*
Would you like a formatted Markdown version with images and GitHub links ready for DEV.to (so it looks even better when published)? Just let me know!
👉 Check the original tutorial here: https://antmedia.io/deepar-and-custom-overlay-with-ant-media-android-sdk/