Skip to main content

End-call Customization

The following guide describes the steps to end-call for everyone once the host leaves the call on App Builder SDK.

STEP 1

Use Customization API to update the bottom bar for new end-call functionality.

const userCustomization = customize({
components: {
videoCall: {
...
// Update the bottom bar with new end-call functionality
bottomToolBar: UpdatedBottomBar,
// (Optional) - Custom route config to re-direct users after end-call
customRoutes: [{component: CustomEndCallPage, path: 'call-ended'}],
...
},
},
});

STEP 2

Update the bottom bar with new end-call functionality. Overriding the end-call key will replace the existing End Call button with the Custom End Call button

export const UpdatedBottomBar = () => {
const { ChatToolbarItem, ParticipantToolbarItem } = ToolbarComponents;

const localUid = useLocalUid();
const isAttendee = useIsAttendee();
const isAttendeeUser = isAttendee(localUid);

return (
<ToolbarPreset
align="bottom"
items={{
"end-call": {
component: NewEndCall,
},
}}
/>
);
};

STEP 3

Create the custom end-call button using the Customization API. The ToolbarComponents component can be imported from the customization API. LocalEndcallToolbarItem and customExit are used to customise the end-call functionality

const NewEndCall = () => {
const { LocalEndcallToolbarItem } = ToolbarComponents;

return <LocalEndcallToolbarItem customExit={() => {}} />;
};

STEP 4

The Host sends the custom event to everyone to disconnect the call

const NewEndCall = () => {
const { LocalEndcallToolbarItem } = ToolbarComponents;
const localUid = useLocalUid();
const isHost = useIsHost();
const history = useHistory();

//Host sends the custom event for call disconnect
return (
<LocalEndcallToolbarItem
customExit={() => {
// When host click end call
if (isHost(localUid)) {
// Send custom events to all participants to disconnect from the call
customEvents.send(
"Host_Disconnects_Call",
JSON.stringify({ callEnded: true }),
PersistanceLevel.Session,
);
}
// Disconnect the host from the call after sending the custom event
window.setTimeout(() => {
endCall();
// (Optional) - if the user wants to navigate to a custom page after the call ends
history.push(getCustomRoute("call-ended"));
}, 50);
}}
/>
);
};

STEP 5

Participants receive the custom event and leave the call.

const NewEndCall = () => {
const endCall = useEndCall();
...

//Participants reacting to the custom event.
React.useEffect(() => {
// handle custom disconnect event for participants
customEvents.on("Host_Disconnects_Call", handleEndCallback);

return () => {
customEvents.off("Host_Disconnects_Call", handleEndCallback);
};
}, []);

const handleEndCallback = (data) => {
const payload = JSON.parse(data?.payload);
if (payload.callEnded) {
// other attendees leave call
endCall();
}
};

return (
<LocalEndcallToolbarItem
customExit={() => {
...
}}
/>
);
};

Now, you should be able to achieve custom end-call functionality with Customization API and Custom events.