AWS IVS: Sending multiple concurrent streams from single React web app

Question

I want to use AWS IVS (with the Web Broadcast SDK) to send a user's webcam and screen live streams to two separate IVS channels in a React webapp. I can send each one separately, or both in separate tabs, but when I try to send both from the same tab / instance of the webapp, it sends either the webcam or the screen to both channels, essentially overwriting the first one sent when the second is sent.

I have creating separate objects for each stream, but the IVSBroadcastClient object isn't instantiated so I can't figure out how I can do this.

Answer 1

It's not explicitly supported, but it technically works if you create multiple instances of the broadcast client. See the example below, but watch out for possible performance issues as this may cause CPU spikes on the client running this code.

const broadcastClientOne = IVSBroadcastClient.create({
    streamConfig: IVSBroadcastClient.STANDARD_LANDSCAPE,
    ingestEndpoint: 'f99084460c35.global-contribute.live-video.net', // make sure to use your own ingestEndpoint
});

const broadcastClientTwo = IVSBroadcastClient.create({
    streamConfig: IVSBroadcastClient.STANDARD_LANDSCAPE,
    ingestEndpoint: 'f99084460c35.global-contribute.live-video.net', // make sure to use your own ingestEndpoint
});

Here's a full demo on CodePen:

https://codepen.io/recursivecodes/pen/JjmGrdw