Custom layout with audio only from one stream

How to implement?
1

I’m trying to make a custom layout for recording that will include the video and audio from one stream, and the audio only from a second.

    session.on("streamCreated", (event) => {
    var data = JSON.parse(event.stream.inboundStreamOpts.connection.data)
    session.subscribe(event.stream, 'videos', {"subscribeToVideo":data.includeVideo});
});

When the stream that is not to include video is created, a video element is still created to contain the stream resulting in a black box. I’d need an audio element instead.

Am I missing something or will I need to override the Session subscribe function in the openvidu-browser js file to accomplish this?

2

Just don’t provide a targetElement when calling Session.subscribe or Session.subscribeAsync: https://docs.openvidu.io/en/2.14.0/api/openvidu-browser/classes/session.html#subscribe

In your custom layout, just get the Stream object of the Subscriber and set its internal MediaStream to an AudioElement.

3

Brilliant. Thank you. I didn’t like the idea of overriding because I’d have to test compatibility with each update. I’ll report back.

4

So I started to do that and got it working but I felt like there was a lot of management going on because of how the streams are stored in the StreamManager. I’d be tracking the a lot of the same events to remove elements and streams.

Instead I opted to shunt the streams that I want to be audio only to a div with style=“display: none;”. Does that seem like a reasonable alternative or am I better off doing the tracking of the streams?

5

It seems a good idea to simplify things, but we will have to test it yourself to check if really works as you expect.