Adding custom overlay

[R-qanawati]

Hi team,

Looking at the documentation it is my understanding that i can provide an external_app_urlthat will act as an overlay on top of the stream before sending it to the rtmp broadcasts.

I got the rtmp broadcasts working with streamkey and url but as soon as i change layout to custom and set an external_app_url with a basic html it fails to set the rtmp.

Is there anything i am missing or misunderstanding as there isn't much information on this piece of the livestream documentation.

I am using react native but calling it from the rest api as thats the only method that allows setting the external_app_url

Thank you!

[oliverlaz]

Hi @R-qanawati, I'm not sure if I understand your question correctly.

• You have RTMP-out already set up and it is working as expected
• As soon as you add external_app_url with a custom overlay that only has basic HTML and this breaks the RTMP-out - you don't see the livestream, but only the overlay

If this is the case, then the issue is - external_app_url should point to an app that, besides rendering an overlay, should also render the livestream video. Our systems don't automatically merge these two things.

As RTMP-out broadcasting uses the same tech stack that our call recording does, you can refer to the following documentation, too:

• https://getstream.io/video/docs/api/recording/calls/#advanced---record-calls-using-a-custom-web-application

Please let me know if this helps.

[R-qanawati]

Hey @oliverlaz

Thank you for the prompt reply. The issue is that setting an external_app_url of any kind and layout custom will not properly set my broadcast rtmp call object.

Without external_app_url - call object gets set properly with the rtmp out broadcast url and key

Soon as I set any external_app_url and layout custom - call object is missing rtmp broadcast links

Hope this clears it up

[oliverlaz]

hi @R-qanawati, can you please provide a code snippet reproducing this issue?
I'd like to forward it to our backend team for further analysis.

[R-qanawati]

Hi @oliverlaz yes most definitely

const externalAppUrl = "https://video-sdk-overlay.vercel.app/index.html";

      const broadcasts = userStreamDestinations
        .filter((d) => selectedDestinations.includes(d.platform) && d.enabled)
        .map((d) => ({
          name: `${d.platform}_channel`,
          stream_url: d.rtmpUrl,
          stream_key: d.streamKey,
          layout: {
            name: "custom" as const,
            external_app_url: externalAppUrl
          },
        }));

      if (broadcasts.length === 0) {
        throw new Error("No valid stream destinations configured");
      }

      const rtmpResult = await startRTMPBroadcastsREST({
        callType: "livestream",
        callId,
        token,
        apiKey,
        broadcasts,
      });``` 

This isnt working 

But if we alter to this 

const externalAppUrl = "https://video-sdk-overlay.vercel.app/index.html";

  const broadcasts = userStreamDestinations
    .filter((d) => selectedDestinations.includes(d.platform) && d.enabled)
    .map((d) => ({
      name: `${d.platform}_channel`,
      stream_url: d.rtmpUrl,
      stream_key: d.streamKey,
      layout: {
        name: "single-participant" as const,
      },
    }));

  if (broadcasts.length === 0) {
    throw new Error("No valid stream destinations configured");
  }

  const rtmpResult = await startRTMPBroadcastsREST({
    callType: "livestream",
    callId,
    token,
    apiKey,
    broadcasts,
  });```

The await for the start is this

async function startRTMPBroadcastsREST({
  callType,
  callId,
  token,
  apiKey,
  broadcasts,
}: {
  callType: string;
  callId: string;
  token: string;
  apiKey: string;
  broadcasts: Array<{
    name: string;
    stream_url: string;
    stream_key: string;
    layout?: {
      name: string;
      external_app_url?: string;
    };
  }>;
}) {
  const url = `https://video.stream-io-api.com/api/v2/video/call/${callType}/${callId}/rtmp_broadcasts?api_key=${apiKey}`;

  console.log("Starting RTMP via REST API:", url);
  console.log("Broadcasts payload:", JSON.stringify(broadcasts, null, 2));

  const response = await fetch(url, {
    method: "POST",
    headers: {
      Authorization: token,
      "stream-auth-type": "jwt",
      "Content-Type": "application/json",
    },
    body: JSON.stringify({ broadcasts }),
  });

  const data = await response.json();

  if (!response.ok) {
    console.error("RTMP REST API Error:", data);
    throw new Error(
      data.message || `HTTP ${response.status}: Failed to start RTMP broadcast`
    );
  }

  console.log("RTMP REST API Success:", data);
  return data;
}

[oliverlaz]

hi @R-qanawati, apologies for the late answer.
I took a look at the provided external app, and to me it doesn't seem like it is based on our egress-composite app as described in these docs:

• https://getstream.io/video/docs/api/recording/calls/#advanced---record-calls-using-a-custom-web-application

Can you please fork our egress-composite app and apply your custom overlays on top of it?

[R-qanawati]

Hi @oliverlaz,

From the docs I understood that this egress composite app is for recording only. Does it allow the rtmp live stream to show the overlay as well?

[oliverlaz]

Hey @R-qanawati, this app is used for both recording and RTMP-out broadcasting.