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.