How do I control the rendering of video endpoint in a video conference?

Question

How do I control the rendering of video endpoint in a video conference? I would like to render it in my own way, change the video size and more. Also, I cannot understand, how the IDs are named for the video elements. Are they the same with the endpoint IDs?

Answer 1

To process the video elements yourself, you need to:

• first subscribe to remote media added/removed events: https://voximplant.com/docs/references/websdk/voximplant/endpointevents#remotemediaadded https://voximplant.com/docs/references/websdk/voximplant/endpointevents#remotemediaremoved
• then process the render event: https://voximplant.com/docs/references/websdk/voximplant/mediarenderer#render

The video elements IDs are not the same as endpoint IDs. The elements IDs are the same name as video track ID. There is no internal way in Voximplant to get the element ID, but you still can get it. Here is a custom function that will allow you to get the IDs:

const getMediaElementIds = (call) => {
  return call.getEndpoints().map((endpoint) => {
    return endpoint.mediaRenderers.reduce(
      (acc, mr) => {
        const key = mr.kind === 'audio' ? 'audioElementId' : 'videoElementId';
        const id = mr.stream.getTracks()[0]?.id;

        return { ...acc, [key]: id };
      },
      { endpointId: endpoint.id }
    );
  });
};
// returns { endpointId: string; videoElementId?: string; audioElementId?: string }[]

And by the way, there are some nuances for Vue.js rendering:

• don't place the sdk objects (like client, endpoints, calls etc) into immutable stores like Vuex, Rx.js and so on.
• render the MediaRenderer into a container with v-once, so Vue.js does not rerender this part