https://livekit.io logo
Join Slack
Powered by
is there a code example to adding a very simple wa...
# ask-ai
a
is there a code example to adding a very simple watermark to an egress?
t
Thanks for reaching out, Anne. I'm an AI assistant and I'm here to help. Give me a moment while I research this topic.
""" Hey! If you want to add a simple watermark to an egress in LiveKit, you can do that easily with a custom template that has a watermark overlay. Here’s a quick example using the Node.js SDK:
Copy code
import { EgressClient } from 'livekit-server-sdk';

const egressClient = new EgressClient('<LIVEKIT_HOST_URL>', '<API_KEY>', '<API_SECRET>');

const egressInfo = await egressClient.startRoomCompositeEgress(
  'my-room',
  {
    file: {
      filepath: 'recordings/watermarked-{room_name}-{time}.mp4',
      s3: {
        accessKey: '<S3_ACCESS_KEY>',
        secret: '<S3_SECRET>',
        region: 'us-west-2',
        bucket: '<S3_BUCKET_NAME>'
      }
    }
  },
  {
    layout: 'grid',
    customBaseUrl: '<CUSTOM_TEMPLATE_URL>',
    encodingOptions: 'H264_720P_30'
  }
);
Another option is to create a custom web page with a watermark overlay and then use web egress to capture it. If you want, I’m happy to share more details or examples—just let me know! Sources: packages/livekit-server-sdk/src/EgressClient.ts | Session recording and transcripts | LiveKit Docs | livekit-api/src/services/egress.rs | README.md | Egress examples | LiveKit Docs
a
can the <CUSTOM_TEMPLATE_URL> just be any image file url?
t
The <CUSTOM_TEMPLATE_URL> can’t be just an image file URL. It needs to point to a web page that acts as a template for compositing tracks. You can definitely include your watermark image within that page’s design, but the URL itself should lead to a full web app that handles the compositing logic. If you’d like, I’m here to help you create that template—just let me know! Sources: README.md | livekit/livekit_egress.pb.go | Egress API | LiveKit Docs
a
yes please help me create that template
t
Here’s a friendly guide to help you create a custom template for LiveKit egress with a watermark: 1. Set Up the Template Project: ◦ Start by cloning the default template repository or use it as your base. ◦ Then, install the dependencies with 
npm install
or 
pnpm install
. 1. Modify the Template: ◦ Add a watermark element inside the main container, like 
<img src="watermark.png" className="watermark" />
. ◦ Style the watermark with CSS to position it nicely—maybe in the bottom-right corner with a bit of opacity. 1. Prepare the Watermark Image: ◦ Pop your watermark image (for example, 
watermark.png
) into the 
public
folder of your project. 1. Test the Template Locally: ◦ Give your template a quick test using the LiveKit CLI command 
lk egress test-template
to see how it looks. 1. Deploy the Template: ◦ Once you’re happy, deploy your updated template to a hosting service like Vercel or AWS S3. ◦ Make sure your template is available through a public URL. 1. Configure Egress to Use the Custom Template: ◦ Finally, set the 
custom_base_url
to point to your deployed template URL when you start the Room Composite Egress. If you get stuck or want a hand with any step, just let me know—I’m here to help!
Open in Slack
PreviousNext
Powered by