From 7970f1db34f24831f306c539607a426965ab92ab Mon Sep 17 00:00:00 2001 From: Jitvar Patil Date: Fri, 3 Apr 2026 18:34:26 +0530 Subject: [PATCH 1/5] feat: add v4/v5 version dropdown to calling SDK navigation with redirects --- calls/android/actions.mdx | 2 + calls/android/audio-controls.mdx | 2 + calls/android/audio-modes.mdx | 2 + calls/android/authentication.mdx | 2 + calls/android/background-handling.mdx | 2 + calls/android/button-click-listener.mdx | 2 + calls/android/call-layouts.mdx | 2 + calls/android/call-logs.mdx | 2 + calls/android/custom-control-panel.mdx | 2 + calls/android/custom-participant-list.mdx | 2 + calls/android/events.mdx | 2 + calls/android/idle-timeout.mdx | 2 + calls/android/in-call-chat.mdx | 2 + calls/android/join-session.mdx | 2 + calls/android/layout-listener.mdx | 2 + calls/android/layout-ui.mdx | 2 + calls/android/media-events-listener.mdx | 2 + calls/android/migration-guide-v5.mdx | 2 + calls/android/overview.mdx | 2 + calls/android/participant-actions.mdx | 2 + calls/android/participant-event-listener.mdx | 2 + calls/android/participant-management.mdx | 2 + calls/android/picture-in-picture.mdx | 2 + calls/android/raise-hand.mdx | 2 + calls/android/recording.mdx | 2 + calls/android/ringing.mdx | 2 + calls/android/screen-sharing.mdx | 2 + calls/android/session-control.mdx | 2 + calls/android/session-settings.mdx | 2 + calls/android/session-status-listener.mdx | 2 + calls/android/setup.mdx | 2 + calls/android/share-invite.mdx | 2 + calls/android/troubleshooting.mdx | 3 +- calls/android/video-controls.mdx | 2 + calls/android/voip-calling.mdx | 2 + calls/flutter/actions.mdx | 2 + calls/flutter/audio-controls.mdx | 2 + calls/flutter/audio-modes.mdx | 2 + calls/flutter/authentication.mdx | 2 + calls/flutter/background-handling.mdx | 2 + calls/flutter/button-click-listener.mdx | 2 + calls/flutter/call-layouts.mdx | 2 + calls/flutter/call-logs.mdx | 2 + calls/flutter/custom-control-panel.mdx | 2 + calls/flutter/custom-participant-list.mdx | 2 + calls/flutter/events.mdx | 2 + calls/flutter/idle-timeout.mdx | 2 + calls/flutter/in-call-chat.mdx | 2 + calls/flutter/join-session.mdx | 2 + calls/flutter/layout-listener.mdx | 2 + calls/flutter/layout-ui.mdx | 2 + calls/flutter/media-events-listener.mdx | 2 + calls/flutter/migration-guide-v5.mdx | 507 +++++++++++++ calls/flutter/overview.mdx | 2 + calls/flutter/participant-actions.mdx | 2 + calls/flutter/participant-event-listener.mdx | 2 + calls/flutter/participant-management.mdx | 2 + calls/flutter/picture-in-picture.mdx | 2 + calls/flutter/raise-hand.mdx | 2 + calls/flutter/recording.mdx | 2 + calls/flutter/ringing.mdx | 2 + calls/flutter/screen-sharing.mdx | 2 + calls/flutter/session-control.mdx | 2 + calls/flutter/session-settings.mdx | 2 + calls/flutter/session-status-listener.mdx | 2 + calls/flutter/setup.mdx | 2 + calls/flutter/share-invite.mdx | 2 + calls/flutter/troubleshooting.mdx | 3 +- calls/flutter/video-controls.mdx | 2 + calls/flutter/voip-calling.mdx | 2 + calls/ios/actions.mdx | 2 + calls/ios/audio-modes.mdx | 2 + calls/ios/authentication.mdx | 2 + calls/ios/background-handling.mdx | 2 + calls/ios/call-layouts.mdx | 2 + calls/ios/call-logs.mdx | 2 + calls/ios/custom-control-panel.mdx | 2 + calls/ios/custom-participant-list.mdx | 2 + calls/ios/events.mdx | 2 + calls/ios/idle-timeout.mdx | 2 + calls/ios/in-call-chat.mdx | 2 + calls/ios/join-session.mdx | 2 + calls/ios/migration-guide-v5.mdx | 2 + calls/ios/overview.mdx | 2 + calls/ios/participant-management.mdx | 2 + calls/ios/picture-in-picture.mdx | 2 + calls/ios/raise-hand.mdx | 2 + calls/ios/recording.mdx | 2 + calls/ios/ringing.mdx | 2 + calls/ios/screen-sharing.mdx | 2 + calls/ios/session-settings.mdx | 2 + calls/ios/setup.mdx | 2 + calls/ios/share-invite.mdx | 2 + calls/ios/troubleshooting.mdx | 3 +- calls/ios/voip-calling.mdx | 2 + calls/javascript/actions.mdx | 2 + calls/javascript/angular-integration.mdx | 2 + calls/javascript/authentication.mdx | 2 + calls/javascript/call-layouts.mdx | 2 + calls/javascript/call-logs.mdx | 2 + calls/javascript/custom-control-panel.mdx | 2 + calls/javascript/device-management.mdx | 2 + calls/javascript/events.mdx | 2 + calls/javascript/idle-timeout.mdx | 2 + calls/javascript/in-call-chat.mdx | 2 + calls/javascript/ionic-integration.mdx | 2 + calls/javascript/join-session.mdx | 2 + calls/javascript/migration-guide-v5.mdx | 2 + calls/javascript/nextjs-integration.mdx | 2 + calls/javascript/overview.mdx | 2 + calls/javascript/participant-management.mdx | 2 + calls/javascript/permissions-handling.mdx | 2 + calls/javascript/picture-in-picture.mdx | 2 + calls/javascript/raise-hand.mdx | 2 + calls/javascript/react-integration.mdx | 2 + calls/javascript/recording.mdx | 2 + calls/javascript/ringing.mdx | 2 + calls/javascript/screen-sharing.mdx | 2 + calls/javascript/session-settings.mdx | 2 + calls/javascript/setup.mdx | 2 + calls/javascript/share-invite.mdx | 2 + calls/javascript/troubleshooting.mdx | 3 +- calls/javascript/virtual-background.mdx | 2 + calls/javascript/vue-integration.mdx | 2 + calls/react-native/actions.mdx | 2 + calls/react-native/audio-modes.mdx | 2 + calls/react-native/authentication.mdx | 2 + calls/react-native/background-handling.mdx | 2 + calls/react-native/call-layouts.mdx | 2 + calls/react-native/call-logs.mdx | 2 + calls/react-native/custom-control-panel.mdx | 2 + .../react-native/custom-participant-list.mdx | 2 + calls/react-native/events.mdx | 2 + calls/react-native/idle-timeout.mdx | 2 + calls/react-native/in-call-chat.mdx | 2 + calls/react-native/join-session.mdx | 2 + calls/react-native/migration-guide-v5.mdx | 2 + calls/react-native/overview.mdx | 2 + calls/react-native/participant-management.mdx | 2 + calls/react-native/picture-in-picture.mdx | 2 + calls/react-native/raise-hand.mdx | 2 + calls/react-native/recording.mdx | 2 + calls/react-native/ringing.mdx | 2 + calls/react-native/screen-sharing.mdx | 2 + calls/react-native/session-settings.mdx | 2 + calls/react-native/setup.mdx | 2 + calls/react-native/share-invite.mdx | 2 + calls/react-native/troubleshooting.mdx | 3 +- calls/react-native/voip-calling.mdx | 2 + calls/v4/android/call-logs.mdx | 109 +++ calls/v4/android/call-session.mdx | 668 ++++++++++++++++ calls/v4/android/overview.mdx | 97 +++ calls/v4/android/presenter-mode.mdx | 216 ++++++ calls/v4/android/recording.mdx | 109 +++ calls/v4/android/ringing.mdx | 566 ++++++++++++++ calls/v4/android/session-timeout.mdx | 35 + calls/v4/android/setup.mdx | 129 ++++ calls/v4/android/standalone-calling.mdx | 590 +++++++++++++++ calls/v4/android/video-view-customisation.mdx | 57 ++ calls/v4/flutter/call-logs.mdx | 93 +++ calls/v4/flutter/call-session.mdx | 461 ++++++++++++ calls/v4/flutter/overview.mdx | 96 +++ calls/v4/flutter/presenter-mode.mdx | 107 +++ calls/v4/flutter/recording.mdx | 83 ++ calls/v4/flutter/ringing.mdx | 327 ++++++++ calls/v4/flutter/session-timeout.mdx | 35 + calls/v4/flutter/setup.mdx | 84 +++ calls/v4/flutter/standalone-calling.mdx | 406 ++++++++++ calls/v4/flutter/video-view-customisation.mdx | 43 ++ calls/v4/ios/call-logs.mdx | 91 +++ calls/v4/ios/call-session.mdx | 428 +++++++++++ ...all-screen-on-tap-of-push-notification.mdx | 145 ++++ calls/v4/ios/overview.mdx | 89 +++ calls/v4/ios/presenter-mode.mdx | 216 ++++++ calls/v4/ios/recording.mdx | 69 ++ calls/v4/ios/ringing.mdx | 366 +++++++++ calls/v4/ios/session-timeout.mdx | 35 + calls/v4/ios/setup.mdx | 255 +++++++ calls/v4/ios/standalone-calling.mdx | 390 ++++++++++ calls/v4/ios/video-view-customisation.mdx | 41 + calls/v4/javascript/call-logs.mdx | 97 +++ calls/v4/javascript/call-session.mdx | 711 ++++++++++++++++++ calls/v4/javascript/custom-css.mdx | 173 +++++ calls/v4/javascript/overview.mdx | 104 +++ calls/v4/javascript/presenter-mode.mdx | 148 ++++ calls/v4/javascript/recording.mdx | 140 ++++ calls/v4/javascript/ringing.mdx | 609 +++++++++++++++ calls/v4/javascript/session-timeout.mdx | 35 + calls/v4/javascript/setup.mdx | 118 +++ calls/v4/javascript/standalone-calling.mdx | 490 ++++++++++++ .../javascript/video-view-customisation.mdx | 97 +++ calls/v4/javascript/virtual-background.mdx | 155 ++++ calls/v4/react-native/call-logs.mdx | 129 ++++ calls/v4/react-native/call-session.mdx | 516 +++++++++++++ .../react-native/expo-integration-guide.mdx | 126 ++++ calls/v4/react-native/overview.mdx | 129 ++++ calls/v4/react-native/presenter-mode.mdx | 156 ++++ calls/v4/react-native/recording.mdx | 154 ++++ calls/v4/react-native/ringing.mdx | 546 ++++++++++++++ calls/v4/react-native/session-timeout.mdx | 52 ++ calls/v4/react-native/setup.mdx | 251 +++++++ calls/v4/react-native/standalone-calling.mdx | 234 ++++++ .../react-native/video-view-customisation.mdx | 84 +++ docs.json | 474 +++++++++++- sdk/android/calling-overview.mdx | 89 +-- sdk/flutter/calling-overview.mdx | 88 +-- sdk/ios/calling-overview.mdx | 81 +- sdk/javascript/calling-overview.mdx | 96 +-- sdk/react-native/calling-overview.mdx | 141 +--- 209 files changed, 12996 insertions(+), 471 deletions(-) create mode 100644 calls/flutter/migration-guide-v5.mdx create mode 100644 calls/v4/android/call-logs.mdx create mode 100644 calls/v4/android/call-session.mdx create mode 100644 calls/v4/android/overview.mdx create mode 100644 calls/v4/android/presenter-mode.mdx create mode 100644 calls/v4/android/recording.mdx create mode 100644 calls/v4/android/ringing.mdx create mode 100644 calls/v4/android/session-timeout.mdx create mode 100644 calls/v4/android/setup.mdx create mode 100644 calls/v4/android/standalone-calling.mdx create mode 100644 calls/v4/android/video-view-customisation.mdx create mode 100644 calls/v4/flutter/call-logs.mdx create mode 100644 calls/v4/flutter/call-session.mdx create mode 100644 calls/v4/flutter/overview.mdx create mode 100644 calls/v4/flutter/presenter-mode.mdx create mode 100644 calls/v4/flutter/recording.mdx create mode 100644 calls/v4/flutter/ringing.mdx create mode 100644 calls/v4/flutter/session-timeout.mdx create mode 100644 calls/v4/flutter/setup.mdx create mode 100644 calls/v4/flutter/standalone-calling.mdx create mode 100644 calls/v4/flutter/video-view-customisation.mdx create mode 100644 calls/v4/ios/call-logs.mdx create mode 100644 calls/v4/ios/call-session.mdx create mode 100644 calls/v4/ios/launch-call-screen-on-tap-of-push-notification.mdx create mode 100644 calls/v4/ios/overview.mdx create mode 100644 calls/v4/ios/presenter-mode.mdx create mode 100644 calls/v4/ios/recording.mdx create mode 100644 calls/v4/ios/ringing.mdx create mode 100644 calls/v4/ios/session-timeout.mdx create mode 100644 calls/v4/ios/setup.mdx create mode 100644 calls/v4/ios/standalone-calling.mdx create mode 100644 calls/v4/ios/video-view-customisation.mdx create mode 100644 calls/v4/javascript/call-logs.mdx create mode 100644 calls/v4/javascript/call-session.mdx create mode 100644 calls/v4/javascript/custom-css.mdx create mode 100644 calls/v4/javascript/overview.mdx create mode 100644 calls/v4/javascript/presenter-mode.mdx create mode 100644 calls/v4/javascript/recording.mdx create mode 100644 calls/v4/javascript/ringing.mdx create mode 100644 calls/v4/javascript/session-timeout.mdx create mode 100644 calls/v4/javascript/setup.mdx create mode 100644 calls/v4/javascript/standalone-calling.mdx create mode 100644 calls/v4/javascript/video-view-customisation.mdx create mode 100644 calls/v4/javascript/virtual-background.mdx create mode 100644 calls/v4/react-native/call-logs.mdx create mode 100644 calls/v4/react-native/call-session.mdx create mode 100644 calls/v4/react-native/expo-integration-guide.mdx create mode 100644 calls/v4/react-native/overview.mdx create mode 100644 calls/v4/react-native/presenter-mode.mdx create mode 100644 calls/v4/react-native/recording.mdx create mode 100644 calls/v4/react-native/ringing.mdx create mode 100644 calls/v4/react-native/session-timeout.mdx create mode 100644 calls/v4/react-native/setup.mdx create mode 100644 calls/v4/react-native/standalone-calling.mdx create mode 100644 calls/v4/react-native/video-view-customisation.mdx diff --git a/calls/android/actions.mdx b/calls/android/actions.mdx index 04f10bd94..f157f9524 100644 --- a/calls/android/actions.mdx +++ b/calls/android/actions.mdx @@ -1,6 +1,8 @@ --- title: "Actions" sidebarTitle: "Actions" +sdk_version: "5.x (Beta)" +description: "CometChat Calling SDK v5 - Beta Release - Actions for Android" --- Use call actions to create your own custom controls or trigger call functionality dynamically based on your use case. All actions are called on the `CallSession` singleton instance during an active call session. diff --git a/calls/android/audio-controls.mdx b/calls/android/audio-controls.mdx index 0a548c07d..517e0d614 100644 --- a/calls/android/audio-controls.mdx +++ b/calls/android/audio-controls.mdx @@ -1,6 +1,8 @@ --- title: "Audio Controls" sidebarTitle: "Audio Controls" +sdk_version: "5.x (Beta)" +description: "CometChat Calling SDK v5 - Beta Release - Audio Controls for Android" --- Control audio during an active call session. These methods allow you to mute/unmute the local microphone and change the audio output device. diff --git a/calls/android/audio-modes.mdx b/calls/android/audio-modes.mdx index 91f8dc117..7ada60b4c 100644 --- a/calls/android/audio-modes.mdx +++ b/calls/android/audio-modes.mdx @@ -1,6 +1,8 @@ --- title: "Audio Modes" sidebarTitle: "Audio Modes" +sdk_version: "5.x (Beta)" +description: "CometChat Calling SDK v5 - Beta Release - Audio Modes for Android" --- Control audio output routing during calls. Switch between speaker, earpiece, Bluetooth, and wired headphones based on user preference or device availability. diff --git a/calls/android/authentication.mdx b/calls/android/authentication.mdx index e2d53d892..5d1bb327a 100644 --- a/calls/android/authentication.mdx +++ b/calls/android/authentication.mdx @@ -1,6 +1,8 @@ --- title: "Authentication" sidebarTitle: "Authentication" +sdk_version: "5.x (Beta)" +description: "CometChat Calling SDK v5 - Beta Release - Authentication for Android" --- Before users can make or receive calls, they must be authenticated with the CometChat Calls SDK. This guide covers the login and logout methods. diff --git a/calls/android/background-handling.mdx b/calls/android/background-handling.mdx index c507d0bd4..3bb883521 100644 --- a/calls/android/background-handling.mdx +++ b/calls/android/background-handling.mdx @@ -1,6 +1,8 @@ --- title: "Background Handling" sidebarTitle: "Background Handling" +sdk_version: "5.x (Beta)" +description: "CometChat Calling SDK v5 - Beta Release - Background Handling for Android" --- Keep calls alive when users navigate away from your app. Background handling ensures the call continues running when users press the home button, switch to another app, or lock their device. diff --git a/calls/android/button-click-listener.mdx b/calls/android/button-click-listener.mdx index 6beadb973..d04e6dcb1 100644 --- a/calls/android/button-click-listener.mdx +++ b/calls/android/button-click-listener.mdx @@ -1,6 +1,8 @@ --- title: "Button Click Listener" sidebarTitle: "Button Click Listener" +sdk_version: "5.x (Beta)" +description: "CometChat Calling SDK v5 - Beta Release - Button Click Listener for Android" --- Intercept UI button clicks with `ButtonClickListener`. This listener provides callbacks when users tap buttons in the call UI, allowing you to implement custom behavior or show confirmation dialogs. diff --git a/calls/android/call-layouts.mdx b/calls/android/call-layouts.mdx index 49d96683a..436287507 100644 --- a/calls/android/call-layouts.mdx +++ b/calls/android/call-layouts.mdx @@ -1,6 +1,8 @@ --- title: "Call Layouts" sidebarTitle: "Call Layouts" +sdk_version: "5.x (Beta)" +description: "CometChat Calling SDK v5 - Beta Release - Call Layouts for Android" --- Choose how participants are displayed during a call. The SDK provides multiple layout options to suit different use cases like team meetings, presentations, or one-on-one calls. diff --git a/calls/android/call-logs.mdx b/calls/android/call-logs.mdx index de1b14018..ce00cbd2c 100644 --- a/calls/android/call-logs.mdx +++ b/calls/android/call-logs.mdx @@ -1,6 +1,8 @@ --- title: "Call Logs" sidebarTitle: "Call Logs" +sdk_version: "5.x (Beta)" +description: "CometChat Calling SDK v5 - Beta Release - Call Logs for Android" --- Retrieve call history for your application. Call logs provide detailed information about past calls including duration, participants, recordings, and status. diff --git a/calls/android/custom-control-panel.mdx b/calls/android/custom-control-panel.mdx index bdbc54ab9..24cd83aef 100644 --- a/calls/android/custom-control-panel.mdx +++ b/calls/android/custom-control-panel.mdx @@ -1,6 +1,8 @@ --- title: "Custom Control Panel" sidebarTitle: "Custom Control Panel" +sdk_version: "5.x (Beta)" +description: "CometChat Calling SDK v5 - Beta Release - Custom Control Panel for Android" --- Build a fully customized control panel for your call interface by hiding the default controls and implementing your own UI with call actions. This guide walks you through creating a custom control panel with essential call controls. diff --git a/calls/android/custom-participant-list.mdx b/calls/android/custom-participant-list.mdx index 6c793987e..9a511aa93 100644 --- a/calls/android/custom-participant-list.mdx +++ b/calls/android/custom-participant-list.mdx @@ -1,6 +1,8 @@ --- title: "Custom Participant List" sidebarTitle: "Custom Participant List" +sdk_version: "5.x (Beta)" +description: "CometChat Calling SDK v5 - Beta Release - Custom Participant List for Android" --- Build a custom participant list UI that displays real-time participant information with full control over layout and interactions. This guide demonstrates how to hide the default participant list and create your own using participant events and actions. diff --git a/calls/android/events.mdx b/calls/android/events.mdx index d0566d502..485f58d4e 100644 --- a/calls/android/events.mdx +++ b/calls/android/events.mdx @@ -1,6 +1,8 @@ --- title: "Events" sidebarTitle: "Events" +sdk_version: "5.x (Beta)" +description: "CometChat Calling SDK v5 - Beta Release - Events for Android" --- Handle call session events to build responsive UIs. The SDK provides five event listener interfaces to monitor session status, participant activities, media changes, button clicks, and layout changes. Each listener is lifecycle-aware and automatically cleaned up when the Activity or Fragment is destroyed. diff --git a/calls/android/idle-timeout.mdx b/calls/android/idle-timeout.mdx index 9efb4d9d8..55c625b2a 100644 --- a/calls/android/idle-timeout.mdx +++ b/calls/android/idle-timeout.mdx @@ -1,6 +1,8 @@ --- title: "Idle Timeout" sidebarTitle: "Idle Timeout" +sdk_version: "5.x (Beta)" +description: "CometChat Calling SDK v5 - Beta Release - Idle Timeout for Android" --- Configure automatic session termination when a user is alone in a call. Idle timeout helps manage resources by ending sessions that have no active participants. diff --git a/calls/android/in-call-chat.mdx b/calls/android/in-call-chat.mdx index 8274e55fb..661fa138b 100644 --- a/calls/android/in-call-chat.mdx +++ b/calls/android/in-call-chat.mdx @@ -1,6 +1,8 @@ --- title: "In-Call Chat" sidebarTitle: "In-Call Chat" +sdk_version: "5.x (Beta)" +description: "CometChat Calling SDK v5 - Beta Release - In-Call Chat for Android" --- Add real-time messaging to your call experience using CometChat UI Kit. This allows participants to send text messages, share files, and communicate via chat while on a call. diff --git a/calls/android/join-session.mdx b/calls/android/join-session.mdx index 199d84fa3..af1a62a0f 100644 --- a/calls/android/join-session.mdx +++ b/calls/android/join-session.mdx @@ -1,6 +1,8 @@ --- title: "Join Session" sidebarTitle: "Join Session" +sdk_version: "5.x (Beta)" +description: "CometChat Calling SDK v5 - Beta Release - Join Session for Android" --- Join a call session using one of two approaches: the quick start method with a session ID, or the advanced flow with manual token generation for more control. diff --git a/calls/android/layout-listener.mdx b/calls/android/layout-listener.mdx index b72324a69..42880bfde 100644 --- a/calls/android/layout-listener.mdx +++ b/calls/android/layout-listener.mdx @@ -1,6 +1,8 @@ --- title: "Layout Listener" sidebarTitle: "Layout Listener" +sdk_version: "5.x (Beta)" +description: "CometChat Calling SDK v5 - Beta Release - Layout Listener for Android" --- Monitor layout changes with `LayoutListener`. This listener provides callbacks for call layout changes, participant list visibility, and Picture-in-Picture (PiP) mode state changes. diff --git a/calls/android/layout-ui.mdx b/calls/android/layout-ui.mdx index 838d98c38..8cd8428d1 100644 --- a/calls/android/layout-ui.mdx +++ b/calls/android/layout-ui.mdx @@ -1,6 +1,8 @@ --- title: "Layout & UI" sidebarTitle: "Layout & UI" +sdk_version: "5.x (Beta)" +description: "CometChat Calling SDK v5 - Beta Release - Layout & UI for Android" --- Control the call layout and UI elements during an active session. These methods allow you to change the call layout, enable Picture-in-Picture mode, and update UI badges. diff --git a/calls/android/media-events-listener.mdx b/calls/android/media-events-listener.mdx index f9de1e9d5..92905f2df 100644 --- a/calls/android/media-events-listener.mdx +++ b/calls/android/media-events-listener.mdx @@ -1,6 +1,8 @@ --- title: "Media Events Listener" sidebarTitle: "Media Events Listener" +sdk_version: "5.x (Beta)" +description: "CometChat Calling SDK v5 - Beta Release - Media Events Listener for Android" --- Monitor local media state changes with `MediaEventsListener`. This listener provides callbacks for your own audio/video state changes, recording events, screen sharing, audio mode changes, and camera facing changes. diff --git a/calls/android/migration-guide-v5.mdx b/calls/android/migration-guide-v5.mdx index bd4097312..e0380b422 100644 --- a/calls/android/migration-guide-v5.mdx +++ b/calls/android/migration-guide-v5.mdx @@ -1,6 +1,8 @@ --- title: "Migration Guide" sidebarTitle: "v4 to v5 Migration" +sdk_version: "5.x (Beta)" +description: "CometChat Calling SDK v5 - Beta Release - Migration Guide for Android" --- This guide covers migrating from Calls SDK v4 to v5 for Android. diff --git a/calls/android/overview.mdx b/calls/android/overview.mdx index 58e8bcb42..f0a901f52 100644 --- a/calls/android/overview.mdx +++ b/calls/android/overview.mdx @@ -1,6 +1,8 @@ --- title: "Calls SDK" sidebarTitle: "Overview" +sdk_version: "5.x (Beta)" +description: "CometChat Calling SDK v5 - Beta Release - Calls SDK for Android" --- diff --git a/calls/android/participant-actions.mdx b/calls/android/participant-actions.mdx index 10e6c3a9f..dbbbd8ec6 100644 --- a/calls/android/participant-actions.mdx +++ b/calls/android/participant-actions.mdx @@ -1,6 +1,8 @@ --- title: "Participant Actions" sidebarTitle: "Participant Actions" +sdk_version: "5.x (Beta)" +description: "CometChat Calling SDK v5 - Beta Release - Participant Actions for Android" --- Manage other participants during an active call session. These methods allow you to mute participants, pause their video, and pin/unpin them in the call layout. diff --git a/calls/android/participant-event-listener.mdx b/calls/android/participant-event-listener.mdx index ae8788728..17bce8c44 100644 --- a/calls/android/participant-event-listener.mdx +++ b/calls/android/participant-event-listener.mdx @@ -1,6 +1,8 @@ --- title: "Participant Event Listener" sidebarTitle: "Participant Event Listener" +sdk_version: "5.x (Beta)" +description: "CometChat Calling SDK v5 - Beta Release - Participant Event Listener for Android" --- Monitor participant activities with `ParticipantEventListener`. This listener provides callbacks for participant join/leave events, audio/video state changes, hand raise actions, screen sharing, recording, and more. diff --git a/calls/android/participant-management.mdx b/calls/android/participant-management.mdx index a06256b1e..cce1dd320 100644 --- a/calls/android/participant-management.mdx +++ b/calls/android/participant-management.mdx @@ -1,6 +1,8 @@ --- title: "Participant Management" sidebarTitle: "Participant Management" +sdk_version: "5.x (Beta)" +description: "CometChat Calling SDK v5 - Beta Release - Participant Management for Android" --- Manage participants during a call with actions like muting, pausing video, and pinning. These features help maintain order in group calls and highlight important speakers. diff --git a/calls/android/picture-in-picture.mdx b/calls/android/picture-in-picture.mdx index 492d41875..81409c888 100644 --- a/calls/android/picture-in-picture.mdx +++ b/calls/android/picture-in-picture.mdx @@ -1,6 +1,8 @@ --- title: "Picture-in-Picture" sidebarTitle: "Picture-in-Picture" +sdk_version: "5.x (Beta)" +description: "CometChat Calling SDK v5 - Beta Release - Picture-in-Picture for Android" --- Enable Picture-in-Picture (PiP) mode to allow users to continue their call in a floating window while using other apps. PiP provides a seamless multitasking experience during calls. diff --git a/calls/android/raise-hand.mdx b/calls/android/raise-hand.mdx index c51bf5963..d407de2ca 100644 --- a/calls/android/raise-hand.mdx +++ b/calls/android/raise-hand.mdx @@ -1,6 +1,8 @@ --- title: "Raise Hand" sidebarTitle: "Raise Hand" +sdk_version: "5.x (Beta)" +description: "CometChat Calling SDK v5 - Beta Release - Raise Hand for Android" --- Allow participants to raise their hand to get attention during calls. This feature is useful for large meetings, webinars, or any scenario where participants need to signal they want to speak. diff --git a/calls/android/recording.mdx b/calls/android/recording.mdx index 0f0dad667..8e815ccf0 100644 --- a/calls/android/recording.mdx +++ b/calls/android/recording.mdx @@ -1,6 +1,8 @@ --- title: "Recording" sidebarTitle: "Recording" +sdk_version: "5.x (Beta)" +description: "CometChat Calling SDK v5 - Beta Release - Recording for Android" --- Record call sessions for later playback. Recordings are stored server-side and can be accessed through call logs or the CometChat Dashboard. diff --git a/calls/android/ringing.mdx b/calls/android/ringing.mdx index 85e9b7651..c27f67cc8 100644 --- a/calls/android/ringing.mdx +++ b/calls/android/ringing.mdx @@ -1,6 +1,8 @@ --- title: "Ringing" sidebarTitle: "Ringing" +sdk_version: "5.x (Beta)" +description: "CometChat Calling SDK v5 - Beta Release - Ringing for Android" --- Implement incoming and outgoing call notifications with accept/reject functionality. Ringing enables real-time call signaling between users, allowing them to initiate calls and respond to incoming call requests. diff --git a/calls/android/screen-sharing.mdx b/calls/android/screen-sharing.mdx index 9133f1611..f732fb7e3 100644 --- a/calls/android/screen-sharing.mdx +++ b/calls/android/screen-sharing.mdx @@ -1,6 +1,8 @@ --- title: "Screen Sharing" sidebarTitle: "Screen Sharing" +sdk_version: "5.x (Beta)" +description: "CometChat Calling SDK v5 - Beta Release - Screen Sharing for Android" --- View screen shares from other participants during a call. The Android SDK can receive and display screen shares initiated from web clients. diff --git a/calls/android/session-control.mdx b/calls/android/session-control.mdx index 38d91d9fb..f92447fb1 100644 --- a/calls/android/session-control.mdx +++ b/calls/android/session-control.mdx @@ -1,6 +1,8 @@ --- title: "Session Control" sidebarTitle: "Session Control" +sdk_version: "5.x (Beta)" +description: "CometChat Calling SDK v5 - Beta Release - Session Control for Android" --- Control the call session lifecycle and participant interactions. These methods allow you to leave the session, raise/lower your hand, and check session status. diff --git a/calls/android/session-settings.mdx b/calls/android/session-settings.mdx index 24272810c..a75ee94f7 100644 --- a/calls/android/session-settings.mdx +++ b/calls/android/session-settings.mdx @@ -1,6 +1,8 @@ --- title: "SessionSettingsBuilder" sidebarTitle: "SessionSettingsBuilder" +sdk_version: "5.x (Beta)" +description: "CometChat Calling SDK v5 - Beta Release - SessionSettingsBuilder for Android" --- The `SessionSettingsBuilder` is a powerful configuration tool that allows you to customize every aspect of your call session before participants join. From controlling the initial audio/video state to customizing the UI layout and hiding specific controls, this builder gives you complete control over the call experience. diff --git a/calls/android/session-status-listener.mdx b/calls/android/session-status-listener.mdx index 710706730..399c37352 100644 --- a/calls/android/session-status-listener.mdx +++ b/calls/android/session-status-listener.mdx @@ -1,6 +1,8 @@ --- title: "Session Status Listener" sidebarTitle: "Session Status Listener" +sdk_version: "5.x (Beta)" +description: "CometChat Calling SDK v5 - Beta Release - Session Status Listener for Android" --- Monitor the call session lifecycle with `SessionStatusListener`. This listener provides callbacks for session join/leave events, connection status changes, and session timeouts. diff --git a/calls/android/setup.mdx b/calls/android/setup.mdx index 9429aca11..30ff35071 100644 --- a/calls/android/setup.mdx +++ b/calls/android/setup.mdx @@ -1,6 +1,8 @@ --- title: "Setup" sidebarTitle: "Setup" +sdk_version: "5.x (Beta)" +description: "CometChat Calling SDK v5 - Beta Release - Setup for Android" --- This guide walks you through installing the CometChat Calls SDK and initializing it in your Android application. diff --git a/calls/android/share-invite.mdx b/calls/android/share-invite.mdx index ec67277e4..c837a2c79 100644 --- a/calls/android/share-invite.mdx +++ b/calls/android/share-invite.mdx @@ -1,6 +1,8 @@ --- title: "Share Invite" sidebarTitle: "Share Invite" +sdk_version: "5.x (Beta)" +description: "CometChat Calling SDK v5 - Beta Release - Share Invite for Android" --- Enable participants to invite others to join a call by sharing a meeting link. The share invite button opens the system share sheet, allowing users to send the invite via any messaging app, email, or social media. diff --git a/calls/android/troubleshooting.mdx b/calls/android/troubleshooting.mdx index 4a4acd44a..6a72ed2f4 100644 --- a/calls/android/troubleshooting.mdx +++ b/calls/android/troubleshooting.mdx @@ -1,6 +1,7 @@ --- title: "Troubleshooting" -description: "Common failure modes and fixes for the CometChat Android Calls SDK." +description: "CometChat Calling SDK v5 - Beta Release - Troubleshooting for Android" +sdk_version: "5.x (Beta)" --- ## Installation & Setup diff --git a/calls/android/video-controls.mdx b/calls/android/video-controls.mdx index d512afe35..75aa69cb2 100644 --- a/calls/android/video-controls.mdx +++ b/calls/android/video-controls.mdx @@ -1,6 +1,8 @@ --- title: "Video Controls" sidebarTitle: "Video Controls" +sdk_version: "5.x (Beta)" +description: "CometChat Calling SDK v5 - Beta Release - Video Controls for Android" --- Control video during an active call session. These methods allow you to pause/resume the local camera and switch between front and back cameras. diff --git a/calls/android/voip-calling.mdx b/calls/android/voip-calling.mdx index a43b83ef4..ed8b13662 100644 --- a/calls/android/voip-calling.mdx +++ b/calls/android/voip-calling.mdx @@ -1,6 +1,8 @@ --- title: "VoIP Calling" sidebarTitle: "VoIP Calling" +sdk_version: "5.x (Beta)" +description: "CometChat Calling SDK v5 - Beta Release - VoIP Calling for Android" --- Implement native VoIP calling that works when your app is in the background or killed. This guide shows how to integrate Android's Telecom framework with CometChat to display system call UI, handle calls from the lock screen, and provide a native calling experience. diff --git a/calls/flutter/actions.mdx b/calls/flutter/actions.mdx index 44a671ddf..5dfc499a3 100644 --- a/calls/flutter/actions.mdx +++ b/calls/flutter/actions.mdx @@ -1,6 +1,8 @@ --- title: "Actions" sidebarTitle: "Actions" +sdk_version: "5.x (Beta)" +description: "CometChat Calling SDK v5 - Beta Release - Actions for Flutter" --- Use call actions to create your own custom controls or trigger call functionality dynamically based on your use case. All actions are called on the `CallSession` singleton instance during an active call session. diff --git a/calls/flutter/audio-controls.mdx b/calls/flutter/audio-controls.mdx index 513c1972e..c8a3fb247 100644 --- a/calls/flutter/audio-controls.mdx +++ b/calls/flutter/audio-controls.mdx @@ -1,6 +1,8 @@ --- title: "Audio Controls" sidebarTitle: "Audio Controls" +sdk_version: "5.x (Beta)" +description: "CometChat Calling SDK v5 - Beta Release - Audio Controls for Flutter" --- Control audio during an active call session. These methods allow you to mute/unmute the local microphone and change the audio output device. diff --git a/calls/flutter/audio-modes.mdx b/calls/flutter/audio-modes.mdx index ac1b49691..6fc5d6f68 100644 --- a/calls/flutter/audio-modes.mdx +++ b/calls/flutter/audio-modes.mdx @@ -1,6 +1,8 @@ --- title: "Audio Modes" sidebarTitle: "Audio Modes" +sdk_version: "5.x (Beta)" +description: "CometChat Calling SDK v5 - Beta Release - Audio Modes for Flutter" --- Control audio output routing during calls. Switch between speaker, earpiece, and Bluetooth based on user preference or device availability. diff --git a/calls/flutter/authentication.mdx b/calls/flutter/authentication.mdx index 47b2e3153..69dc93d33 100644 --- a/calls/flutter/authentication.mdx +++ b/calls/flutter/authentication.mdx @@ -1,6 +1,8 @@ --- title: "Authentication" sidebarTitle: "Authentication" +sdk_version: "5.x (Beta)" +description: "CometChat Calling SDK v5 - Beta Release - Authentication for Flutter" --- Before users can make or receive calls, they must be authenticated with the CometChat Calls SDK. This guide covers the login and logout methods. diff --git a/calls/flutter/background-handling.mdx b/calls/flutter/background-handling.mdx index d66749517..2bc4e4490 100644 --- a/calls/flutter/background-handling.mdx +++ b/calls/flutter/background-handling.mdx @@ -1,6 +1,8 @@ --- title: "Background Handling" sidebarTitle: "Background Handling" +sdk_version: "5.x (Beta)" +description: "CometChat Calling SDK v5 - Beta Release - Background Handling for Flutter" --- Keep calls alive when users navigate away from your app. Background handling ensures the call continues running when users press the home button, switch to another app, or lock their device. diff --git a/calls/flutter/button-click-listener.mdx b/calls/flutter/button-click-listener.mdx index 581d2457b..571407a10 100644 --- a/calls/flutter/button-click-listener.mdx +++ b/calls/flutter/button-click-listener.mdx @@ -1,6 +1,8 @@ --- title: "Button Click Listener" sidebarTitle: "Button Click Listener" +sdk_version: "5.x (Beta)" +description: "CometChat Calling SDK v5 - Beta Release - Button Click Listener for Flutter" --- Intercept UI button clicks with `ButtonClickListeners`. This listener provides callbacks when users tap buttons in the call UI, allowing you to implement custom behavior or show confirmation dialogs. diff --git a/calls/flutter/call-layouts.mdx b/calls/flutter/call-layouts.mdx index 4de76fe15..1e4ce9640 100644 --- a/calls/flutter/call-layouts.mdx +++ b/calls/flutter/call-layouts.mdx @@ -1,6 +1,8 @@ --- title: "Call Layouts" sidebarTitle: "Call Layouts" +sdk_version: "5.x (Beta)" +description: "CometChat Calling SDK v5 - Beta Release - Call Layouts for Flutter" --- Choose how participants are displayed during a call. The SDK provides multiple layout options to suit different use cases like team meetings, presentations, or one-on-one calls. diff --git a/calls/flutter/call-logs.mdx b/calls/flutter/call-logs.mdx index 84cb3e5cf..02bc0cd79 100644 --- a/calls/flutter/call-logs.mdx +++ b/calls/flutter/call-logs.mdx @@ -1,6 +1,8 @@ --- title: "Call Logs" sidebarTitle: "Call Logs" +sdk_version: "5.x (Beta)" +description: "CometChat Calling SDK v5 - Beta Release - Call Logs for Flutter" --- Retrieve call history for your application. Call logs provide detailed information about past calls including duration, participants, recordings, and status. diff --git a/calls/flutter/custom-control-panel.mdx b/calls/flutter/custom-control-panel.mdx index 47f1258d8..9b2c5cc3f 100644 --- a/calls/flutter/custom-control-panel.mdx +++ b/calls/flutter/custom-control-panel.mdx @@ -1,6 +1,8 @@ --- title: "Custom Control Panel" sidebarTitle: "Custom Control Panel" +sdk_version: "5.x (Beta)" +description: "CometChat Calling SDK v5 - Beta Release - Custom Control Panel for Flutter" --- Build a fully customized control panel for your call interface by hiding the default controls and implementing your own UI with call actions. This guide walks you through creating a custom control panel with essential call controls. diff --git a/calls/flutter/custom-participant-list.mdx b/calls/flutter/custom-participant-list.mdx index 772e9cebe..d4fb98bfc 100644 --- a/calls/flutter/custom-participant-list.mdx +++ b/calls/flutter/custom-participant-list.mdx @@ -1,6 +1,8 @@ --- title: "Custom Participant List" sidebarTitle: "Custom Participant List" +sdk_version: "5.x (Beta)" +description: "CometChat Calling SDK v5 - Beta Release - Custom Participant List for Flutter" --- Build a custom participant list UI that displays real-time participant information with full control over layout and interactions. This guide demonstrates how to hide the default participant list and create your own using participant events and actions. diff --git a/calls/flutter/events.mdx b/calls/flutter/events.mdx index 434f43735..fad3a3b72 100644 --- a/calls/flutter/events.mdx +++ b/calls/flutter/events.mdx @@ -1,6 +1,8 @@ --- title: "Events" sidebarTitle: "Events" +sdk_version: "5.x (Beta)" +description: "CometChat Calling SDK v5 - Beta Release - Events for Flutter" --- Handle call session events to build responsive UIs. The SDK provides five event listener interfaces to monitor session status, participant activities, media changes, button clicks, and layout changes. Unlike Android, Flutter listeners are not lifecycle-aware and must be manually removed in `dispose()` to prevent memory leaks. diff --git a/calls/flutter/idle-timeout.mdx b/calls/flutter/idle-timeout.mdx index b5eff71da..07d64ee64 100644 --- a/calls/flutter/idle-timeout.mdx +++ b/calls/flutter/idle-timeout.mdx @@ -1,6 +1,8 @@ --- title: "Idle Timeout" sidebarTitle: "Idle Timeout" +sdk_version: "5.x (Beta)" +description: "CometChat Calling SDK v5 - Beta Release - Idle Timeout for Flutter" --- Configure automatic session termination when a user is alone in a call. Idle timeout helps manage resources by ending sessions that have no active participants. diff --git a/calls/flutter/in-call-chat.mdx b/calls/flutter/in-call-chat.mdx index 6c7730a3a..db4d4bc8b 100644 --- a/calls/flutter/in-call-chat.mdx +++ b/calls/flutter/in-call-chat.mdx @@ -1,6 +1,8 @@ --- title: "In-Call Chat" sidebarTitle: "In-Call Chat" +sdk_version: "5.x (Beta)" +description: "CometChat Calling SDK v5 - Beta Release - In-Call Chat for Flutter" --- Add real-time messaging to your call experience using CometChat UI Kit. This allows participants to send text messages, share files, and communicate via chat while on a call. diff --git a/calls/flutter/join-session.mdx b/calls/flutter/join-session.mdx index af404f9cf..b8bc1866e 100644 --- a/calls/flutter/join-session.mdx +++ b/calls/flutter/join-session.mdx @@ -1,6 +1,8 @@ --- title: "Join Session" sidebarTitle: "Join Session" +sdk_version: "5.x (Beta)" +description: "CometChat Calling SDK v5 - Beta Release - Join Session for Flutter" --- Join a call session using one of two approaches: the quick start method with a session ID, or the advanced flow with manual token generation for more control. diff --git a/calls/flutter/layout-listener.mdx b/calls/flutter/layout-listener.mdx index 62754f6e7..37d8675a1 100644 --- a/calls/flutter/layout-listener.mdx +++ b/calls/flutter/layout-listener.mdx @@ -1,6 +1,8 @@ --- title: "Layout Listener" sidebarTitle: "Layout Listener" +sdk_version: "5.x (Beta)" +description: "CometChat Calling SDK v5 - Beta Release - Layout Listener for Flutter" --- Monitor layout changes with `LayoutListeners`. This listener provides callbacks for call layout changes, participant list visibility, and Picture-in-Picture (PiP) mode state changes. diff --git a/calls/flutter/layout-ui.mdx b/calls/flutter/layout-ui.mdx index a5a7c404f..ec0390b3c 100644 --- a/calls/flutter/layout-ui.mdx +++ b/calls/flutter/layout-ui.mdx @@ -1,6 +1,8 @@ --- title: "Layout & UI" sidebarTitle: "Layout & UI" +sdk_version: "5.x (Beta)" +description: "CometChat Calling SDK v5 - Beta Release - Layout & UI for Flutter" --- Control the call layout and UI elements during an active session. These methods allow you to change the call layout, enable Picture-in-Picture mode, and update UI badges. diff --git a/calls/flutter/media-events-listener.mdx b/calls/flutter/media-events-listener.mdx index b970bd8bb..6c333e921 100644 --- a/calls/flutter/media-events-listener.mdx +++ b/calls/flutter/media-events-listener.mdx @@ -1,6 +1,8 @@ --- title: "Media Events Listener" sidebarTitle: "Media Events Listener" +sdk_version: "5.x (Beta)" +description: "CometChat Calling SDK v5 - Beta Release - Media Events Listener for Flutter" --- Monitor local media state changes with `MediaEventListeners`. This listener provides callbacks for your own audio/video state changes, recording events, screen sharing, audio mode changes, and camera facing changes. diff --git a/calls/flutter/migration-guide-v5.mdx b/calls/flutter/migration-guide-v5.mdx new file mode 100644 index 000000000..4a080c86d --- /dev/null +++ b/calls/flutter/migration-guide-v5.mdx @@ -0,0 +1,507 @@ +--- +title: "Migration Guide" +sidebarTitle: "v4 to v5 Migration" +sdk_version: "5.x (Beta)" +description: "CometChat Calling SDK v5 - Beta Release - Migration Guide for Flutter" +--- + +This guide covers migrating from Calls SDK v4 to v5 for Flutter. + +## Drop-in Compatibility + +Calls SDK v5 is a **drop-in replacement** for v4. All v4 APIs are preserved as deprecated methods that internally delegate to the new v5 implementations. You can update the package version and your existing code will compile and run without changes. + +```yaml +dependencies: + cometchat_calls_sdk: + hosted: https://dart.cloudsmith.io/cometchat/cometchat/ + version: ^5.0.0 +``` + + +If you're using CometChat UI Kits, simply updating the Calls SDK version is sufficient. The UI Kit will continue to work with v5 through the deprecated compatibility layer. + + +## Why Migrate to v5 APIs? + +While v4 APIs will continue to work, migrating to v5 APIs gives you: + +- **Granular event listeners** — 5 focused listener classes (`SessionStatusListener`, `ParticipantEventListener`, `MediaEventsListener`, `ButtonClickListener`, `LayoutListener`) instead of one monolithic `CometChatCallsEventsListener` +- **`CallSession` singleton** for cleaner session control — all actions on a single instance instead of scattered static methods +- **Dedicated `login()` method** — the Calls SDK now handles its own authentication instead of depending on the Chat SDK's auth token or REST APIs +- **Strongly-typed enums** — `SessionType`, `LayoutType`, `AudioMode`, `CameraFacing` instead of raw strings + +--- + +## Initialization + +No changes required. The `init()` API is the same in v5. + +```dart +CallAppSettings callAppSettings = (CallAppSettingBuilder() + ..appId = "APP_ID" + ..region = "REGION" +).build(); + +CometChatCalls.init( + callAppSettings, + onSuccess: (String message) { + // Initialized + }, + onError: (CometChatCallsException e) { + // Handle error + }, +); +``` + +--- + +## Authentication + +In v4, the Calls SDK had no dedicated authentication step. It relied on the Chat SDK's auth token (`CometChat.getUserAuthToken()`) or a REST API to obtain an auth token, which you then passed manually to `generateToken()`. + +v5 introduces its own `login()` method. After calling `login()`, the SDK caches the auth token internally, so you no longer need to pass it around to other API calls. + + + +```dart +// No dedicated Calls SDK login — relied on Chat SDK for auth token +String authToken = CometChat.getUserAuthToken(); + +// Had to pass authToken manually +CometChatCalls.generateToken(sessionId, authToken, + onSuccess: (GenerateToken token) { + // Use token.token to start session + }, + onError: (CometChatCallsException e) {}, +); +``` + + +```dart +// Login to the Calls SDK once (after your Chat SDK login) +CometChatCalls.loginWithAuthToken( + authToken: authToken, + onSuccess: (User user) { + // Calls SDK is now authenticated — auth token is cached internally + }, + onError: (CometChatCallsException e) {}, +); + +// generateToken no longer needs the authToken parameter +CometChatCalls.generateToken( + sessionId: sessionId, + onSuccess: (CallToken token) { + // Use token + }, + onError: (CometChatCallsException e) {}, +); +``` + + + + +Call `CometChatCalls.loginWithAuthToken()` once after your user authenticates (e.g., right after `CometChat.login()` succeeds). The SDK stores the auth token internally, so subsequent calls like `generateToken()` and `joinSession()` use it automatically without you having to pass it. + + +--- + +## Session Settings + +`CallSettingsBuilder` is replaced by `SessionSettingsBuilder`. The builder methods have been renamed for clarity and use strongly-typed enums. + + + +```dart +CallSettings callSettings = (CallSettingsBuilder() + ..isAudioOnly = true + ..enableDefaultLayout = true + ..showEndCallButton = true + ..showMuteAudioButton = true + ..showPauseVideoButton = true + ..showSwitchCameraButton = true + ..showRecordingButton = true + ..startWithAudioMuted = false + ..startWithVideoMuted = false + ..defaultAudioMode = "SPEAKER" + ..mode = "DEFAULT" + ..startRecordingOnCallStart = false + ..listener = myCallsEventsListener) + .build(); +``` + + +```dart +SessionSettings sessionSettings = (SessionSettingsBuilder() + ..setType(SessionType.audio) + ..startAudioMuted(false) + ..startVideoPaused(false) + ..setLayout(LayoutType.tile) + ..setAudioMode(AudioMode.speaker) + ..hideLeaveSessionButton(false) + ..hideToggleAudioButton(false) + ..hideToggleVideoButton(false) + ..hideSwitchCameraButton(false) + ..hideRecordingButton(false) + ..hideControlPanel(false) + ..hideHeaderPanel(false) + ..enableAutoStartRecording(false)) + .build(); +``` + + + +### Builder Method Mapping + +| v4 CallSettingsBuilder | v5 SessionSettingsBuilder | Notes | +|-----------|-----------|-------| +| `isAudioOnly = true` | `setType(SessionType.audio)` | Use `SessionType.video` for video calls | +| `enableDefaultLayout = bool` | `hideControlPanel(!bool)` + `hideHeaderPanel(!bool)` | Inverted logic | +| `showEndCallButton = bool` | `hideLeaveSessionButton(!bool)` | Inverted logic | +| `showMuteAudioButton = bool` | `hideToggleAudioButton(!bool)` | Inverted logic | +| `showPauseVideoButton = bool` | `hideToggleVideoButton(!bool)` | Inverted logic | +| `showSwitchCameraButton = bool` | `hideSwitchCameraButton(!bool)` | Inverted logic | +| `showRecordingButton = bool` | `hideRecordingButton(!bool)` | Inverted logic | +| `showScreenSharingButton = bool` | `hideScreenSharingButton(!bool)` | Inverted logic | +| `showRaiseHandButton = bool` | `hideRaiseHandButton(!bool)` | Inverted logic | +| `showShareInviteButton = bool` | `hideShareInviteButton(!bool)` | Inverted logic | +| `showParticipantListButton = bool` | `hideParticipantListButton(!bool)` | Inverted logic | +| `showLayoutToggleButton = bool` | `hideChangeLayoutButton(!bool)` | Inverted logic | +| `startWithAudioMuted = bool` | `startAudioMuted(bool)` | Same logic | +| `startWithVideoMuted = bool` | `startVideoPaused(bool)` | Same logic | +| `defaultAudioMode = "SPEAKER"` | `setAudioMode(AudioMode.speaker)` | Enum instead of string | +| `mode = "DEFAULT"` | `setLayout(LayoutType.tile)` | Enum instead of string | +| `defaultCameraFacing = "FRONT"` | `setInitialCameraFacing(CameraFacing.front)` | Enum instead of string | +| `startRecordingOnCallStart = bool` | `enableAutoStartRecording(bool)` | Same logic | +| `lowBandwidthMode = bool` | `enableLowBandwidthMode(bool)` | Same logic | +| `idleTimeoutPeriod = int` | `setIdleTimeoutPeriod(int)` | Same logic | +| `listener = listener` | Use `CallSession` listeners | See [Events](#event-listeners) section | + +--- + +## Joining a Session + +`startSession()` is replaced by `joinSession()`, which returns a `Widget?` that you place in your Flutter widget tree. + + + +```dart +// Step 1: Generate token with auth token +CometChatCalls.generateToken(sessionId, authToken, + onSuccess: (GenerateToken token) { + // Step 2: Start session with token string + CometChatCalls.startSession(token.token ?? "", callSettings, + onSuccess: (Widget? callWidget) { + // Place callWidget in your widget tree + }, + onError: (CometChatCallsException e) {}, + ); + }, + onError: (CometChatCallsException e) {}, +); +``` + + +```dart +// Option A: Two-step with token +CometChatCalls.generateToken( + sessionId: sessionId, + onSuccess: (CallToken token) { + CometChatCalls.joinSession( + callToken: token, + sessionSettings: sessionSettings, + onSuccess: (Widget? callWidget) { + // Place callWidget in your widget tree + }, + onError: (CometChatCallsException e) {}, + ); + }, + onError: (CometChatCallsException e) {}, +); + +// Option B: One-step with session ID (recommended) +CometChatCalls.joinSession( + sessionId: sessionId, + sessionSettings: sessionSettings, + onSuccess: (Widget? callWidget) { + // Token generation + join handled internally + }, + onError: (CometChatCallsException e) {}, +); +``` + + + +Key differences: +- v5 `generateToken()` no longer requires the `authToken` parameter (uses cached token from `login()`) +- v5 `joinSession()` accepts a `CallToken` object or a `sessionId` string directly +- v5 offers a convenience overload that takes `sessionId` directly and handles token generation internally + +--- + +## Session Control (Actions) + +In v4, session actions were static methods on `CometChatCalls`. In v5, they're instance methods on `CallSession`. + + + +```dart +CometChatCalls.endSession( + onSuccess: (String msg) {}, + onError: (CometChatCallsException e) {}, +); +CometChatCalls.switchCamera(); +CometChatCalls.muteAudio(true); +CometChatCalls.pauseVideo(true); +CometChatCalls.setAudioMode("SPEAKER"); +CometChatCalls.enterPIPMode(); +CometChatCalls.exitPIPMode(); +CometChatCalls.startRecording(); +CometChatCalls.stopRecording(); +``` + + +```dart +CallSession? callSession = CallSession.getInstance(); + +await callSession?.leaveSession(); +await callSession?.switchCamera(); +await callSession?.muteAudio(); // or callSession?.unMuteAudio() +await callSession?.pauseVideo(); // or callSession?.resumeVideo() +await callSession?.setAudioModeType(AudioMode.speaker); +await callSession?.enablePictureInPictureLayout(); +await callSession?.disablePictureInPictureLayout(); +await callSession?.startRecording(); +await callSession?.stopRecording(); +``` + + + +### Action Method Mapping + +| v4 Static Method | v5 CallSession Method | +|---|---| +| `CometChatCalls.endSession(...)` | `callSession.leaveSession()` | +| `CometChatCalls.switchCamera()` | `callSession.switchCamera()` | +| `CometChatCalls.muteAudio(true)` | `callSession.muteAudio()` | +| `CometChatCalls.muteAudio(false)` | `callSession.unMuteAudio()` | +| `CometChatCalls.pauseVideo(true)` | `callSession.pauseVideo()` | +| `CometChatCalls.pauseVideo(false)` | `callSession.resumeVideo()` | +| `CometChatCalls.setAudioMode(mode)` | `callSession.setAudioModeType(AudioMode)` | +| `CometChatCalls.enterPIPMode()` | `callSession.enablePictureInPictureLayout()` | +| `CometChatCalls.exitPIPMode()` | `callSession.disablePictureInPictureLayout()` | +| `CometChatCalls.startRecording()` | `callSession.startRecording()` | +| `CometChatCalls.stopRecording()` | `callSession.stopRecording()` | +| `CometChatCalls.switchToVideoCall()` | *Removed* | + +--- + +## Event Listeners + +This is the biggest improvement in v5. The single `CometChatCallsEventsListener` mixin is replaced by 5 focused listener classes. + +### v4: Single Monolithic Listener + +```dart +class MyCallController with CometChatCallsEventsListener { + + void setupCallEvents() { + // Set via CallSettingsBuilder + callSettingsBuilder..listener = this; + } + + @override + void onCallEnded() {} + + @override + void onCallEndButtonPressed() {} + + @override + void onSessionTimeout() {} + + @override + void onUserJoined(RTCUser user) {} + + @override + void onUserLeft(RTCUser user) {} + + @override + void onUserListChanged(List users) {} + + @override + void onAudioModeChanged(List devices) {} + + @override + void onCallSwitchedToVideo(CallSwitchRequestInfo info) {} + + @override + void onUserMuted(RTCMutedUser muteObj) {} + + @override + void onRecordingToggled(RTCRecordingInfo info) {} + + @override + void onError(CometChatCallsException e) {} +} +``` + +### v5: Focused Listener Classes + +```dart +CallSession? callSession = CallSession.getInstance(); + +// Session lifecycle events +final sessionStatusListener = SessionStatusListener( + onSessionJoined: () {}, + onSessionLeft: () {}, + onSessionTimedOut: () {}, + onConnectionLost: () {}, + onConnectionRestored: () {}, + onConnectionClosed: () {}, +); +callSession?.addSessionStatusListener(sessionStatusListener); + +// Participant events (replaces onUserJoined, onUserLeft, onUserListChanged, onUserMuted) +final participantEventListener = ParticipantEventListener( + onParticipantJoined: (Participant participant) {}, + onParticipantLeft: (Participant participant) {}, + onParticipantListChanged: (List participants) {}, + onParticipantAudioMuted: (Participant participant) {}, + onParticipantAudioUnmuted: (Participant participant) {}, + onParticipantVideoPaused: (Participant participant) {}, + onParticipantVideoResumed: (Participant participant) {}, + onParticipantHandRaised: (Participant participant) {}, + onParticipantHandLowered: (Participant participant) {}, + onParticipantStartedRecording: (Participant participant) {}, + onParticipantStoppedRecording: (Participant participant) {}, + onDominantSpeakerChanged: (Participant participant) {}, +); +callSession?.addParticipantEventListener(participantEventListener); + +// Media state events (replaces onAudioModeChanged, onRecordingToggled) +final mediaEventsListener = MediaEventsListener( + onAudioMuted: () {}, + onAudioUnMuted: () {}, + onVideoPaused: () {}, + onVideoResumed: () {}, + onRecordingStarted: () {}, + onRecordingStopped: () {}, + onAudioModeChanged: (AudioMode audioMode) {}, + onCameraFacingChanged: (CameraFacing facing) {}, +); +callSession?.addMediaEventsListener(mediaEventsListener); + +// Button click events (replaces onCallEndButtonPressed) +final buttonClickListener = ButtonClickListener( + onLeaveSessionButtonClicked: () {}, + onToggleAudioButtonClicked: () {}, + onToggleVideoButtonClicked: () {}, + onSwitchCameraButtonClicked: () {}, + onRaiseHandButtonClicked: () {}, + onRecordingToggleButtonClicked: () {}, +); +callSession?.addButtonClickListener(buttonClickListener); + +// Layout events +final layoutListener = LayoutListener( + onCallLayoutChanged: (LayoutType layoutType) {}, + onPictureInPictureLayoutEnabled: () {}, + onPictureInPictureLayoutDisabled: () {}, +); +callSession?.addLayoutListener(layoutListener); +``` + + +Flutter listeners are **not** lifecycle-aware. You must manually remove all listeners in your widget's `dispose()` method to prevent memory leaks. + + +```dart +@override +void dispose() { + CallSession.getInstance()?.removeSessionStatusListener(sessionStatusListener); + CallSession.getInstance()?.removeParticipantEventListener(participantEventListener); + CallSession.getInstance()?.removeMediaEventsListener(mediaEventsListener); + CallSession.getInstance()?.removeButtonClickListener(buttonClickListener); + CallSession.getInstance()?.removeLayoutListener(layoutListener); + super.dispose(); +} +``` + +### Event Mapping + +| v4 Event | v5 Listener | v5 Event | +|----------|-------------|----------| +| `onCallEnded()` | `SessionStatusListener` | `onSessionLeft()` | +| `onCallEndButtonPressed()` | `ButtonClickListener` | `onLeaveSessionButtonClicked()` | +| `onSessionTimeout()` | `SessionStatusListener` | `onSessionTimedOut()` | +| `onUserJoined(RTCUser)` | `ParticipantEventListener` | `onParticipantJoined(Participant)` | +| `onUserLeft(RTCUser)` | `ParticipantEventListener` | `onParticipantLeft(Participant)` | +| `onUserListChanged(List)` | `ParticipantEventListener` | `onParticipantListChanged(List)` | +| `onAudioModeChanged(List)` | `MediaEventsListener` | `onAudioModeChanged(AudioMode)` | +| `onCallSwitchedToVideo(CallSwitchRequestInfo)` | *Removed* | — | +| `onUserMuted(RTCMutedUser)` | `ParticipantEventListener` | `onParticipantAudioMuted(Participant)` | +| `onRecordingToggled(RTCRecordingInfo)` | `MediaEventsListener` | `onRecordingStarted()` / `onRecordingStopped()` | +| `onError(CometChatCallsException)` | — | Errors returned via `onError` callbacks | + +### New Events in v5 + +These events are only available with the v5 listener APIs: + +| Listener | Event | Description | +|----------|-------|-------------| +| `SessionStatusListener` | `onConnectionLost()` | Network interrupted | +| `SessionStatusListener` | `onConnectionRestored()` | Network restored | +| `SessionStatusListener` | `onConnectionClosed()` | Connection permanently closed | +| `ParticipantEventListener` | `onParticipantVideoResumed()` | Participant turned camera on | +| `ParticipantEventListener` | `onParticipantVideoPaused()` | Participant turned camera off | +| `ParticipantEventListener` | `onParticipantHandRaised()` | Participant raised hand | +| `ParticipantEventListener` | `onParticipantHandLowered()` | Participant lowered hand | +| `ParticipantEventListener` | `onParticipantStartedScreenShare()` | Participant started screen share | +| `ParticipantEventListener` | `onParticipantStoppedScreenShare()` | Participant stopped screen share | +| `ParticipantEventListener` | `onDominantSpeakerChanged()` | Active speaker changed | +| `MediaEventsListener` | `onCameraFacingChanged()` | Camera switched front/back | +| `ButtonClickListener` | Various button events | Individual button click tracking | +| `LayoutListener` | `onCallLayoutChanged()` | Layout type changed | +| `LayoutListener` | `onPictureInPictureLayoutEnabled/Disabled()` | PiP state changed | + +--- + +## Call Logs + +The `CallLogRequest` API is unchanged. The only difference is that auth is now handled by `CometChatCalls.login()` instead of passing the auth token manually. + +```dart +CallLogRequest callLogRequest = CallLogRequest.CallLogRequestBuilder() + .setLimit(30) + .build(); + +callLogRequest.fetchNext( + onSuccess: (List callLogs) { + for (CallLog callLog in callLogs) { + debugPrint("Session: ${callLog.sessionID}"); + } + }, + onError: (CometChatCallsException e) { + debugPrint("Error: ${e.message}"); + }, +); +``` + +--- + +## Deprecated Classes Summary + +These classes still exist in v5 for backward compatibility but are deprecated: + +| Deprecated Class | Replacement | +|-----------------|-------------| +| `CallSettings` | `SessionSettings` | +| `CallSettingsBuilder` | `SessionSettingsBuilder` | +| `CometChatCallsEventsListener` | 5 focused listeners on `CallSession` | +| `GenerateToken` | `CallToken` | +| `RTCUser` | `Participant` | +| `RTCMutedUser` | `ParticipantEventListener.onParticipantAudioMuted(Participant)` | +| `RTCRecordingInfo` | `MediaEventsListener.onRecordingStarted()` / `onRecordingStopped()` | +| `CallSwitchRequestInfo` | *Removed (no replacement)* | +| `CometChatCalls.startSession()` | `CometChatCalls.joinSession()` | +| `CometChatCalls.endSession()` | `CallSession.getInstance()?.leaveSession()` | diff --git a/calls/flutter/overview.mdx b/calls/flutter/overview.mdx index 48de70b08..742023ee5 100644 --- a/calls/flutter/overview.mdx +++ b/calls/flutter/overview.mdx @@ -1,6 +1,8 @@ --- title: "Calls SDK" sidebarTitle: "Overview" +sdk_version: "5.x (Beta)" +description: "CometChat Calling SDK v5 - Beta Release - Calls SDK for Flutter" --- diff --git a/calls/flutter/participant-actions.mdx b/calls/flutter/participant-actions.mdx index 0392c9f6b..903e7d40f 100644 --- a/calls/flutter/participant-actions.mdx +++ b/calls/flutter/participant-actions.mdx @@ -1,6 +1,8 @@ --- title: "Participant Actions" sidebarTitle: "Participant Actions" +sdk_version: "5.x (Beta)" +description: "CometChat Calling SDK v5 - Beta Release - Participant Actions for Flutter" --- Manage other participants during an active call session. These methods allow you to mute participants, pause their video, and pin/unpin them in the call layout. diff --git a/calls/flutter/participant-event-listener.mdx b/calls/flutter/participant-event-listener.mdx index b6eb6f70a..7e240e821 100644 --- a/calls/flutter/participant-event-listener.mdx +++ b/calls/flutter/participant-event-listener.mdx @@ -1,6 +1,8 @@ --- title: "Participant Event Listener" sidebarTitle: "Participant Event Listener" +sdk_version: "5.x (Beta)" +description: "CometChat Calling SDK v5 - Beta Release - Participant Event Listener for Flutter" --- Monitor participant activities with `ParticipantEventListeners`. This listener provides callbacks for participant join/leave events, audio/video state changes, hand raise actions, screen sharing, recording, and more. diff --git a/calls/flutter/participant-management.mdx b/calls/flutter/participant-management.mdx index 971f0e7d1..6a42b8ad2 100644 --- a/calls/flutter/participant-management.mdx +++ b/calls/flutter/participant-management.mdx @@ -1,6 +1,8 @@ --- title: "Participant Management" sidebarTitle: "Participant Management" +sdk_version: "5.x (Beta)" +description: "CometChat Calling SDK v5 - Beta Release - Participant Management for Flutter" --- Manage participants during a call with actions like muting, pausing video, and pinning. These features help maintain order in group calls and highlight important speakers. diff --git a/calls/flutter/picture-in-picture.mdx b/calls/flutter/picture-in-picture.mdx index fb0914496..78db57bed 100644 --- a/calls/flutter/picture-in-picture.mdx +++ b/calls/flutter/picture-in-picture.mdx @@ -1,6 +1,8 @@ --- title: "Picture-in-Picture" sidebarTitle: "Picture-in-Picture" +sdk_version: "5.x (Beta)" +description: "CometChat Calling SDK v5 - Beta Release - Picture-in-Picture for Flutter" --- Enable Picture-in-Picture (PiP) mode to allow users to continue their call in a floating window while using other apps. PiP provides a seamless multitasking experience during calls. diff --git a/calls/flutter/raise-hand.mdx b/calls/flutter/raise-hand.mdx index 70b677977..af73fc1b5 100644 --- a/calls/flutter/raise-hand.mdx +++ b/calls/flutter/raise-hand.mdx @@ -1,6 +1,8 @@ --- title: "Raise Hand" sidebarTitle: "Raise Hand" +sdk_version: "5.x (Beta)" +description: "CometChat Calling SDK v5 - Beta Release - Raise Hand for Flutter" --- Allow participants to raise their hand to get attention during calls. This feature is useful for large meetings, webinars, or any scenario where participants need to signal they want to speak. diff --git a/calls/flutter/recording.mdx b/calls/flutter/recording.mdx index 62f13ab87..f3c6d3b67 100644 --- a/calls/flutter/recording.mdx +++ b/calls/flutter/recording.mdx @@ -1,6 +1,8 @@ --- title: "Recording" sidebarTitle: "Recording" +sdk_version: "5.x (Beta)" +description: "CometChat Calling SDK v5 - Beta Release - Recording for Flutter" --- Record call sessions for later playback. Recordings are stored server-side and can be accessed through call logs or the CometChat Dashboard. diff --git a/calls/flutter/ringing.mdx b/calls/flutter/ringing.mdx index 11bb0bd39..89b94e7f8 100644 --- a/calls/flutter/ringing.mdx +++ b/calls/flutter/ringing.mdx @@ -1,6 +1,8 @@ --- title: "Ringing" sidebarTitle: "Ringing" +sdk_version: "5.x (Beta)" +description: "CometChat Calling SDK v5 - Beta Release - Ringing for Flutter" --- Implement incoming and outgoing call notifications with accept/reject functionality. Ringing enables real-time call signaling between users, allowing them to initiate calls and respond to incoming call requests. diff --git a/calls/flutter/screen-sharing.mdx b/calls/flutter/screen-sharing.mdx index c0a939376..0cefe5e8a 100644 --- a/calls/flutter/screen-sharing.mdx +++ b/calls/flutter/screen-sharing.mdx @@ -1,6 +1,8 @@ --- title: "Screen Sharing" sidebarTitle: "Screen Sharing" +sdk_version: "5.x (Beta)" +description: "CometChat Calling SDK v5 - Beta Release - Screen Sharing for Flutter" --- View screen shares from other participants during a call. The Flutter SDK can receive and display screen shares initiated from web clients. diff --git a/calls/flutter/session-control.mdx b/calls/flutter/session-control.mdx index 45b8ad49f..4512f4f5b 100644 --- a/calls/flutter/session-control.mdx +++ b/calls/flutter/session-control.mdx @@ -1,6 +1,8 @@ --- title: "Session Control" sidebarTitle: "Session Control" +sdk_version: "5.x (Beta)" +description: "CometChat Calling SDK v5 - Beta Release - Session Control for Flutter" --- Control the call session lifecycle and participant interactions. These methods allow you to leave the session, raise/lower your hand, and check session status. diff --git a/calls/flutter/session-settings.mdx b/calls/flutter/session-settings.mdx index 161a28ddc..819d2254e 100644 --- a/calls/flutter/session-settings.mdx +++ b/calls/flutter/session-settings.mdx @@ -1,6 +1,8 @@ --- title: "SessionSettingsBuilder" sidebarTitle: "SessionSettingsBuilder" +sdk_version: "5.x (Beta)" +description: "CometChat Calling SDK v5 - Beta Release - SessionSettingsBuilder for Flutter" --- The `SessionSettingsBuilder` is a powerful configuration tool that allows you to customize every aspect of your call session before participants join. From controlling the initial audio/video state to customizing the UI layout and hiding specific controls, this builder gives you complete control over the call experience. diff --git a/calls/flutter/session-status-listener.mdx b/calls/flutter/session-status-listener.mdx index d483d4e8b..f8b77476b 100644 --- a/calls/flutter/session-status-listener.mdx +++ b/calls/flutter/session-status-listener.mdx @@ -1,6 +1,8 @@ --- title: "Session Status Listener" sidebarTitle: "Session Status Listener" +sdk_version: "5.x (Beta)" +description: "CometChat Calling SDK v5 - Beta Release - Session Status Listener for Flutter" --- Monitor the call session lifecycle with `SessionStatusListeners`. This listener provides callbacks for session join/leave events, connection status changes, and session timeouts. diff --git a/calls/flutter/setup.mdx b/calls/flutter/setup.mdx index 8ddbb7a34..9bf445f72 100644 --- a/calls/flutter/setup.mdx +++ b/calls/flutter/setup.mdx @@ -1,6 +1,8 @@ --- title: "Setup" sidebarTitle: "Setup" +sdk_version: "5.x (Beta)" +description: "CometChat Calling SDK v5 - Beta Release - Setup for Flutter" --- This guide walks you through installing the CometChat Calls SDK and initializing it in your Flutter application. diff --git a/calls/flutter/share-invite.mdx b/calls/flutter/share-invite.mdx index 4d9414eba..28337198a 100644 --- a/calls/flutter/share-invite.mdx +++ b/calls/flutter/share-invite.mdx @@ -1,6 +1,8 @@ --- title: "Share Invite" sidebarTitle: "Share Invite" +sdk_version: "5.x (Beta)" +description: "CometChat Calling SDK v5 - Beta Release - Share Invite for Flutter" --- Enable participants to invite others to join a call by sharing a meeting link. The share invite button opens the platform's native share sheet, allowing users to send the invite via any messaging app, email, or social media. diff --git a/calls/flutter/troubleshooting.mdx b/calls/flutter/troubleshooting.mdx index baf0ae219..ecc51c72e 100644 --- a/calls/flutter/troubleshooting.mdx +++ b/calls/flutter/troubleshooting.mdx @@ -1,6 +1,7 @@ --- title: "Troubleshooting" -description: "Common failure modes and fixes for the CometChat Flutter Calls SDK." +description: "CometChat Calling SDK v5 - Beta Release - Troubleshooting for Flutter" +sdk_version: "5.x (Beta)" --- ## Installation & Setup diff --git a/calls/flutter/video-controls.mdx b/calls/flutter/video-controls.mdx index 88f4cd666..c80ead142 100644 --- a/calls/flutter/video-controls.mdx +++ b/calls/flutter/video-controls.mdx @@ -1,6 +1,8 @@ --- title: "Video Controls" sidebarTitle: "Video Controls" +sdk_version: "5.x (Beta)" +description: "CometChat Calling SDK v5 - Beta Release - Video Controls for Flutter" --- Control video during an active call session. These methods allow you to pause/resume the local camera and switch between front and rear cameras. diff --git a/calls/flutter/voip-calling.mdx b/calls/flutter/voip-calling.mdx index 5f23f5b48..836853255 100644 --- a/calls/flutter/voip-calling.mdx +++ b/calls/flutter/voip-calling.mdx @@ -1,6 +1,8 @@ --- title: "VoIP Calling" sidebarTitle: "VoIP Calling" +sdk_version: "5.x (Beta)" +description: "CometChat Calling SDK v5 - Beta Release - VoIP Calling for Flutter" --- Implement native VoIP calling that works when your app is in the background or killed. This guide shows how to integrate platform-specific push notification services with CometChat to display system call UI and provide a native calling experience. diff --git a/calls/ios/actions.mdx b/calls/ios/actions.mdx index 2b20e2f0d..b0273601d 100644 --- a/calls/ios/actions.mdx +++ b/calls/ios/actions.mdx @@ -1,6 +1,8 @@ --- title: "Actions" sidebarTitle: "Actions" +sdk_version: "5.x (Beta)" +description: "CometChat Calling SDK v5 - Beta Release - Actions for iOS" --- Use call actions to create your own custom controls or trigger call functionality dynamically based on your use case. All actions are called on the `CallSession.shared` singleton instance during an active call session. diff --git a/calls/ios/audio-modes.mdx b/calls/ios/audio-modes.mdx index ab53af7ff..7b19230fc 100644 --- a/calls/ios/audio-modes.mdx +++ b/calls/ios/audio-modes.mdx @@ -1,6 +1,8 @@ --- title: "Audio Modes" sidebarTitle: "Audio Modes" +sdk_version: "5.x (Beta)" +description: "CometChat Calling SDK v5 - Beta Release - Audio Modes for iOS" --- Control audio output routing during calls. Switch between speaker, earpiece, Bluetooth, and wired headphones based on user preference or device availability. diff --git a/calls/ios/authentication.mdx b/calls/ios/authentication.mdx index 058c80327..91089b46b 100644 --- a/calls/ios/authentication.mdx +++ b/calls/ios/authentication.mdx @@ -1,6 +1,8 @@ --- title: "Authentication" sidebarTitle: "Authentication" +sdk_version: "5.x (Beta)" +description: "CometChat Calling SDK v5 - Beta Release - Authentication for iOS" --- Before users can make or receive calls, they must be authenticated with the CometChat Calls SDK. This guide covers the login and logout methods. diff --git a/calls/ios/background-handling.mdx b/calls/ios/background-handling.mdx index 039d209e7..88b4a0994 100644 --- a/calls/ios/background-handling.mdx +++ b/calls/ios/background-handling.mdx @@ -1,6 +1,8 @@ --- title: "Background Handling" sidebarTitle: "Background Handling" +sdk_version: "5.x (Beta)" +description: "CometChat Calling SDK v5 - Beta Release - Background Handling for iOS" --- Keep calls alive when users navigate away from your app. Background handling ensures the call continues running when users press the home button, switch to another app, or lock their device. diff --git a/calls/ios/call-layouts.mdx b/calls/ios/call-layouts.mdx index d12409380..8a85de4e0 100644 --- a/calls/ios/call-layouts.mdx +++ b/calls/ios/call-layouts.mdx @@ -1,6 +1,8 @@ --- title: "Call Layouts" sidebarTitle: "Call Layouts" +sdk_version: "5.x (Beta)" +description: "CometChat Calling SDK v5 - Beta Release - Call Layouts for iOS" --- Choose how participants are displayed during a call. The SDK provides multiple layout options to suit different use cases like team meetings, presentations, or one-on-one calls. diff --git a/calls/ios/call-logs.mdx b/calls/ios/call-logs.mdx index ca1165020..7d21250cb 100644 --- a/calls/ios/call-logs.mdx +++ b/calls/ios/call-logs.mdx @@ -1,6 +1,8 @@ --- title: "Call Logs" sidebarTitle: "Call Logs" +sdk_version: "5.x (Beta)" +description: "CometChat Calling SDK v5 - Beta Release - Call Logs for iOS" --- Retrieve call history for your application. Call logs provide detailed information about past calls including duration, participants, recordings, and status. diff --git a/calls/ios/custom-control-panel.mdx b/calls/ios/custom-control-panel.mdx index 856c9d838..dde56a39f 100644 --- a/calls/ios/custom-control-panel.mdx +++ b/calls/ios/custom-control-panel.mdx @@ -1,6 +1,8 @@ --- title: "Custom Control Panel" sidebarTitle: "Custom Control Panel" +sdk_version: "5.x (Beta)" +description: "CometChat Calling SDK v5 - Beta Release - Custom Control Panel for iOS" --- Build a fully customized control panel for your call interface by hiding the default controls and implementing your own UI with call actions. This guide walks you through creating a custom control panel with essential call controls. diff --git a/calls/ios/custom-participant-list.mdx b/calls/ios/custom-participant-list.mdx index bad35682b..cdddee85f 100644 --- a/calls/ios/custom-participant-list.mdx +++ b/calls/ios/custom-participant-list.mdx @@ -1,6 +1,8 @@ --- title: "Custom Participant List" sidebarTitle: "Custom Participant List" +sdk_version: "5.x (Beta)" +description: "CometChat Calling SDK v5 - Beta Release - Custom Participant List for iOS" --- Build a custom participant list UI that displays real-time participant information with full control over layout and interactions. This guide demonstrates how to hide the default participant list and create your own using participant events and actions. diff --git a/calls/ios/events.mdx b/calls/ios/events.mdx index eadd2abbf..c51d41ed6 100644 --- a/calls/ios/events.mdx +++ b/calls/ios/events.mdx @@ -1,6 +1,8 @@ --- title: "Events" sidebarTitle: "Events" +sdk_version: "5.x (Beta)" +description: "CometChat Calling SDK v5 - Beta Release - Events for iOS" --- Handle call session events to build responsive UIs. The SDK provides five event listener protocols to monitor session status, participant activities, media changes, button clicks, and layout changes. diff --git a/calls/ios/idle-timeout.mdx b/calls/ios/idle-timeout.mdx index 8a4fdee4d..f2cca78c6 100644 --- a/calls/ios/idle-timeout.mdx +++ b/calls/ios/idle-timeout.mdx @@ -1,6 +1,8 @@ --- title: "Idle Timeout" sidebarTitle: "Idle Timeout" +sdk_version: "5.x (Beta)" +description: "CometChat Calling SDK v5 - Beta Release - Idle Timeout for iOS" --- Configure automatic session termination when a user is alone in a call. Idle timeout helps manage resources by ending sessions that have no active participants. diff --git a/calls/ios/in-call-chat.mdx b/calls/ios/in-call-chat.mdx index d484552f2..de337faa6 100644 --- a/calls/ios/in-call-chat.mdx +++ b/calls/ios/in-call-chat.mdx @@ -1,6 +1,8 @@ --- title: "In-Call Chat" sidebarTitle: "In-Call Chat" +sdk_version: "5.x (Beta)" +description: "CometChat Calling SDK v5 - Beta Release - In-Call Chat for iOS" --- Add real-time messaging to your call experience using CometChat UI Kit. This allows participants to send text messages, share files, and communicate via chat while on a call. diff --git a/calls/ios/join-session.mdx b/calls/ios/join-session.mdx index c3c01e73c..2f2d13b85 100644 --- a/calls/ios/join-session.mdx +++ b/calls/ios/join-session.mdx @@ -1,6 +1,8 @@ --- title: "Join Session" sidebarTitle: "Join Session" +sdk_version: "5.x (Beta)" +description: "CometChat Calling SDK v5 - Beta Release - Join Session for iOS" --- Join a call session using one of two approaches: the quick start method with a session ID, or the advanced flow with manual token generation for more control. diff --git a/calls/ios/migration-guide-v5.mdx b/calls/ios/migration-guide-v5.mdx index 63099f726..cd2428804 100644 --- a/calls/ios/migration-guide-v5.mdx +++ b/calls/ios/migration-guide-v5.mdx @@ -1,6 +1,8 @@ --- title: "Migration Guide" sidebarTitle: "v4 to v5 Migration" +sdk_version: "5.x (Beta)" +description: "CometChat Calling SDK v5 - Beta Release - Migration Guide for iOS" --- This guide covers migrating from Calls SDK v4 to v5 for iOS. diff --git a/calls/ios/overview.mdx b/calls/ios/overview.mdx index 4b685ea0d..b602dea9c 100644 --- a/calls/ios/overview.mdx +++ b/calls/ios/overview.mdx @@ -1,6 +1,8 @@ --- title: "Calls SDK" sidebarTitle: "Overview" +sdk_version: "5.x (Beta)" +description: "CometChat Calling SDK v5 - Beta Release - Calls SDK for iOS" --- diff --git a/calls/ios/participant-management.mdx b/calls/ios/participant-management.mdx index 74c5e8bd2..a35709f4d 100644 --- a/calls/ios/participant-management.mdx +++ b/calls/ios/participant-management.mdx @@ -1,6 +1,8 @@ --- title: "Participant Management" sidebarTitle: "Participant Management" +sdk_version: "5.x (Beta)" +description: "CometChat Calling SDK v5 - Beta Release - Participant Management for iOS" --- Manage participants during a call with actions like muting, pausing video, and pinning. These features help maintain order in group calls and highlight important speakers. diff --git a/calls/ios/picture-in-picture.mdx b/calls/ios/picture-in-picture.mdx index abc683869..434120faa 100644 --- a/calls/ios/picture-in-picture.mdx +++ b/calls/ios/picture-in-picture.mdx @@ -1,6 +1,8 @@ --- title: "Picture-in-Picture" sidebarTitle: "Picture-in-Picture" +sdk_version: "5.x (Beta)" +description: "CometChat Calling SDK v5 - Beta Release - Picture-in-Picture for iOS" --- Enable Picture-in-Picture (PiP) mode to allow users to continue their call in a floating window while using other apps. PiP provides a seamless multitasking experience during calls. diff --git a/calls/ios/raise-hand.mdx b/calls/ios/raise-hand.mdx index b7c746880..3d12c79ca 100644 --- a/calls/ios/raise-hand.mdx +++ b/calls/ios/raise-hand.mdx @@ -1,6 +1,8 @@ --- title: "Raise Hand" sidebarTitle: "Raise Hand" +sdk_version: "5.x (Beta)" +description: "CometChat Calling SDK v5 - Beta Release - Raise Hand for iOS" --- Allow participants to raise their hand to get attention during calls. This feature is useful for large meetings, webinars, or any scenario where participants need to signal they want to speak. diff --git a/calls/ios/recording.mdx b/calls/ios/recording.mdx index 70909fe13..279e9ab19 100644 --- a/calls/ios/recording.mdx +++ b/calls/ios/recording.mdx @@ -1,6 +1,8 @@ --- title: "Recording" sidebarTitle: "Recording" +sdk_version: "5.x (Beta)" +description: "CometChat Calling SDK v5 - Beta Release - Recording for iOS" --- Record call sessions for later playback. Recordings are stored server-side and can be accessed through call logs or the CometChat Dashboard. diff --git a/calls/ios/ringing.mdx b/calls/ios/ringing.mdx index beeba43c5..6ec784860 100644 --- a/calls/ios/ringing.mdx +++ b/calls/ios/ringing.mdx @@ -1,6 +1,8 @@ --- title: "Ringing" sidebarTitle: "Ringing" +sdk_version: "5.x (Beta)" +description: "CometChat Calling SDK v5 - Beta Release - Ringing for iOS" --- Implement incoming and outgoing call notifications with accept/reject functionality. Ringing enables real-time call signaling between users, allowing them to initiate calls and respond to incoming call requests. diff --git a/calls/ios/screen-sharing.mdx b/calls/ios/screen-sharing.mdx index 9b777c0de..3701a4b24 100644 --- a/calls/ios/screen-sharing.mdx +++ b/calls/ios/screen-sharing.mdx @@ -1,6 +1,8 @@ --- title: "Screen Sharing" sidebarTitle: "Screen Sharing" +sdk_version: "5.x (Beta)" +description: "CometChat Calling SDK v5 - Beta Release - Screen Sharing for iOS" --- View screen shares from other participants during a call. The iOS SDK can receive and display screen shares initiated from web clients. diff --git a/calls/ios/session-settings.mdx b/calls/ios/session-settings.mdx index a94d84541..23e4ed3ad 100644 --- a/calls/ios/session-settings.mdx +++ b/calls/ios/session-settings.mdx @@ -1,6 +1,8 @@ --- title: "SessionSettingsBuilder" sidebarTitle: "SessionSettingsBuilder" +sdk_version: "5.x (Beta)" +description: "CometChat Calling SDK v5 - Beta Release - SessionSettingsBuilder for iOS" --- The `SessionSettingsBuilder` is a powerful configuration tool that allows you to customize every aspect of your call session before participants join. From controlling the initial audio/video state to customizing the UI layout and hiding specific controls, this builder gives you complete control over the call experience. diff --git a/calls/ios/setup.mdx b/calls/ios/setup.mdx index 342229b64..58634a11d 100644 --- a/calls/ios/setup.mdx +++ b/calls/ios/setup.mdx @@ -1,6 +1,8 @@ --- title: "Setup" sidebarTitle: "Setup" +sdk_version: "5.x (Beta)" +description: "CometChat Calling SDK v5 - Beta Release - Setup for iOS" --- This guide walks you through installing the CometChat Calls SDK and initializing it in your iOS application. diff --git a/calls/ios/share-invite.mdx b/calls/ios/share-invite.mdx index b51228041..b87852b8d 100644 --- a/calls/ios/share-invite.mdx +++ b/calls/ios/share-invite.mdx @@ -1,6 +1,8 @@ --- title: "Share Invite" sidebarTitle: "Share Invite" +sdk_version: "5.x (Beta)" +description: "CometChat Calling SDK v5 - Beta Release - Share Invite for iOS" --- Enable participants to invite others to join a call by sharing a meeting link. The share invite button opens the system share sheet, allowing users to send the invite via any messaging app, email, or social media. diff --git a/calls/ios/troubleshooting.mdx b/calls/ios/troubleshooting.mdx index 83cfb7d73..47891fff7 100644 --- a/calls/ios/troubleshooting.mdx +++ b/calls/ios/troubleshooting.mdx @@ -1,6 +1,7 @@ --- title: "Troubleshooting" -description: "Common failure modes and fixes for the CometChat iOS Calls SDK." +description: "CometChat Calling SDK v5 - Beta Release - Troubleshooting for iOS" +sdk_version: "5.x (Beta)" --- ## Installation & Setup diff --git a/calls/ios/voip-calling.mdx b/calls/ios/voip-calling.mdx index 24d8eff4c..be68c2986 100644 --- a/calls/ios/voip-calling.mdx +++ b/calls/ios/voip-calling.mdx @@ -1,6 +1,8 @@ --- title: "VoIP Calling" sidebarTitle: "VoIP Calling" +sdk_version: "5.x (Beta)" +description: "CometChat Calling SDK v5 - Beta Release - VoIP Calling for iOS" --- Implement native VoIP calling that works when your app is in the background or killed. This guide shows how to integrate Apple's CallKit framework with CometChat to display system call UI, handle calls from the lock screen, and provide a native calling experience. diff --git a/calls/javascript/actions.mdx b/calls/javascript/actions.mdx index 116f9523b..d6653bed1 100644 --- a/calls/javascript/actions.mdx +++ b/calls/javascript/actions.mdx @@ -1,6 +1,8 @@ --- title: "Actions" sidebarTitle: "Actions" +sdk_version: "5.x (Beta)" +description: "CometChat Calling SDK v5 - Beta Release - Actions for JavaScript" --- Use call actions to create your own custom controls or trigger call functionality dynamically based on your use case. All actions are called on the `CometChatCalls` class during an active call session. diff --git a/calls/javascript/angular-integration.mdx b/calls/javascript/angular-integration.mdx index 28b834054..b1b7dce66 100644 --- a/calls/javascript/angular-integration.mdx +++ b/calls/javascript/angular-integration.mdx @@ -1,6 +1,8 @@ --- title: "Angular Integration" sidebarTitle: "Angular" +sdk_version: "5.x (Beta)" +description: "CometChat Calling SDK v5 - Beta Release - Angular Integration for JavaScript" --- This guide walks you through integrating the CometChat Calls SDK into an Angular application. By the end, you'll have a working video call implementation with proper service architecture and lifecycle management. diff --git a/calls/javascript/authentication.mdx b/calls/javascript/authentication.mdx index 71dc99b3b..aac6c07ca 100644 --- a/calls/javascript/authentication.mdx +++ b/calls/javascript/authentication.mdx @@ -1,6 +1,8 @@ --- title: "Authentication" sidebarTitle: "Authentication" +sdk_version: "5.x (Beta)" +description: "CometChat Calling SDK v5 - Beta Release - Authentication for JavaScript" --- Before users can make or receive calls, they must be authenticated with the CometChat Calls SDK. This guide covers the login and logout methods. diff --git a/calls/javascript/call-layouts.mdx b/calls/javascript/call-layouts.mdx index aa9b6c8a2..8c1f10869 100644 --- a/calls/javascript/call-layouts.mdx +++ b/calls/javascript/call-layouts.mdx @@ -1,6 +1,8 @@ --- title: "Call Layouts" sidebarTitle: "Call Layouts" +sdk_version: "5.x (Beta)" +description: "CometChat Calling SDK v5 - Beta Release - Call Layouts for JavaScript" --- The CometChat Calls SDK provides three layout modes to display participants during a call. Each participant can independently choose their preferred layout without affecting others. diff --git a/calls/javascript/call-logs.mdx b/calls/javascript/call-logs.mdx index d656356d4..e9a59c029 100644 --- a/calls/javascript/call-logs.mdx +++ b/calls/javascript/call-logs.mdx @@ -1,6 +1,8 @@ --- title: "Call Logs" sidebarTitle: "Call Logs" +sdk_version: "5.x (Beta)" +description: "CometChat Calling SDK v5 - Beta Release - Call Logs for JavaScript" --- Retrieve call history and details using the CometChat REST API. Call logs provide information about past calls including participants, duration, and recording URLs. diff --git a/calls/javascript/custom-control-panel.mdx b/calls/javascript/custom-control-panel.mdx index 0bdae429f..baa390c08 100644 --- a/calls/javascript/custom-control-panel.mdx +++ b/calls/javascript/custom-control-panel.mdx @@ -1,6 +1,8 @@ --- title: "Custom Control Panel" sidebarTitle: "Custom Control Panel" +sdk_version: "5.x (Beta)" +description: "CometChat Calling SDK v5 - Beta Release - Custom Control Panel for JavaScript" --- Build a custom control panel by hiding the default UI and using the SDK's action methods to control call functionality. diff --git a/calls/javascript/device-management.mdx b/calls/javascript/device-management.mdx index d6e3bd0b2..7e9c840e4 100644 --- a/calls/javascript/device-management.mdx +++ b/calls/javascript/device-management.mdx @@ -1,6 +1,8 @@ --- title: "Device Management" sidebarTitle: "Device Management" +sdk_version: "5.x (Beta)" +description: "CometChat Calling SDK v5 - Beta Release - Device Management for JavaScript" --- Manage audio and video devices during calls, including selecting microphones, speakers, and cameras. diff --git a/calls/javascript/events.mdx b/calls/javascript/events.mdx index ab3c45afb..94e5a7d46 100644 --- a/calls/javascript/events.mdx +++ b/calls/javascript/events.mdx @@ -1,6 +1,8 @@ --- title: "Events" sidebarTitle: "Events" +sdk_version: "5.x (Beta)" +description: "CometChat Calling SDK v5 - Beta Release - Events for JavaScript" --- Handle call session events to build responsive UIs. The SDK provides event listeners to monitor session status, participant activities, media changes, button clicks, and layout changes. diff --git a/calls/javascript/idle-timeout.mdx b/calls/javascript/idle-timeout.mdx index b62161429..18ceaa34f 100644 --- a/calls/javascript/idle-timeout.mdx +++ b/calls/javascript/idle-timeout.mdx @@ -1,6 +1,8 @@ --- title: "Idle Timeout" sidebarTitle: "Idle Timeout" +sdk_version: "5.x (Beta)" +description: "CometChat Calling SDK v5 - Beta Release - Idle Timeout for JavaScript" --- The idle timeout feature automatically ends a call session when you're the only participant remaining. This prevents sessions from running indefinitely and consuming resources. diff --git a/calls/javascript/in-call-chat.mdx b/calls/javascript/in-call-chat.mdx index 62e06d184..fcf3abf9a 100644 --- a/calls/javascript/in-call-chat.mdx +++ b/calls/javascript/in-call-chat.mdx @@ -1,6 +1,8 @@ --- title: "In-Call Chat" sidebarTitle: "In-Call Chat" +sdk_version: "5.x (Beta)" +description: "CometChat Calling SDK v5 - Beta Release - In-Call Chat for JavaScript" --- Enable text messaging during calls by integrating the in-call chat feature. The SDK provides a chat button in the control panel and events to help you build a custom chat experience. diff --git a/calls/javascript/ionic-integration.mdx b/calls/javascript/ionic-integration.mdx index 77de909c0..8fa1ff35b 100644 --- a/calls/javascript/ionic-integration.mdx +++ b/calls/javascript/ionic-integration.mdx @@ -1,6 +1,8 @@ --- title: "Ionic Integration" sidebarTitle: "Ionic" +sdk_version: "5.x (Beta)" +description: "CometChat Calling SDK v5 - Beta Release - Ionic Integration for JavaScript" --- This guide walks you through integrating the CometChat Calls SDK into an Ionic application. By the end, you'll have a working video call implementation with proper authentication and lifecycle handling. This guide covers Ionic with Angular, React, and Vue. diff --git a/calls/javascript/join-session.mdx b/calls/javascript/join-session.mdx index b4e88361d..e7396fee9 100644 --- a/calls/javascript/join-session.mdx +++ b/calls/javascript/join-session.mdx @@ -1,6 +1,8 @@ --- title: "Join Session" sidebarTitle: "Join Session" +sdk_version: "5.x (Beta)" +description: "CometChat Calling SDK v5 - Beta Release - Join Session for JavaScript" --- Join a call session using one of two approaches: the quick start method with a session ID, or the advanced flow with manual token generation for more control. diff --git a/calls/javascript/migration-guide-v5.mdx b/calls/javascript/migration-guide-v5.mdx index 3431b3e76..637b1df2e 100644 --- a/calls/javascript/migration-guide-v5.mdx +++ b/calls/javascript/migration-guide-v5.mdx @@ -1,6 +1,8 @@ --- title: "Migration Guide" sidebarTitle: "v4 to v5 Migration" +sdk_version: "5.x (Beta)" +description: "CometChat Calling SDK v5 - Beta Release - Migration Guide for JavaScript" --- This guide covers migrating from Calls SDK v4 to v5 for JavaScript (React, Vue, Angular, etc.). diff --git a/calls/javascript/nextjs-integration.mdx b/calls/javascript/nextjs-integration.mdx index d59b3721c..8673eb2a4 100644 --- a/calls/javascript/nextjs-integration.mdx +++ b/calls/javascript/nextjs-integration.mdx @@ -1,6 +1,8 @@ --- title: "Next.js Integration" sidebarTitle: "Next.js" +sdk_version: "5.x (Beta)" +description: "CometChat Calling SDK v5 - Beta Release - Next.js Integration for JavaScript" --- This guide walks you through integrating the CometChat Calls SDK into a Next.js application. By the end, you'll have a working video call implementation with proper server-side rendering handling and authentication. diff --git a/calls/javascript/overview.mdx b/calls/javascript/overview.mdx index 3b16d0503..1770ae92f 100644 --- a/calls/javascript/overview.mdx +++ b/calls/javascript/overview.mdx @@ -1,6 +1,8 @@ --- title: "Calls SDK" sidebarTitle: "Overview" +sdk_version: "5.x (Beta)" +description: "CometChat Calling SDK v5 - Beta Release - Calls SDK for JavaScript" --- diff --git a/calls/javascript/participant-management.mdx b/calls/javascript/participant-management.mdx index 105430f95..173a39983 100644 --- a/calls/javascript/participant-management.mdx +++ b/calls/javascript/participant-management.mdx @@ -1,6 +1,8 @@ --- title: "Participant Management" sidebarTitle: "Participant Management" +sdk_version: "5.x (Beta)" +description: "CometChat Calling SDK v5 - Beta Release - Participant Management for JavaScript" --- Manage call participants including muting, pinning, and monitoring their status during a call. diff --git a/calls/javascript/permissions-handling.mdx b/calls/javascript/permissions-handling.mdx index b7b43fb46..f49ffe09b 100644 --- a/calls/javascript/permissions-handling.mdx +++ b/calls/javascript/permissions-handling.mdx @@ -1,6 +1,8 @@ --- title: "Permissions Handling" sidebarTitle: "Permissions Handling" +sdk_version: "5.x (Beta)" +description: "CometChat Calling SDK v5 - Beta Release - Permissions Handling for JavaScript" --- Handle camera and microphone permissions gracefully to provide a good user experience when joining calls. diff --git a/calls/javascript/picture-in-picture.mdx b/calls/javascript/picture-in-picture.mdx index 1648a701b..0a27d92eb 100644 --- a/calls/javascript/picture-in-picture.mdx +++ b/calls/javascript/picture-in-picture.mdx @@ -1,6 +1,8 @@ --- title: "Picture-in-Picture" sidebarTitle: "Picture-in-Picture" +sdk_version: "5.x (Beta)" +description: "CometChat Calling SDK v5 - Beta Release - Picture-in-Picture for JavaScript" --- Picture-in-Picture (PiP) allows the call video to continue playing in a floating window while users interact with other content on the page or other browser tabs. diff --git a/calls/javascript/raise-hand.mdx b/calls/javascript/raise-hand.mdx index b012761d4..fde77fc5e 100644 --- a/calls/javascript/raise-hand.mdx +++ b/calls/javascript/raise-hand.mdx @@ -1,6 +1,8 @@ --- title: "Raise Hand" sidebarTitle: "Raise Hand" +sdk_version: "5.x (Beta)" +description: "CometChat Calling SDK v5 - Beta Release - Raise Hand for JavaScript" --- The raise hand feature allows participants to signal that they want to speak or get attention during a call without interrupting the current speaker. diff --git a/calls/javascript/react-integration.mdx b/calls/javascript/react-integration.mdx index 132a14355..14f6609ba 100644 --- a/calls/javascript/react-integration.mdx +++ b/calls/javascript/react-integration.mdx @@ -1,6 +1,8 @@ --- title: "React Integration" sidebarTitle: "React" +sdk_version: "5.x (Beta)" +description: "CometChat Calling SDK v5 - Beta Release - React Integration for JavaScript" --- This guide walks you through integrating the CometChat Calls SDK into a React application. By the end, you'll have a working video call implementation with proper state management and lifecycle handling. diff --git a/calls/javascript/recording.mdx b/calls/javascript/recording.mdx index ada4a3d41..f13414edf 100644 --- a/calls/javascript/recording.mdx +++ b/calls/javascript/recording.mdx @@ -1,6 +1,8 @@ --- title: "Recording" sidebarTitle: "Recording" +sdk_version: "5.x (Beta)" +description: "CometChat Calling SDK v5 - Beta Release - Recording for JavaScript" --- Record call sessions for later playback, compliance, or training purposes. Recordings are stored server-side and can be accessed through the CometChat dashboard. diff --git a/calls/javascript/ringing.mdx b/calls/javascript/ringing.mdx index 74fc9b3e7..3b4abfe7f 100644 --- a/calls/javascript/ringing.mdx +++ b/calls/javascript/ringing.mdx @@ -1,6 +1,8 @@ --- title: "Ringing" sidebarTitle: "Ringing" +sdk_version: "5.x (Beta)" +description: "CometChat Calling SDK v5 - Beta Release - Ringing for JavaScript" --- Implement incoming and outgoing call notifications by integrating the Calls SDK with the CometChat Chat SDK for call signaling. diff --git a/calls/javascript/screen-sharing.mdx b/calls/javascript/screen-sharing.mdx index d3c70c387..e53cc95af 100644 --- a/calls/javascript/screen-sharing.mdx +++ b/calls/javascript/screen-sharing.mdx @@ -1,6 +1,8 @@ --- title: "Screen Sharing" sidebarTitle: "Screen Sharing" +sdk_version: "5.x (Beta)" +description: "CometChat Calling SDK v5 - Beta Release - Screen Sharing for JavaScript" --- Share your screen with other participants during a call. The browser will prompt users to select which screen, window, or browser tab to share. diff --git a/calls/javascript/session-settings.mdx b/calls/javascript/session-settings.mdx index d2948b674..f3ff5c8b9 100644 --- a/calls/javascript/session-settings.mdx +++ b/calls/javascript/session-settings.mdx @@ -1,6 +1,8 @@ --- title: "Session Settings" sidebarTitle: "Session Settings" +sdk_version: "5.x (Beta)" +description: "CometChat Calling SDK v5 - Beta Release - Session Settings for JavaScript" --- The session settings object allows you to customize every aspect of your call session before participants join. From controlling the initial audio/video state to customizing the UI layout and hiding specific controls, these settings give you complete control over the call experience. diff --git a/calls/javascript/setup.mdx b/calls/javascript/setup.mdx index 321382759..c91cab42d 100644 --- a/calls/javascript/setup.mdx +++ b/calls/javascript/setup.mdx @@ -1,6 +1,8 @@ --- title: "Setup" sidebarTitle: "Setup" +sdk_version: "5.x (Beta)" +description: "CometChat Calling SDK v5 - Beta Release - Setup for JavaScript" --- This guide walks you through installing the CometChat Calls SDK and initializing it in your web application. diff --git a/calls/javascript/share-invite.mdx b/calls/javascript/share-invite.mdx index 7865d62a6..341e31080 100644 --- a/calls/javascript/share-invite.mdx +++ b/calls/javascript/share-invite.mdx @@ -1,6 +1,8 @@ --- title: "Share Invite" sidebarTitle: "Share Invite" +sdk_version: "5.x (Beta)" +description: "CometChat Calling SDK v5 - Beta Release - Share Invite for JavaScript" --- Allow participants to share call invitations with others using the share invite feature. diff --git a/calls/javascript/troubleshooting.mdx b/calls/javascript/troubleshooting.mdx index 4a150cc7a..9e45fe1b5 100644 --- a/calls/javascript/troubleshooting.mdx +++ b/calls/javascript/troubleshooting.mdx @@ -1,6 +1,7 @@ --- title: "Troubleshooting" -description: "Common failure modes and fixes for the CometChat JavaScript Calls SDK." +description: "CometChat Calling SDK v5 - Beta Release - Troubleshooting for JavaScript" +sdk_version: "5.x (Beta)" --- ## Installation & Setup diff --git a/calls/javascript/virtual-background.mdx b/calls/javascript/virtual-background.mdx index bae8b1da5..d89c605e1 100644 --- a/calls/javascript/virtual-background.mdx +++ b/calls/javascript/virtual-background.mdx @@ -1,6 +1,8 @@ --- title: "Virtual Background" sidebarTitle: "Virtual Background" +sdk_version: "5.x (Beta)" +description: "CometChat Calling SDK v5 - Beta Release - Virtual Background for JavaScript" --- Apply virtual backgrounds to your video feed during calls. You can blur your background or replace it with a custom image. diff --git a/calls/javascript/vue-integration.mdx b/calls/javascript/vue-integration.mdx index 2cd5a4256..e8d9c4445 100644 --- a/calls/javascript/vue-integration.mdx +++ b/calls/javascript/vue-integration.mdx @@ -1,6 +1,8 @@ --- title: "Vue Integration" sidebarTitle: "Vue" +sdk_version: "5.x (Beta)" +description: "CometChat Calling SDK v5 - Beta Release - Vue Integration for JavaScript" --- This guide walks you through integrating the CometChat Calls SDK into a Vue.js application. By the end, you'll have a working video call implementation with proper state management and lifecycle handling. diff --git a/calls/react-native/actions.mdx b/calls/react-native/actions.mdx index dd0a24770..62aa250ae 100644 --- a/calls/react-native/actions.mdx +++ b/calls/react-native/actions.mdx @@ -1,6 +1,8 @@ --- title: "Actions" sidebarTitle: "Actions" +sdk_version: "5.x (Beta)" +description: "CometChat Calling SDK v5 - Beta Release - Actions for React Native" --- Control the active call session programmatically using the static methods on `CometChatCalls`. These methods allow you to manage audio, video, screen sharing, and other call features. diff --git a/calls/react-native/audio-modes.mdx b/calls/react-native/audio-modes.mdx index b385f35b7..055f04055 100644 --- a/calls/react-native/audio-modes.mdx +++ b/calls/react-native/audio-modes.mdx @@ -1,6 +1,8 @@ --- title: "Audio Modes" sidebarTitle: "Audio Modes" +sdk_version: "5.x (Beta)" +description: "CometChat Calling SDK v5 - Beta Release - Audio Modes for React Native" --- The CometChat Calls SDK supports multiple audio output modes on mobile devices. Users can switch between speaker, earpiece, Bluetooth, and wired headphones. diff --git a/calls/react-native/authentication.mdx b/calls/react-native/authentication.mdx index c5f66cf09..d4ccb26f0 100644 --- a/calls/react-native/authentication.mdx +++ b/calls/react-native/authentication.mdx @@ -1,6 +1,8 @@ --- title: "Authentication" sidebarTitle: "Authentication" +sdk_version: "5.x (Beta)" +description: "CometChat Calling SDK v5 - Beta Release - Authentication for React Native" --- This guide covers initializing the CometChat Calls SDK and authenticating users in your React Native application. diff --git a/calls/react-native/background-handling.mdx b/calls/react-native/background-handling.mdx index f0b84327b..6b88ecb86 100644 --- a/calls/react-native/background-handling.mdx +++ b/calls/react-native/background-handling.mdx @@ -1,6 +1,8 @@ --- title: "Background Handling" sidebarTitle: "Background Handling" +sdk_version: "5.x (Beta)" +description: "CometChat Calling SDK v5 - Beta Release - Background Handling for React Native" --- Keep calls active when your app goes to the background. This requires platform-specific configuration to maintain audio/video streams and handle system interruptions. diff --git a/calls/react-native/call-layouts.mdx b/calls/react-native/call-layouts.mdx index 248f78f74..3c9f96d09 100644 --- a/calls/react-native/call-layouts.mdx +++ b/calls/react-native/call-layouts.mdx @@ -1,6 +1,8 @@ --- title: "Call Layouts" sidebarTitle: "Call Layouts" +sdk_version: "5.x (Beta)" +description: "CometChat Calling SDK v5 - Beta Release - Call Layouts for React Native" --- The CometChat Calls SDK provides three layout modes for displaying participants during a call. You can set the initial layout in call settings or change it programmatically during the call. diff --git a/calls/react-native/call-logs.mdx b/calls/react-native/call-logs.mdx index 3693f70e6..5e6f5e115 100644 --- a/calls/react-native/call-logs.mdx +++ b/calls/react-native/call-logs.mdx @@ -1,6 +1,8 @@ --- title: "Call Logs" sidebarTitle: "Call Logs" +sdk_version: "5.x (Beta)" +description: "CometChat Calling SDK v5 - Beta Release - Call Logs for React Native" --- Call logs provide a history of calls made through your application. You can retrieve call logs using the CometChat Chat SDK's call log APIs. diff --git a/calls/react-native/custom-control-panel.mdx b/calls/react-native/custom-control-panel.mdx index 578b0df84..1e935299a 100644 --- a/calls/react-native/custom-control-panel.mdx +++ b/calls/react-native/custom-control-panel.mdx @@ -1,6 +1,8 @@ --- title: "Custom Control Panel" sidebarTitle: "Custom Control Panel" +sdk_version: "5.x (Beta)" +description: "CometChat Calling SDK v5 - Beta Release - Custom Control Panel for React Native" --- Build a custom control panel to replace or extend the default call controls. Hide the default layout and implement your own UI using the SDK's action methods. diff --git a/calls/react-native/custom-participant-list.mdx b/calls/react-native/custom-participant-list.mdx index 28c46d27e..05f79521b 100644 --- a/calls/react-native/custom-participant-list.mdx +++ b/calls/react-native/custom-participant-list.mdx @@ -1,6 +1,8 @@ --- title: "Custom Participant List" sidebarTitle: "Custom Participant List" +sdk_version: "5.x (Beta)" +description: "CometChat Calling SDK v5 - Beta Release - Custom Participant List for React Native" --- Build a custom participant list UI to display and manage call participants. Listen for participant events and use the SDK's management methods. diff --git a/calls/react-native/events.mdx b/calls/react-native/events.mdx index c219d4dbf..b92ecf30e 100644 --- a/calls/react-native/events.mdx +++ b/calls/react-native/events.mdx @@ -1,6 +1,8 @@ --- title: "Events" sidebarTitle: "Events" +sdk_version: "5.x (Beta)" +description: "CometChat Calling SDK v5 - Beta Release - Events for React Native" --- The CometChat Calls SDK provides two ways to listen for call events: the `OngoingCallListener` class for legacy-style callbacks, and the `addEventListener` method for modern event subscriptions. diff --git a/calls/react-native/idle-timeout.mdx b/calls/react-native/idle-timeout.mdx index b8b24f838..6645ff983 100644 --- a/calls/react-native/idle-timeout.mdx +++ b/calls/react-native/idle-timeout.mdx @@ -1,6 +1,8 @@ --- title: "Idle Timeout" sidebarTitle: "Idle Timeout" +sdk_version: "5.x (Beta)" +description: "CometChat Calling SDK v5 - Beta Release - Idle Timeout for React Native" --- The idle timeout feature automatically ends a call session when a participant is alone for a specified period. This prevents abandoned calls from running indefinitely. diff --git a/calls/react-native/in-call-chat.mdx b/calls/react-native/in-call-chat.mdx index 472fb98d2..7cb784d7a 100644 --- a/calls/react-native/in-call-chat.mdx +++ b/calls/react-native/in-call-chat.mdx @@ -1,6 +1,8 @@ --- title: "In-Call Chat" sidebarTitle: "In-Call Chat" +sdk_version: "5.x (Beta)" +description: "CometChat Calling SDK v5 - Beta Release - In-Call Chat for React Native" --- Enable messaging during calls by integrating the CometChat Chat SDK. Users can send and receive text messages while on a call. diff --git a/calls/react-native/join-session.mdx b/calls/react-native/join-session.mdx index c5afbaae0..2be9d29e5 100644 --- a/calls/react-native/join-session.mdx +++ b/calls/react-native/join-session.mdx @@ -1,6 +1,8 @@ --- title: "Join Session" sidebarTitle: "Join Session" +sdk_version: "5.x (Beta)" +description: "CometChat Calling SDK v5 - Beta Release - Join Session for React Native" --- This guide covers generating call tokens and joining call sessions using the CometChat Calls SDK. diff --git a/calls/react-native/migration-guide-v5.mdx b/calls/react-native/migration-guide-v5.mdx index 160d70ed0..0500ac2ad 100644 --- a/calls/react-native/migration-guide-v5.mdx +++ b/calls/react-native/migration-guide-v5.mdx @@ -1,6 +1,8 @@ --- title: "Migration Guide" sidebarTitle: "v4 to v5 Migration" +sdk_version: "5.x (Beta)" +description: "CometChat Calling SDK v5 - Beta Release - Migration Guide for React Native" --- This guide covers migrating from Calls SDK v4 to v5 for React Native. diff --git a/calls/react-native/overview.mdx b/calls/react-native/overview.mdx index 03755157e..e775dfe1d 100644 --- a/calls/react-native/overview.mdx +++ b/calls/react-native/overview.mdx @@ -1,6 +1,8 @@ --- title: "Calls SDK" sidebarTitle: "Overview" +sdk_version: "5.x (Beta)" +description: "CometChat Calling SDK v5 - Beta Release - Calls SDK for React Native" --- diff --git a/calls/react-native/participant-management.mdx b/calls/react-native/participant-management.mdx index 439669338..644106203 100644 --- a/calls/react-native/participant-management.mdx +++ b/calls/react-native/participant-management.mdx @@ -1,6 +1,8 @@ --- title: "Participant Management" sidebarTitle: "Participant Management" +sdk_version: "5.x (Beta)" +description: "CometChat Calling SDK v5 - Beta Release - Participant Management for React Native" --- Manage call participants by muting, pinning, and monitoring their status during a call. diff --git a/calls/react-native/picture-in-picture.mdx b/calls/react-native/picture-in-picture.mdx index 82fdb9793..5d2aef02a 100644 --- a/calls/react-native/picture-in-picture.mdx +++ b/calls/react-native/picture-in-picture.mdx @@ -1,6 +1,8 @@ --- title: "Picture-in-Picture" sidebarTitle: "Picture-in-Picture" +sdk_version: "5.x (Beta)" +description: "CometChat Calling SDK v5 - Beta Release - Picture-in-Picture for React Native" --- Picture-in-Picture (PiP) mode allows users to continue their call in a floating window while using other apps. This feature requires platform-specific configuration. diff --git a/calls/react-native/raise-hand.mdx b/calls/react-native/raise-hand.mdx index 8aa46aa1c..59a050cbc 100644 --- a/calls/react-native/raise-hand.mdx +++ b/calls/react-native/raise-hand.mdx @@ -1,6 +1,8 @@ --- title: "Raise Hand" sidebarTitle: "Raise Hand" +sdk_version: "5.x (Beta)" +description: "CometChat Calling SDK v5 - Beta Release - Raise Hand for React Native" --- The raise hand feature allows participants to signal that they want attention during a call, useful for Q&A sessions or large meetings. diff --git a/calls/react-native/recording.mdx b/calls/react-native/recording.mdx index 4dfab3e85..db5aa2ab3 100644 --- a/calls/react-native/recording.mdx +++ b/calls/react-native/recording.mdx @@ -1,6 +1,8 @@ --- title: "Recording" sidebarTitle: "Recording" +sdk_version: "5.x (Beta)" +description: "CometChat Calling SDK v5 - Beta Release - Recording for React Native" --- The CometChat Calls SDK supports recording call sessions. Recordings can be started manually or automatically when the call begins. diff --git a/calls/react-native/ringing.mdx b/calls/react-native/ringing.mdx index ecd846cc7..9b80fac28 100644 --- a/calls/react-native/ringing.mdx +++ b/calls/react-native/ringing.mdx @@ -1,6 +1,8 @@ --- title: "Ringing" sidebarTitle: "Ringing" +sdk_version: "5.x (Beta)" +description: "CometChat Calling SDK v5 - Beta Release - Ringing for React Native" --- Implement incoming and outgoing call notifications using the CometChat Chat SDK's calling features. The Calls SDK handles the actual call session, while the Chat SDK manages call signaling. diff --git a/calls/react-native/screen-sharing.mdx b/calls/react-native/screen-sharing.mdx index 2b48c17b3..31b739d8e 100644 --- a/calls/react-native/screen-sharing.mdx +++ b/calls/react-native/screen-sharing.mdx @@ -1,6 +1,8 @@ --- title: "Screen Sharing" sidebarTitle: "Screen Sharing" +sdk_version: "5.x (Beta)" +description: "CometChat Calling SDK v5 - Beta Release - Screen Sharing for React Native" --- The CometChat Calls SDK supports viewing screen shares from other participants. Screen sharing initiation on React Native requires platform-specific configuration. diff --git a/calls/react-native/session-settings.mdx b/calls/react-native/session-settings.mdx index 4102e94f8..a277fd0b3 100644 --- a/calls/react-native/session-settings.mdx +++ b/calls/react-native/session-settings.mdx @@ -1,6 +1,8 @@ --- title: "Session Settings" sidebarTitle: "Session Settings" +sdk_version: "5.x (Beta)" +description: "CometChat Calling SDK v5 - Beta Release - Session Settings for React Native" --- Configure call sessions using the `CallSettingsBuilder` class. This allows you to customize the call UI, behavior, and event handling. diff --git a/calls/react-native/setup.mdx b/calls/react-native/setup.mdx index 38ea2ece5..56666de46 100644 --- a/calls/react-native/setup.mdx +++ b/calls/react-native/setup.mdx @@ -1,6 +1,8 @@ --- title: "Setup" sidebarTitle: "Setup" +sdk_version: "5.x (Beta)" +description: "CometChat Calling SDK v5 - Beta Release - Setup for React Native" --- This guide walks you through installing the CometChat Calls SDK and configuring it in your React Native application. diff --git a/calls/react-native/share-invite.mdx b/calls/react-native/share-invite.mdx index c1f04d6c8..606a66cbe 100644 --- a/calls/react-native/share-invite.mdx +++ b/calls/react-native/share-invite.mdx @@ -1,6 +1,8 @@ --- title: "Share Invite" sidebarTitle: "Share Invite" +sdk_version: "5.x (Beta)" +description: "CometChat Calling SDK v5 - Beta Release - Share Invite for React Native" --- Allow users to share call invite links with others. When the share invite button is clicked, you can generate and share a link that others can use to join the call. diff --git a/calls/react-native/troubleshooting.mdx b/calls/react-native/troubleshooting.mdx index 75a6eccc4..f0d5e3332 100644 --- a/calls/react-native/troubleshooting.mdx +++ b/calls/react-native/troubleshooting.mdx @@ -1,6 +1,7 @@ --- title: "Troubleshooting" -description: "Common failure modes and fixes for the CometChat React Native Calls SDK." +description: "CometChat Calling SDK v5 - Beta Release - Troubleshooting for React Native" +sdk_version: "5.x (Beta)" --- ## Installation & Setup diff --git a/calls/react-native/voip-calling.mdx b/calls/react-native/voip-calling.mdx index 3fe65c95d..82d264430 100644 --- a/calls/react-native/voip-calling.mdx +++ b/calls/react-native/voip-calling.mdx @@ -1,6 +1,8 @@ --- title: "VoIP Calling" sidebarTitle: "VoIP Calling" +sdk_version: "5.x (Beta)" +description: "CometChat Calling SDK v5 - Beta Release - VoIP Calling for React Native" --- Implement VoIP push notifications to receive incoming calls even when your app is in the background or terminated. This requires platform-specific configuration for iOS CallKit and Android ConnectionService. diff --git a/calls/v4/android/call-logs.mdx b/calls/v4/android/call-logs.mdx new file mode 100644 index 000000000..0f83de500 --- /dev/null +++ b/calls/v4/android/call-logs.mdx @@ -0,0 +1,109 @@ +--- +title: "Call Logs" +sidebarTitle: "Call Logs" +sdk_version: "4.x" +description: "CometChat Calling SDK v4 - Stable Release - Call Logs for Android" +--- + +## Overview + +CometChat's Android Call SDK provides a comprehensive way to integrate call logs into your application, enhancing your user experience by allowing users to effortlessly keep track of their communication history. Call logs provide crucial information such as call duration, participants, and more. + +This feature not only allows users to review their past interactions but it also serves as an effective tool to revisit important conversation details. With the flexibility of fetching call logs, filtering them according to specific parameters, and obtaining detailed information of individual calls, application developers can use this feature to build a more robust and interactive communication framework. + +In the following sections, we will guide you through the process of working with call logs, offering a deeper insight into how to optimally use this feature in your Android application. + +## Fetching Call Logs + +To fetch all call logs in your Android application, you should use the `CallLogRequestBuilder`, This builder allows you to customize the call logs fetching process according to your needs. + +```java +CallLogRequest callLogRequest = new CallLogRequest.CallLogRequestBuilder() + .setAuthToken(CometChat.getUserAuthToken()) + .setLimit(50) + .setCallCategory(CometChatCallsConstants.CALL_CATEGORY_CALL) + .build(); +``` + +`CallLogRequestBuilder` has the following settings available. + +| Setting | Description | +| ----------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `setLimit(int limit)` | Specifies the number of call logs to fetch. | +| `setCallType(@CometChatCallsConstants.CallType String callType)` | Sets the type of calls to fetch (audio or video). It accepts `CallType` Enum with following values `CometChatCallsConstants.CallType.CALL_TYPE_VIDEO`, `CometChatCallsConstants.CallType.CALL_TYPE_AUDIO` & `CometChatCallsConstants.CallType.CALL_TYPE_AUDIO_VIDEO` | +| `setCallStatus(@CometChatCallsConstants.CallStatus String callStatus)` | Sets the status of calls to fetch (initiated, ongoing, etc.). It accepts `CallStatus` Enum with following values `CometChatCallsConstants.CallStatus.CALL_STATUS_ONGOING`, `CometChatCallsConstants.CallStatus.CALL_STATUS_BUSY`, `CometChatCallsConstants.CallStatus.CALL_STATUS_REJECTED`, `CometChatCallsConstants.CallStatus.CALL_STATUS_CANCELLED`, `CometChatCallsConstants.CallStatus.CALL_STATUS_ENDED`, `CometChatCallsConstants.CallStatus.CALL_STATUS_MISSED`, `CometChatCallsConstants.CallStatus.CALL_STATUS_INITIATED`, `CometChatCallsConstants.CallStatus.CALL_STATUS_UNANSWERED` | +| setHasRecording(boolean hasRecording) | Sets whether to fetch calls that have recordings. | +| setCallCategory(@CometChatCallsConstants.CallLogCategory String callCategory) | Sets the category of calls to fetch (call or meet). It accepts `CallLogCategory` Enum with following values `CometChatCallsConstants.CallLogCategory.CALL_CATEGORY_CALL` & `CometChatCallsConstants.CallLogCategory.CALL_CATEGORY_MEET` | +| setCallDirection(@CometChatCallsConstants.CallDirection String callDirection) | Sets the direction of calls to fetch. It accepts `CallDirection` Enum with following values `CometChatCallsConstants.CallDirection.CALL_DIRECTION_INCOMING` & `CometChatCallsConstants.CallDirection.CALL_DIRECTION_OUTGOING` | +| setUid(String uid) | Sets the UID of the user whose call logs to fetch. | +| setGuid(String guid) | Sets the GUID of the user whose call logs to fetch. | +| setAuthToken(String authToken) | Sets the Auth token of the logged-in user. | + +### Fetch Next + +The**`fetchNext()`**method retrieves the next set of call logs. + +```java +CallLogRequest callLogRequest = new CallLogRequest.CallLogRequestBuilder() + .setAuthToken(CometChat.getUserAuthToken()) + .setLimit(50) + .setCallCategory(CometChatCallsConstants.CALL_CATEGORY_CALL) + .build(); + +callLogRequest.fetchNext(new CometChatCalls.CallbackListener>() { + @Override + public void onSuccess(List callLogs) { + // Handle the fetched call logs + } + + @Override + public void onError(CometChatException e) { + // Handle the error + } +}); +``` + +### Fetch Previous + +The**`fetchPrevious()`**method retrieves the previous set of call logs. + +```java +CallLogRequest callLogRequest = new CallLogRequest.CallLogRequestBuilder() + .setAuthToken(CometChat.getUserAuthToken()) + .setLimit(50) + .setCallCategory(CometChatCallsConstants.CALL_CATEGORY_CALL) + .build(); + +callLogRequest.fetchPrevious(new CometChatCalls.CallbackListener>() { + @Override + public void onSuccess(List callLogs) { + // Handle the fetched call logs + } + + @Override + public void onError(CometChatException e) { + // Handle the error + } +}); +``` + +## Get Call Details + +To retrieve the specific details of a call, use the**`getCallDetails()`**method. This method requires the Auth token of the logged-in user and the session ID along with a callback listener. + +```java +String sessionID = "SESSION_ID"; +CometChatCalls.getCallDetails(sessionID, new CometChatCalls.CallbackListener>() { + @Override + public void onSuccess(List callLogs) { + // Handle the fetched call details + } + + @Override + public void onError(CometChatException e) { + // Handle the error + } +}); +``` + +Note: Replace**`"SESSION_ID"`**with the ID of the session you are interested in. diff --git a/calls/v4/android/call-session.mdx b/calls/v4/android/call-session.mdx new file mode 100644 index 000000000..7eeaa060b --- /dev/null +++ b/calls/v4/android/call-session.mdx @@ -0,0 +1,668 @@ +--- +title: "Call Session" +sidebarTitle: "Call Session" +sdk_version: "4.x" +description: "CometChat Calling SDK v4 - Stable Release - Call Session for Android" +--- + +## Overview + +This section demonstrates how to start a call session in an Android application. Previously known as **Direct Calling**. + +Before you begin, we strongly recommend you read the [calling setup guide](/calls/v4/android/setup). + + + +If you want to implement a complete calling experience with ringing functionality (incoming/outgoing call UI), follow the [Ringing](/calls/v4/android/ringing) guide first. Once the call is accepted, return here to start the call session. + + + +## Generate Call Token + +A call token is required for secure access to a call session. Each token is unique to a specific session and user combination, ensuring that only authorized users can join the call. + +You can generate the token just before starting the call, or generate and store it ahead of time based on your use case. + +Use the `generateToken()` method to create a call token: + + + +```java +String sessionId = "" //Random or available in call obecjt in case of default calling +String userAuthToken = CometChat.getUserAuthToken() //Logged in user auth token + +CometChatCalls.generateToken(sessionId, userAuthToken, new CometChatCalls.CallbackListener() { + @Override + public void onSuccess(GenerateToken generateToken) { + + } + + @Override + public void onError(com.cometchat.pro.rtc.exceptions.CometChatException e) { + + } +}); +``` + + + + +```kotlin +val sessionId = "" //Random or available in call obecjt in case of default calling +val userAuthToken = CometChat.getUserAuthToken() //Logged in user auth token + +CometChatCalls.generateToken( + sessionId, + userAuthToken, + object : CometChatCalls.CallbackListener() { + override fun onSuccess(generateToken: GenerateToken) { + + } + + override fun onError(e: CometChatException) { + + } + } +) +``` + + + + + +| Parameter | Description | +| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------ | +| `sessionId` | The unique random session ID. In case you are using the ringing flow, the session ID is available in the `Call` object. | +| `userAuthToken` | The user auth token is the logged-in user auth token which you can get by calling CometChat Chat SDK method `CometChat.getUserAuthToken()` | + +## Start Call Session + +Use the `startSession()` method to join a call session. This method requires a call token (generated in the previous step) and a `CallSettings` object that configures the call UI and behavior. + +The `CallSettings` class configures the call UI and behavior. Use `CallSettingsBuilder` to create a `CallSettings` instance with the following required parameters: + +| Parameter | Description | +| ------------------ | ------------------------------------------------------------------------ | +| `activityContext` | The activity context where the call UI will be displayed | +| `videoContainer` | A `RelativeLayout` where the calling UI will be rendered | +| `callToken` | The `GenerateToken` object received from `generateToken()` onSuccess | + + + +```java +RelativeLayout videoContainer = findViewById(R.id.video_container); +Context activityContext = this; +GenerateToken callToken; // Received from generateToken() onSuccess + +CallSettings callSettings = new CometChatCalls.CallSettingsBuilder(activityContext, videoContainer) + .setDefaultLayoutEnable(true) + .setIsAudioOnly(false) + .build(); + +CometChatCalls.startSession(callToken, callSettings, new CometChatCalls.CallbackListener() { + @Override + public void onSuccess(String s) { + // Call session started successfully + } + + @Override + public void onError(CometChatException e) { + // Handle error + } +}); +``` + + + + +```kotlin +val videoContainer: RelativeLayout = findViewById(R.id.video_container) +val activityContext: Context = this +val callToken: GenerateToken // Received from generateToken() onSuccess + +val callSettings = CometChatCalls.CallSettingsBuilder(activityContext, videoContainer) + .setDefaultLayoutEnable(true) + .setIsAudioOnly(false) + .build() + +CometChatCalls.startSession(callToken, callSettings, object : CometChatCalls.CallbackListener { + override fun onSuccess(s: String) { + // Call session started successfully + } + + override fun onError(e: CometChatException) { + // Handle error + } +}) +``` + + + + + +### Call Settings + +Configure the call experience using the following `CallSettingsBuilder` methods: + +| Method | Description | +| ------ | ----------- | +| `setDefaultLayoutEnable(boolean)` | Enables or disables the default call UI layout with built-in controls. `true` shows the default layout with end call, mute, video toggle buttons. `false` hides the button layout. Default: `true` | +| `setIsAudioOnly(boolean)` | Sets whether the call is audio-only or audio-video. `true` for audio-only, `false` for audio-video. Default: `false` | +| `setEventListener(CometChatCallsEventsListener)` | Sets the listener to receive call events. See [Call Listeners](#call-listeners) for available callbacks. | +| `setMode(String)` | Sets the call UI layout mode. Available: `MODE_DEFAULT` (grid), `MODE_SPOTLIGHT` (active speaker), `MODE_SINGLE` (one participant). Default: `MODE_DEFAULT` | +| `setAvatarMode(String)` | Sets how avatars are displayed when video is off. Available: `AVATAR_MODE_CIRCLE`, `AVATAR_MODE_SQUARE`, `AVATAR_MODE_FULLSCREEN`. Default: `AVATAR_MODE_CIRCLE` | +| `setDefaultAudioMode(String)` | Sets the initial audio output device. Available: `AUDIO_MODE_SPEAKER`, `AUDIO_MODE_EARPIECE`, `AUDIO_MODE_BLUETOOTH`, `AUDIO_MODE_HEADPHONES` | +| `startWithAudioMuted(boolean)` | Starts the call with the microphone muted. Default: `false` | +| `startWithVideoMuted(boolean)` | Starts the call with the camera turned off. Default: `false` | +| `showEndCallButton(boolean)` | Shows or hides the end call button in the default layout. Default: `true` | +| `showSwitchCameraButton(boolean)` | Shows or hides the switch camera button (front/back). Default: `true` | +| `showMuteAudioButton(boolean)` | Shows or hides the mute audio button. Default: `true` | +| `showPauseVideoButton(boolean)` | Shows or hides the pause video button. Default: `true` | +| `showAudioModeButton(boolean)` | Shows or hides the audio mode selection button. Default: `true` | +| `showSwitchToVideoCallButton(boolean)` | Shows or hides the button to upgrade an audio call to video. Default: `true` | +| `showRecordingButton(boolean)` | Shows or hides the recording button. Default: `false` | +| `autoRecordOnCallStart(boolean)` | Automatically starts recording when the call begins. Default: `false` | +| `enableVideoTileClick(boolean)` | Enables or disables click interactions on video tiles in Spotlight mode. Default: `true` | +| `enableVideoTileDrag(boolean)` | Enables or disables drag functionality for video tiles in Spotlight mode. Default: `true` | +| `setMainVideoContainerSetting(MainVideoContainerSetting)` | Customizes the main video container. See [Video View Customization](/calls/v4/android/video-view-customisation). | +| `setIdleTimeoutPeriod(int)` | Sets idle timeout in seconds. Warning appears 60 seconds before auto-termination. Default: `180` seconds. *v4.1.0+* | + +## Call Listeners + +The `CometChatCallsEventsListener` interface provides real-time callbacks for call session events, including participant changes, call state updates, and error conditions. Register this listener in any activity or fragment where you need to respond to call events. + +Each listener requires a unique `listenerId` string. This ID is used to: +- **Prevent duplicate registrations** — Re-registering with the same ID replaces the existing listener +- **Enable targeted removal** — Remove specific listeners without affecting others + + + +```java +private String listenerId = "UNIQUE_LISTENER_ID"; + +// Register listener (e.g., in onCreate or onResume) +CometChatCalls.addCallsEventListeners(listenerId, new CometChatCallsEventsListener() { + @Override + public void onCallEnded() { + + } + + @Override + public void onSessionTimeout() { + + } + + @Override + public void onCallEndButtonPressed() { + + } + + @Override + public void onUserJoined(RTCUser user) { + + } + + @Override + public void onUserLeft(RTCUser user) { + + } + + @Override + public void onUserListChanged(ArrayList users) { + + } + + @Override + public void onAudioModeChanged(ArrayList devices) { + + } + + @Override + public void onCallSwitchedToVideo(CallSwitchRequestInfo info) { + + } + + @Override + public void onUserMuted(RTCMutedUser muteObj) { + + } + + @Override + public void onRecordingToggled(RTCRecordingInfo info) { + + } + + @Override + public void onError(CometChatException ce) { + + } +}); + +// Unregister listener (e.g., in onDestroy or onPause) +CometChatCalls.removeCallsEventListeners(listenerId); +``` + + + + +```kotlin +val listenerId = "UNIQUE_LISTENER_ID" + +// Register listener (e.g., in onCreate or onResume) +CometChatCalls.addCallsEventListeners(listenerId, object: CometChatCallsEventsListener { + override fun onCallEnded() { + + } + + override fun onSessionTimeout() { + + } + + override fun onCallEndButtonPressed() { + + } + + override fun onUserJoined(user: RTCUser) { + + } + + override fun onUserLeft(user: RTCUser) { + + } + + override fun onUserListChanged(users: ArrayList) { + + } + + override fun onAudioModeChanged(devices: ArrayList?) { + + } + + override fun onCallSwitchedToVideo(info: CallSwitchRequestInfo) { + + } + + override fun onUserMuted(muteObj: RTCMutedUser) { + + } + + override fun onRecordingToggled(info: RTCRecordingInfo) { + + } + + override fun onError(ce: CometChatException?) { + + } +}) + +``` + + + + + + + +### Events + +| Event | Description | +| ----- | ----------- | +| `onCallEnded()` | Invoked when the call session terminates for a 1:1 call. Both participants receive this callback. Only fires for calls with exactly 2 participants. | +| `onSessionTimeout()` | Invoked when the call is auto-terminated due to inactivity (default: 180 seconds). Warning appears 60 seconds before. *v4.1.0+* | +| `onCallEndButtonPressed()` | Invoked when the local user taps the end call button. For ringing flow, call `CometChat.endCall()`. For standalone, call `CometChatCalls.endSession()`. | +| `onUserJoined(user: RTCUser)` | Invoked when a remote participant joins. The `user` contains UID, name, and avatar. | +| `onUserLeft(user: RTCUser)` | Invoked when a remote participant leaves the call session. | +| `onUserListChanged(users: ArrayList)` | Invoked whenever the participant list changes (join or leave events). | +| `onAudioModeChanged(devices: ArrayList)` | Invoked when available audio devices change (e.g., Bluetooth connected). | +| `onCallSwitchedToVideo(info: CallSwitchRequestInfo)` | Invoked when an audio call is upgraded to a video call. | +| `onUserMuted(muteObj: RTCMutedUser)` | Invoked when a participant's mute state changes. | +| `onRecordingToggled(info: RTCRecordingInfo)` | Invoked when call recording starts or stops. | +| `onError(e: CometChatException)` | Invoked when an error occurs during the call session. | + +## End Call Session + +Ending a call session properly is essential to release media resources (camera, microphone, network connections) and update call state across all participants. The termination process differs based on whether you're using the Ringing flow or Session Only flow. + +### Ringing Flow + +When using the [Ringing](/calls/v4/android/ringing) flow, you must coordinate between the CometChat Chat SDK and the Calls SDK to properly terminate the call and notify all participants. + + + +The Ringing flow requires calling methods from both the Chat SDK (`CometChat.endCall()`) and the Calls SDK (`CometChatCalls.endSession()`) to ensure proper call termination and participant notification. + + + + + + + +**User who initiates the end call:** + +When the user presses the end call button in the UI, the `onCallEndButtonPressed()` callback is triggered. You must call `CometChat.endCall()` inside this callback to properly terminate the call and notify other participants. This triggers the `onCallEnded()` callback for the remote participant. + + + +```java +@Override +public void onCallEndButtonPressed() { + CometChat.endCall(sessionId, new CometChat.CallbackListener() { + @Override + public void onSuccess(Call call) { + // Call ended successfully, close the calling screen + } + + @Override + public void onError(CometChatException e) { + Log.e(TAG, "Error ending call: " + e.getMessage()); + } + }); +} +``` + + + + +```kotlin +override fun onCallEndButtonPressed() { + CometChat.endCall(sessionId, object : CallbackListener() { + override fun onSuccess(call: Call?) { + // Call ended successfully, close the calling screen + } + + override fun onError(e: CometChatException) { + Log.e(TAG, "Error ending call: ${e.message}") + } + }) +} +``` + + + + + +**Remote participant** (receives the `onCallEnded()` callback): + +Call `CometChat.clearActiveCall()` to clear the local call state, then call `CometChatCalls.endSession()` to release media resources. + + + +```java +// In onCallEnded() callback +CometChat.clearActiveCall(); +CometChatCalls.endSession(); +// Close the calling screen +``` + + + + +```kotlin +// In onCallEnded() callback +CometChat.clearActiveCall() +CometChatCalls.endSession() +// Close the calling screen +``` + + + + + +### Session Only Flow + +When using the Session Only flow (direct call without ringing), you only need to call the Calls SDK method to end the session. There's no need to notify the Chat SDK since no call signaling was involved. + +Call `CometChatCalls.endSession()` in the `onCallEndButtonPressed()` callback to release all media resources and disconnect from the call session. + + + +```java +// In onCallEndButtonPressed() callback +CometChatCalls.endSession(); +// Close the calling screen +``` + + + + +```kotlin +// In onCallEndButtonPressed() callback +CometChatCalls.endSession() +// Close the calling screen +``` + + + + + +## Methods + +These methods are available for performing custom actions during an active call session. Use them to build custom UI controls or implement specific behaviors based on your use case. + + +These methods can only be called when a call session is active. + + +### Switch Camera + +Toggles between the front and rear camera during a video call. Useful for allowing users to switch their camera view without leaving the call. + + + +```java +CometChatCalls.switchCamera(); +``` + + + + +```kotlin +CometChatCalls.switchCamera() +``` + + + + + +### Mute Audio + +Controls the local audio stream transmission. When muted, other participants cannot hear the local user. + +- `true` — Mutes the microphone, stops transmitting audio +- `false` — Unmutes the microphone, resumes audio transmission + + + +```java +CometChatCalls.muteAudio(true); +``` + + + + +```kotlin +CometChatCalls.muteAudio(true) +``` + + + + + +### Pause Video + +Controls the local video stream transmission. When paused, other participants see a frozen frame or avatar instead of live video. + +- `true` — Pauses the camera, stops transmitting video +- `false` — Resumes the camera, continues video transmission + + + +```java +CometChatCalls.pauseVideo(true); +``` + + + + +```kotlin +CometChatCalls.pauseVideo(true) +``` + + + + + +### Set Audio Mode + +Routes the audio output to a specific device. Use this to let users choose between speaker, earpiece, or connected audio devices. + +**Available modes:** +- `CometChatCallsConstants.AUDIO_MODE_SPEAKER` — Device speaker (loudspeaker) +- `CometChatCallsConstants.AUDIO_MODE_EARPIECE` — Phone earpiece +- `CometChatCallsConstants.AUDIO_MODE_BLUETOOTH` — Connected Bluetooth device +- `CometChatCallsConstants.AUDIO_MODE_HEADPHONES` — Wired headphones + + + +```java +String audioMode = CometChatCallsConstants.AUDIO_MODE_EARPIECE; +CometChatCalls.setAudioMode(audioMode); +``` + + + + +```kotlin +val audioMode = CometChatCallsConstants.AUDIO_MODE_EARPIECE +CometChatCalls.setAudioMode(audioMode) +``` + + + + + +### Enter PIP Mode + +Enters Picture-in-Picture mode, rendering the call view in a small floating window. This allows users to multitask while staying on the call. Ensure your app has PIP support enabled in the manifest. + + + +```java +CometChatCalls.enterPIPMode(); +``` + + + + +```kotlin +CometChatCalls.enterPIPMode() +``` + + + + + +### Exit PIP Mode + +Exits Picture-in-Picture mode and returns the call view to its original full-screen or embedded layout. + + + +```java +CometChatCalls.exitPIPMode(); +``` + + + + +```kotlin +CometChatCalls.exitPIPMode() +``` + + + + + +### Switch To Video Call + +Upgrades an ongoing audio call to a video call. This enables the camera and starts transmitting video to other participants. The remote participant receives the `onCallSwitchedToVideo()` callback. + + + +```java +CometChatCalls.switchToVideoCall(); +``` + + + + +```kotlin +CometChatCalls.switchToVideoCall() +``` + + + + + +### Start Recording + +Starts recording the call session. The recording is saved to the CometChat server and can be accessed later. All participants receive the `onRecordingToggled()` callback when recording starts. + + + +```java +CometChatCalls.startRecording(); +``` + + + + +```kotlin +CometChatCalls.startRecording() +``` + + + + + +### Stop Recording + +Stops an ongoing call recording. All participants receive the `onRecordingToggled()` callback when recording stops. + + + +```java +CometChatCalls.stopRecording(); +``` + + + + +```kotlin +CometChatCalls.stopRecording() +``` + + + + + +### End Call + +Terminates the current call session and releases all media resources (camera, microphone, network connections). After calling this method, the call view should be closed. + + + +```java +CometChatCalls.endSession(); +``` + + + + +```kotlin +CometChatCalls.endSession() +``` + + + + diff --git a/calls/v4/android/overview.mdx b/calls/v4/android/overview.mdx new file mode 100644 index 000000000..19eb74b4f --- /dev/null +++ b/calls/v4/android/overview.mdx @@ -0,0 +1,97 @@ +--- +title: "Calling SDK" +sidebarTitle: "Overview" +sdk_version: "4.x" +description: "CometChat Calling SDK v4 - Stable Release - Overview for Android. This is the stable v4 documentation. Most users should use this version." +--- + + +🚀 **v5 Beta Available** — The Calling SDK v5 is now available in beta with significant improvements. [Check out the v5 docs →](/calls/android/overview) + + +## Overview + +CometChat provides voice and video calling capabilities for your Android application. This guide helps you choose the right implementation approach based on your use case. + +## Prerequisites + +1. CometChat SDK installed and configured. See the [Setup](/sdk/android/setup) guide. +2. CometChat Calls SDK added to your project: + +```gradle +dependencies { + implementation 'com.cometchat:calls-sdk-android:4.3.3' +} +``` + +For detailed setup instructions, see the [Calls SDK Setup](/calls/v4/android/setup) guide. + +## Choose Your Implementation + +CometChat offers three approaches to implement calling: + + + + Complete calling flow with incoming/outgoing call UI, accept/reject functionality, and call notifications. + + + Direct call session management. Use with Ringing flow or for custom call initiation logic. + + + Calls SDK only implementation without the Chat SDK dependency. + + + +### Ringing + +Use this when you need a complete calling experience with: +- Incoming and outgoing call UI +- Call accept/reject/cancel functionality +- Call notifications via push notifications +- Integration with CometChat messaging + +**Flow:** Initiate call → Receiver gets notified → Accept/Reject → Start session + +[Get started with Ringing →](/calls/v4/android/ringing) + +### Call Session + +Use this when you need to: +- Start a call session after the Ringing flow completes +- Implement custom call initiation logic with your own UI +- Join participants to a shared session using a session ID + +**Flow:** Generate token → Start session → Manage call → End session + +[Get started with Call Session →](/calls/v4/android/call-session) + +### Standalone Calling + +Use this when you want: +- Calling functionality without the Chat SDK +- Your own user authentication system +- Minimal SDK footprint + +**Flow:** Get auth token via REST API → Generate call token → Start session + +[Get started with Standalone Calling →](/calls/v4/android/standalone-calling) + +## Features + + + + Record audio and video calls for playback, compliance, or archival purposes. + + + Customize the video call UI layout, participant tiles, and visual appearance. + + + Enable screen sharing and presentation capabilities during calls. + + + Retrieve and display call history including duration, participants, and status. + + + Configure automatic call termination when participants are inactive. + + diff --git a/calls/v4/android/presenter-mode.mdx b/calls/v4/android/presenter-mode.mdx new file mode 100644 index 000000000..d0e41e0a2 --- /dev/null +++ b/calls/v4/android/presenter-mode.mdx @@ -0,0 +1,216 @@ +--- +title: "Presenter Mode" +sidebarTitle: "Presenter Mode" +sdk_version: "4.x" +description: "CometChat Calling SDK v4 - Stable Release - Presenter Mode for Android" +--- + +## Overview + +The Presenter Mode feature allows developers to create a calling service experience in which: + +1. There are one or more users who are presenting their video, audio and/or screen (Maximum 5) +2. Viewers who are consumers of that presentation. (They cannot send their audio, video or screen streams out). +3. The total number of presenters and viewers can go up to 100. +4. Features such as mute/unmute audio, show/hide camera capture, recording, etc. will be enabled only for the Presenter in this mode. +5. Other call participants will not get these features. Hence they act like passive viewers in the call. + +Using this feature developers can create experiences such as: + +1. All hands calls +2. Keynote speeches +3. Webinars +4. Talk shows +5. Online classes and many more... + +About this guide + +This guide demonstrates how to start a presentation into an Android application. Before you begin, we strongly recommend you read the [calling setup guide](/calls/v4/android/setup). + +Before starting a call session you have to generate a call token. You need to call this method for the call token. + +## Start Presentation Session + +The most important class that will be used in the implementation is the `PresentationSettings` class. This class allows you to set the various parameters for the Presentation Mode. In order to set the various parameters of the `PresentationSettings` class, you need to use the `PresentationSettingsBuilder` class. Below are the various options available with the `PresentationSettings` class. + +`PresentationSettingsBuilder` class takes the 1 mandatory parameter as a part of the constructor: + +1. Context of the application. + +You will also need to set the User Type, There are 2 type of users in Presenter Mode, `Presenter` & `Participant` , You can set this `PresentationSettingsBuilder `by using the following method` isPresenter(true/false)` + +A basic example of how to start a Presentation: + + + +```java + RelativeLayout videoContainer; + Context activityContext = this; //Your activity reference + String callToken = ""; //Received on generate token onSuccess + + PresentationSettings presenterSettings = new CometChatCalls.PresentationSettingsBuilder(activityContext) + .setDefaultLayoutEnable(true) + .setIsPresenter(false) + .setEventListener(new CometChatCallsEventsListener() { + @Override + public void onCallEnded() { + } + + @Override + public void onCallEndButtonPressed() { + } + + @Override + public void onUserJoined(RTCUser user) { + } + + @Override + public void onUserLeft(RTCUser user) { + } + + @Override + public void onUserListChanged(ArrayList users) { + } + + @Override + public void onAudioModeChanged(ArrayList devices) { + } + + @Override + public void onCallSwitchedToVideo(CallSwitchRequestInfo callSwitchRequestInfo) { + } + + @Override + public void onUserMuted(RTCMutedUser muteObj) { + } + + @Override + public void onRecordingToggled(RTCRecordingInfo recordingInfo) { + } + + @Override + public void onError(com.cometchat.pro.rtc.exceptions.CometChatException ce) { + } + }) + .build(); + + CometChatCalls.joinPresentation(callToken, presenterSettings, videoContainer, new CometChatCalls.CallbackListener() { + @Override + public void onSuccess(String s) { + Log.e(TAG, "startSession onSuccess"); + } + + @Override + public void onError(com.cometchat.pro.rtc.exceptions.CometChatException e) { + Log.e(TAG, "CallSDKLog >>>: startSession onError: " + e); + } + }); +``` + + + + +```kotlin + val videoContainer: RelativeLayout + val activityContext = this //Your activity reference + val callToken = "" //Received on generate token onSuccess + + val presenterSettings = CometChatCalls.PresentationSettingsBuilder(activityContext) + .setDefaultLayoutEnable(true) + .setIsPresenter(false) + .setEventListener(object : CometChatCallsEventsListener { + override fun onCallEnded() { + } + + override fun onCallEndButtonPressed() { + } + + override fun onUserJoined(user: RTCUser) { + } + + override fun onUserLeft(user: RTCUser) { + } + + override fun onUserListChanged(users: ArrayList) { + } + + override fun onAudioModeChanged(devices: ArrayList) { + } + + override fun onCallSwitchedToVideo(callSwitchRequestInfo: CallSwitchRequestInfo) { + } + + override fun onUserMuted(muteObj: RTCMutedUser) { + } + + override fun onRecordingToggled(recordingInfo: RTCRecordingInfo) { + } + + override fun onError(ce: com.cometchat.pro.rtc.exceptions.CometChatException) { + } + }) + .build() + + + CometChatCalls.joinPresentation(callToken, presenterSettings, videoContainer, object : CometChatCalls.CallbackListener() { + override fun onSuccess(s: String) { + Log.e(TAG, "startSession onSuccess") + } + + override fun onError(e: com.cometchat.pro.rtc.exceptions.CometChatException) { + Log.e(TAG, "CallSDKLog >>>: startSession onError: $e") + } + }) +``` + + + + + +| Parameter | Description | +| ----------------- | ------------------------------------------------------------------------------------------- | +| `activityContext` | The activity in which you want to show the calling view. | +| `videoContainer` | An object of the `RelativeLayout` class in which CometChatCalls can load the calling views. | + +The `CometChatCallsEventsListener` listener provides you with the below callback methods: + +| Callback Method | Description | +| --------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------- | +| `onCallEnded()` | This method is called when the call is successfully ended. The call details can be obtained from the Call object provided. | +| `onCallEndButtonPressed()` | This method is called when the user presses the end call button. | +| `onUserJoined(user: RTCUser)` | This method is called when any other user joins the call. The user details can be obtained from the User object provided. | +| `onUserLeft(user: RTCUser)` | This method is called when a user leaves the call. The details of the user can be obtained from the provided User object. | +| `onUserListChanged(users: ArrayList)` | This method is triggered every time a participant joins or leaves the call, providing the list of users active in the call. | +| `onAudioModeChanged(devices: ArrayList)` | This callback is triggered if any new audio output source is available or becomes unavailable. | +| `onCallSwitchedToVideo(callSwitchRequestInfo: CallSwitchRequestInfo)` | This callback is triggered when an audio call is converted into a video call. | +| `onUserMuted(muteObj: RTCMutedUser)` | This method is triggered when a user is muted in the ongoing call. | +| `onRecordingToggled(recordingInfo: RTCRecordingInfo)` | This method is triggered when a recording starts/stops. | +| `onError(e: CometChatException)` | This method is called when there is some error in establishing the call. | + +## Settings + +The `PresentationSettings` class is the most important class when it comes to the implementation of the Calling feature. This is the class that allows you to customize the overall calling experience. The properties for the call/conference can be set using the `PresentationSettingsBuilder` class. This will eventually give you and object of the `PresentationSettings` class which you can pass to the joinPresentation() method to start the call. + +The **mandatory** parameters that are required to be present for any call/conference to work are: + +Context - context of the activity/application RelativeLayout - A RelativeLayout object in which the calling UI is loaded. The options available for customization of calls are: + +| Setting | Description | +| ------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `setIsPresenter(boolean value)` | If set to `true`, the user will join the call as a presenter. If set to `false`, the user will join the call as an audience member. Default value = `false` | +| `setDefaultLayoutEnable(boolean value)` | If set to `true` enables the default layout for handling the call operations. If set to `false`, it hides the button layout and just displays the Call View. Default value = `true` | +| `setIsAudioOnly(boolean value)` | If set to `true`, the call is supposed to be an audio call. If set to `false`, the call is supposed to be a video call. Default value = `false` | +| `showEndCallButton(boolean value)` | If set to `true`, it displays the End Call Button in the Button Layout. If set to `false`, it hides the End Call Button in the Button Layout. Default value = `true` | +| `showSwitchCameraButton(boolean value)` | If set to `true`, it displays the Switch Camera Button in the Button Layout. If set to `false`, it hides the Switch Camera Button in the Button Layout. Default value = `true` | +| `showMuteAudioButton(boolean value)` | If set to `true`, it displays the Mute Audio Button in the Button Layout. If set to `false`, it hides the Mute Audio Button in the Button Layout. Default value = `true` | +| `showPauseVideoButton(boolean value)` | If set to `true`, it displays the Pause Video Button in the Button Layout. If set to `false`, it hides the Pause Video Button in the Button Layout. Default value = `true` | +| `showAudioModeButton(boolean value)` | If set to `true`, it displays the Audio Mode Button in the Button Layout. If set to `false`, it hides the Audio Mode Button in the Button Layout. Default value = `true` | +| `startWithAudioMuted(boolean value)` | This ensures the call is started with the audio muted if set to `true`. Default value = `false` | +| `startWithVideoMuted(boolean value)` | This ensures the call is started with the video muted if set to `true`. Default value = `false` | +| `setDefaultAudioMode(boolean value)` | This method can be used if you wish to start the call with a specific audio mode. The available options are `CometChatCallsConstants.AUDIO_MODE_SPEAKER`, `CometChatCallsConstants.AUDIO_MODE_EARPIECE`, `CometChatCallsConstants.AUDIO_MODE_BLUETOOTH`, `CometChatCallsConstants.AUDIO_MODE_HEADPHONES`. Default value = `false` | +| `showRecordingButton(boolean value)` | If set to `true`, it displays the Recording Button. If set to `false`, it hides the Recording Button. Default value = `false` | +| `setEventListener(new CometChatCallsEventsListener())` | The `CometChatCallsEventsListener` listener provides you callbacks. | + +In case you wish to achieve a completely customised UI for the Calling experience, you can do so by embedding default android buttons to the screen as per your requirement and then use the below methods to achieve different functionalities for the embedded buttons. + +For the use case where you wish to align your own custom buttons and not use the default layout provided by CometChat you can embed the buttons in your layout and use the below methods to perform the corresponding operations: diff --git a/calls/v4/android/recording.mdx b/calls/v4/android/recording.mdx new file mode 100644 index 000000000..394361e31 --- /dev/null +++ b/calls/v4/android/recording.mdx @@ -0,0 +1,109 @@ +--- +title: "Recording" +sidebarTitle: "Recording" +sdk_version: "4.x" +description: "CometChat Calling SDK v4 - Stable Release - Recording for Android" +--- + +This section will guide you to implement call recording feature for the voice and video calls. + +## Implementation + +Once you have decided to implement [Ringing](/calls/v4/android/ringing) or [Call Session](/calls/v4/android/call-session) calling and followed the steps to implement them. Just few additional listeners and methods will help you quickly implement call recording in your app. + +You need to make changes in the CometChat.startCall method and add the required listeners for recording. Please make sure your callSettings is configured accordingly for [Ringing](/calls/v4/android/ringing) or [Call Session](/calls/v4/android/call-session). + +A basic example of how to make changes to implement recording for a direct/default call: + + + +```java +CallSettings callSettings = new CallSettings.CallSettingsBuilder(CallActivity.this, rlCallView) + .setSessionId(sessionId) + .showCallRecordButton(true) + .build(); + +CometChat.startCall(callSettings, new CometChat.OngoingCallListener() { + @Override + public void onRecordingStarted(User user) { + + } + + @Override + public void onRecordingStopped(User user) { + + } +}); +``` + + + + +```kotlin +val callSettings = CallSettingsBuilder(this@CallActivity, rlCallView) + .setSessionId(sessionId) + .showCallRecordButton(true) + .build() + +CometChat.startCall(callSettings, object : OngoingCallListener { + override fun onRecordingStarted(user: User) {} + override fun onRecordingStopped(user: User) {} +}) +``` + + + + + +## Settings for call recording + +The `CallSettings`class allows you to customise the overall calling experience. The properties for the call/conference can be set using the `CallSettingsBuilder` class. This will eventually give you and object of the `CallSettings` class which you can pass to the `startCall()` method to start the call. + +The options available for recording of calls are: + +| Setting | Description | +| -------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| `showCallRecordButton(boolean showCallRecordButton)` | If set to `true` it displays the Recording button in the button Layout. if set to `false` it hides the Recording button in the button Layout. **Default value = false** | +| `startRecordingOnCallStart(boolean startRecordingOnCallStart)` | If set to `true` call recording will start as soon as the call is started. if set to `false` call recording will not start as soon as the call is started. **Default value = false** | + +### Start Recording + +You can use the startRecording() method to start call recording. + + + +```java +CallManager.getInstance().startRecording(); +``` + + + + +```kotlin +CallManager.getInstance().startRecording() +``` + + + + + +### Stop Recording + +You can use the stopRecording() method to stop call recording. + + + +```java +CallManager.getInstance().stopRecording(); +``` + + + + +```kotlin +CallManager.getInstance().stopRecording() +``` + + + + diff --git a/calls/v4/android/ringing.mdx b/calls/v4/android/ringing.mdx new file mode 100644 index 000000000..7e584b258 --- /dev/null +++ b/calls/v4/android/ringing.mdx @@ -0,0 +1,566 @@ +--- +title: "Ringing" +sidebarTitle: "Ringing" +sdk_version: "4.x" +description: "CometChat Calling SDK v4 - Stable Release - Ringing for Android" +--- + +## Overview + +This section explains how to implement a complete calling workflow with ringing functionality, including incoming/outgoing call UI, call acceptance, rejection, and cancellation. Previously known as **Default Calling**. + + +After the call is accepted, you need to start the call session. See the [Call Session](/calls/v4/android/call-session#start-call-session) guide for details on starting and managing the actual call. + + +**Call Flow:** + +1. **Caller** initiates a call using `initiateCall()` +2. **Receiver** gets notified via `onIncomingCallReceived()` callback +3. **Receiver** can either: + - Accept the call using `acceptCall()` + - Reject the call using `rejectCall()` with status `CALL_STATUS_REJECTED` +4. **Caller** can cancel the call using `rejectCall()` with status `CALL_STATUS_CANCELLED` +5. Once accepted, both participants call `startSession()` to join the call + +## Initiate Call + +The `initiateCall()` method sends a call request to a user or a group. On success, the receiver gets an `onIncomingCallReceived()` callback. + + + +```java +String receiverID = "UID"; +String receiverType = CometChatConstants.RECEIVER_TYPE_USER; +String callType = CometChatConstants.CALL_TYPE_VIDEO; + +Call call = new Call(receiverID, receiverType, callType); + +CometChat.initiateCall(call, new CometChat.CallbackListener() { + @Override + public void onSuccess(Call call) { + // Call initiated, show outgoing call UI + // Store call.getSessionId() for later use + } + + @Override + public void onError(CometChatException e) { + Log.e(TAG, "Call initiation failed: " + e.getMessage()); + } +}); +``` + + + + +```kotlin +val receiverID = "UID" +val receiverType = CometChatConstants.RECEIVER_TYPE_USER +val callType = CometChatConstants.CALL_TYPE_VIDEO + +val call = Call(receiverID, receiverType, callType) + +CometChat.initiateCall(call, object : CometChat.CallbackListener() { + override fun onSuccess(call: Call) { + // Call initiated, show outgoing call UI + // Store call.sessionId for later use + } + + override fun onError(e: CometChatException) { + Log.e(TAG, "Call initiation failed: ${e.message}") + } +}) +``` + + + + +```java +String receiverID = "GUID"; +String receiverType = CometChatConstants.RECEIVER_TYPE_GROUP; +String callType = CometChatConstants.CALL_TYPE_VIDEO; + +Call call = new Call(receiverID, receiverType, callType); + +CometChat.initiateCall(call, new CometChat.CallbackListener() { + @Override + public void onSuccess(Call call) { + // Call initiated, show outgoing call UI + } + + @Override + public void onError(CometChatException e) { + Log.e(TAG, "Call initiation failed: " + e.getMessage()); + } +}); +``` + + + + +```kotlin +val receiverID = "GUID" +val receiverType = CometChatConstants.RECEIVER_TYPE_GROUP +val callType = CometChatConstants.CALL_TYPE_VIDEO + +val call = Call(receiverID, receiverType, callType) + +CometChat.initiateCall(call, object : CometChat.CallbackListener() { + override fun onSuccess(call: Call) { + // Call initiated, show outgoing call UI + } + + override fun onError(e: CometChatException) { + Log.e(TAG, "Call initiation failed: ${e.message}") + } +}) +``` + + + + + +| Parameter | Description | +| -------------- | ------------------------------------------------------------------------------------------------------------------ | +| `receiverID` | The UID or GUID of the recipient | +| `receiverType` | The type of the receiver: `CometChatConstants.RECEIVER_TYPE_USER` or `CometChatConstants.RECEIVER_TYPE_GROUP` | +| `callType` | The type of the call: `CometChatConstants.CALL_TYPE_AUDIO` or `CometChatConstants.CALL_TYPE_VIDEO` | + +On success, a `Call` object is returned containing the call details including a unique `sessionId` required for starting the call session. + +## Call Listeners + +Register the `CallListener` to receive real-time call events. Each listener requires a unique `listenerId` string to prevent duplicate registrations and enable targeted removal. + + + +```java +private String listenerId = "UNIQUE_LISTENER_ID"; + +// Register listener (e.g., in onCreate or onResume) +CometChat.addCallListener(listenerId, new CometChat.CallListener() { + @Override + public void onIncomingCallReceived(Call call) { + // Show incoming call UI + } + + @Override + public void onOutgoingCallAccepted(Call call) { + // Receiver accepted, start the call session + } + + @Override + public void onOutgoingCallRejected(Call call) { + // Receiver rejected, dismiss outgoing call UI + } + + @Override + public void onIncomingCallCancelled(Call call) { + // Caller cancelled, dismiss incoming call UI + } + + @Override + public void onCallEndedMessageReceived(Call call) { + // Call ended by remote participant + } +}); + +// Unregister listener (e.g., in onDestroy or onPause) +CometChat.removeCallListener(listenerId); +``` + + + + +```kotlin +val listenerId = "UNIQUE_LISTENER_ID" + +// Register listener (e.g., in onCreate or onResume) +CometChat.addCallListener(listenerId, object : CometChat.CallListener() { + override fun onIncomingCallReceived(call: Call) { + // Show incoming call UI + } + + override fun onOutgoingCallAccepted(call: Call) { + // Receiver accepted, start the call session + } + + override fun onOutgoingCallRejected(call: Call) { + // Receiver rejected, dismiss outgoing call UI + } + + override fun onIncomingCallCancelled(call: Call) { + // Caller cancelled, dismiss incoming call UI + } + + override fun onCallEndedMessageReceived(call: Call) { + // Call ended by remote participant + } +}) + +// Unregister listener (e.g., in onDestroy or onPause) +CometChat.removeCallListener(listenerId) +``` + + + + + +### Events + +| Event | Description | +| ----- | ----------- | +| `onIncomingCallReceived(call: Call)` | Invoked when an incoming call is received. The `call` contains caller details, session ID, and call type. Display incoming call UI here. | +| `onOutgoingCallAccepted(call: Call)` | Invoked on the caller's device when the receiver accepts. Generate call token and start the session here. | +| `onOutgoingCallRejected(call: Call)` | Invoked on the caller's device when the receiver rejects the call. Dismiss outgoing call UI here. | +| `onIncomingCallCancelled(call: Call)` | Invoked on the receiver's device when the caller cancels before answering. Dismiss incoming call UI here. | +| `onCallEndedMessageReceived(call: Call)` | Invoked when a call ends. The `call` contains final status and duration. Update call history here. | + +## Accept Call + +When an incoming call is received via `onIncomingCallReceived()`, use `acceptCall()` to accept it. On success, start the call session. + + + +```java +String sessionID = call.getSessionId(); // From onIncomingCallReceived + +CometChat.acceptCall(sessionID, new CometChat.CallbackListener() { + @Override + public void onSuccess(Call call) { + // Call accepted, now start the call session + // Generate token and call startSession() + } + + @Override + public void onError(CometChatException e) { + Log.e(TAG, "Accept call failed: " + e.getMessage()); + } +}); +``` + + + + +```kotlin +val sessionID = call.sessionId // From onIncomingCallReceived + +CometChat.acceptCall(sessionID, object : CometChat.CallbackListener() { + override fun onSuccess(call: Call) { + // Call accepted, now start the call session + // Generate token and call startSession() + } + + override fun onError(e: CometChatException) { + Log.e(TAG, "Accept call failed: ${e.message}") + } +}) +``` + + + + + +## Reject Call + +Use `rejectCall()` to reject an incoming call. Set the status to `CALL_STATUS_REJECTED`. + + + +```java +String sessionID = call.getSessionId(); +String status = CometChatConstants.CALL_STATUS_REJECTED; + +CometChat.rejectCall(sessionID, status, new CometChat.CallbackListener() { + @Override + public void onSuccess(Call call) { + // Call rejected, dismiss incoming call UI + } + + @Override + public void onError(CometChatException e) { + Log.e(TAG, "Reject call failed: " + e.getMessage()); + } +}); +``` + + + + +```kotlin +val sessionID = call.sessionId +val status = CometChatConstants.CALL_STATUS_REJECTED + +CometChat.rejectCall(sessionID, status, object : CometChat.CallbackListener() { + override fun onSuccess(call: Call) { + // Call rejected, dismiss incoming call UI + } + + override fun onError(e: CometChatException) { + Log.e(TAG, "Reject call failed: ${e.message}") + } +}) +``` + + + + + +## Cancel Call + +The caller can cancel an outgoing call before it's answered using `rejectCall()` with status `CALL_STATUS_CANCELLED`. + + + +```java +String sessionID = call.getSessionId(); +String status = CometChatConstants.CALL_STATUS_CANCELLED; + +CometChat.rejectCall(sessionID, status, new CometChat.CallbackListener() { + @Override + public void onSuccess(Call call) { + // Call cancelled, dismiss outgoing call UI + } + + @Override + public void onError(CometChatException e) { + Log.e(TAG, "Cancel call failed: " + e.getMessage()); + } +}); +``` + + + + +```kotlin +val sessionID = call.sessionId +val status = CometChatConstants.CALL_STATUS_CANCELLED + +CometChat.rejectCall(sessionID, status, object : CometChat.CallbackListener() { + override fun onSuccess(call: Call) { + // Call cancelled, dismiss outgoing call UI + } + + override fun onError(e: CometChatException) { + Log.e(TAG, "Cancel call failed: ${e.message}") + } +}) +``` + + + + + +## Start Call Session + +Once the call is accepted, both participants need to start the call session. + +**Caller flow:** In the `onOutgoingCallAccepted()` callback, generate a token and start the session. + +**Receiver flow:** In the `acceptCall()` success callback, generate a token and start the session. + + + +```java +String sessionId = call.getSessionId(); +String userAuthToken = CometChat.getUserAuthToken(); + +// Step 1: Generate call token +CometChatCalls.generateToken(sessionId, userAuthToken, new CometChatCalls.CallbackListener() { + @Override + public void onSuccess(GenerateToken token) { + // Step 2: Start the call session + RelativeLayout videoContainer = findViewById(R.id.video_container); + + CallSettings callSettings = new CometChatCalls.CallSettingsBuilder(activity, videoContainer) + .setDefaultLayoutEnable(true) + .setIsAudioOnly(false) + .build(); + + CometChatCalls.startSession(token, callSettings, new CometChatCalls.CallbackListener() { + @Override + public void onSuccess(String s) { + // Call session started + } + + @Override + public void onError(CometChatException e) { + Log.e(TAG, "Start session failed: " + e.getMessage()); + } + }); + } + + @Override + public void onError(CometChatException e) { + Log.e(TAG, "Token generation failed: " + e.getMessage()); + } +}); +``` + + + + +```kotlin +val sessionId = call.sessionId +val userAuthToken = CometChat.getUserAuthToken() + +// Step 1: Generate call token +CometChatCalls.generateToken(sessionId, userAuthToken, object : CometChatCalls.CallbackListener() { + override fun onSuccess(token: GenerateToken) { + // Step 2: Start the call session + val videoContainer: RelativeLayout = findViewById(R.id.video_container) + + val callSettings = CometChatCalls.CallSettingsBuilder(activity, videoContainer) + .setDefaultLayoutEnable(true) + .setIsAudioOnly(false) + .build() + + CometChatCalls.startSession(token, callSettings, object : CometChatCalls.CallbackListener { + override fun onSuccess(s: String) { + // Call session started + } + + override fun onError(e: CometChatException) { + Log.e(TAG, "Start session failed: ${e.message}") + } + }) + } + + override fun onError(e: CometChatException) { + Log.e(TAG, "Token generation failed: ${e.message}") + } +}) +``` + + + + + +For more details on call settings and customization, see the [Call Session](/calls/v4/android/call-session#start-call-session) guide. + +## End Call + +To end an active call in the ringing flow, the process differs based on who ends the call. + +**User who ends the call:** + +When the user presses the end call button, the `onCallEndButtonPressed()` callback is triggered. Inside this callback, call `CometChat.endCall()` to notify other participants. On success, call `CometChat.clearActiveCall()` and `CometChatCalls.endSession()` to release resources. + + + +```java +@Override +public void onCallEndButtonPressed() { + CometChat.endCall(sessionId, new CometChat.CallbackListener() { + @Override + public void onSuccess(Call call) { + CometChat.clearActiveCall(); + CometChatCalls.endSession(); + // Close the calling screen + } + + @Override + public void onError(CometChatException e) { + Log.e(TAG, "End call failed: " + e.getMessage()); + } + }); +} +``` + + + + +```kotlin +override fun onCallEndButtonPressed() { + CometChat.endCall(sessionId, object : CometChat.CallbackListener() { + override fun onSuccess(call: Call) { + CometChat.clearActiveCall() + CometChatCalls.endSession() + // Close the calling screen + } + + override fun onError(e: CometChatException) { + Log.e(TAG, "End call failed: ${e.message}") + } + }) +} +``` + + + + + +**Remote participant** (receives `onCallEnded()` callback): + + + +```java +@Override +public void onCallEnded() { + CometChat.clearActiveCall(); + CometChatCalls.endSession(); + // Close the calling screen +} +``` + + + + +```kotlin +override fun onCallEnded() { + CometChat.clearActiveCall() + CometChatCalls.endSession() + // Close the calling screen +} +``` + + + + + +For more details, see the [End Call Session](/calls/v4/android/call-session#end-call-session) guide. + +## Busy Call Handling + +If the receiver is already on another call, you can reject the incoming call with `CALL_STATUS_BUSY` status. + + + +```java +String sessionID = call.getSessionId(); +String status = CometChatConstants.CALL_STATUS_BUSY; + +CometChat.rejectCall(sessionID, status, new CometChat.CallbackListener() { + @Override + public void onSuccess(Call call) { + // Busy status sent to caller + } + + @Override + public void onError(CometChatException e) { + Log.e(TAG, "Busy rejection failed: " + e.getMessage()); + } +}); +``` + + + + +```kotlin +val sessionID = call.sessionId +val status = CometChatConstants.CALL_STATUS_BUSY + +CometChat.rejectCall(sessionID, status, object : CometChat.CallbackListener() { + override fun onSuccess(call: Call) { + // Busy status sent to caller + } + + override fun onError(e: CometChatException) { + Log.e(TAG, "Busy rejection failed: ${e.message}") + } +}) +``` + + + + diff --git a/calls/v4/android/session-timeout.mdx b/calls/v4/android/session-timeout.mdx new file mode 100644 index 000000000..af96acde0 --- /dev/null +++ b/calls/v4/android/session-timeout.mdx @@ -0,0 +1,35 @@ +--- +title: "Session Timeout Flow" +sidebarTitle: "Session Timeout" +sdk_version: "4.x" +description: "CometChat Calling SDK v4 - Stable Release - Session Timeout for Android" +--- + +Available since v4.1.0 + +## Overview + +CometChat Calls SDK provides a mechanism to handle session timeouts for idle participants. By default, if a participant is alone in a call session for 180 seconds (3 minutes), the following sequence is triggered: + +1. After 120 seconds of being alone in the session, the participant will see a dialog box + +2. This dialog provides options to either: + + * Stay in the call + * Leave immediately + +3. If no action is taken within the next 60 seconds, the call will automatically end + +This feature helps manage inactive call sessions and prevents unnecessary resource usage. The idle timeout period ensures that participants don't accidentally remain in abandoned call sessions. + +### Session Timeout Flow + + + + + + + +The `onSessionTimeout` event is triggered when the call automatically terminates due to session timeout, as illustrated in the diagram above. + + diff --git a/calls/v4/android/setup.mdx b/calls/v4/android/setup.mdx new file mode 100644 index 000000000..362c473f6 --- /dev/null +++ b/calls/v4/android/setup.mdx @@ -0,0 +1,129 @@ +--- +title: "Setup" +sidebarTitle: "Setup" +sdk_version: "4.x" +description: "CometChat Calling SDK v4 - Stable Release - Setup for Android" +--- + +## Get your Application Keys + +[Signup for CometChat](https://app.cometchat.com/signup) and then: + +1. Create a new app +2. Head over to the API Keys section and note the Auth Key, App ID & Region + + +Minimum Requirement + +* Android API Level 21 +* Android API level 24 (in case you are using the calls SDKS) +* Androidx Compatibility + + + +## Add the CometChatCalls Dependency + +### Gradle + +First, add the repository URL to the **project level** `build.gradle` file in the `repositories` block under the `allprojects` section: + + + +```java +allprojects { + repositories { + maven { + url "https://dl.cloudsmith.io/public/cometchat/cometchat/maven/" + } + } +} +``` + + + + + +Then, add CometChatCalls to the app level `build.gradle` file in the `dependencies` section. + + + +```java +dependencies { + implementation 'com.cometchat:calls-sdk-android:4.3.3' +} +``` + + + + + +## Initialize CometChatCalls + +The `init()` method initialises the settings required for CometChatCalls. The`init()`method takes the below parameters: + +context - Your activity context callAppSettings - An object of the CallAppSettings class can be created using the CallAppSettingBuilder class. The appId and region field is mandatory and can be set using the `setAppId()` and `setRegion()` method. The `CallAppSettings` class allows you to configure three settings: + +App ID: CometChat app ID. Region: The region where you app was created. Host(host: string): This method takes the client URL as input and uses this client URL instead of the default client URL. This can be used in case of dedicated deployment of CometChat. We suggest you call the `init()` method on activity onCreate() method. + + + +```java +private Context context = this; +private String appID = "APP_ID"; // Replace with your App ID +private String region = "REGION"; // Replace with your App Region ("eu" or "us") + +CallAppSettings callAppSettings = CallAppSettingBuilder() + .setAppId(appID) + .setRegion(region) + .build(); + +CometChatCalls.init( + context, + callAppSettings, + new CometChatCalls.CallbackListener() { + override public void onSuccess(String successMessage) { + + } + + override public void onError(CometChatException e) { + + } + } +) +``` + + + + +```kotlin +val context:Context = this // Replace with your App Region ("eu" or "us") +val appID:String ="APP_ID" // Replace with your App ID +val region:String ="REGION" // Replace with your App Region ("eu" or "us") + +val callAppSettings = CallAppSettingBuilder() + .setAppId(appID) + .setRegion(region).build() + +CometChatCalls.init( + context, + callAppSettings, + object : CometChatCalls.CallbackListener() { + override fun onSuccess(s: String?) { + + } + + override fun onError(e: CometChatException) { + + } + } +) +``` + + + + + +| Parameter | Description | +| ----------------- | -------------------------------------- | +| `context` | Android context for your application | +| `callAppSettings` | An object of the CallAppSettings class | diff --git a/calls/v4/android/standalone-calling.mdx b/calls/v4/android/standalone-calling.mdx new file mode 100644 index 000000000..77c4cc81f --- /dev/null +++ b/calls/v4/android/standalone-calling.mdx @@ -0,0 +1,590 @@ +--- +title: "Standalone Calling" +sidebarTitle: "Standalone Calling" +sdk_version: "4.x" +description: "CometChat Calling SDK v4 - Stable Release - Standalone Calling for Android" +--- + +## Overview + +This section demonstrates how to implement calling functionality using only the CometChat Calls SDK, without requiring the Chat SDK. This is ideal for applications that need video/audio calling capabilities without the full chat infrastructure. + + +Before you begin, ensure you have completed the [Calls SDK setup](/calls/v4/android/setup). + + +## User Authentication + +To start a call session, you need a user auth token. Since this implementation doesn't use the Chat SDK, you'll need to obtain the auth token via the CometChat REST API. + + +To understand user authentication in CometChat, see the [User Auth](/fundamentals/user-auth) documentation. + + +You can obtain the auth token using one of these REST API endpoints: + +- [Create Auth Token](/rest-api/auth-tokens/create) — Creates a new auth token for a user +- [Get Auth Token](/rest-api/auth-tokens/get) — Retrieves an existing auth token + + +For testing or POC purposes, you can create an auth token directly from the [CometChat Dashboard](https://app.cometchat.com). Navigate to **Users & Groups → Users**, select a user, and click **+ Create Auth Token**. + + +Store the auth token securely in your application for use when generating call tokens. + +## Generate Call Token + +A call token is required for secure access to a call session. Each token is unique to a specific session and user combination, ensuring that only authorized users can join the call. + +You can generate the token just before starting the call, or generate and store it ahead of time based on your use case. + +Use the `generateToken()` method to create a call token: + + + +```java +String sessionId = "UNIQUE_SESSION_ID"; // Generate a unique session ID +String userAuthToken = "USER_AUTH_TOKEN"; // Obtained from REST API + +CometChatCalls.generateToken(sessionId, userAuthToken, new CometChatCalls.CallbackListener() { + @Override + public void onSuccess(GenerateToken generateToken) { + // Use generateToken to start the session + } + + @Override + public void onError(CometChatException e) { + Log.e(TAG, "Token generation failed: " + e.getMessage()); + } +}); +``` + + + + +```kotlin +val sessionId = "UNIQUE_SESSION_ID" // Generate a unique session ID +val userAuthToken = "USER_AUTH_TOKEN" // Obtained from REST API + +CometChatCalls.generateToken(sessionId, userAuthToken, object : CometChatCalls.CallbackListener() { + override fun onSuccess(generateToken: GenerateToken) { + // Use generateToken to start the session + } + + override fun onError(e: CometChatException) { + Log.e(TAG, "Token generation failed: ${e.message}") + } +}) +``` + + + + + +| Parameter | Description | +| --------------- | -------------------------------------------------------------------------- | +| `sessionId` | A unique session ID for the call. Generate this yourself or use a shared ID for participants to join the same call. | +| `userAuthToken` | The user auth token obtained from the CometChat REST API. | + +## Start Call Session + +Use the `startSession()` method to join a call session. This method requires a call token (generated in the previous step) and a `CallSettings` object that configures the call UI and behavior. + +The `CallSettings` class configures the call UI and behavior. Use `CallSettingsBuilder` to create a `CallSettings` instance with the following required parameters: + +| Parameter | Description | +| ------------------ | ------------------------------------------------------------------------ | +| `activityContext` | The activity context where the call UI will be displayed | +| `videoContainer` | A `RelativeLayout` where the calling UI will be rendered | +| `callToken` | The `GenerateToken` object received from `generateToken()` onSuccess | + + + +```java +RelativeLayout videoContainer = findViewById(R.id.video_container); +Context activityContext = this; +GenerateToken callToken; // Received from generateToken() onSuccess + +CallSettings callSettings = new CometChatCalls.CallSettingsBuilder(activityContext, videoContainer) + .setDefaultLayoutEnable(true) + .setIsAudioOnly(false) + .build(); + +CometChatCalls.startSession(callToken, callSettings, new CometChatCalls.CallbackListener() { + @Override + public void onSuccess(String s) { + // Call session started successfully + } + + @Override + public void onError(CometChatException e) { + // Handle error + } +}); +``` + + + + +```kotlin +val videoContainer: RelativeLayout = findViewById(R.id.video_container) +val activityContext: Context = this +val callToken: GenerateToken // Received from generateToken() onSuccess + +val callSettings = CometChatCalls.CallSettingsBuilder(activityContext, videoContainer) + .setDefaultLayoutEnable(true) + .setIsAudioOnly(false) + .build() + +CometChatCalls.startSession(callToken, callSettings, object : CometChatCalls.CallbackListener { + override fun onSuccess(s: String) { + // Call session started successfully + } + + override fun onError(e: CometChatException) { + // Handle error + } +}) +``` + + + + + +### Call Settings + +Configure the call experience using the following `CallSettingsBuilder` methods: + +| Method | Description | +| ------ | ----------- | +| `setDefaultLayoutEnable(boolean)` | Enables or disables the default call UI layout with built-in controls. `true` shows the default layout with end call, mute, video toggle buttons. `false` hides the button layout. Default: `true` | +| `setIsAudioOnly(boolean)` | Sets whether the call is audio-only or audio-video. `true` for audio-only, `false` for audio-video. Default: `false` | +| `setEventListener(CometChatCallsEventsListener)` | Sets the listener to receive call events. See [Call Listeners](#call-listeners) for available callbacks. | +| `setMode(String)` | Sets the call UI layout mode. Available: `MODE_DEFAULT` (grid), `MODE_SPOTLIGHT` (active speaker), `MODE_SINGLE` (one participant). Default: `MODE_DEFAULT` | +| `setAvatarMode(String)` | Sets how avatars are displayed when video is off. Available: `AVATAR_MODE_CIRCLE`, `AVATAR_MODE_SQUARE`, `AVATAR_MODE_FULLSCREEN`. Default: `AVATAR_MODE_CIRCLE` | +| `setDefaultAudioMode(String)` | Sets the initial audio output device. Available: `AUDIO_MODE_SPEAKER`, `AUDIO_MODE_EARPIECE`, `AUDIO_MODE_BLUETOOTH`, `AUDIO_MODE_HEADPHONES` | +| `startWithAudioMuted(boolean)` | Starts the call with the microphone muted. Default: `false` | +| `startWithVideoMuted(boolean)` | Starts the call with the camera turned off. Default: `false` | +| `showEndCallButton(boolean)` | Shows or hides the end call button in the default layout. Default: `true` | +| `showSwitchCameraButton(boolean)` | Shows or hides the switch camera button (front/back). Default: `true` | +| `showMuteAudioButton(boolean)` | Shows or hides the mute audio button. Default: `true` | +| `showPauseVideoButton(boolean)` | Shows or hides the pause video button. Default: `true` | +| `showAudioModeButton(boolean)` | Shows or hides the audio mode selection button. Default: `true` | +| `showSwitchToVideoCallButton(boolean)` | Shows or hides the button to upgrade an audio call to video. Default: `true` | +| `showRecordingButton(boolean)` | Shows or hides the recording button. Default: `false` | +| `autoRecordOnCallStart(boolean)` | Automatically starts recording when the call begins. Default: `false` | +| `enableVideoTileClick(boolean)` | Enables or disables click interactions on video tiles in Spotlight mode. Default: `true` | +| `enableVideoTileDrag(boolean)` | Enables or disables drag functionality for video tiles in Spotlight mode. Default: `true` | +| `setMainVideoContainerSetting(MainVideoContainerSetting)` | Customizes the main video container. See [Video View Customization](/calls/v4/android/video-view-customisation). | +| `setIdleTimeoutPeriod(int)` | Sets idle timeout in seconds. Warning appears 60 seconds before auto-termination. Default: `180` seconds. *v4.1.0+* | + +## Call Listeners + +The `CometChatCallsEventsListener` interface provides real-time callbacks for call session events, including participant changes, call state updates, and error conditions. Register this listener in any activity or fragment where you need to respond to call events. + +Each listener requires a unique `listenerId` string. This ID is used to: +- **Prevent duplicate registrations** — Re-registering with the same ID replaces the existing listener +- **Enable targeted removal** — Remove specific listeners without affecting others + + + +```java +private String listenerId = "UNIQUE_LISTENER_ID"; + +// Register listener (e.g., in onCreate or onResume) +CometChatCalls.addCallsEventListeners(listenerId, new CometChatCallsEventsListener() { + @Override + public void onCallEnded() { + // Call ended, close the calling screen + } + + @Override + public void onSessionTimeout() { + // Session timed out due to inactivity + } + + @Override + public void onCallEndButtonPressed() { + // User pressed end call button + CometChatCalls.endSession(); + } + + @Override + public void onUserJoined(RTCUser user) { + // A participant joined the call + } + + @Override + public void onUserLeft(RTCUser user) { + // A participant left the call + } + + @Override + public void onUserListChanged(ArrayList users) { + // Participant list updated + } + + @Override + public void onAudioModeChanged(ArrayList devices) { + // Available audio devices changed + } + + @Override + public void onCallSwitchedToVideo(CallSwitchRequestInfo info) { + // Call upgraded from audio to video + } + + @Override + public void onUserMuted(RTCMutedUser muteObj) { + // A participant's mute state changed + } + + @Override + public void onRecordingToggled(RTCRecordingInfo info) { + // Recording started or stopped + } + + @Override + public void onError(CometChatException ce) { + // An error occurred + } +}); + +// Unregister listener (e.g., in onDestroy or onPause) +CometChatCalls.removeCallsEventListeners(listenerId); +``` + + + + +```kotlin +val listenerId = "UNIQUE_LISTENER_ID" + +// Register listener (e.g., in onCreate or onResume) +CometChatCalls.addCallsEventListeners(listenerId, object : CometChatCallsEventsListener { + override fun onCallEnded() { + // Call ended, close the calling screen + } + + override fun onSessionTimeout() { + // Session timed out due to inactivity + } + + override fun onCallEndButtonPressed() { + // User pressed end call button + CometChatCalls.endSession() + } + + override fun onUserJoined(user: RTCUser) { + // A participant joined the call + } + + override fun onUserLeft(user: RTCUser) { + // A participant left the call + } + + override fun onUserListChanged(users: ArrayList) { + // Participant list updated + } + + override fun onAudioModeChanged(devices: ArrayList?) { + // Available audio devices changed + } + + override fun onCallSwitchedToVideo(info: CallSwitchRequestInfo) { + // Call upgraded from audio to video + } + + override fun onUserMuted(muteObj: RTCMutedUser) { + // A participant's mute state changed + } + + override fun onRecordingToggled(info: RTCRecordingInfo) { + // Recording started or stopped + } + + override fun onError(ce: CometChatException?) { + // An error occurred + } +}) + +// Unregister listener (e.g., in onDestroy or onPause) +CometChatCalls.removeCallsEventListeners(listenerId) +``` + + + + + +### Events + +| Event | Description | +| ----- | ----------- | +| `onCallEnded()` | Invoked when the call session terminates for a 1:1 call. Both participants receive this callback. Only fires for calls with exactly 2 participants. | +| `onSessionTimeout()` | Invoked when the call is auto-terminated due to inactivity (default: 180 seconds). Warning appears 60 seconds before. *v4.1.0+* | +| `onCallEndButtonPressed()` | Invoked when the local user taps the end call button. Call `CometChatCalls.endSession()` to leave the session. | +| `onUserJoined(user: RTCUser)` | Invoked when a remote participant joins. The `user` contains UID, name, and avatar. | +| `onUserLeft(user: RTCUser)` | Invoked when a remote participant leaves the call session. | +| `onUserListChanged(users: ArrayList)` | Invoked whenever the participant list changes (join or leave events). | +| `onAudioModeChanged(devices: ArrayList)` | Invoked when available audio devices change (e.g., Bluetooth connected). | +| `onCallSwitchedToVideo(info: CallSwitchRequestInfo)` | Invoked when an audio call is upgraded to a video call. | +| `onUserMuted(muteObj: RTCMutedUser)` | Invoked when a participant's mute state changes. | +| `onRecordingToggled(info: RTCRecordingInfo)` | Invoked when call recording starts or stops. | +| `onError(e: CometChatException)` | Invoked when an error occurs during the call session. | + +## End Call Session + +To end the call session and release all media resources (camera, microphone, network connections), call `CometChatCalls.endSession()` in the `onCallEndButtonPressed()` callback. + + + +```java +// In onCallEndButtonPressed() callback +CometChatCalls.endSession(); +// Close the calling screen +``` + + + + +```kotlin +// In onCallEndButtonPressed() callback +CometChatCalls.endSession() +// Close the calling screen +``` + + + + + +## Methods + +These methods are available for performing custom actions during an active call session. Use them to build custom UI controls or implement specific behaviors based on your use case. + + +These methods can only be called when a call session is active. + + +### Switch Camera + +Toggles between the front and rear camera during a video call. Useful for allowing users to switch their camera view without leaving the call. + + + +```java +CometChatCalls.switchCamera(); +``` + + + + +```kotlin +CometChatCalls.switchCamera() +``` + + + + + +### Mute Audio + +Controls the local audio stream transmission. When muted, other participants cannot hear the local user. + +- `true` — Mutes the microphone, stops transmitting audio +- `false` — Unmutes the microphone, resumes audio transmission + + + +```java +CometChatCalls.muteAudio(true); +``` + + + + +```kotlin +CometChatCalls.muteAudio(true) +``` + + + + + +### Pause Video + +Controls the local video stream transmission. When paused, other participants see a frozen frame or avatar instead of live video. + +- `true` — Pauses the camera, stops transmitting video +- `false` — Resumes the camera, continues video transmission + + + +```java +CometChatCalls.pauseVideo(true); +``` + + + + +```kotlin +CometChatCalls.pauseVideo(true) +``` + + + + + +### Set Audio Mode + +Routes the audio output to a specific device. Use this to let users choose between speaker, earpiece, or connected audio devices. + +**Available modes:** +- `CometChatCallsConstants.AUDIO_MODE_SPEAKER` — Device speaker (loudspeaker) +- `CometChatCallsConstants.AUDIO_MODE_EARPIECE` — Phone earpiece +- `CometChatCallsConstants.AUDIO_MODE_BLUETOOTH` — Connected Bluetooth device +- `CometChatCallsConstants.AUDIO_MODE_HEADPHONES` — Wired headphones + + + +```java +String audioMode = CometChatCallsConstants.AUDIO_MODE_EARPIECE; +CometChatCalls.setAudioMode(audioMode); +``` + + + + +```kotlin +val audioMode = CometChatCallsConstants.AUDIO_MODE_EARPIECE +CometChatCalls.setAudioMode(audioMode) +``` + + + + + +### Enter PIP Mode + +Enters Picture-in-Picture mode, rendering the call view in a small floating window. This allows users to multitask while staying on the call. Ensure your app has PIP support enabled in the manifest. + + + +```java +CometChatCalls.enterPIPMode(); +``` + + + + +```kotlin +CometChatCalls.enterPIPMode() +``` + + + + + +### Exit PIP Mode + +Exits Picture-in-Picture mode and returns the call view to its original full-screen or embedded layout. + + + +```java +CometChatCalls.exitPIPMode(); +``` + + + + +```kotlin +CometChatCalls.exitPIPMode() +``` + + + + + +### Switch To Video Call + +Upgrades an ongoing audio call to a video call. This enables the camera and starts transmitting video to other participants. The remote participant receives the `onCallSwitchedToVideo()` callback. + + + +```java +CometChatCalls.switchToVideoCall(); +``` + + + + +```kotlin +CometChatCalls.switchToVideoCall() +``` + + + + + +### Start Recording + +Starts recording the call session. The recording is saved to the CometChat server and can be accessed later. All participants receive the `onRecordingToggled()` callback when recording starts. + + + +```java +CometChatCalls.startRecording(); +``` + + + + +```kotlin +CometChatCalls.startRecording() +``` + + + + + +### Stop Recording + +Stops an ongoing call recording. All participants receive the `onRecordingToggled()` callback when recording stops. + + + +```java +CometChatCalls.stopRecording(); +``` + + + + +```kotlin +CometChatCalls.stopRecording() +``` + + + + + +### End Call + +Terminates the current call session and releases all media resources (camera, microphone, network connections). After calling this method, the call view should be closed. + + + +```java +CometChatCalls.endSession(); +``` + + + + +```kotlin +CometChatCalls.endSession() +``` + + + + diff --git a/calls/v4/android/video-view-customisation.mdx b/calls/v4/android/video-view-customisation.mdx new file mode 100644 index 000000000..b0b6db7a4 --- /dev/null +++ b/calls/v4/android/video-view-customisation.mdx @@ -0,0 +1,57 @@ +--- +title: "Video View Customisation" +sidebarTitle: "Video View Customisation" +sdk_version: "4.x" +description: "CometChat Calling SDK v4 - Stable Release - Video View Customisation for Android" +--- + +This section will guide you to customise the main video container. + +## Implementation + +Once you have decided to implement [Ringing](/calls/v4/android/ringing) or [Call Session](/calls/v4/android/call-session) calling and followed the steps to implement them. Just few additional methods will help you quickly customize the main video container. + +Please make sure your callSettings is configured accordingly for [Ringing](/calls/v4/android/ringing) or [Call Session](/calls/v4/android/call-session). + +## Main Video Container Setting + +The `MainVideoContainerSetting` Class is the required in case you want to customise the main video view. You need to pass the Object of the `MainVideoContainerSetting` Class in the `setMainVideoContainerSetting()` method of the `CallSettingsBuilder`. + +| Setting | Description | +| --------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `setMainVideoAspectRatio(String aspectRatio)` | This method is used to set the aspect ratio of main video. The default value is `CometChatCallsConstants.ASPECT_RATIO_CONTAIN`

Possible Values:
1. `CometChatCallsConstants.ASPECT_RATIO_CONTAIN`
2. `CometChatCallsConstants.ASPECT_RATIO_COVER` | +| `setFullScreenButtonParams(String position, Boolean visibility)` | This method is used to set the position & visibility parameter of the full screen button. By default the full screen button is visible in the `CometChatCallsConstants.POSITION_BOTTOM_RIGHT` position.

Possible Values for position:
1. `CometChatCallsConstants.POSITION_TOP_LEFT`
2. `CometChatCallsConstants.POSITION_TOP_RIGHT`
3. `CometChatCallsConstants.POSITION_BOTTOM_LEFT`
4. `CometChatCallsConstants.POSITION_BOTTOM_RIGHT`

Possible Values for visibility:
1. `true`
2. `false` | +| `setNameLabelParams(String position, Boolean visibility, String backgroundColor)` | This method is used to set the position, visibility & background color of the name label. By default the name label is visible in the `CometChatCallsConstants.POSITION_BOTTOM_LEFT` position with a background-color `#333333`

Possible Values for position:
1. `CometChatCallsConstants.POSITION_TOP_LEFT`
2. `CometChatCallsConstants.POSITION_TOP_RIGHT`
3. `CometChatCallsConstants.POSITION_BOTTOM_LEFT`
4. `CometChatCallsConstants.POSITION_BOTTOM_RIGHT`

Possible Values for visibility:
1. `true`
2. `false` | +| `setZoomButtonParams(String position, Boolean visibility)` | This method is used to set the position, visibility of the zoom button. By default the zoom button is visible in the `CometChatCallsConstants.POSITION_BOTTOM_RIGHT` position.

Possible Values for position:
1. `CometChatCallsConstants.POSITION_TOP_LEFT`
2. `CometChatCallsConstants.POSITION_TOP_RIGHT`
3. `CometChatCallsConstants.POSITION_BOTTOM_LEFT`
4. `CometChatCallsConstants.POSITION_BOTTOM_RIGHT`

Possible Values for visibility:
1. `true`
2. `false` | +| `setUserListButtonParams(String position, Boolean visibility)` | This method is used to set the position, visibility of the user list button. By default the user list button is visible in the `CometChatCallsConstants.POSITION_BOTTOM_RIGHT` position.

Possible Values for position:
1. `CometChatCallsConstants.POSITION_TOP_LEFT`
2. `CometChatCallsConstants.POSITION_TOP_RIGHT`
3. `CometChatCallsConstants.POSITION_BOTTOM_LEFT`
4. `CometChatCallsConstants.POSITION_BOTTOM_RIGHT`

Possible Values for visibility:
1. `true`
2. `false` | + +Example: + + + +```java +MainVideoContainerSetting videoSettings = new MainVideoContainerSetting(); + +videoSettings.setMainVideoAspectRatio(CometChatCallsConstants.ASPECT_RATIO_CONTAIN); +videoSettings.setFullScreenButtonParams(CometChatCallsConstants.POSITION_BOTTOM_RIGHT, true); +videoSettings.setNameLabelParams(CometChatCallsConstants.POSITION_BOTTOM_LEFT, true, "#333333"); +videoSettings.setZoomButtonParams(CometChatCallsConstants.POSITION_BOTTOM_RIGHT, true); +videoSettings.setUserListButtonParams(CometChatCallsConstants.POSITION_BOTTOM_RIGHT, true); +``` + + + + +```kotlin +val videoSettings = MainVideoContainerSetting() + +videoSettings.mainVideoAspectRatio = CometChatCallsConstants.ASPECT_RATIO_CONTAIN +videoSettings.setFullScreenButtonParams(CometChatCallsConstants.POSITION_BOTTOM_RIGHT, true) +videoSettings.setNameLabelParams(CometChatCallsConstants.POSITION_BOTTOM_LEFT, true, "#333333") +videoSettings.setZoomButtonParams(CometChatCallsConstants.POSITION_BOTTOM_RIGHT, true) +videoSettings.setUserListButtonParams(CometChatCallsConstants.POSITION_BOTTOM_RIGHT, true) +``` + + + + diff --git a/calls/v4/flutter/call-logs.mdx b/calls/v4/flutter/call-logs.mdx new file mode 100644 index 000000000..bff32890e --- /dev/null +++ b/calls/v4/flutter/call-logs.mdx @@ -0,0 +1,93 @@ +--- +title: "Call Logs" +sidebarTitle: "Call Logs" +sdk_version: "4.x" +description: "CometChat Calling SDK v4 - Stable Release - Call Logs for Flutter" +--- + +## Overview + +CometChat's Flutter Call SDK provides a comprehensive way to integrate call logs into your application, enhancing your user experience by allowing users to effortlessly keep track of their communication history. Call logs provide crucial information such as call duration, participants, and more. + +This feature not only allows users to review their past interactions but it also serves as an effective tool to revisit important conversation details. With the flexibility of fetching call logs, filtering them according to specific parameters, and obtaining detailed information of individual calls, application developers can use this feature to build a more robust and interactive communication framework. + +In the following sections, we will guide you through the process of working with call logs, offering a deeper insight into how to optimally use this feature in your Flutter application. + +## Fetching Call Logs + +To fetch all call logs in your Flutter application, you should use the `CallLogRequestBuilder`, This builder allows you to customize the call logs fetching process according to your needs. + +```dart +CallLogRequest callAppSettings = (CallLogRequestBuilder() + ..authToken = AppConfig.userAuthToken + ..limit = 30 + ..callCategory = CometChatCallsConstants.callCategoryCall +).build(); +``` + +`CallLogRequestBuilder` has the following settings available. + +| Setting | Description | +| ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `int limit` | Specifies the number of call logs to fetch. | +| `String callType` | Sets the type of calls to fetch (audio or video). It accepts following String's as a parameter `"video"`, `"audio"` & `"audio/video"` | +| `String callStatus` | Sets the status of calls to fetch (initiated, ongoing, etc.). It accepts following String's as a parameter `"ongoing"`, `"busy"`, `"rejected"`, `"cancelled"`, `"ended"`, `"missed"`, `"initiated"`, `"unanswered"` | +| `bool hasRecording` | Sets whether to fetch calls that have recordings. | +| `String callCategory` | Sets the category of calls to fetch (call or meet). It accepts following String's as a parameter `"call"` & `"meet"` | +| `String callDirection` | Sets the direction of calls to fetch. It accepts following String's as a parameter `"incoming"` & `"outgoing"` | +| `String uid` | Sets the UID of the user whose call logs to fetch. | +| `String guid` | Sets the GUID of the user whose call logs to fetch. | +| `String authToken` | Sets the Auth token of the logged-in user. | + +### Fetch Next + +The **`fetchNext()`** method retrieves the next set of call logs. + +```dart +CallLogRequest callAppSettings = (CallLogRequestBuilder() + ..authToken = CometChat.getUserAuthToken() + ..limit = 30 + ..callCategory = CometChatCallsConstants.callCategoryCall +).build(); + +callAppSettings.fetchNext(onSuccess: (List callLogs){ + debugPrint("Success"); +}, onError: (CometChatCallsException e) { + debugPrint("Error"); +}); +``` + +### Fetch Previous + +The **`fetchPrevious()`** method retrieves the previous set of call logs. + +```dart +CallLogRequest callAppSettings = (CallLogRequestBuilder() + ..authToken = CometChat.getUserAuthToken() + ..limit = 30 + ..callCategory = CometChatCallsConstants.callCategoryCall +).build(); + +callAppSettings.fetchPrevious(onSuccess: (List callLogs){ + debugPrint("Success"); +}, onError: (CometChatCallsException e) { + debugPrint("Error"); +}); +``` + +## Get Call Details + +To retrieve the specific details of a call, use the **`getCallDetails()`** method. This method requires the Auth token of the logged-in user and the session ID along with a callback listener. Upon success, this function will return a list of call details, as multiple calls can be initiated for one session ID. + +```dart +String sessionID = "SESSION_ID"; +String userAuthToken = CometChat.getUserAuthToken(); + +CometChatCalls.getCallDetails(sessionID, userAuthToken, onSuccess: (List callLogs) { + debugPrint("Success"); +}, onError: (CometChatCallsException e) { + debugPrint("Error"); +}); +``` + +Note: Replace **`"SESSION_ID"`** with the ID of the session you are interested in. diff --git a/calls/v4/flutter/call-session.mdx b/calls/v4/flutter/call-session.mdx new file mode 100644 index 000000000..3c0a83b44 --- /dev/null +++ b/calls/v4/flutter/call-session.mdx @@ -0,0 +1,461 @@ +--- +title: "Call Session" +sidebarTitle: "Call Session" +sdk_version: "4.x" +description: "CometChat Calling SDK v4 - Stable Release - Call Session for Flutter" +--- + +## Overview + +This section demonstrates how to start a call session in a Flutter application. Previously known as **Direct Calling**. + +Before you begin, we strongly recommend you read the [calling setup guide](/calls/v4/flutter/setup). + + + +If you want to implement a complete calling experience with ringing functionality (incoming/outgoing call UI), follow the [Ringing](/calls/v4/flutter/ringing) guide first. Once the call is accepted, return here to start the call session. + + + +## Generate Call Token + +A call token is required for secure access to a call session. Each token is unique to a specific session and user combination, ensuring that only authorized users can join the call. + +You can generate the token just before starting the call, or generate and store it ahead of time based on your use case. + +Use the `generateToken()` method to create a call token: + +```dart +String sessionId = "SESSION_ID"; // Random or from Call object in ringing flow +String userAuthToken = await CometChat.getUserAuthToken(); // Logged in user auth token + +CometChatCalls.generateToken( + sessionId, + userAuthToken, + onSuccess: (GenerateToken generateToken) { + debugPrint("Call token generated: ${generateToken.token}"); + // Use generateToken to start the session + }, + onError: (CometChatCallsException e) { + debugPrint("Token generation failed: $e"); + }, +); +``` + +| Parameter | Description | +| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------ | +| `sessionId` | The unique random session ID. In case you are using the ringing flow, the session ID is available in the `Call` object. | +| `userAuthToken` | The user auth token is the logged-in user auth token which you can get by calling `CometChat.getUserAuthToken()` | + +## Start Call Session + +Use the `startSession()` method to join a call session. This method requires a call token (generated in the previous step) and a `CallSettings` object that configures the call UI and behavior. + +```dart +String generatedToken = ""; // Token from generateToken() onSuccess + +CallSettings callSettings = (CallSettingsBuilder() + ..defaultLayout = true + ..setAudioOnlyCall = false + ..listener = this // CometChatCallsEventsListener +).build(); + +CometChatCalls.startSession( + generatedToken, + callSettings, + onSuccess: (Widget? callingWidget) { + debugPrint("Call session started"); + // Display the callingWidget in your UI + }, + onError: (CometChatCallsException e) { + debugPrint("Start session failed: $e"); + }, +); +``` + +### Call Settings + +Configure the call experience using the following `CallSettingsBuilder` properties: + +| Property | Description | +| -------- | ----------- | +| `defaultLayout` | Enables or disables the default call UI layout with built-in controls. `true` shows the default layout. `false` hides the button layout. Default: `true` | +| `setAudioOnlyCall` | Sets whether the call is audio-only or audio-video. `true` for audio-only, `false` for audio-video. Default: `false` | +| `listener` | Sets the `CometChatCallsEventsListener` to receive call events. See [Call Listeners](#call-listeners). | +| `setMode` | Sets the call UI layout mode. Available: `Mode.MODE_DEFAULT`, `Mode.MODE_SPOTLIGHT`, `Mode.MODE_SINGLE`. Default: `Mode.MODE_SPOTLIGHT` | +| `setAvatarMode` | Sets how avatars are displayed when video is off. Available: `AvatarModes.AVATAR_MODE_CIRCLE`, `AvatarModes.AVATAR_MODE_SQUARE`, `AvatarModes.AVATAR_MODE_FULLSCREEN`. Default: `AVATAR_MODE_CIRCLE` | +| `setDefaultAudioMode` | Sets the initial audio output device. Available: `AudioModes.AUDIO_MODE_SPEAKER`, `AudioModes.AUDIO_MODE_EARPIECE`, `AudioModes.AUDIO_MODE_BLUETOOTH`, `AudioModes.AUDIO_MODE_HEADPHONES` | +| `startWithAudioMuted` | Starts the call with the microphone muted. Default: `false` | +| `startWithVideoMuted` | Starts the call with the camera turned off. Default: `false` | +| `showEndCallButton` | Shows or hides the end call button in the default layout. Default: `true` | +| `showSwitchCameraButton` | Shows or hides the switch camera button (front/back). Default: `true` | +| `showMuteAudioButton` | Shows or hides the mute audio button. Default: `true` | +| `showPauseVideoButton` | Shows or hides the pause video button. Default: `true` | +| `showAudioModeButton` | Shows or hides the audio mode selection button. Default: `true` | +| `showSwitchToVideoCallButton` | Shows or hides the button to upgrade an audio call to video. Default: `true` | +| `showCallRecordButton` | Shows or hides the recording button. Default: `false` | +| `startRecordingOnCallStart` | Automatically starts recording when the call begins. Default: `false` | +| `enableVideoTileClick` | Enables or disables click interactions on video tiles in Spotlight mode. Default: `true` | +| `enableVideoTileDrag` | Enables or disables drag functionality for video tiles in Spotlight mode. Default: `true` | +| `setMainVideoContainerSetting` | Customizes the main video container. See [Video View Customization](/calls/v4/flutter/video-view-customisation). | +| `setIdleTimeoutPeriod` | Sets idle timeout in seconds. Warning appears 60 seconds before auto-termination. Default: `180` seconds. *v4.1.0+* | + +## Call Listeners + +The `CometChatCallsEventsListener` provides real-time callbacks for call session events, including participant changes, call state updates, and error conditions. + +Each listener requires a unique `listenerId` string. This ID is used to: +- **Prevent duplicate registrations** — Re-registering with the same ID replaces the existing listener +- **Enable targeted removal** — Remove specific listeners without affecting others + +```dart +String listenerId = "UNIQUE_LISTENER_ID"; + +class YourClassName extends State with CometChatCallsEventsListener { + @override + void initState() { + super.initState(); + CometChatCalls.addCallsEventListeners(listenerId, this); + } + + @override + void dispose() { + super.dispose(); + CometChatCalls.removeCallsEventListeners(listenerId); + } + + @override + void onCallEnded() { + debugPrint("Call ended"); + } + + @override + void onCallEndButtonPressed() { + debugPrint("End call button pressed"); + // Handle end call - see End Call Session section + } + + @override + void onSessionTimeout() { + debugPrint("Session timed out"); + } + + @override + void onUserJoined(RTCUser user) { + debugPrint("User joined: ${user.name}"); + } + + @override + void onUserLeft(RTCUser user) { + debugPrint("User left: ${user.name}"); + } + + @override + void onUserListChanged(List users) { + debugPrint("User list updated: ${users.length} participants"); + } + + @override + void onAudioModeChanged(List devices) { + debugPrint("Audio modes changed"); + } + + @override + void onCallSwitchedToVideo(CallSwitchRequestInfo info) { + debugPrint("Call switched to video"); + } + + @override + void onUserMuted(RTCMutedUser muteObj) { + debugPrint("User muted"); + } + + @override + void onRecordingToggled(RTCRecordingInfo info) { + debugPrint("Recording toggled"); + } + + @override + void onError(CometChatCallsException e) { + debugPrint("Call error: $e"); + } +} +``` + +### Events + +| Event | Description | +| ----- | ----------- | +| `onCallEnded()` | Invoked when the call session terminates for a 1:1 call. Both participants receive this callback. Only fires for calls with exactly 2 participants. | +| `onSessionTimeout()` | Invoked when the call is auto-terminated due to inactivity (default: 180 seconds). Warning appears 60 seconds before. *v4.1.0+* | +| `onCallEndButtonPressed()` | Invoked when the local user taps the end call button. For ringing flow, call `CometChat.endCall()`. For standalone, call `CometChatCalls.endSession()`. | +| `onUserJoined(RTCUser user)` | Invoked when a remote participant joins. The `user` contains UID, name, and avatar. | +| `onUserLeft(RTCUser user)` | Invoked when a remote participant leaves the call session. | +| `onUserListChanged(List users)` | Invoked whenever the participant list changes (join or leave events). | +| `onAudioModeChanged(List devices)` | Invoked when available audio devices change (e.g., Bluetooth connected). | +| `onCallSwitchedToVideo(CallSwitchRequestInfo info)` | Invoked when an audio call is upgraded to a video call. | +| `onUserMuted(RTCMutedUser muteObj)` | Invoked when a participant's mute state changes. | +| `onRecordingToggled(RTCRecordingInfo info)` | Invoked when call recording starts or stops. | +| `onError(CometChatCallsException e)` | Invoked when an error occurs during the call session. | + +## End Call Session + +Ending a call session properly is essential to release media resources (camera, microphone, network connections) and update call state across all participants. The termination process differs based on whether you're using the Ringing flow or Session Only flow. + +### Ringing Flow + +When using the [Ringing](/calls/v4/flutter/ringing) flow, you must coordinate between the CometChat Chat SDK and the Calls SDK to properly terminate the call and notify all participants. + + + +The Ringing flow requires calling methods from both the Chat SDK (`CometChat.endCall()`) and the Calls SDK (`CometChatCalls.endSession()`) to ensure proper call termination and participant notification. + + + + + + + +**User who initiates the end call:** + +When the user presses the end call button in the UI, the `onCallEndButtonPressed()` callback is triggered. You must call `CometChat.endCall()` inside this callback to properly terminate the call and notify other participants. On success, call `CometChat.clearActiveCall()` and `CometChatCalls.endSession()` to release resources. + +```dart +@override +void onCallEndButtonPressed() { + CometChat.endCall( + sessionId, + onSuccess: (Call call) { + debugPrint("Call ended successfully"); + CometChat.clearActiveCall(); + CometChatCalls.endSession( + onSuccess: (success) { + debugPrint("Session ended"); + // Close the calling screen + }, + onError: (e) { + debugPrint("End session failed: $e"); + }, + ); + }, + onError: (CometChatException e) { + debugPrint("End call failed: $e"); + }, + ); +} +``` + +**Remote participant** (receives the `onCallEnded()` callback): + +Call `CometChat.clearActiveCall()` to clear the local call state, then call `CometChatCalls.endSession()` to release media resources. + +```dart +@override +void onCallEnded() { + CometChat.clearActiveCall(); + CometChatCalls.endSession( + onSuccess: (success) { + debugPrint("Session ended"); + // Close the calling screen + }, + onError: (e) { + debugPrint("End session failed: $e"); + }, + ); +} +``` + +### Session Only Flow + +When using the Session Only flow (direct call without ringing), you only need to call the Calls SDK method to end the session. There's no need to notify the Chat SDK since no call signaling was involved. + +Call `CometChatCalls.endSession()` in the `onCallEndButtonPressed()` callback to release all media resources and disconnect from the call session. + +```dart +@override +void onCallEndButtonPressed() { + CometChatCalls.endSession( + onSuccess: (success) { + debugPrint("Session ended"); + // Close the calling screen + }, + onError: (e) { + debugPrint("End session failed: $e"); + }, + ); +} +``` + +## Methods + +These methods are available for performing custom actions during an active call session. Use them to build custom UI controls or implement specific behaviors based on your use case. + + +These methods can only be called when a call session is active. + + +### Switch Camera + +Toggles between the front and rear camera during a video call. Useful for allowing users to switch their camera view without leaving the call. + +```dart +CometChatCalls.switchCamera( + onSuccess: (success) { + debugPrint("Camera switched"); + }, + onError: (e) { + debugPrint("Switch camera failed: $e"); + }, +); +``` + +### Mute Audio + +Controls the local audio stream transmission. When muted, other participants cannot hear the local user. + +- `true` — Mutes the microphone, stops transmitting audio +- `false` — Unmutes the microphone, resumes audio transmission + +```dart +CometChatCalls.muteAudio( + true, + onSuccess: (success) { + debugPrint("Audio muted"); + }, + onError: (e) { + debugPrint("Mute audio failed: $e"); + }, +); +``` + +### Pause Video + +Controls the local video stream transmission. When paused, other participants see a frozen frame or avatar instead of live video. + +- `true` — Pauses the camera, stops transmitting video +- `false` — Resumes the camera, continues video transmission + +```dart +CometChatCalls.pauseVideo( + true, + onSuccess: (success) { + debugPrint("Video paused"); + }, + onError: (e) { + debugPrint("Pause video failed: $e"); + }, +); +``` + +### Set Audio Mode + +Routes the audio output to a specific device. Use this to let users choose between speaker, earpiece, or connected audio devices. + +**Available modes:** +- `AudioModes.AUDIO_MODE_SPEAKER` — Device speaker (loudspeaker) +- `AudioModes.AUDIO_MODE_EARPIECE` — Phone earpiece +- `AudioModes.AUDIO_MODE_BLUETOOTH` — Connected Bluetooth device +- `AudioModes.AUDIO_MODE_HEADPHONES` — Wired headphones + +```dart +CometChatCalls.setAudioMode( + AudioModes.AUDIO_MODE_SPEAKER, + onSuccess: (success) { + debugPrint("Audio mode set"); + }, + onError: (e) { + debugPrint("Set audio mode failed: $e"); + }, +); +``` + +### Enter PIP Mode + +Enters Picture-in-Picture mode, rendering the call view in a small floating window. This allows users to multitask while staying on the call. + +```dart +CometChatCalls.enterPIPMode( + onSuccess: (success) { + debugPrint("Entered PIP mode"); + }, + onError: (e) { + debugPrint("Enter PIP failed: $e"); + }, +); +``` + +### Exit PIP Mode + +Exits Picture-in-Picture mode and returns the call view to its original full-screen or embedded layout. + +```dart +CometChatCalls.exitPIPMode( + onSuccess: (success) { + debugPrint("Exited PIP mode"); + }, + onError: (e) { + debugPrint("Exit PIP failed: $e"); + }, +); +``` + +### Switch To Video Call + +Upgrades an ongoing audio call to a video call. This enables the camera and starts transmitting video to other participants. The remote participant receives the `onCallSwitchedToVideo()` callback. + +```dart +CometChatCalls.switchToVideoCall( + onSuccess: (success) { + debugPrint("Switched to video call"); + }, + onError: (e) { + debugPrint("Switch to video failed: $e"); + }, +); +``` + +### Start Recording + +Starts recording the call session. The recording is saved to the CometChat server and can be accessed later. All participants receive the `onRecordingToggled()` callback when recording starts. + +```dart +CometChatCalls.startRecording( + onSuccess: (success) { + debugPrint("Recording started"); + }, + onError: (e) { + debugPrint("Start recording failed: $e"); + }, +); +``` + +### Stop Recording + +Stops an ongoing call recording. All participants receive the `onRecordingToggled()` callback when recording stops. + +```dart +CometChatCalls.stopRecording( + onSuccess: (success) { + debugPrint("Recording stopped"); + }, + onError: (e) { + debugPrint("Stop recording failed: $e"); + }, +); +``` + +### End Call + +Terminates the current call session and releases all media resources (camera, microphone, network connections). After calling this method, the call view should be closed. + +```dart +CometChatCalls.endSession( + onSuccess: (success) { + debugPrint("Session ended"); + // Close the calling screen + }, + onError: (e) { + debugPrint("End session failed: $e"); + }, +); +``` diff --git a/calls/v4/flutter/overview.mdx b/calls/v4/flutter/overview.mdx new file mode 100644 index 000000000..e8966fbd2 --- /dev/null +++ b/calls/v4/flutter/overview.mdx @@ -0,0 +1,96 @@ +--- +title: "Calling SDK" +sidebarTitle: "Overview" +sdk_version: "4.x" +description: "CometChat Calling SDK v4 - Stable Release - Overview for Flutter. This is the stable v4 documentation. Most users should use this version." +--- + + +🚀 **v5 Beta Available** — The Calling SDK v5 is now available in beta with significant improvements. [Check out the v5 docs →](/calls/flutter/overview) + + +## Overview + +CometChat provides voice and video calling capabilities for your Flutter application. This guide helps you choose the right implementation approach based on your use case. + +## Prerequisites + +1. CometChat SDK installed and configured. See the [Setup](/sdk/flutter/setup) guide. +2. CometChat Calls SDK added to your project: + +```yaml +dependencies: + cometchat_calls_sdk: ^4.0.0 +``` + +For detailed setup instructions, see the [Calls SDK Setup](/calls/v4/flutter/setup) guide. + +## Choose Your Implementation + +CometChat offers three approaches to implement calling: + + + + Complete calling flow with incoming/outgoing call UI, accept/reject functionality, and call notifications. + + + Direct call session management. Use with Ringing flow or for custom call initiation logic. + + + Calls SDK only implementation without the Chat SDK dependency. + + + +### Ringing + +Use this when you need a complete calling experience with: +- Incoming and outgoing call UI +- Call accept/reject/cancel functionality +- Call notifications via push notifications +- Integration with CometChat messaging + +**Flow:** Initiate call → Receiver gets notified → Accept/Reject → Start session + +[Get started with Ringing →](/calls/v4/flutter/ringing) + +### Call Session + +Use this when you need to: +- Start a call session after the Ringing flow completes +- Implement custom call initiation logic with your own UI +- Join participants to a shared session using a session ID + +**Flow:** Generate token → Start session → Manage call → End session + +[Get started with Call Session →](/calls/v4/flutter/call-session) + +### Standalone Calling + +Use this when you want: +- Calling functionality without the Chat SDK +- Your own user authentication system +- Minimal SDK footprint + +**Flow:** Get auth token via REST API → Generate call token → Start session + +[Get started with Standalone Calling →](/calls/v4/flutter/standalone-calling) + +## Features + + + + Record audio and video calls for playback, compliance, or archival purposes. + + + Customize the video call UI layout, participant tiles, and visual appearance. + + + Enable screen sharing and presentation capabilities during calls. + + + Retrieve and display call history including duration, participants, and status. + + + Configure automatic call termination when participants are inactive. + + diff --git a/calls/v4/flutter/presenter-mode.mdx b/calls/v4/flutter/presenter-mode.mdx new file mode 100644 index 000000000..01b42193d --- /dev/null +++ b/calls/v4/flutter/presenter-mode.mdx @@ -0,0 +1,107 @@ +--- +title: "Presenter Mode" +sidebarTitle: "Presenter Mode" +sdk_version: "4.x" +description: "CometChat Calling SDK v4 - Stable Release - Presenter Mode for Flutter" +--- + +## Overview + +The Presenter Mode feature allows developers to create a calling service experience in which: + +1. There are one or more users who are presenting their video, audio and/or screen (Maximum 5) +2. Viewers who are consumers of that presentation. (They cannot send their audio, video or screen streams out). +3. The total number of presenters and viewers can go up to 100. +4. Features such as mute/unmute audio, show/hide camera capture, recording, etc. will be enabled only for the Presenter in this mode. +5. Other call participants will not get these features. Hence they act like passive viewers in the call. + +Using this feature developers can create experiences such as: + +1. All hands calls +2. Keynote speeches +3. Webinars +4. Talk shows +5. Online classes +6. and many more... + +About this guide + +This guide demonstrates how to start a presentation into a Flutter application. Before you begin, we strongly recommend you read the [calling setup guide](/calls/v4/flutter/setup). + +Before starting a call session you have to generate a call token. You need to call this method for the call token. + +Start Presentation Session + +The most important class that will be used in the implementation is the `PresentationSettings` class. This class allows you to set the various parameters for the Presentation Mode. In order to set the various parameters of the `PresentationSettings` class, you need to use the `PresentationSettingsBuilder` class. + +You will also need to set the User Type, There are 2 type of users in Presenter Mode, `Presenter` & `Participant` , You can set this `PresentationSettingsBuilder` by using the following method `isPresenter(true/false)` + +A basic example of how to start a Presentation: + + + +```dart +String callToken = "" //Received on generate token onSuccess + +PresentationSettings presentationSettings= (PresentationSettingsBuilder() + ..enableDefaultLayout = true + ..isPresenter = true // set true ot flase + ..listener = this //CometChatCallsEventsListener +).build(); + +CometChatCalls.joinPresentation(generatedToken, presentationSettings, onSuccess: (Widget? callingWidget){ + debugPrint("Success"); + }, onError: (CometChatCallsException e){ + debugPrint("Error: $e"); +}); +``` + + + + + +The `CometChatCallsEventsListener` listener provides you with the below callback methods: + +| Callback Method | Description | +| ------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------- | +| onCallEnded() | This method is called when the call is successfully ended. The call details can be obtained from the `Call` object provided. | +| onCallEndButtonPressed() | This method is called when the user press end call button. | +| onUserJoined(RTCUser user) | This method is called when any other user joins the call. The user details can be obtained from the `User` object provided. | +| onUserLeft(RTCUser user) | This method is called when a user leaves the call. The details of the user can be obtained from the provided `User` object. | +| onUserListChanged(List\ users) | This method is triggered every time a participant joins or leaves the call providing the list of users active in the call | +| onAudioModeChanged(List\ devices) | This callback is triggered if any new audio output source is available or becomes unavailable. | +| onCallSwitchedToVideo(CallSwitchRequestInfo callSwitchRequestInfo) | This callback is triggered when an audio call is converted into a video call. | +| onUserMuted(RTCMutedUser muteObj) | This method is triggered when a user is muted in the ongoing call. | +| onRecordingToggled(RTCRecordingInfo recordingInfo) | This method is triggered when a recording start/stop. | +| onError(CometChatException e) | This method is called when there is some error in establishing the call. | + +## Settings + +The `PresentationSettings` class is the most important class when it comes to the implementation of the Calling feature. This is the class that allows you to customize the overall calling experience. The properties for the call/conference can be set using the `PresentationSettingsBuilder` class. This will eventually give you and object of the `PresentationSettings` class which you can pass to the `joinPresentation()` method to start the call. + +The **mandatory** parameters that are required to be present for any call/conference to work are: + +1. Context - context of the activity/application +2. RelativeLayout - A RelativeLayout object in which the calling UI is loaded. + +The options available for customization of calls are: + +| Setting | Description | +| --------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `bool isPresenter` | If set to true, the user will join the call as a presenter. If set to false, the user will join the call as an audience member. Default value = false | +| `bool enableDefaultLayout` | If set to `true` enables the default layout for handling the call operations. If set to `false` it hides the button layout and just displays the Call View Default value = true | +| `bool setAudioOnlyCall` | If set to true call is supposed to be an audio call If set to false call is supposed to be a video call Default Value = false | +| `bool showEndCallButton` | If set to `true` it displays the EndCallButton in Button Layout. If set to `false` it hides the EndCallButton in Button Layout Default value = true | +| `bool showSwitchCameraButton` | If set to `true` it displays the SwitchCameraButton in Button Layout. If set to `false` it hides the SwitchCameraButton in Button Layout Default value = true | +| `bool showMuteAudioButton` | If set to `true` it displays the MuteAudioButton in Button Layout. If set to `false` it hides the MuteAudioButton in Button Layout Default value = true | +| `bool showPauseVideoButton` | If set to `true` it displays the PauseVideoButton in Button Layout. If set to `false` it hides the PauseVideoButton in Button Layout Default value = true | +| `bool showAudioModeButton` | If set to `true` it displays the AudioModeButton in Button Layout. If set to `false` it hides the AudioModeButton in Button Layout Default value = true | +| `bool startWithAudioMuted` | This ensures the call is started with the audio muted if set to true Default value = false | +| `bool startWithVideoMuted` | This ensures the call is started with the video muted if set to true Default value = false | +| `AudioModes setDefaultAudioMode` | This method can be used if you wish to start the call with a specific audio mode. The available options are: 1. `AudioModes.AUDIO_MODE_SPEAKER` 2. `AudioModes.AUDIO_MODE_EARPIECE` 3. `AudioModes.AUDIO_MODE_BLUETOOTH` 4. `AudioModes.AUDIO_MODE_HEADPHONES` | +| `bool showCallRecordButton` | If set to `true` it displays the Recording Button If set to `false` it hides the Recording Button Default value = false | +| `CometChatCallsEventsListener listener` | The `CometChatCallsEventsListener` listener provides you callbacks | + +In case you wish to achieve a completely customised UI for the Calling experience, you can do so by embedding default android buttons to the screen as per your requirement and then use the below methods to achieve different functionalities for the embedded buttons. + +For the use case where you wish to align your own custom buttons and not use the default layout provided by CometChat you can embed the buttons in your layout and use the below methods to perform the corresponding operations: diff --git a/calls/v4/flutter/recording.mdx b/calls/v4/flutter/recording.mdx new file mode 100644 index 000000000..853dce7db --- /dev/null +++ b/calls/v4/flutter/recording.mdx @@ -0,0 +1,83 @@ +--- +title: "Recording" +sidebarTitle: "Recording" +sdk_version: "4.x" +description: "CometChat Calling SDK v4 - Stable Release - Recording for Flutter" +--- + +This section will guide you to implement call recording feature for the voice and video calls. + +## Implementation + +Once you have decided to implement [Ringing](/calls/v4/flutter/ringing) or [Call Session](/calls/v4/flutter/call-session) calling and followed the steps to implement them. Just few additional listeners and methods will help you quickly implement call recording in your app. + +You need to make changes in the CometChat.startCall method and add the required listeners for recording. Please make sure your callSettings is configured accordingly for [Ringing](/calls/v4/flutter/ringing) or [Call Session](/calls/v4/flutter/call-session). + +A basic example of how to make changes to implement recording for a direct/default call: + + + +```dart +CallSettings callSettings= (CallSettingsBuilder() +..defaultLayout = true +..showCallRecordButton = true //Show recording button +..listener = this //CometChatCallsEventsListener +).build(); + +CometChatCalls.startSession(generatedToken, callSettings, onSuccess: (Widget? callingWidget){ +debugPrint("Success"); +}, onError: (CometChatCallsException e){ +debugPrint("Error: $e"); +}); +``` + + + + + +## Settings for call recording + +The `CallSettings`class allows you to customise the overall calling experience. The properties for the call/conference can be set using the `CallSettingsBuilder` class. This will eventually give you and object of the `CallSettings` class which you can pass to the `startCall()` method to start the call. + +The options available for recording of calls are: + +| Setting | Description | +| -------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| `showCallRecordButton(boolean showCallRecordButton)` | If set to `true` it displays the Recording button in the button Layout. if set to `false` it hides the Recording button in the button Layout. **Default value = false** | +| `startRecordingOnCallStart(boolean startRecordingOnCallStart)` | If set to `true` call recording will start as soon as the call is started. if set to `false` call recording will not start as soon as the call is started. **Default value = false** | + +### Start Recording + +You can use the startRecording() method to start call recording. + + + +```dart +CometChatCalls.startRecording(onSuccess: (success) { +debugPrint("Success $success"); +}, onError: (error) { +debugPrint("Error $error"); +}); +``` + + + + + +### Stop Recording + +You can use the stopRecording() method to stop call recording. + + + +```dart +CometChatCalls.stopRecording(onSuccess: (success) { +debugPrint("Success $success"); +}, onError: (error) { +debugPrint("Error $error"); +}); +``` + + + + diff --git a/calls/v4/flutter/ringing.mdx b/calls/v4/flutter/ringing.mdx new file mode 100644 index 000000000..b03a2a628 --- /dev/null +++ b/calls/v4/flutter/ringing.mdx @@ -0,0 +1,327 @@ +--- +title: "Ringing" +sidebarTitle: "Ringing" +sdk_version: "4.x" +description: "CometChat Calling SDK v4 - Stable Release - Ringing for Flutter" +--- + +## Overview + +This section explains how to implement a complete calling workflow with ringing functionality, including incoming/outgoing call UI, call acceptance, rejection, and cancellation. Previously known as **Default Calling**. + + +After the call is accepted, you need to start the call session. See the [Call Session](/calls/v4/flutter/call-session#start-call-session) guide for details on starting and managing the actual call. + + +**Call Flow:** + +1. **Caller** initiates a call using `initiateCall()` +2. **Receiver** gets notified via `onIncomingCallReceived()` callback +3. **Receiver** can either: + - Accept the call using `acceptCall()` + - Reject the call using `rejectCall()` with status `CALL_STATUS_REJECTED` +4. **Caller** can cancel the call using `rejectCall()` with status `CALL_STATUS_CANCELLED` +5. Once accepted, both participants call `startSession()` to join the call + +## Initiate Call + +The `initiateCall()` method sends a call request to a user or a group. On success, the receiver gets an `onIncomingCallReceived()` callback. + +```dart +// User call +String receiverID = "UID"; +String receiverType = CometChatConstants.RECEIVER_TYPE_USER; +String callType = CometChatConstants.CALL_TYPE_VIDEO; + +Call call = Call( + receiverUid: receiverID, + receiverType: receiverType, + type: callType, +); + +CometChat.initiateCall( + call, + onSuccess: (Call call) { + debugPrint("Call initiated: ${call.sessionId}"); + // Show outgoing call UI + // Store call.sessionId for later use + }, + onError: (CometChatException e) { + debugPrint("Call initiation failed: $e"); + }, +); +``` + +```dart +// Group call +String receiverID = "GUID"; +String receiverType = CometChatConstants.RECEIVER_TYPE_GROUP; +String callType = CometChatConstants.CALL_TYPE_VIDEO; + +Call call = Call( + receiverUid: receiverID, + receiverType: receiverType, + type: callType, +); + +CometChat.initiateCall( + call, + onSuccess: (Call call) { + debugPrint("Call initiated: ${call.sessionId}"); + // Show outgoing call UI + }, + onError: (CometChatException e) { + debugPrint("Call initiation failed: $e"); + }, +); +``` + +| Parameter | Description | +| -------------- | ------------------------------------------------------------------------------------------------------------------ | +| `receiverID` | The UID or GUID of the recipient | +| `receiverType` | The type of the receiver: `CometChatConstants.RECEIVER_TYPE_USER` or `CometChatConstants.RECEIVER_TYPE_GROUP` | +| `callType` | The type of the call: `CometChatConstants.CALL_TYPE_AUDIO` or `CometChatConstants.CALL_TYPE_VIDEO` | + +On success, a `Call` object is returned containing the call details including a unique `sessionId` required for starting the call session. + +## Call Listeners + +Register the `CallListener` to receive real-time call events. Each listener requires a unique `listenerId` string to prevent duplicate registrations and enable targeted removal. + +```dart +String listenerId = "UNIQUE_LISTENER_ID"; + +class YourClassName extends State with CallListener { + @override + void initState() { + super.initState(); + CometChat.addCallListener(listenerId, this); + } + + @override + void dispose() { + super.dispose(); + CometChat.removeCallListener(listenerId); + } + + @override + void onIncomingCallReceived(Call call) { + debugPrint("Incoming call from: ${call.sender?.name}"); + // Show incoming call UI + } + + @override + void onOutgoingCallAccepted(Call call) { + debugPrint("Outgoing call accepted"); + // Receiver accepted, start the call session + } + + @override + void onOutgoingCallRejected(Call call) { + debugPrint("Outgoing call rejected"); + // Receiver rejected, dismiss outgoing call UI + } + + @override + void onIncomingCallCancelled(Call call) { + debugPrint("Incoming call cancelled"); + // Caller cancelled, dismiss incoming call UI + } + + @override + void onCallEndedMessageReceived(Call call) { + debugPrint("Call ended message received"); + // Call ended by remote participant + } +} +``` + +### Events + +| Event | Description | +| ----- | ----------- | +| `onIncomingCallReceived(Call call)` | Invoked when an incoming call is received. The `call` contains caller details, session ID, and call type. Display incoming call UI here. | +| `onOutgoingCallAccepted(Call call)` | Invoked on the caller's device when the receiver accepts. Generate call token and start the session here. | +| `onOutgoingCallRejected(Call call)` | Invoked on the caller's device when the receiver rejects the call. Dismiss outgoing call UI here. | +| `onIncomingCallCancelled(Call call)` | Invoked on the receiver's device when the caller cancels before answering. Dismiss incoming call UI here. | +| `onCallEndedMessageReceived(Call call)` | Invoked when a call ends. The `call` contains final status and duration. Update call history here. | + +## Accept Call + +When an incoming call is received via `onIncomingCallReceived()`, use `acceptCall()` to accept it. On success, start the call session. + +```dart +String sessionId = call.sessionId!; // From onIncomingCallReceived + +CometChat.acceptCall( + sessionId, + onSuccess: (Call call) { + debugPrint("Call accepted"); + // Call accepted, now start the call session + // Generate token and call startSession() + }, + onError: (CometChatException e) { + debugPrint("Accept call failed: $e"); + }, +); +``` + +## Reject Call + +Use `rejectCall()` to reject an incoming call. Set the status to `CALL_STATUS_REJECTED`. + +```dart +String sessionId = call.sessionId!; +String status = CometChatConstants.CALL_STATUS_REJECTED; + +CometChat.rejectCall( + sessionId, + status, + onSuccess: (Call call) { + debugPrint("Call rejected"); + // Dismiss incoming call UI + }, + onError: (CometChatException e) { + debugPrint("Reject call failed: $e"); + }, +); +``` + +## Cancel Call + +The caller can cancel an outgoing call before it's answered using `rejectCall()` with status `CALL_STATUS_CANCELLED`. + +```dart +String sessionId = call.sessionId!; +String status = CometChatConstants.CALL_STATUS_CANCELLED; + +CometChat.rejectCall( + sessionId, + status, + onSuccess: (Call call) { + debugPrint("Call cancelled"); + // Dismiss outgoing call UI + }, + onError: (CometChatException e) { + debugPrint("Cancel call failed: $e"); + }, +); +``` + +## Start Call Session + +Once the call is accepted, both participants need to start the call session. + +**Caller flow:** In the `onOutgoingCallAccepted()` callback, generate a token and start the session. + +**Receiver flow:** In the `acceptCall()` success callback, generate a token and start the session. + +```dart +String sessionId = call.sessionId!; +String userAuthToken = await CometChat.getUserAuthToken(); + +// Step 1: Generate call token +CometChatCalls.generateToken( + sessionId, + userAuthToken, + onSuccess: (GenerateToken generateToken) { + // Step 2: Configure call settings with listeners + CallSettings callSettings = (CallSettingsBuilder() + ..defaultLayout = true + ..setAudioOnlyCall = false + ..listener = CallEventsHandler(sessionId) // Your listener implementation + ).build(); + + // Step 3: Start the session + CometChatCalls.startSession( + generateToken.token!, + callSettings, + onSuccess: (Widget? callingWidget) { + debugPrint("Call session started"); + // Display the callingWidget in your UI + }, + onError: (CometChatCallsException e) { + debugPrint("Start session failed: $e"); + }, + ); + }, + onError: (CometChatCallsException e) { + debugPrint("Token generation failed: $e"); + }, +); +``` + +For more details on call settings and customization, see the [Call Session](/calls/v4/flutter/call-session#start-call-session) guide. + +## End Call + +To end an active call in the ringing flow, the process differs based on who ends the call. + +**User who ends the call:** + +When the user presses the end call button, the `onCallEndButtonPressed()` callback is triggered. Inside this callback, call `CometChat.endCall()` to notify other participants. On success, call `CometChat.clearActiveCall()` and `CometChatCalls.endSession()` to release resources. + +```dart +@override +void onCallEndButtonPressed() { + CometChat.endCall( + sessionId, + onSuccess: (Call call) { + debugPrint("Call ended successfully"); + CometChat.clearActiveCall(); + CometChatCalls.endSession( + onSuccess: (success) { + debugPrint("Session ended"); + // Close the calling screen + }, + onError: (e) { + debugPrint("End session failed: $e"); + }, + ); + }, + onError: (CometChatException e) { + debugPrint("End call failed: $e"); + }, + ); +} +``` + +**Remote participant** (receives `onCallEnded()` callback): + +```dart +@override +void onCallEnded() { + CometChat.clearActiveCall(); + CometChatCalls.endSession( + onSuccess: (success) { + debugPrint("Session ended"); + // Close the calling screen + }, + onError: (e) { + debugPrint("End session failed: $e"); + }, + ); +} +``` + +For more details, see the [End Call Session](/calls/v4/flutter/call-session#end-call-session) guide. + +## Busy Call Handling + +If the receiver is already on another call, you can reject the incoming call with `CALL_STATUS_BUSY` status. + +```dart +String sessionId = call.sessionId!; +String status = CometChatConstants.CALL_STATUS_BUSY; + +CometChat.rejectCall( + sessionId, + status, + onSuccess: (Call call) { + debugPrint("Busy status sent"); + }, + onError: (CometChatException e) { + debugPrint("Busy rejection failed: $e"); + }, +); +``` diff --git a/calls/v4/flutter/session-timeout.mdx b/calls/v4/flutter/session-timeout.mdx new file mode 100644 index 000000000..8fe7c076f --- /dev/null +++ b/calls/v4/flutter/session-timeout.mdx @@ -0,0 +1,35 @@ +--- +title: "Session Timeout Flow" +sidebarTitle: "Session Timeout" +sdk_version: "4.x" +description: "CometChat Calling SDK v4 - Stable Release - Session Timeout for Flutter" +--- + +Available since v4.1.0 + +## Overview + +CometChat Calls SDK provides a mechanism to handle session timeouts for idle participants. By default, if a participant is alone in a call session for 180 seconds (3 minutes), the following sequence is triggered: + +1. After 120 seconds of being alone in the session, the participant will see a dialog box + +2. This dialog provides options to either: + + * Stay in the call + * Leave immediately + +3. If no action is taken within the next 60 seconds, the call will automatically end + +This feature helps manage inactive call sessions and prevents unnecessary resource usage. The idle timeout period ensures that participants don't accidentally remain in abandoned call sessions. + +### Session Timeout Flow + + + + + + + +The `onSessionTimeout` event is triggered when the call automatically terminates due to session timeout, as illustrated in the diagram above. + + diff --git a/calls/v4/flutter/setup.mdx b/calls/v4/flutter/setup.mdx new file mode 100644 index 000000000..887c179c1 --- /dev/null +++ b/calls/v4/flutter/setup.mdx @@ -0,0 +1,84 @@ +--- +title: "Setup" +sidebarTitle: "Setup" +sdk_version: "4.x" +description: "CometChat Calling SDK v4 - Stable Release - Setup for Flutter" +--- + +### Get your Application Keys + +[Signup for CometChat](https://app.cometchat.com) and then: + +1. Create a new app +2. Head over to the **API Keys** section and note the **Auth Key**, **App ID** & **Region** + + +Minimum Requirement For Calling + +* Android API level 24 and above +* iOS version 12 and above + + + +### Add the CometChatCalls Dependency + +1. Add the following code in your `pubspec.yaml` file and run `pub get` command. + + + +```dart + cometchat_calls_sdk: ^4.2.2 +``` + + + + + +2. Import CometChatCalls using following code in dart + + + +```dart +import 'package:cometchat_calls_sdk/cometchat_calls_sdk.dart'; +``` + + + + + +## Initialise CometChatCalls + +The `init()` method initialises the settings required for CometChatCalls. The `init()` method takes the below parameters: + +1. callAppSettings - An object of the CallAppSettings class can be created using the CallAppSettingBuilder class. The appId and region field is mandatory and can be set using the `setAppId()` and `setRegion()` method. + +The `CallAppSettings` class allows you to configure three settings: + +* **App ID**: CometChat app ID. +* **Region**: The region where you app was created. +* **Host(host: string)**: This method takes the client URL as input and uses this client URL instead of the default client URL. This can be used in case of dedicated deployment of CometChat. + +We suggest you call the `init()` method on activity `onCreate()` method. + + + +```dart +CallAppSettings callAppSettings= (CallAppSettingBuilder() +..appId = "xxxxxxxxxx" +..region= "xxxxxxxxxx" + //..host = "xxxxxxxxx" +).build(); +CometChatCalls.init(callAppSettings, onSuccess: (String successMessage) { +debugPrint("Initialization completed successfully $successMessage"); +}, onError: (CometChatCallsException e) { +debugPrint("Initialization failed with exception: ${e.message}"); +}); +``` + + + + + +| Parameter | Description | +| ----------------- | -------------------------------------- | +| `callAppSettings` | An object of the CallAppSettings class | diff --git a/calls/v4/flutter/standalone-calling.mdx b/calls/v4/flutter/standalone-calling.mdx new file mode 100644 index 000000000..7629d1071 --- /dev/null +++ b/calls/v4/flutter/standalone-calling.mdx @@ -0,0 +1,406 @@ +--- +title: "Standalone Calling" +sidebarTitle: "Standalone Calling" +sdk_version: "4.x" +description: "CometChat Calling SDK v4 - Stable Release - Standalone Calling for Flutter" +--- + +## Overview + +This section demonstrates how to implement calling functionality using only the CometChat Calls SDK, without requiring the Chat SDK. This is ideal for applications that need video/audio calling capabilities without the full chat infrastructure. + + +Before you begin, ensure you have completed the [Calls SDK setup](/calls/v4/flutter/setup). + + +## User Authentication + +To start a call session, you need a user auth token. Since this implementation doesn't use the Chat SDK, you'll need to obtain the auth token via the CometChat REST API. + + +To understand user authentication in CometChat, see the [User Auth](/fundamentals/user-auth) documentation. + + +You can obtain the auth token using one of these REST API endpoints: + +- [Create Auth Token](/rest-api/auth-tokens/create) — Creates a new auth token for a user +- [Get Auth Token](/rest-api/auth-tokens/get) — Retrieves an existing auth token + + +For testing or POC purposes, you can create an auth token directly from the [CometChat Dashboard](https://app.cometchat.com). Navigate to **Users & Groups → Users**, select a user, and click **+ Create Auth Token**. + + +Store the auth token securely in your application for use when generating call tokens. + +## Generate Call Token + +A call token is required for secure access to a call session. Each token is unique to a specific session and user combination, ensuring that only authorized users can join the call. + +You can generate the token just before starting the call, or generate and store it ahead of time based on your use case. + +Use the `generateToken()` method to create a call token: + +```dart +String sessionId = "UNIQUE_SESSION_ID"; // Generate a unique session ID +String userAuthToken = "USER_AUTH_TOKEN"; // Obtained from REST API + +CometChatCalls.generateToken( + sessionId, + userAuthToken, + onSuccess: (GenerateToken generateToken) { + debugPrint("Call token generated: ${generateToken.token}"); + // Use generateToken to start the session + }, + onError: (CometChatCallsException e) { + debugPrint("Token generation failed: $e"); + }, +); +``` + +| Parameter | Description | +| --------------- | -------------------------------------------------------------------------- | +| `sessionId` | A unique session ID for the call. Generate this yourself or use a shared ID for participants to join the same call. | +| `userAuthToken` | The user auth token obtained from the CometChat REST API. | + +## Start Call Session + +Use the `startSession()` method to join a call session. This method requires a call token (generated in the previous step) and a `CallSettings` object that configures the call UI and behavior. + +```dart +String generatedToken = ""; // Token from generateToken() onSuccess + +CallSettings callSettings = (CallSettingsBuilder() + ..defaultLayout = true + ..setAudioOnlyCall = false + ..listener = this // CometChatCallsEventsListener +).build(); + +CometChatCalls.startSession( + generatedToken, + callSettings, + onSuccess: (Widget? callingWidget) { + debugPrint("Call session started"); + // Display the callingWidget in your UI + }, + onError: (CometChatCallsException e) { + debugPrint("Start session failed: $e"); + }, +); +``` + +### Call Settings + +Configure the call experience using the following `CallSettingsBuilder` properties: + +| Property | Description | +| -------- | ----------- | +| `defaultLayout` | Enables or disables the default call UI layout with built-in controls. `true` shows the default layout. `false` hides the button layout. Default: `true` | +| `setAudioOnlyCall` | Sets whether the call is audio-only or audio-video. `true` for audio-only, `false` for audio-video. Default: `false` | +| `listener` | Sets the `CometChatCallsEventsListener` to receive call events. See [Call Listeners](#call-listeners). | +| `setMode` | Sets the call UI layout mode. Available: `Mode.MODE_DEFAULT`, `Mode.MODE_SPOTLIGHT`, `Mode.MODE_SINGLE`. Default: `Mode.MODE_SPOTLIGHT` | +| `setAvatarMode` | Sets how avatars are displayed when video is off. Available: `AvatarModes.AVATAR_MODE_CIRCLE`, `AvatarModes.AVATAR_MODE_SQUARE`, `AvatarModes.AVATAR_MODE_FULLSCREEN`. Default: `AVATAR_MODE_CIRCLE` | +| `setDefaultAudioMode` | Sets the initial audio output device. Available: `AudioModes.AUDIO_MODE_SPEAKER`, `AudioModes.AUDIO_MODE_EARPIECE`, `AudioModes.AUDIO_MODE_BLUETOOTH`, `AudioModes.AUDIO_MODE_HEADPHONES` | +| `startWithAudioMuted` | Starts the call with the microphone muted. Default: `false` | +| `startWithVideoMuted` | Starts the call with the camera turned off. Default: `false` | +| `showEndCallButton` | Shows or hides the end call button in the default layout. Default: `true` | +| `showSwitchCameraButton` | Shows or hides the switch camera button (front/back). Default: `true` | +| `showMuteAudioButton` | Shows or hides the mute audio button. Default: `true` | +| `showPauseVideoButton` | Shows or hides the pause video button. Default: `true` | +| `showAudioModeButton` | Shows or hides the audio mode selection button. Default: `true` | +| `showSwitchToVideoCallButton` | Shows or hides the button to upgrade an audio call to video. Default: `true` | +| `showCallRecordButton` | Shows or hides the recording button. Default: `false` | +| `startRecordingOnCallStart` | Automatically starts recording when the call begins. Default: `false` | +| `enableVideoTileClick` | Enables or disables click interactions on video tiles in Spotlight mode. Default: `true` | +| `enableVideoTileDrag` | Enables or disables drag functionality for video tiles in Spotlight mode. Default: `true` | +| `setMainVideoContainerSetting` | Customizes the main video container. See [Video View Customization](/calls/v4/flutter/video-view-customisation). | +| `setIdleTimeoutPeriod` | Sets idle timeout in seconds. Warning appears 60 seconds before auto-termination. Default: `180` seconds. *v4.1.0+* | + +## Call Listeners + +The `CometChatCallsEventsListener` provides real-time callbacks for call session events, including participant changes, call state updates, and error conditions. + +Each listener requires a unique `listenerId` string. This ID is used to: +- **Prevent duplicate registrations** — Re-registering with the same ID replaces the existing listener +- **Enable targeted removal** — Remove specific listeners without affecting others + +```dart +String listenerId = "UNIQUE_LISTENER_ID"; + +class YourClassName extends State with CometChatCallsEventsListener { + @override + void initState() { + super.initState(); + CometChatCalls.addCallsEventListeners(listenerId, this); + } + + @override + void dispose() { + super.dispose(); + CometChatCalls.removeCallsEventListeners(listenerId); + } + + @override + void onCallEnded() { + debugPrint("Call ended"); + CometChatCalls.endSession( + onSuccess: (success) { + // Close calling screen + }, + onError: (e) {}, + ); + } + + @override + void onCallEndButtonPressed() { + debugPrint("End call button pressed"); + CometChatCalls.endSession( + onSuccess: (success) { + // Close calling screen + }, + onError: (e) {}, + ); + } + + @override + void onSessionTimeout() { + debugPrint("Session timed out"); + } + + @override + void onUserJoined(RTCUser user) { + debugPrint("User joined: ${user.name}"); + } + + @override + void onUserLeft(RTCUser user) { + debugPrint("User left: ${user.name}"); + } + + @override + void onUserListChanged(List users) { + debugPrint("User list updated: ${users.length} participants"); + } + + @override + void onAudioModeChanged(List devices) { + debugPrint("Audio modes changed"); + } + + @override + void onCallSwitchedToVideo(CallSwitchRequestInfo info) { + debugPrint("Call switched to video"); + } + + @override + void onUserMuted(RTCMutedUser muteObj) { + debugPrint("User muted"); + } + + @override + void onRecordingToggled(RTCRecordingInfo info) { + debugPrint("Recording toggled"); + } + + @override + void onError(CometChatCallsException e) { + debugPrint("Call error: $e"); + } +} +``` + +### Events + +| Event | Description | +| ----- | ----------- | +| `onCallEnded()` | Invoked when the call session terminates for a 1:1 call. Both participants receive this callback. Only fires for calls with exactly 2 participants. | +| `onSessionTimeout()` | Invoked when the call is auto-terminated due to inactivity (default: 180 seconds). Warning appears 60 seconds before. *v4.1.0+* | +| `onCallEndButtonPressed()` | Invoked when the local user taps the end call button. Call `CometChatCalls.endSession()` to leave the session. | +| `onUserJoined(RTCUser user)` | Invoked when a remote participant joins. The `user` contains UID, name, and avatar. | +| `onUserLeft(RTCUser user)` | Invoked when a remote participant leaves the call session. | +| `onUserListChanged(List users)` | Invoked whenever the participant list changes (join or leave events). | +| `onAudioModeChanged(List devices)` | Invoked when available audio devices change (e.g., Bluetooth connected). | +| `onCallSwitchedToVideo(CallSwitchRequestInfo info)` | Invoked when an audio call is upgraded to a video call. | +| `onUserMuted(RTCMutedUser muteObj)` | Invoked when a participant's mute state changes. | +| `onRecordingToggled(RTCRecordingInfo info)` | Invoked when call recording starts or stops. | +| `onError(CometChatCallsException e)` | Invoked when an error occurs during the call session. | + +## End Call Session + +To end the call session and release all media resources (camera, microphone, network connections), call `CometChatCalls.endSession()` in the `onCallEndButtonPressed()` callback. + +```dart +@override +void onCallEndButtonPressed() { + CometChatCalls.endSession( + onSuccess: (success) { + debugPrint("Session ended"); + // Close the calling screen + }, + onError: (e) { + debugPrint("End session failed: $e"); + }, + ); +} +``` + +## Methods + +These methods are available for performing custom actions during an active call session. Use them to build custom UI controls or implement specific behaviors based on your use case. + + +These methods can only be called when a call session is active. + + +### Switch Camera + +Toggles between the front and rear camera during a video call. + +```dart +CometChatCalls.switchCamera( + onSuccess: (success) { + debugPrint("Camera switched"); + }, + onError: (e) { + debugPrint("Switch camera failed: $e"); + }, +); +``` + +### Mute Audio + +Controls the local audio stream transmission. + +```dart +CometChatCalls.muteAudio( + true, + onSuccess: (success) { + debugPrint("Audio muted"); + }, + onError: (e) { + debugPrint("Mute audio failed: $e"); + }, +); +``` + +### Pause Video + +Controls the local video stream transmission. + +```dart +CometChatCalls.pauseVideo( + true, + onSuccess: (success) { + debugPrint("Video paused"); + }, + onError: (e) { + debugPrint("Pause video failed: $e"); + }, +); +``` + +### Set Audio Mode + +Routes the audio output to a specific device. + +```dart +CometChatCalls.setAudioMode( + AudioModes.AUDIO_MODE_SPEAKER, + onSuccess: (success) { + debugPrint("Audio mode set"); + }, + onError: (e) { + debugPrint("Set audio mode failed: $e"); + }, +); +``` + +### Enter PIP Mode + +Enters Picture-in-Picture mode. + +```dart +CometChatCalls.enterPIPMode( + onSuccess: (success) { + debugPrint("Entered PIP mode"); + }, + onError: (e) { + debugPrint("Enter PIP failed: $e"); + }, +); +``` + +### Exit PIP Mode + +Exits Picture-in-Picture mode. + +```dart +CometChatCalls.exitPIPMode( + onSuccess: (success) { + debugPrint("Exited PIP mode"); + }, + onError: (e) { + debugPrint("Exit PIP failed: $e"); + }, +); +``` + +### Switch To Video Call + +Upgrades an ongoing audio call to a video call. + +```dart +CometChatCalls.switchToVideoCall( + onSuccess: (success) { + debugPrint("Switched to video call"); + }, + onError: (e) { + debugPrint("Switch to video failed: $e"); + }, +); +``` + +### Start Recording + +Starts recording the call session. + +```dart +CometChatCalls.startRecording( + onSuccess: (success) { + debugPrint("Recording started"); + }, + onError: (e) { + debugPrint("Start recording failed: $e"); + }, +); +``` + +### Stop Recording + +Stops an ongoing call recording. + +```dart +CometChatCalls.stopRecording( + onSuccess: (success) { + debugPrint("Recording stopped"); + }, + onError: (e) { + debugPrint("Stop recording failed: $e"); + }, +); +``` + +### End Call + +Terminates the current call session and releases all media resources. + +```dart +CometChatCalls.endSession( + onSuccess: (success) { + debugPrint("Session ended"); + // Close the calling screen + }, + onError: (e) { + debugPrint("End session failed: $e"); + }, +); +``` diff --git a/calls/v4/flutter/video-view-customisation.mdx b/calls/v4/flutter/video-view-customisation.mdx new file mode 100644 index 000000000..fa8670243 --- /dev/null +++ b/calls/v4/flutter/video-view-customisation.mdx @@ -0,0 +1,43 @@ +--- +title: "Video View Customisation" +sidebarTitle: "Video View Customisation" +sdk_version: "4.x" +description: "CometChat Calling SDK v4 - Stable Release - Video View Customisation for Flutter" +--- + +This section will guide you to customise the main video container. + +## Implementation + +Once you have decided to implement [Ringing](/calls/v4/flutter/ringing) or [Call Session](/calls/v4/flutter/call-session) calling and followed the steps to implement them. Just few additional methods will help you quickly customize the main video container. + +Please make sure your callSettings is configured accordingly for [Ringing](/calls/v4/flutter/ringing) or [Call Session](/calls/v4/flutter/call-session). + +## Main Video Container Setting + +The `MainVideoContainerSetting` Class is the required in case you want to customise the main video view. You need to pass the Object of the `MainVideoContainerSetting` Class in the `setMainVideoContainerSetting()` method of the `CallSettingsBuilder`. + +| Setting | Description | +| --------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| `setMainVideoAspectRatio(String aspectRatio)` | This method is used to set the aspect ratio of main video.

Possible values:
1. `VideoStreamsMode.ASPECT_RATIO_CONTAIN`
2. `VideoStreamsMode.ASPECT_RATIO_COVER`
3. `VideoStreamsMode.ASPECT_RATIO_DEFAULT`

Default value = `VideoStreamsMode.ASPECT_RATIO_DEFAULT` | +| `setFullScreenButtonParams(String position, Boolean visibility)` | This method is used to set the position & visibility parameter of the full screen button.

Possible values for position:
1. `VideoStreamsPosition.POSITION_TOP_RIGHT`
2. `VideoStreamsPosition.POSITION_TOP_LEFT`
3. `VideoStreamsPosition.POSITION_BOTTOM_RIGHT`
4. `VideoStreamsPosition.POSITION_BOTTOM_LEFT`

Possible values for visibility:
1. `true`
2. `false`

Default Values:
Position: `VideoStreamsPosition.POSITION_BOTTOM_RIGHT`
Visibility: `true` | +| `setNameLabelParams(String position, Boolean visibility, String backgroundColor)` | This method is used to set the position, visibility & background color of the name label.

Possible values for position:
1. `VideoStreamsPosition.POSITION_TOP_RIGHT`
2. `VideoStreamsPosition.POSITION_TOP_LEFT`
3. `VideoStreamsPosition.POSITION_BOTTOM_RIGHT`
4. `VideoStreamsPosition.POSITION_BOTTOM_LEFT`

Possible values for visibility:
1. `true`
2. `false`

Default Values:
Position: `VideoStreamsPosition.POSITION_BOTTOM_LEFT`
Visibility: `true` Background Colour: `#333333` | +| `setZoomButtonParams(String position, Boolean visibility)` | This method is used to set the position, visibility of the zoom button.

Possible values for position:
1. `VideoStreamsPosition.POSITION_TOP_RIGHT`
2. `VideoStreamsPosition.POSITION_TOP_LEFT`
3. `VideoStreamsPosition.POSITION_BOTTOM_RIGHT`
4. `VideoStreamsPosition.POSITION_BOTTOM_LEFT`

Possible values for visibility:
1. `true`
2. `false`

Default Values:
Position: `VideoStreamsPosition.POSITION_BOTTOM_RIGHT`
Visibility: `true` | +| `setUserListButtonParams(String position, Boolean visibility)` | This method is used to set the position, visibility of the user list button.

Possible Values for position:
1. `VideoStreamsPosition.POSITION_TOP_RIGHT`
2. `VideoStreamsPosition.POSITION_TOP_LEFT`
3. `VideoStreamsPosition.POSITION_BOTTOM_RIGHT`
4. `VideoStreamsPosition.POSITION_BOTTOM_LEFT`

Possible Values for visibility:
1. `true`
2. `false`

Default Values:
Position: `VideoStreamsPosition.POSITION_BOTTOM_RIGHT`
Visibility: `true` | + +Example: + + + +```dart +MainVideoContainerSetting videoSettings = MainVideoContainerSetting(); +videoSettings.setMainVideoAspectRatio(VideoStreamsMode.ASPECT_RATIO_CONTAIN); +videoSettings.setNameLabelParams(VideoStreamsPosition.POSITION_TOP_LEFT, true, "#000"); +videoSettings.setZoomButtonParams(VideoStreamsPosition.POSITION_TOP_RIGHT, true); +videoSettings.setUserListButtonParams(VideoStreamsPosition.POSITION_TOP_LEFT, true); +videoSettings.setFullScreenButtonParams(VideoStreamsPosition.POSITION_TOP_RIGHT, true); +``` + + + + diff --git a/calls/v4/ios/call-logs.mdx b/calls/v4/ios/call-logs.mdx new file mode 100644 index 000000000..ee3e8d2df --- /dev/null +++ b/calls/v4/ios/call-logs.mdx @@ -0,0 +1,91 @@ +--- +title: "Call Logs" +sidebarTitle: "Call Logs" +sdk_version: "4.x" +description: "CometChat Calling SDK v4 - Stable Release - Call Logs for iOS" +--- + +## Overview + +CometChat's iOS Call SDK provides a comprehensive way to integrate call logs into your application, enhancing your user experience by allowing users to effortlessly keep track of their communication history. Call logs provide crucial information such as call duration, participants, and more. + +This feature not only allows users to review their past interactions but it also serves as an effective tool to revisit important conversation details. With the flexibility of fetching call logs, filtering them according to specific parameters, and obtaining detailed information of individual calls, application developers can use this feature to build a more robust and interactive communication framework. + +In the following sections, we will guide you through the process of working with call logs, offering a deeper insight into how to optimally use this feature in your iOS application. + +## Fetching Call Logs + +To fetch all call logs in your iOS application, you should use the `CallLogRequestBuilder`, This builder allows you to customize the call logs fetching process according to your needs. + +```swift +var callLogRequest = CometChatCallsSDK.CallLogsRequest.CallLogsBuilder() + .set(authToken: CometChat.getUserAuthToken()) + .set(limit: 30) + .set(callCategory: .call) + .build() +``` + +`CallLogRequestBuilder` has the following settings available. + +| Setting | Description | +| --------------------------------- | ------------------------------------------------------------ | +| set(limit: Int) | Specifies the number of call logs to fetch. | +| set(callType: CallType) | Sets the type of calls to fetch (call or meet). | +| set(callStatus: CallStatus) | Sets the status of calls to fetch (initiated, ongoing, etc.) | +| setg(hasRecording: HasRecording) | Sets whether to fetch calls that have recordings. | +| set(callCategory: CallCategory) | Sets the category of calls to fetch (call or meet). | +| set(callDirection: CallDirection) | Sets the direction of calls to fetch (incoming or outgoing) | +| set(uid: String) | Sets the UID of the user whose call logs to fetch. | +| set(guid: String) | Sets the GUID of the user whose call logs to fetch. | +| set(authToken: String) | Sets the Auth token of the logged-in user. | + +### Fetch Next + +The **`fetchNext()`** method retrieves the next set of call logs. + +```swift +var callLogRequest = CometChatCallsSDK.CallLogsRequest.CallLogsBuilder() + .set(authToken: CometChat.getUserAuthToken()) + .set(limit: 30) + .set(callCategory: .call) + .build() + +callLogRequest.fetchNext() { [weak self] callLogs in + print("fetchNext success") + } onError: { [weak self] error in + print("fetchNext failed with error; \(error.errorDescription)") +} +``` + +### Fetch Previous + +The **`fetchPrevious()`** method retrieves the previous set of call logs. + +```swift +var callLogRequest = CometChatCallsSDK.CallLogsRequest.CallLogsBuilder() + .set(authToken: CometChat.getUserAuthToken()) + .set(limit: 30) + .set(callCategory: .call) + .build() + +callLogRequest.fetchPrevious() { [weak self] callLogs in + print("fetchPrevious success") +} onError: { [weak self] error in + print("fetchNext failed with error; \(error.errorDescription)") +} +``` + +## Get Call Details + +To retrieve the specific details of a call, use the **`getCallDetails()`** method. This method requires the Auth token of the logged-in user and the session ID along with a success and error callback. Upon success, this function will return a list of call details, as multiple calls can be initiated for one session ID. + +```swift +var sessionID = "SESSION_ID"; +CometChatCalls.getCallDetail(authToken: CometChat.getUserAuthToken(), sessionID: sessionID) { callLogs in + // Handle the fetched call details +} onError: { error in + // Handle the error +} +``` + +Note: Replace **`"SESSION_ID"`** with the ID of the session you are interested in. diff --git a/calls/v4/ios/call-session.mdx b/calls/v4/ios/call-session.mdx new file mode 100644 index 000000000..c4f9d18cb --- /dev/null +++ b/calls/v4/ios/call-session.mdx @@ -0,0 +1,428 @@ +--- +title: "Call Session" +sidebarTitle: "Call Session" +sdk_version: "4.x" +description: "CometChat Calling SDK v4 - Stable Release - Call Session for iOS" +--- + +## Overview + +This section demonstrates how to start a call session in an iOS application. Previously known as **Direct Calling**. + +Before you begin, we strongly recommend you read the [calling setup guide](/calls/v4/ios/setup). + + +If you want to implement a complete calling experience with ringing functionality (incoming/outgoing call UI), follow the [Ringing](/calls/v4/ios/ringing) guide first. Once the call is accepted, return here to start the call session. + + +## Generate Call Token + +A call token is required for secure access to a call session. Each token is unique to a specific session and user combination, ensuring that only authorized users can join the call. + +You can generate the token just before starting the call, or generate and store it ahead of time based on your use case. + +Use the `generateToken()` method to create a call token: + + + +```swift +var callToken: GenerateToken? + +let sessionId = "UNIQUE_SESSION_ID" // Random or from Call object in ringing flow +let authToken = CometChat.getUserAuthToken() // Logged in user auth token + +CometChatCalls.generateToken(authToken: authToken as NSString, sessionID: sessionId) { token in + self.callToken = token +} onError: { error in + print("Token generation failed: \(String(describing: error?.errorDescription))") +} +``` + + + +| Parameter | Description | +| --------- | ----------- | +| `sessionId` | The unique session ID. In ringing flow, this is available in the `Call` object. For standalone calls, generate a random unique string. | +| `authToken` | The logged-in user's auth token from `CometChat.getUserAuthToken()`. | + +## Start Call Session + +Use the `startSession()` method to join a call session. This method requires a call token (generated in the previous step) and a `CallSettings` object that configures the call UI and behavior. + +The `CallSettings` class configures the call UI and behavior. Use `CallSettingsBuilder` to create a `CallSettings` instance with the following required parameters: + +| Parameter | Description | +| --------- | ----------- | +| `view` | A `UIView` where the calling UI will be rendered | +| `callToken` | The `GenerateToken` object received from `generateToken()` onSuccess | + + + +```swift +guard let callToken = self.callToken else { return } + +let callSettings = CometChatCalls.CallSettingsBuilder + .setDefaultLayout(true) + .setIsAudioOnly(false) + .setDelegate(self) + .build() + +CometChatCalls.startSession(callToken: callToken, callSetting: callSettings, view: callView) { success in + print("Call session started successfully") +} onError: { error in + print("Start session failed: \(String(describing: error?.errorDescription))") +} +``` + + + +### Call Settings + +Configure the call experience using the following `CallSettingsBuilder` methods: + +| Method | Description | +| ------ | ----------- | +| `setDefaultLayout(Bool)` | Enables or disables the default call UI layout with built-in controls. `true` shows the default layout. Default: `true` | +| `setIsAudioOnly(Bool)` | Sets whether the call is audio-only or audio-video. `true` for audio-only. Default: `false` | +| `setIsSingleMode(Bool)` | Enables single participant mode. | +| `setShowSwitchToVideoCall(Bool)` | Shows or hides the switch to video call button. | +| `setEnableVideoTileClick(Bool)` | Enables or disables click interactions on video tiles. Default: `true` | +| `setEnableDraggableVideoTile(Bool)` | Enables or disables drag functionality for video tiles in Spotlight mode. Default: `true` | +| `setEndCallButtonDisable(Bool)` | Shows or hides the end call button. Default: `false` (shown) | +| `setShowRecordingButton(Bool)` | Shows or hides the recording button. Default: `false` | +| `setSwitchCameraButtonDisable(Bool)` | Shows or hides the switch camera button. Default: `false` (shown) | +| `setMuteAudioButtonDisable(Bool)` | Shows or hides the mute audio button. Default: `false` (shown) | +| `setPauseVideoButtonDisable(Bool)` | Shows or hides the pause video button. Default: `false` (shown) | +| `setAudioModeButtonDisable(Bool)` | Shows or hides the audio mode selection button. Default: `false` (shown) | +| `setStartAudioMuted(Bool)` | Starts the call with the microphone muted. Default: `false` | +| `setStartVideoMuted(Bool)` | Starts the call with the camera turned off. Default: `false` | +| `setMode(DisplayModes)` | Sets the call UI layout mode. Available: `.default`, `.single`, `.spotlight`. Default: `.default` | +| `setAvatarMode(AvatarMode)` | Sets avatar display mode. Available: `.circle`, `.square`, `.fullscreen`. Default: `.circle` | +| `setDefaultAudioMode(AudioMode)` | Sets the initial audio output device. Available: `SPEAKER`, `EARPIECE`, `BLUETOOTH`, `HEADPHONES` | +| `setIdleTimeoutPeriod(Int)` | Sets idle timeout in seconds. Warning appears 60 seconds before auto-termination. Default: `180`. *v4.1.1+* | +| `setDelegate(self)` | Sets the delegate to receive call events. | + +## Call Listeners + +The `CallsEventsDelegate` protocol provides real-time callbacks for call session events, including participant changes, call state updates, and error conditions. + +To receive call events, conform to `CallsEventsDelegate` and set the delegate in `CallSettingsBuilder` using `setDelegate(self)`. + + + +```swift +extension ViewController: CallsEventsDelegate { + + func onCallEnded() { + // Call ended, close the calling screen + } + + func onSessionTimeout() { + // Session timed out due to inactivity + } + + func onCallEndButtonPressed() { + // User pressed end call button + } + + func onUserJoined(rtcUser: RTCUser) { + // A participant joined the call + } + + func onUserLeft(rtcUser: RTCUser) { + // A participant left the call + } + + func onUserListChanged(rtcUsers: [RTCUser]) { + // Participant list updated + } + + func onAudioModeChanged(mode: [AudioMode]) { + // Available audio devices changed + } + + func onCallSwitchedToVideo(callSwitchedInfo: CallSwitchRequestInfo) { + // Call upgraded from audio to video + } + + func onUserMuted(rtcMutedUser: RTCMutedUser) { + // A participant's mute state changed + } + + func onRecordingToggled(recordingInfo: RTCRecordingInfo) { + // Recording started or stopped + } +} +``` + + + +### Events + +| Event | Description | +| ----- | ----------- | +| `onCallEnded()` | Invoked when the call session terminates for a 1:1 call. Both participants receive this callback. | +| `onSessionTimeout()` | Invoked when the call is auto-terminated due to inactivity (default: 180 seconds). *v4.1.1+* | +| `onCallEndButtonPressed()` | Invoked when the local user taps the end call button. For ringing flow, call `CometChat.endCall()`. For standalone, call `CometChatCalls.endSession()`. | +| `onUserJoined(rtcUser: RTCUser)` | Invoked when a remote participant joins. | +| `onUserLeft(rtcUser: RTCUser)` | Invoked when a remote participant leaves. | +| `onUserListChanged(rtcUsers: [RTCUser])` | Invoked whenever the participant list changes. | +| `onAudioModeChanged(mode: [AudioMode])` | Invoked when available audio devices change. | +| `onCallSwitchedToVideo(callSwitchedInfo: CallSwitchRequestInfo)` | Invoked when an audio call is upgraded to video. | +| `onUserMuted(rtcMutedUser: RTCMutedUser)` | Invoked when a participant's mute state changes. | +| `onRecordingToggled(recordingInfo: RTCRecordingInfo)` | Invoked when call recording starts or stops. | + +## End Call Session + +Ending a call session properly is essential to release media resources (camera, microphone, network connections) and update call state across all participants. + +### Ringing Flow + +When using the [Ringing](/calls/v4/ios/ringing) flow, you must coordinate between the CometChat Chat SDK and the Calls SDK to properly terminate the call. + + +The Ringing flow requires calling methods from both the Chat SDK (`CometChat.endCall()`) and the Calls SDK (`CometChatCalls.endSession()`) to ensure proper call termination. + + +**User who initiates the end call:** + +When the user presses the end call button, the `onCallEndButtonPressed()` callback is triggered. Inside this callback, call `CometChat.endCall()`. On success, call `CometChat.clearActiveCall()` and `CometChatCalls.endSession()`. + + + +```swift +func onCallEndButtonPressed() { + CometChat.endCall(sessionID: sessionId) { call in + CometChat.clearActiveCall() + CometChatCalls.endSession() + // Close the calling screen + } onError: { error in + print("End call failed: \(String(describing: error?.errorDescription))") + } +} +``` + + + +**Remote participant** (receives `onCallEnded()` callback): + + + +```swift +func onCallEnded() { + CometChat.clearActiveCall() + CometChatCalls.endSession() + // Close the calling screen +} +``` + + + +### Session Only Flow + +When using the Session Only flow (without ringing), you only need to call the Calls SDK method to end the session. + + + +```swift +func onCallEndButtonPressed() { + CometChatCalls.endSession() + // Close the calling screen +} +``` + + + +## Methods + +These methods are available for performing custom actions during an active call session. Use them to build custom UI controls or implement specific behaviors based on your use case. + + +These methods can only be called when a call session is active. + + +### Switch Camera + +Toggles between the front and rear camera during a video call. + + + +```swift +CometChatCalls.switchCamera() +``` + + +```objc +[CometChatCalls switchCamera]; +``` + + + +### Mute Audio + +Controls the local audio stream transmission. + + + +```swift +// Mute audio +CometChatCalls.audioMuted(true) + +// Unmute audio +CometChatCalls.audioMuted(false) +``` + + +```objc +// Mute audio +[CometChatCalls audioMuted:YES]; + +// Unmute audio +[CometChatCalls audioMuted:NO]; +``` + + + +### Pause Video + +Controls the local video stream transmission. + + + +```swift +// Pause video +CometChatCalls.videoPaused(true) + +// Resume video +CometChatCalls.videoPaused(false) +``` + + +```objc +// Pause video +[CometChatCalls videoPaused:YES]; + +// Resume video +[CometChatCalls videoPaused:NO]; +``` + + + +### Set Audio Mode + +Routes the audio output to a specific device. + + + +```swift +CometChatCalls.setAudioMode(AudioMode(mode: "SPEAKER")) +``` + + +```objc +[CometChatCalls setAudioModeWithMode:@"SPEAKER"]; +``` + + + +### Enter PIP Mode + +Enters Picture-in-Picture mode. + + + +```swift +CometChatCalls.enterPIPMode() +``` + + +```objc +[CometChatCalls enterPIPMode]; +``` + + + +### Exit PIP Mode + +Exits Picture-in-Picture mode. + + + +```swift +CometChatCalls.exitPIPMode() +``` + + +```objc +[CometChatCalls exitPIPMode]; +``` + + + +### Switch To Video Call + +Upgrades an ongoing audio call to a video call. + + + +```swift +CometChatCalls.switchToVideoCall() +``` + + +```objc +[CometChatCalls switchToVideoCall]; +``` + + + +### Start Recording + +Starts recording the call session. + + + +```swift +CometChatCalls.startRecording() +``` + + +```objc +[CometChatCalls startRecording]; +``` + + + +### Stop Recording + +Stops an ongoing call recording. + + + +```swift +CometChatCalls.stopRecording() +``` + + +```objc +[CometChatCalls stopRecording]; +``` + + + +### End Call + +Terminates the current call session and releases all media resources. + + + +```swift +CometChatCalls.endSession() +``` + + +```objc +[CometChatCalls endSession]; +``` + + diff --git a/calls/v4/ios/launch-call-screen-on-tap-of-push-notification.mdx b/calls/v4/ios/launch-call-screen-on-tap-of-push-notification.mdx new file mode 100644 index 000000000..7dfbe8032 --- /dev/null +++ b/calls/v4/ios/launch-call-screen-on-tap-of-push-notification.mdx @@ -0,0 +1,145 @@ +--- +title: "Launch Call Screen On Tap Of Push Notification" +sidebarTitle: "Launch Call Screen On Push" +sdk_version: "4.x" +description: "CometChat Calling SDK v4 - Stable Release - Launch Call Screen On Tap Of Push Notification for iOS" +--- + + + + + +This guide helps you to launch an incoming call screen from the UI Kit library on receiving an incoming call notification. + + + +CometChat SDK & UI Kit both need to be configured before launching the call screen. + + + +*** + +## Step 1. Process push notification payload and grab `Call` object + +To present an incoming call screen, firstly you will need a `Call` object. You can grab this from the push notification payload itself of incoming call notification. You need to call `CometChat.processMessage()` method to process push notification payload. + + + +```swift + func userNotificationCenter(_ center: UNUserNotificationCenter, + didReceive response: UNNotificationResponse, + withCompletionHandler completionHandler: @escaping () -> Void) { + + if let userInfo = response.notification.request.content.userInfo as? [String : Any], let messageObject = userInfo["message"] as? [String:Any] { + print("didReceive: \(userInfo)") + if let baseMessage = CometChat.processMessage(messageObject).0 { + switch baseMessage.messageCategory { + case .message: + print("Message Object Received: \(String(describing: (baseMessage as? TextMessage)?.stringValue()))") + + case .action: break + case .call: break + case .custom: break + @unknown default: break + } + } + } + completionHandler() + } +``` + + + +## Step 2 . Launch call screen (Method 1) + +You can directly launch the view controller from the app delegate once you receive Call Object. + + + +```swift + if let call = baseMessage as? Call { + DispatchQueue.main.async { + let call = CometChatIncomingCall() + call.modalPresentationStyle = .custom + call.setCall(call: call) + if let window = self.window, let rootViewController = window.rootViewController { + var currentController = rootViewController + while let presentedController = currentController.presentedViewController { + currentController = presentedController + } + if (!call.isViewLoaded && (call.view.window != nil)) { + currentController.present(call, animated: true, completion: nil) + } + } + } + } +``` + + + +If you are facing any difficulties while launching the Call Screen from App Delegate, then you can use another method. + +## Step 2 . Launch call screen (Method 2) + +You can launch the call screen from your base view controller instead of launching it from the App Delegate. This method uses NotificationCenter to trigger and present Call Screen. + +1. In this method you need to fire notification after you receive Call Object. +2. In Notification's user info you can pass Call Object to that desired notification. + +### Trigger notification from App Delegate + + + +```swift +if let call = baseMessage as? Call { + DispatchQueue.main.asyncAfter(deadline: .now() + 0.5) { + NotificationCenter.default.post(name: NSNotification.Name(rawValue: "didReceivedIncomingCall"), object: nil, userInfo: ["call":call]) + } +} +``` + + + +3. On the other hand, you need to observe for the above notification in your base view controller + + + +1. Base view controller is a controller that launches immediately after the app delegate. +2. Base view controller should be present to observe the notification when notification fires. +3. If the view controller is not present in the memory when a new notification receives, then it won't launch Call Screen. + + + +### Observe notification in Base View Controller + + + +```swift +class BaseViewController : UIViewController { + + override func viewDidLoad() { + NotificationCenter.default.addObserver(self, selector:#selector(self.didReceivedIncomingCall(_:)), name: NSNotification.Name(rawValue: "didReceivedIncomingCall"), object: nil) + } +} +``` + + + +### Add selector method & Launch call screen + + + +```swift + @objc func didReceivedIncomingCall(_ notification: NSNotification) { + if let currentCall = notification.userInfo?["call"] as? Call { + DispatchQueue.main.async { + let call = CometChatIncomingCall() + call.modalPresentationStyle = .custom + call.setCall(call: currentcall) + self.present(call, animated: true, completion: nil) + } + } + } +``` + + diff --git a/calls/v4/ios/overview.mdx b/calls/v4/ios/overview.mdx new file mode 100644 index 000000000..8291c0589 --- /dev/null +++ b/calls/v4/ios/overview.mdx @@ -0,0 +1,89 @@ +--- +title: "Calling SDK" +sidebarTitle: "Overview" +sdk_version: "4.x" +description: "CometChat Calling SDK v4 - Stable Release - Overview for iOS. This is the stable v4 documentation. Most users should use this version." +--- + + +🚀 **v5 Beta Available** — The Calling SDK v5 is now available in beta with significant improvements. [Check out the v5 docs →](/calls/ios/overview) + + +## Overview + +CometChat provides voice and video calling capabilities for your iOS application. This guide helps you choose the right implementation approach based on your use case. + +## Prerequisites + +1. CometChat SDK installed and configured. See the [Setup](/sdk/ios/setup) guide. +2. CometChat Calls SDK added to your project. For detailed setup instructions, see the [Calls SDK Setup](/calls/v4/ios/setup) guide. + +## Choose Your Implementation + +CometChat offers three approaches to implement calling: + + + + Complete calling flow with incoming/outgoing call UI, accept/reject functionality, and call notifications. + + + Direct call session management. Use with Ringing flow or for custom call initiation logic. + + + Calls SDK only implementation without the Chat SDK dependency. + + + +### Ringing + +Use this when you need a complete calling experience with: +- Incoming and outgoing call UI +- Call accept/reject/cancel functionality +- Call notifications via push notifications +- Integration with CometChat messaging + +**Flow:** Initiate call → Receiver gets notified → Accept/Reject → Start session + +[Get started with Ringing →](/calls/v4/ios/ringing) + +### Call Session + +Use this when you need to: +- Start a call session after the Ringing flow completes +- Implement custom call initiation logic with your own UI +- Join participants to a shared session using a session ID + +**Flow:** Generate token → Start session → Manage call → End session + +[Get started with Call Session →](/calls/v4/ios/call-session) + +### Standalone Calling + +Use this when you want: +- Calling functionality without the Chat SDK +- Your own user authentication system +- Minimal SDK footprint + +**Flow:** Get auth token via REST API → Generate call token → Start session + +[Get started with Standalone Calling →](/calls/v4/ios/standalone-calling) + +## Features + + + + Record audio and video calls for playback, compliance, or archival purposes. + + + Customize the video call UI layout, participant tiles, and visual appearance. + + + Enable screen sharing and presentation capabilities during calls. + + + Retrieve and display call history including duration, participants, and status. + + + Configure automatic call termination when participants are inactive. + + diff --git a/calls/v4/ios/presenter-mode.mdx b/calls/v4/ios/presenter-mode.mdx new file mode 100644 index 000000000..a0c267205 --- /dev/null +++ b/calls/v4/ios/presenter-mode.mdx @@ -0,0 +1,216 @@ +--- +title: "Presenter Mode" +sidebarTitle: "Presenter Mode" +sdk_version: "4.x" +description: "CometChat Calling SDK v4 - Stable Release - Presenter Mode for iOS" +--- + +## Overview + +The Presenter Mode feature allows developers to create a calling service experience in which: + +1. There are one or more users who are presenting their video, audio and/or screen (Maximum 5) +2. Viewers who are consumers of that presentation. (They cannot send their audio, video or screen streams out). +3. The total number of presenters and viewers can go up to 100. +4. Features such as mute/unmute audio, show/hide camera capture, recording, etc. will be enabled only for the Presenter in this mode. +5. Other call participants will not get these features. Hence they act like passive viewers in the call. + +Using this feature developers can create experiences such as: + +1. All hands calls +2. Keynote speeches +3. Webinars +4. Talk shows +5. Online classes +6. and many more... + +## About this guide + +This guide demonstrates how to start a presentation into an iOS application. Before you begin, we strongly recommend you read the [calling setup guide](/calls/v4/ios/setup). + +Before starting a call session you have to generate a call token using the below generateToken() method. + +**Generate Token** + +Generate token method takes two parameter `authToken` and `sessionId`. + +**`authToken`**: User can get the auth token from CometChatSDK that has a static method getUsersAuthToken(). + +**`sessionId`**: Any random string. + + + +```swift +// jwtToken requires in the 3rd step. so when user get from the generate token +// store in jwtToken variable. +var callToken: String? + +CometChatCalls.generateToken(authToken: authToken as NSString, sessionID: sessionId) { (token, error) in + if let token = token { + self.callToken = token + } else if let error = error { + print(error) + } +} +``` + + + +| Parameter | Description | +| ------------- | ----------------------------------------------------------------------------------------------------------------------------------- | +| sessionId | The unique random session ID. In case you are using default call then session ID is available in the `Call` object. | +| userAuthToken | The use auth token is logged in user auth token which you can get by calling CometChat Chat SDK method CometChat.getUserAuthToken() | + +| Error Code | Error Message | +| ---------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| INVALID\_ARGUMENT\_EXCEPTION | If you pass invalid param to a function or you don't pass the required params. example: Authtoken and session are required, Invalid callToken passed, please verify. | + +**Start Presentation Session** + +The most important class that will be used in the implementation is the `PresentationSettings` class. This class allows you to set the various parameters for the Presentation Mode. In order to set the various parameters of the `PresentationSettings` class, you need to use the `PresentationSettingsBuilder` class. Below are the various options available with the `PresentationSettings` class. + +`PresentationSettingsBuilder` class takes the 1 mandatory parameter as a part of the constructor: + +1. Context of the application + +You will also need to set the User Type, There are 2 type of users in Presenter Mode, `Presenter` & `Participant` , You can set this `PresentationSettingsBuilder` by using the following method `isPresenter(true/false)` + +A basic example of how to start a Presentation: + +The **mandatory** parameters that are required to be present for any call/conference to work are: + +1. UIView i.e a view in which user want to show the calling view inside it. +2. PresentationSettings. + +**Initialise Presenter Settings** + + + +```swift +// In the callSettings, User have to configure the callingView. +// callSettings is required to start call. + +let presenterSettings = CometChatCalls.presentationSettingsBuilder + .setIsPresenter(true) + .setDelegate(self) //class that confroms to CallsEventsDelegate + .setStartAudioMuted(true) + .setDefaultAudioMode("BLUETOOTH") + .build() +``` + + + +| Properties | Description | +| ------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| setIsPresenter(Bool) | If set to true, the user will join the call as a presenter. If set to false, the user will join the call as an audience member. **Default value = false** | +| setDefaultLayout(Bool) | If set to true, enables the default layout for handling the call operations. If set to false it hides the button layout and just displays the CallView. **Default value = true** | +| setIsAudioOnly(Bool) | If set to true, the call will be strictly an audio call. If set to false, the call will be an audio-video call. **Default value = false** | +| setEndCallButtonDisable(Bool) | If set to true it displays the EndCallButton in Button Layout. If set to false it hides the EndCallButton in Button Layout. **Default value = true** | +| setShowRecordingButton(Bool) | If set to true it displays the ShowRecordingButton in Button Layout. If set to false it hides the ShowRecordingButton in Button Layout. **Default value = true** | +| setSwitchCameraButtonDisable(Bool) | If set to true it displays the SwitchCameraButton in Button Layout. If set to false it hides the SwitchCameraButton in Button Layout. **Default value = true** | +| setMuteAudioButtonDisable(Bool) | If set to true it displays the MuteAudioButton in Button Layout. If set to false it hides the MuteAudioButton in Button Layout. | +| setPauseVideoButtonDisable(Bool) | If set to true it displays the PauseVideoButton in Button Layout. If set to false it hides the PauseVideoButton in Button Layout. **Default value = true** | +| setAudioModeButtonDisable(Bool) | If set to true it displays the AudioModeButton in Button Layout. If set to false it hides the AudioModeButton in Button Layout. **Default value = true** | +| setStartAudioMuted(Bool) | This ensures the call is started with the audio muted if set to true. **Default value = false** | +| setStartVideoMuted(Bool) | This ensures the call is started with the video muted if set to true. **Default value = false** | +| setDefaultAudioMode("BLUETOOTH") | This method can be used if you wish to start the call with a specific audio mode. **The available options are SPEAKER, EARPIECE, BLUETOOTH & HEADPHONES** | +| setDelegate(CallsEventsDelegate.self) | Pass the reference of the UIViewController where the CallsEventsDelegate will conform. | + +### **Start Call** + +To start a call, user have to pass `callToken` and `presenterSettings`. + +**`callToken`** In the success block of generateToken(), user get the callToken. + +**`PresentationSettings`** `presenterSettings` can be set from the `presentationSettingsBuilder` + +**`View`** This is going to be the view in which CometChatCalls can load the calling views + + + +```swift +let callToken: String = self.callToken//Received on generate token onSuccess +let callView: UIView = self.callUIView// a UIView you want to show the calling view in + + +CometChatCalls.joinPresentation(callToken: callToken, presenterSettings: presenterSettings, view: callView) { success in + print("success joinPresentation \(success)") +} onError: { error in + print("error joinPresentation \(error?.errorCode)") +} +``` + + + +| Error Code | Error Message | +| ------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------ | +| INVALID\_PROP\_EXCEPTION | If you pass an invalid prop to a functional component or you don't pass the required prop. example: Component requires valid call settings | +| API\_ERROR | If there is some error thrown by the API server For example unauthorized | +| UNKNOWN\_API\_ERROR | If there is some API error but it didn't come from the server. For example, if the internet is not available and API is called. | +| AUTH\_ERR\_TOKEN\_INVALID\_SIGNATURE | if Token is invalid | + +**Calling Events Listeners** + +To get calling events, User have to conform the **"CallsEventsDelegate"** delegate. For these events working, User have to pass **"self"** to **setDelegate()** in presentationSettingsBuilder. + +| | Listener (CallEventsDelegate) | +| -------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------- | +| **Listener** | **Description** | +| *onCallEnded*() | This method is called when the call is successfully ended. | +| *onCallEndButtonPressed()* | This method is called when the end call button press. | +| *onUserJoined(user: NSDictionary)* | This method is called when any other user joins the call. The user details can be obtained from the user as parameter. | +| *onUserLeft(user: NSDictionary)* | This method is called when a user leaves the call. The details of the user can be obtained from the provided user as parameter. | +| *onUserListChanged(userList: NSArray)* | This method is triggered when user list changes. | +| *onAudioModeChanged(audioModeList: NSArray)* | This method is triggered when audio mode changes. | +| *onCallSwitchedToVideo(info: NSDictionary)* | This callback is triggered when an audio call is converted into a video call. you will get the information in info as parameter. | +| *onUserMuted(info: NSDictionary)* | This method is triggered when a user is muted in the ongoing call. | +| *onRecordingToggled(info: NSDictionary)* | This method is triggered when a user toggles recording. | + + + +```swift +// These events will trigger only if user set the setDelegate(self) in callSettings. + +extension ViewController: CallsEventsDelegate { + + func onCallEnded() { + print("onCallEnded") + } + + func onCallEndButtonPressed() { + print("onCallEndButtonPressed") + } + + func onUserJoined(user: NSDictionary) { + print("onUserJoined") + } + + func onUserLeft(user: NSDictionary) { + print("onUserLeft") + } + + func onUserListChanged(userList: NSArray) { + print("onUserListChanged") + } + + func onAudioModeChanged(audioModeList: NSArray) { + print("onAudioModeChanged") + } + + func onCallSwitchedToVideo(info: NSDictionary) { + print("onCallSwitchedToVideo") + } + + func onUserMuted(info: NSDictionary) { + print("onUserMuted") + } + + func onRecordingToggled(info: NSDictionary) { + print("onRecordingToggled") + } +} +``` + + + +In case you wish to achieve a completely customised UI for the Calling experience, you can do so by embedding default iOS buttons to the screen as per your requirement and then use the below methods to achieve different functionalities for the embedded buttons. diff --git a/calls/v4/ios/recording.mdx b/calls/v4/ios/recording.mdx new file mode 100644 index 000000000..91568f617 --- /dev/null +++ b/calls/v4/ios/recording.mdx @@ -0,0 +1,69 @@ +--- +title: "Recording" +sidebarTitle: "Recording" +sdk_version: "4.x" +description: "CometChat Calling SDK v4 - Stable Release - Recording for iOS" +--- + +This section will guide you to implement call recording feature for the voice and video calls. + +## Implementation + +Once you have decided to implement [Ringing](/calls/v4/ios/ringing) or [Call Session](/calls/v4/ios/call-session) calling and followed the steps to implement them. Just few additional listeners and methods will help you quickly implement call recording in your app. + +You need to make changes in the CometChat.startCall method and add the required listeners for recording. Please make sure your callSettings is configured accordingly for [Ringing](/calls/v4/ios/ringing) or [Call Session](/calls/v4/ios/call-session). + +A basic example of how to make changes to implement recording for a call: + + + +```swift +let sessionID = "12345" //you can set anything +let callView = UIView()// a UIView you want to show the calling view in +let callToken = "" + +let callSettings = CallSettings.CallSettingsBuilder(callView: callView, sessionId:sessionID).setAudioOnlyCall(audioOnly: true).enableDefaultLayout(defaultLayout: true).build() + + CometChatCalls.startSession(callToken: callToken, callSetting: callSettings, view: callView) { success in + print("CometChatCalls startSession success: \(success)") + } onError: { error in + print("CometChatCalls startSession error: \(String(describing: error?.errorDescription))") + } +``` + + + +## Settings for call recording + +The `CallSettings`class allows you to customise the overall calling experience. The properties for the call/conference can be set using the `CallSettingsBuilder` class. This will eventually give you and object of the `CallSettings` class which you can pass to the `startCall()` method to start the call. + +The options available for recording of calls are: + +| Setting | Description | +| -------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| `showCallRecordButton(boolean showCallRecordButton)` | If set to `true` it displays the Recording button in the button Layout. if set to `false` it hides the Recording button in the button Layout. **Default value = false** | +| `startRecordingOnCallStart(boolean startRecordingOnCallStart)` | If set to `true` call recording will start as soon as the call is started. if set to `false` call recording will not start as soon as the call is started. **Default value = false** | + +### Start Recording + +You can use the startRecording() method to start call recording. + + + +```swift +CallManager.startRecording() +``` + + + +### Stop Recording + +You can use the stopRecording() method to stop call recording. + + + +```swift +CallManager.stopRecording() +``` + + diff --git a/calls/v4/ios/ringing.mdx b/calls/v4/ios/ringing.mdx new file mode 100644 index 000000000..2e7db467c --- /dev/null +++ b/calls/v4/ios/ringing.mdx @@ -0,0 +1,366 @@ +--- +title: "Ringing" +sidebarTitle: "Ringing" +sdk_version: "4.x" +description: "CometChat Calling SDK v4 - Stable Release - Ringing for iOS" +--- + +## Overview + +This section explains how to implement a complete calling workflow with ringing functionality, including incoming/outgoing call UI, call acceptance, rejection, and cancellation. Previously known as **Default Calling**. + + +After the call is accepted, you need to start the call session. See the [Call Session](/calls/v4/ios/call-session#start-call-session) guide for details on starting and managing the actual call. + + +**Call Flow:** + +1. **Caller** initiates a call using `initiateCall()` +2. **Receiver** gets notified via `onIncomingCallReceived()` callback +3. **Receiver** can either: + - Accept the call using `acceptCall()` + - Reject the call using `rejectCall()` with status `.rejected` +4. **Caller** can cancel the call using `rejectCall()` with status `.cancelled` +5. Once accepted, both participants call `startSession()` to join the call + +## Initiate Call + +The `initiateCall()` method sends a call request to a user or a group. On success, the receiver gets an `onIncomingCallReceived()` callback. + + + +```swift +let receiverID = "UID" +let receiverType: CometChat.ReceiverType = .user // or .group +let callType: CometChat.CallType = .video // or .audio + +let newCall = Call(receiverId: receiverID, callType: callType, receiverType: receiverType) + +CometChat.initiateCall(call: newCall, onSuccess: { call in + guard let call = call else { return } + // Call initiated, show outgoing call UI + // Store call.sessionID for later use + print("Call initiated successfully") +}) { error in + print("Call initiation failed: \(error?.errorDescription ?? "")") +} +``` + + +```swift +let receiverID = "UID" +let receiverType: CometChat.ReceiverType = .user // or .group +let callType: CometChat.CallType = .video // or .audio + +let newCall = Call(receiverId: receiverID, callType: callType, receiverType: receiverType) + +// Set a custom timeout of 30 seconds (default is 45 seconds) +CometChat.initiateCall(call: newCall, timeout: 30, onSuccess: { call in + guard let call = call else { return } + // Call initiated, show outgoing call UI + // Store call.sessionID for later use + print("Call initiated successfully") +}) { error in + print("Call initiation failed: \(error?.errorDescription ?? "")") +} +``` + + +```objc +NSString *receiverID = @"UID"; + +Call *newCall = [[Call alloc] initWithReceiverId:receiverID callType:CallTypeVideo receiverType:ReceiverTypeUser]; + +[CometChat initiateCallWithCall:newCall onSuccess:^(Call *call) { + // Call initiated, show outgoing call UI + NSLog(@"Call initiated successfully"); +} onError:^(CometChatException *error) { + NSLog(@"Call initiation failed: %@", [error errorDescription]); +}]; +``` + + + +| Parameter | Description | +| --------- | ----------- | +| `receiverID` | The UID or GUID of the recipient | +| `receiverType` | The type of the receiver: `.user` or `.group` | +| `callType` | The type of the call: `.audio` or `.video` | +| `timeout` | Optional. The timeout duration in seconds for the call to be answered before it's automatically cancelled. Defaults to 45 seconds. | + +## Call Listeners + +Register the `CometChatCallDelegate` to receive real-time call events. + + + +```swift +extension ViewController: CometChatCallDelegate { + + func onIncomingCallReceived(incomingCall: Call?, error: CometChatException?) { + // Show incoming call UI + } + + func onOutgoingCallAccepted(acceptedCall: Call?, error: CometChatException?) { + // Receiver accepted, start the call session + } + + func onOutgoingCallRejected(rejectedCall: Call?, error: CometChatException?) { + // Receiver rejected, dismiss outgoing call UI + } + + func onIncomingCallCanceled(canceledCall: Call?, error: CometChatException?) { + // Caller cancelled, dismiss incoming call UI + } + + func onCallEndedMessageReceived(endedCall: Call?, error: CometChatException?) { + // Call ended by remote participant + } +} +``` + + +```objc +@interface ViewController () +@end + +@implementation ViewController + +- (void)viewDidLoad { + [super viewDidLoad]; + [CometChat setCalldelegate:self]; +} + +- (void)onIncomingCallReceivedWithIncomingCall:(Call *)incomingCall error:(CometChatException *)error { + // Show incoming call UI +} + +- (void)onOutgoingCallAcceptedWithAcceptedCall:(Call *)acceptedCall error:(CometChatException *)error { + // Receiver accepted, start the call session +} + +- (void)onOutgoingCallRejectedWithRejectedCall:(Call *)rejectedCall error:(CometChatException *)error { + // Receiver rejected, dismiss outgoing call UI +} + +- (void)onIncomingCallCanceledWithCanceledCall:(Call *)canceledCall error:(CometChatException *)error { + // Caller cancelled, dismiss incoming call UI +} + +@end +``` + + + + +Set your view controller as the CometChat call delegate in `viewDidLoad()`: `CometChat.calldelegate = self` + + +### Events + +| Event | Description | +| ----- | ----------- | +| `onIncomingCallReceived(incomingCall: Call)` | Invoked when an incoming call is received. Display incoming call UI here. | +| `onOutgoingCallAccepted(acceptedCall: Call)` | Invoked on the caller's device when the receiver accepts. Start the call session here. | +| `onOutgoingCallRejected(rejectedCall: Call)` | Invoked on the caller's device when the receiver rejects. Dismiss outgoing call UI. | +| `onIncomingCallCanceled(canceledCall: Call)` | Invoked on the receiver's device when the caller cancels. Dismiss incoming call UI. | +| `onCallEndedMessageReceived(endedCall: Call)` | Invoked when a call ends. Update call history here. | + +## Accept Call + +When an incoming call is received via `onIncomingCallReceived()`, use `acceptCall()` to accept it. On success, start the call session. + + + +```swift +let sessionID = incomingCall?.sessionID ?? "" + +CometChat.acceptCall(sessionID: sessionID, onSuccess: { call in + // Call accepted, now start the call session + print("Call accepted successfully") +}) { error in + print("Accept call failed: \(error?.errorDescription ?? "")") +} +``` + + +```objc +[CometChat acceptCallWithSessionID:incomingCall.sessionID onSuccess:^(Call *call) { + // Call accepted, now start the call session + NSLog(@"Call accepted successfully"); +} onError:^(CometChatException *error) { + NSLog(@"Accept call failed: %@", [error errorDescription]); +}]; +``` + + + +## Reject Call + +Use `rejectCall()` to reject an incoming call. Set the status to `.rejected`. + + + +```swift +let sessionID = incomingCall?.sessionID ?? "" +let status: CometChatConstants.callStatus = .rejected + +CometChat.rejectCall(sessionID: sessionID, status: status, onSuccess: { call in + // Call rejected, dismiss incoming call UI + print("Call rejected successfully") +}) { error in + print("Reject call failed: \(error?.errorDescription ?? "")") +} +``` + + +```objc +[CometChat rejectCallWithSessionID:incomingCall.sessionID status:callStatusRejected onSuccess:^(Call *call) { + // Call rejected, dismiss incoming call UI + NSLog(@"Call rejected successfully"); +} onError:^(CometChatException *error) { + NSLog(@"Reject call failed: %@", [error errorDescription]); +}]; +``` + + + +## Cancel Call + +The caller can cancel an outgoing call before it's answered using `rejectCall()` with status `.cancelled`. + + + +```swift +let sessionID = outgoingCall?.sessionID ?? "" +let status: CometChatConstants.callStatus = .cancelled + +CometChat.rejectCall(sessionID: sessionID, status: status, onSuccess: { call in + // Call cancelled, dismiss outgoing call UI + print("Call cancelled successfully") +}) { error in + print("Cancel call failed: \(error?.errorDescription ?? "")") +} +``` + + +```objc +[CometChat rejectCallWithSessionID:outgoingCall.sessionID status:callStatusCancelled onSuccess:^(Call *call) { + // Call cancelled, dismiss outgoing call UI + NSLog(@"Call cancelled successfully"); +} onError:^(CometChatException *error) { + NSLog(@"Cancel call failed: %@", [error errorDescription]); +}]; +``` + + + +## Start Call Session + +Once the call is accepted, both participants need to start the call session. + +**Caller flow:** In the `onOutgoingCallAccepted()` callback, generate a token and start the session. + +**Receiver flow:** In the `acceptCall()` success callback, generate a token and start the session. + + + +```swift +let sessionId = call?.sessionID ?? "" +let authToken = CometChat.getUserAuthToken() ?? "" + +// Step 1: Generate call token +CometChatCalls.generateToken(authToken: authToken as NSString, sessionID: sessionId) { token in + + // Step 2: Configure call settings + let callSettings = CometChatCalls.CallSettingsBuilder + .setDefaultLayout(true) + .setIsAudioOnly(false) + .setDelegate(self) + .build() + + // Step 3: Start the call session + CometChatCalls.startSession(callToken: token, callSetting: callSettings, view: self.callView) { success in + print("Call session started successfully") + } onError: { error in + print("Start session failed: \(String(describing: error?.errorDescription))") + } + +} onError: { error in + print("Token generation failed: \(String(describing: error?.errorDescription))") +} +``` + + + +For more details on call settings and customization, see the [Call Session](/calls/v4/ios/call-session#start-call-session) guide. + +## End Call + +To end an active call in the ringing flow, the process differs based on who ends the call. + +**User who ends the call:** + +When the user presses the end call button, the `onCallEndButtonPressed()` callback is triggered. Inside this callback, call `CometChat.endCall()`. On success, call `CometChat.clearActiveCall()` and `CometChatCalls.endSession()`. + + + +```swift +func onCallEndButtonPressed() { + CometChat.endCall(sessionID: sessionId) { call in + CometChat.clearActiveCall() + CometChatCalls.endSession() + // Close the calling screen + } onError: { error in + print("End call failed: \(String(describing: error?.errorDescription))") + } +} +``` + + + +**Remote participant** (receives `onCallEnded()` callback): + + + +```swift +func onCallEnded() { + CometChat.clearActiveCall() + CometChatCalls.endSession() + // Close the calling screen +} +``` + + + +For more details, see the [End Call Session](/calls/v4/ios/call-session#end-call-session) guide. + +## Busy Call Handling + +If the receiver is already on another call, you can reject the incoming call with `.busy` status. + + + +```swift +let sessionID = incomingCall?.sessionID ?? "" +let status: CometChatConstants.callStatus = .busy + +CometChat.rejectCall(sessionID: sessionID, status: status, onSuccess: { call in + // Busy status sent to caller + print("Busy rejection sent") +}) { error in + print("Busy rejection failed: \(error?.errorDescription ?? "")") +} +``` + + +```objc +[CometChat rejectCallWithSessionID:incomingCall.sessionID status:callStatusBusy onSuccess:^(Call *call) { + // Busy status sent to caller + NSLog(@"Busy rejection sent"); +} onError:^(CometChatException *error) { + NSLog(@"Busy rejection failed: %@", [error errorDescription]); +}]; +``` + + diff --git a/calls/v4/ios/session-timeout.mdx b/calls/v4/ios/session-timeout.mdx new file mode 100644 index 000000000..65ebb77fb --- /dev/null +++ b/calls/v4/ios/session-timeout.mdx @@ -0,0 +1,35 @@ +--- +title: "Session Timeout Flow" +sidebarTitle: "Session Timeout" +sdk_version: "4.x" +description: "CometChat Calling SDK v4 - Stable Release - Session Timeout for iOS" +--- + +Available since v4.1.1 + +## Overview + +CometChat Calls SDK provides a mechanism to handle session timeouts for idle participants. By default, if a participant is alone in a call session for 180 seconds (3 minutes), the following sequence is triggered: + +1. After 120 seconds of being alone in the session, the participant will see a dialog box + +2. This dialog provides options to either: + + * Stay in the call + * Leave immediately + +3. If no action is taken within the next 60 seconds, the call will automatically end + +This feature helps manage inactive call sessions and prevents unnecessary resource usage. The idle timeout period ensures that participants don't accidentally remain in abandoned call sessions. + +### Session Timeout Flow + + + + + + + +The `onSessionTimeout` event is triggered when the call automatically terminates due to session timeout, as illustrated in the diagram above. + + diff --git a/calls/v4/ios/setup.mdx b/calls/v4/ios/setup.mdx new file mode 100644 index 000000000..90e145264 --- /dev/null +++ b/calls/v4/ios/setup.mdx @@ -0,0 +1,255 @@ +--- +title: "Setup" +sidebarTitle: "Setup" +sdk_version: "4.x" +description: "CometChat Calling SDK v4 - Stable Release - Setup for iOS" +--- + +The **CometChatCalls** is developed to keep developers in mind and aims to reduce development efforts significantly. Let's start to integrate Calls Kit into your project. + +*** + +## Before you begin + +Before installing **CometChatCalls for iOS**, you need to create a CometChat application on the CometChat Dashboard, which comprises everything required in a chat service including users, groups, calls & messages. You will need the `App ID` , `AuthKey`, `Region` of your CometChat application when initializing the SDK. + +**i. Register on CometChat 🧑💻** + +* To install **CometChatCalls for iOS**, you need to first register on **CometChat Dashboard**. [Click here to sign up](https://app.cometchat.com/login). + +**ii. Get Your Application Keys 🔑** + +* Create a **new app** +* Head over to the **QuickStart** or **API & Auth Keys section** and note the **App ID**, **Auth Key**, and **Region**. + + + +Each CometChat application can be integrated with a single client app. Within the same application, users can communicate with each other across all platforms, whether they are on mobile devices or on the web. + + + +*** + +## Prerequisites + +The minimum requirements for **CometChatCalls for iOS** are: + +* `macOS` +* `Xcode` +* `iOS 13.0 and later` +* `Swift 5.0+` + +*** + +## Get Started + +You can start building a modern calling experience in your app by installing UIKit. This developer kit is an add-on feature to CometChat iOS SDK so installing it will also install the core Chat SDK. + +*** + +### Step 1 : Create a project + +To get started, open `Xcode` and create a new project. + + + + + +#### Enter name, identifier and proceed. + + + + + +*** + +### Step 2 : Install CometChatProCalls Kit + +You can install **CometChatCalls for iOS** through **Swift Package Manager or Cocoapods** + +### CocoaPods + +We recommend using [CocoaPods](https://cocoapods.org/), as they are the most advanced way of managing iOS project dependencies. Open a terminal window, move to your project directory, and then create a `Podfile` by running the following command. + + + +```bash +$ pod init +``` + + + +Add the following lines to the Podfile. + + + +```ruby +platform :ios, '11.0' +use_frameworks! + +target 'YourApp' do + pod 'CometChatSDK', '4.0.72' + pod 'CometChatCallsSDK', '4.2.2' + +end +``` + + + +And then install the `CometChatCalls` framework through CocoaPods. + + + +```bash +$ pod install +``` + + + +If you're facing any issues while installing pods then use the below command. + + + +```bash +$ pod install --repo-update +``` + + + +Always get the latest version of `CometChatCalls` by command. + + + +```bash +$ pod update CometChatCallsSDK +``` + + + + +CometChatCallsSDK version `4.0.0` is compatible with `4.0.0` version of CometChatSDK + + +### Swift Package Manager + +1. Go to your Swift Package Manager's **File** tab and select **Add Packages**. + + + + + +2. Add `CometChatProCalls` into your `Package Repository` as below: + + + +```bash +https://github.com/cometchat/ios-calls-sdk.git +``` + + + +3. To add the package, select Version Rules, enter Up to Exact Version, **`4.1.2`**, and click Next. + + + + + +4. Once, the package is added it will look like this. + + + + + +### **Cocoa Pods** + +Go to root directory. (Where the .xcodeproj reside.) and perform these commands. + + +Pod installation + +1. pod init +2. open -a Xcode Podfile + +Your pod file will open in the text editor. Add your project dependency. + +3. pod 'CometChatCallsSDK', '4.2.2' + +4. For M1 Mac - arch -x86\_64 pod install or For Intel Mac - pod install + + +*** + +## Initialize CometChatProCalls + +### 1. CallsAppSettings + +The `init()` method takes `CallsAppSettings` as a parameter and user can set it by `CallsAppSettingBuilder`. User should be first set the `CallsAppSettings`. + +CallsAppSettings has 3 parameters + +1. `appId` it is mandatory parameter. +2. `region` It is mandatory parameter. +3. `host` It is optional parameter. + + + +```swift +import CometChatProCalls + +let appID = "APP_ID" +let region = "REGION" +let host = "HOST" +let callSettings: CometChatProCalls.CallSettings? + +let callAppSettings = CallAppSettingsBuilder() + .setAppId(appId) + .setRegion(region) + .setHost(host) + .build() +``` + + +```objc +@interface ViewController : UIViewController + +@property (nonatomic, strong) CallSetting *callSettings; +@property (nonatomic, strong) NSString *appId; +@property (nonatomic, strong) NSString *region; +@property (nonatomic, strong) NSString *host; + +@end + +@implementation ViewController + +-(void)setupCallsSetting { + + self.callAppSettings = [[[[[CallAppSettingsBuilder new] + setAppId:self.appId] + setRegion:self.region] + setHost:self.host] + build]; +} +@end +``` + + + +Make sure you replace the **appId** with your CometChat *appId* and *region* with your app region in the above code. + +### 2. Init() Method + +From the above CallAppSettings, pass the settings to the init() method. + + + +```swift +guard let callAppSettings = callAppSettings else { return } + +CometChatCalls.init(callsAppSettings: callAppSettings) { success in + print("CometChatCalls init success: \(success)") +} onError: { error in + print("CometChatCalls init error: \(String(describing: error?.errorDescription))") +} +``` + + diff --git a/calls/v4/ios/standalone-calling.mdx b/calls/v4/ios/standalone-calling.mdx new file mode 100644 index 000000000..850bcde2f --- /dev/null +++ b/calls/v4/ios/standalone-calling.mdx @@ -0,0 +1,390 @@ +--- +title: "Standalone Calling" +sidebarTitle: "Standalone Calling" +sdk_version: "4.x" +description: "CometChat Calling SDK v4 - Stable Release - Standalone Calling for iOS" +--- + +## Overview + +This section demonstrates how to implement calling functionality using only the CometChat Calls SDK, without requiring the Chat SDK. This is ideal for applications that need video/audio calling capabilities without the full chat infrastructure. + + +Before you begin, ensure you have completed the [Calls SDK setup](/calls/v4/ios/setup). + + +## User Authentication + +To start a call session, you need a user auth token. Since this implementation doesn't use the Chat SDK, you'll need to obtain the auth token via the CometChat REST API. + + +To understand user authentication in CometChat, see the [User Auth](/fundamentals/user-auth) documentation. + + +You can obtain the auth token using one of these REST API endpoints: + +- [Create Auth Token](/rest-api/auth-tokens/create) — Creates a new auth token for a user +- [Get Auth Token](/rest-api/auth-tokens/get) — Retrieves an existing auth token + + +For testing or POC purposes, you can create an auth token directly from the [CometChat Dashboard](https://app.cometchat.com). Navigate to **Users & Groups → Users**, select a user, and click **+ Create Auth Token**. + + +Store the auth token securely in your application for use when generating call tokens. + +## Generate Call Token + +A call token is required for secure access to a call session. Each token is unique to a specific session and user combination, ensuring that only authorized users can join the call. + +Use the `generateToken()` method to create a call token: + + + +```swift +var callToken: GenerateToken? + +let sessionId = "UNIQUE_SESSION_ID" // Generate a unique session ID +let userAuthToken = "USER_AUTH_TOKEN" // Obtained from REST API + +CometChatCalls.generateToken(authToken: userAuthToken as NSString, sessionID: sessionId) { token in + self.callToken = token +} onError: { error in + print("Token generation failed: \(String(describing: error?.errorDescription))") +} +``` + + + +| Parameter | Description | +| --------- | ----------- | +| `sessionId` | A unique session ID for the call. Generate this yourself or use a shared ID for participants to join the same call. | +| `userAuthToken` | The user auth token obtained from the CometChat REST API. | + +## Start Call Session + +Use the `startSession()` method to join a call session. This method requires a call token and a `CallSettings` object. + + + +```swift +guard let callToken = self.callToken else { return } + +let callSettings = CometChatCalls.CallSettingsBuilder + .setDefaultLayout(true) + .setIsAudioOnly(false) + .setDelegate(self) + .build() + +CometChatCalls.startSession(callToken: callToken, callSetting: callSettings, view: callView) { success in + print("Call session started successfully") +} onError: { error in + print("Start session failed: \(String(describing: error?.errorDescription))") +} +``` + + + +### Call Settings + +Configure the call experience using the following `CallSettingsBuilder` methods: + +| Method | Description | +| ------ | ----------- | +| `setDefaultLayout(Bool)` | Enables or disables the default call UI layout with built-in controls. `true` shows the default layout. Default: `true` | +| `setIsAudioOnly(Bool)` | Sets whether the call is audio-only or audio-video. `true` for audio-only. Default: `false` | +| `setIsSingleMode(Bool)` | Enables single participant mode. | +| `setShowSwitchToVideoCall(Bool)` | Shows or hides the switch to video call button. | +| `setEnableVideoTileClick(Bool)` | Enables or disables click interactions on video tiles. Default: `true` | +| `setEnableDraggableVideoTile(Bool)` | Enables or disables drag functionality for video tiles in Spotlight mode. Default: `true` | +| `setEndCallButtonDisable(Bool)` | Shows or hides the end call button. Default: `false` (shown) | +| `setShowRecordingButton(Bool)` | Shows or hides the recording button. Default: `false` | +| `setSwitchCameraButtonDisable(Bool)` | Shows or hides the switch camera button. Default: `false` (shown) | +| `setMuteAudioButtonDisable(Bool)` | Shows or hides the mute audio button. Default: `false` (shown) | +| `setPauseVideoButtonDisable(Bool)` | Shows or hides the pause video button. Default: `false` (shown) | +| `setAudioModeButtonDisable(Bool)` | Shows or hides the audio mode selection button. Default: `false` (shown) | +| `setStartAudioMuted(Bool)` | Starts the call with the microphone muted. Default: `false` | +| `setStartVideoMuted(Bool)` | Starts the call with the camera turned off. Default: `false` | +| `setMode(DisplayModes)` | Sets the call UI layout mode. Available: `.default`, `.single`, `.spotlight`. Default: `.default` | +| `setAvatarMode(AvatarMode)` | Sets avatar display mode. Available: `.circle`, `.square`, `.fullscreen`. Default: `.circle` | +| `setDefaultAudioMode(AudioMode)` | Sets the initial audio output device. Available: `SPEAKER`, `EARPIECE`, `BLUETOOTH`, `HEADPHONES` | +| `setIdleTimeoutPeriod(Int)` | Sets idle timeout in seconds. Warning appears 60 seconds before auto-termination. Default: `180`. *v4.1.1+* | +| `setDelegate(self)` | Sets the delegate to receive call events. | + +## Call Listeners + +The `CallsEventsDelegate` protocol provides real-time callbacks for call session events. + + + +```swift +extension ViewController: CallsEventsDelegate { + + func onCallEnded() { + // Call ended, close the calling screen + } + + func onSessionTimeout() { + // Session timed out due to inactivity + } + + func onCallEndButtonPressed() { + // User pressed end call button + CometChatCalls.endSession() + // Close the calling screen + } + + func onUserJoined(rtcUser: RTCUser) { + // A participant joined the call + } + + func onUserLeft(rtcUser: RTCUser) { + // A participant left the call + } + + func onUserListChanged(rtcUsers: [RTCUser]) { + // Participant list updated + } + + func onAudioModeChanged(mode: [AudioMode]) { + // Available audio devices changed + } + + func onCallSwitchedToVideo(callSwitchedInfo: CallSwitchRequestInfo) { + // Call upgraded from audio to video + } + + func onUserMuted(rtcMutedUser: RTCMutedUser) { + // A participant's mute state changed + } + + func onRecordingToggled(recordingInfo: RTCRecordingInfo) { + // Recording started or stopped + } +} +``` + + + +### Events + +| Event | Description | +| ----- | ----------- | +| `onCallEnded()` | Invoked when the call session terminates for a 1:1 call. Both participants receive this callback. | +| `onSessionTimeout()` | Invoked when the call is auto-terminated due to inactivity (default: 180 seconds). *v4.1.1+* | +| `onCallEndButtonPressed()` | Invoked when the local user taps the end call button. Call `CometChatCalls.endSession()` to leave the session. | +| `onUserJoined(rtcUser: RTCUser)` | Invoked when a remote participant joins. | +| `onUserLeft(rtcUser: RTCUser)` | Invoked when a remote participant leaves. | +| `onUserListChanged(rtcUsers: [RTCUser])` | Invoked whenever the participant list changes. | +| `onAudioModeChanged(mode: [AudioMode])` | Invoked when available audio devices change. | +| `onCallSwitchedToVideo(callSwitchedInfo: CallSwitchRequestInfo)` | Invoked when an audio call is upgraded to video. | +| `onUserMuted(rtcMutedUser: RTCMutedUser)` | Invoked when a participant's mute state changes. | +| `onRecordingToggled(recordingInfo: RTCRecordingInfo)` | Invoked when call recording starts or stops. | + +## End Call Session + +To end the call session and release all media resources, call `CometChatCalls.endSession()` in the `onCallEndButtonPressed()` callback. + + + +```swift +func onCallEndButtonPressed() { + CometChatCalls.endSession() + // Close the calling screen +} +``` + + + +## Methods + +These methods are available for performing custom actions during an active call session. Use them to build custom UI controls or implement specific behaviors based on your use case. + + +These methods can only be called when a call session is active. + + +### Switch Camera + +Toggles between the front and rear camera during a video call. + + + +```swift +CometChatCalls.switchCamera() +``` + + +```objc +[CometChatCalls switchCamera]; +``` + + + +### Mute Audio + +Controls the local audio stream transmission. + + + +```swift +// Mute audio +CometChatCalls.audioMuted(true) + +// Unmute audio +CometChatCalls.audioMuted(false) +``` + + +```objc +// Mute audio +[CometChatCalls audioMuted:YES]; + +// Unmute audio +[CometChatCalls audioMuted:NO]; +``` + + + +### Pause Video + +Controls the local video stream transmission. + + + +```swift +// Pause video +CometChatCalls.videoPaused(true) + +// Resume video +CometChatCalls.videoPaused(false) +``` + + +```objc +// Pause video +[CometChatCalls videoPaused:YES]; + +// Resume video +[CometChatCalls videoPaused:NO]; +``` + + + +### Set Audio Mode + +Routes the audio output to a specific device. + + + +```swift +CometChatCalls.setAudioMode(AudioMode(mode: "SPEAKER")) +``` + + +```objc +[CometChatCalls setAudioModeWithMode:@"SPEAKER"]; +``` + + + +### Enter PIP Mode + +Enters Picture-in-Picture mode. + + + +```swift +CometChatCalls.enterPIPMode() +``` + + +```objc +[CometChatCalls enterPIPMode]; +``` + + + +### Exit PIP Mode + +Exits Picture-in-Picture mode. + + + +```swift +CometChatCalls.exitPIPMode() +``` + + +```objc +[CometChatCalls exitPIPMode]; +``` + + + +### Switch To Video Call + +Upgrades an ongoing audio call to a video call. + + + +```swift +CometChatCalls.switchToVideoCall() +``` + + +```objc +[CometChatCalls switchToVideoCall]; +``` + + + +### Start Recording + +Starts recording the call session. + + + +```swift +CometChatCalls.startRecording() +``` + + +```objc +[CometChatCalls startRecording]; +``` + + + +### Stop Recording + +Stops an ongoing call recording. + + + +```swift +CometChatCalls.stopRecording() +``` + + +```objc +[CometChatCalls stopRecording]; +``` + + + +### End Call + +Terminates the current call session and releases all media resources. + + + +```swift +CometChatCalls.endSession() +``` + + +```objc +[CometChatCalls endSession]; +``` + + diff --git a/calls/v4/ios/video-view-customisation.mdx b/calls/v4/ios/video-view-customisation.mdx new file mode 100644 index 000000000..252a526e7 --- /dev/null +++ b/calls/v4/ios/video-view-customisation.mdx @@ -0,0 +1,41 @@ +--- +title: "Video View Customisation" +sidebarTitle: "Video View Customisation" +sdk_version: "4.x" +description: "CometChat Calling SDK v4 - Stable Release - Video View Customisation for iOS" +--- + +This section will guide you to customise the main video container. + +## Implementation + +Once you have decided to implement [Ringing](/calls/v4/ios/ringing) or [Call Session](/calls/v4/ios/call-session) calling and followed the steps to implement them. Just few additional methods will help you quickly customize the main video container. + +Please make sure your callSettings is configured accordingly for [Ringing](/calls/v4/ios/ringing) or [Call Session](/calls/v4/ios/call-session). + +## Main Video Container Setting + +The `MainVideoContainerSetting` Class is the required in case you want to customise the main video view. You need to pass the Object of the `MainVideoContainerSetting` Class in the `setMainVideoContainerSetting()` method of the `CallSettingsBuilder`. + +| | | +| --------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `setMainVideoAspectRatio(_ aspectRatio: CallSettings.AspectRatio)` | This method is used to set the aspect ratio of main video. The default value is **contain.** Possible Values:
**1. CallSettings.** **AspectRatio.CONTAIN**
**2. CallSettings.** **AspectRatio.COVER** | +| `setFullScreenButtonParams(_`visibility: Bool, \_`position: CallSettings.Position?)` | This method is used to set the position & visibility parameter of the full screen button. By default the full screen button is visible in the **. BOTTOM\_RIGHT** position. Possible Values for **POSITION:**
1. **CallSettings. Position.TOP\_LEFT**
2. **CallSettings.** **Position. TOP\_RIGHT**
3. **CallSettings.** **Position. BOTTOM\_LEFT**
4. **CallSettings.** **Position. BOTTOM\_RIGHT**


Possible Values for **VISIBILITY:**
1. **true**
2. **false** | +| `setNameLabelParams(_ visibility: Bool,`\_ `position: CallSettings.Position?, _ backGroundColor:String?)` | This method is used to set the position, visibility & background color of the name label. By default the name label is visible in the **.BOTTOM\_LEFT** position with a background-color **#333333** Possible Values for **POSITION:**
1. **CallSettings.** **Position.TOP\_LEFT**
2. **CallSettings.** **Position. TOP\_RIGHT**
3. **CallSettings.** **Position. BOTTOM\_LEFT**
4. **CallSettings.** **Position. BOTTOM\_RIGHT**

Possible Values for **VISIBILITY:**
1. **true**
2. **false** | +| `setZoomButtonParams(_ visibility: Bool,`\_`position: CallSettings.Position?)` | This method is used to set the position, visibility of the zoom button. By default the zoom button is visible in the **. BOTTOM\_RIGHT** position. Possible Values for **POSITION:**
1. **CallSettings.** **Position.TOP\_LEFT**
2. **CallSettings. Position. TOP\_RIGHT**
3. **CallSettings.** **Position. BOTTOM\_LEFT**
4. **CallSettings.** **Position. BOTTOM\_RIGHT**

Possible Values for **VISIBILITY:**
1. **true**
2. **false** | +| `setUserListButtonParams(_ visibility: Bool,_ position:CallSettings.Position?)` | This method is used to set the position, visibility of the user list button. By default the user list button is visible in the **bottom-right** position. Possible Values for **POSITION:**
1. **CallSettings.** **Position.TOP\_LEFT**
2. **CallSettings. Position. TOP\_RIGHT**
3. **CallSettings.** **Position. BOTTOM\_LEFT**
4. **CallSettings.** **Position. BOTTOM\_RIGHT**

Possible Values for **VISIBILITY:**
1. **true**
2. **false** | + +Example + + + +```swift +let videoSettings = MainVideoContainerSetting() +videoSettings.setVideoStreamParams(.DEFAULT) +videoSettings.setNameLabelParams(true, .BOTTOM_LEFT, "#333333") +videoSettings.setZoomButtonParams(true,.BOTTOM_RIGHT) +videoSettings.setFullScreenButtonParams(true,.BOTTOM_RIGHT) +videoSettings.setUserListButtonParams(true,.BOTTOM_RIGHT) +``` + + diff --git a/calls/v4/javascript/call-logs.mdx b/calls/v4/javascript/call-logs.mdx new file mode 100644 index 000000000..bbc39110a --- /dev/null +++ b/calls/v4/javascript/call-logs.mdx @@ -0,0 +1,97 @@ +--- +title: "Call Logs" +sidebarTitle: "Call Logs" +sdk_version: "4.x" +description: "CometChat Calling SDK v4 - Stable Release - Call Logs for JavaScript" +--- + +## Overview + +CometChat's Web Call SDK provides a comprehensive way to integrate call logs into your application, enhancing your user experience by allowing users to effortlessly keep track of their communication history. Call logs provide crucial information such as call duration, participants, and more. + +This feature not only allows users to review their past interactions but it also serves as an effective tool to revisit important conversation details. With the flexibility of fetching call logs, filtering them according to specific parameters, and obtaining detailed information of individual calls, application developers can use this feature to build a more robust and interactive communication framework. + +In the following sections, we will guide you through the process of working with call logs, offering a deeper insight into how to optimally use this feature in your Web application. + +## Fetching Call Logs + +To fetch all call logs in your application, you should use the `CallLogRequestBuilder`, This builder allows you to customize the call logs fetching process according to your needs. + +```javascript +let callLogRequestBuilder = new CometChatCalls.CallLogRequestBuilder() + .setLimit(30) + .setAuthToken(loggedInUser.getAuthToken()) + .setCallCategory("call") + .build() +``` + +`CallLogRequestBuilder` has the following settings available. + +| Setting | Description | +| ---------------------------------------------------------------------------------------------------- | ------------------------------------------------------------ | +| `setLimit(limit: number)` | Specifies the number of call logs to fetch. | +| `setCallType(callType: 'video' or 'audio')` | Sets the type of calls to fetch (call or meet). | +| `setCallStatus(callStatus: 'ongoing' or 'busy' or 'rejected' or 'cancelled' or 'ended' or 'missed')` | Sets the status of calls to fetch (initiated, ongoing, etc.) | +| `setHasRecording(hasRecording: boolean)` | Sets whether to fetch calls that have recordings. | +| `setCallCategory(callCategory: 'call' or 'meet')` | Sets the category of calls to fetch (call or meet). | +| `setCallDirection(callDirection: 'incoming' or 'outgoing')` | Sets the direction of calls to fetch (incoming or outgoing) | +| `setUid(uid: string)` | Sets the UID of the user whose call logs to fetch. | +| `setGuid(guid: string)` | Sets the GUID of the user whose call logs to fetch. | +| `setAuthToken(authToken: string)` | Sets the Auth token of the logged-in user. | + +### Fetch Next + +The**`fetchNext()`**method retrieves the next set of call logs. + +```javascript +let callLogRequestBuilder = new CometChatCalls.CallLogRequestBuilder() + .setLimit(30) + .setAuthToken(loggedInUser.getAuthToken()) + .setCallCategory("call") + .build() + +callLogRequestBuilder.fetchNext() + .then(callLogHistory => { + console.log(callLogHistory); + }) + .catch(err => { + console.log(err); + }); +``` + +### Fetch Previous + +The**`fetchPrevious()`**method retrieves the previous set of call logs. + +```javascript +let callLogRequestBuilder = new CometChatCalls.CallLogRequestBuilder() + .setLimit(30) + .setAuthToken(loggedInUser.getAuthToken()) + .setCallCategory("call") + .build() + +callLogRequestBuilder.fetchPrevious() + .then(callLogHistory => { + console.log(callLogHistory); + }) + .catch(err => { + console.log(err); + }); +``` + +## Get Call Details + +To retrieve the specific details of a call, use the**`getCallDetails()`**method. This method requires the Auth token of the logged-in user and the session ID along with a callback listener. + +```javascript +var sessionID = "SESSION_ID"; +CometChatCalls.getCallDetails(sessionID, authToken) +.then((callLogs: Array) => { + console.log(callLogs); + }) + .catch(err => { + console.log(err); + }); +``` + +Note: Replace**`"SESSION_ID"`**with the ID of the session you are interested in. diff --git a/calls/v4/javascript/call-session.mdx b/calls/v4/javascript/call-session.mdx new file mode 100644 index 000000000..55647d145 --- /dev/null +++ b/calls/v4/javascript/call-session.mdx @@ -0,0 +1,711 @@ +--- +title: "Call Session" +sidebarTitle: "Call Session" +sdk_version: "4.x" +description: "CometChat Calling SDK v4 - Stable Release - Call Session for JavaScript" +--- + +## Overview + +This section demonstrates how to start a call session in a web application. Previously known as **Direct Calling**. + +Before you begin, we strongly recommend you read the [calling setup guide](/calls/v4/javascript/setup). + + + +If you want to implement a complete calling experience with ringing functionality (incoming/outgoing call UI), follow the [Ringing](/calls/v4/javascript/ringing) guide first. Once the call is accepted, return here to start the call session. + + + +## Generate Call Token + +A call token is required for secure access to a call session. Each token is unique to a specific session and user combination, ensuring that only authorized users can join the call. + +You can generate the token just before starting the call, or generate and store it ahead of time based on your use case. + +Use the `generateToken()` method to create a call token: + + + +```javascript +const loggedInUser = await CometChat.getLoggedinUser(); +const authToken = loggedInUser.getAuthToken(); +const sessionId = "SESSION_ID"; // Random or from Call object in ringing flow + +CometChatCalls.generateToken(sessionId, authToken).then( + (callToken) => { + console.log("Call token generated:", callToken.token); + // Use callToken to start the session + }, + (error) => { + console.log("Token generation failed:", error); + } +); +``` + + +```typescript +const loggedInUser = await CometChat.getLoggedinUser(); +const authToken = loggedInUser.getAuthToken(); +const sessionId: string = "SESSION_ID"; // Random or from Call object in ringing flow + +CometChatCalls.generateToken(sessionId, authToken).then( + (callToken: any) => { + console.log("Call token generated:", callToken.token); + // Use callToken to start the session + }, + (error: CometChat.CometChatException) => { + console.log("Token generation failed:", error); + } +); +``` + + + +| Parameter | Description | +| ----------- | ------------------------------------------------------------------------------------------------------------------------------------------ | +| `sessionId` | The unique random session ID. In case you are using the ringing flow, the session ID is available in the `Call` object. | +| `authToken` | The user auth token is the logged-in user auth token which you can get by calling `CometChat.getLoggedinUser().getAuthToken()` | + +## Start Call Session + +Use the `startSession()` method to join a call session. This method requires: +1. A call token (generated in the previous step) +2. A `CallSettings` object that configures the call UI and behavior +3. An HTML element where the call UI will be rendered + + + +```javascript +const callListener = new CometChatCalls.OngoingCallListener({ + onUserJoined: (user) => { + console.log("User joined:", user); + }, + onUserLeft: (user) => { + console.log("User left:", user); + }, + onUserListUpdated: (userList) => { + console.log("User list updated:", userList); + }, + onCallEnded: () => { + console.log("Call ended"); + }, + onCallEndButtonPressed: () => { + console.log("End call button pressed"); + // Handle end call - see End Call Session section + }, + onError: (error) => { + console.log("Call error:", error); + }, + onMediaDeviceListUpdated: (deviceList) => { + console.log("Device list updated:", deviceList); + }, + onUserMuted: (event) => { + console.log("User muted:", event); + }, + onScreenShareStarted: () => { + console.log("Screen sharing started"); + }, + onScreenShareStopped: () => { + console.log("Screen sharing stopped"); + }, + onCallSwitchedToVideo: (event) => { + console.log("Call switched to video:", event); + }, + onSessionTimeout: () => { + console.log("Session timed out"); + } +}); + +const callSettings = new CometChatCalls.CallSettingsBuilder() + .enableDefaultLayout(true) + .setIsAudioOnlyCall(false) + .setCallListener(callListener) + .build(); + +const htmlElement = document.getElementById("call-container"); +CometChatCalls.startSession(callToken, callSettings, htmlElement); +``` + + +```typescript +const callListener = new CometChatCalls.OngoingCallListener({ + onUserJoined: (user: any) => { + console.log("User joined:", user); + }, + onUserLeft: (user: any) => { + console.log("User left:", user); + }, + onUserListUpdated: (userList: any[]) => { + console.log("User list updated:", userList); + }, + onCallEnded: () => { + console.log("Call ended"); + }, + onCallEndButtonPressed: () => { + console.log("End call button pressed"); + // Handle end call - see End Call Session section + }, + onError: (error: any) => { + console.log("Call error:", error); + }, + onMediaDeviceListUpdated: (deviceList: any[]) => { + console.log("Device list updated:", deviceList); + }, + onUserMuted: (event: any) => { + console.log("User muted:", event); + }, + onScreenShareStarted: () => { + console.log("Screen sharing started"); + }, + onScreenShareStopped: () => { + console.log("Screen sharing stopped"); + }, + onCallSwitchedToVideo: (event: any) => { + console.log("Call switched to video:", event); + }, + onSessionTimeout: () => { + console.log("Session timed out"); + } +}); + +const callSettings = new CometChatCalls.CallSettingsBuilder() + .enableDefaultLayout(true) + .setIsAudioOnlyCall(false) + .setCallListener(callListener) + .build(); + +const htmlElement = document.getElementById("call-container") as HTMLElement; +CometChatCalls.startSession(callToken, callSettings, htmlElement); +``` + + + +| Parameter | Description | +| -------------- | -------------------------------------------------------- | +| `callToken` | The token received from `generateToken()` onSuccess | +| `callSettings` | Object of `CallSettings` class configured via `CallSettingsBuilder` | +| `htmlElement` | DOM element where the call UI will be rendered | + +### Call Settings + +Configure the call experience using the following `CallSettingsBuilder` methods: + +| Method | Description | +| ------ | ----------- | +| `enableDefaultLayout(boolean)` | Enables or disables the default call UI layout with built-in controls. `true` shows the default layout. `false` hides the button layout. Default: `true` | +| `setIsAudioOnlyCall(boolean)` | Sets whether the call is audio-only or audio-video. `true` for audio-only, `false` for audio-video. Default: `false` | +| `setCallListener(OngoingCallListener)` | Sets the listener to receive call events. See [Call Listeners](#call-listeners). | +| `setMode(string)` | Sets the call UI layout mode. Available: `CometChat.CALL_MODE.DEFAULT`, `CometChat.CALL_MODE.SPOTLIGHT`. Default: `DEFAULT` | +| `startWithAudioMuted(boolean)` | Starts the call with the microphone muted. Default: `false` | +| `startWithVideoMuted(boolean)` | Starts the call with the camera turned off. Default: `false` | +| `showEndCallButton(boolean)` | Shows or hides the end call button in the default layout. Default: `true` | +| `showMuteAudioButton(boolean)` | Shows or hides the mute audio button. Default: `true` | +| `showPauseVideoButton(boolean)` | Shows or hides the pause video button. Default: `true` | +| `showScreenShareButton(boolean)` | Shows or hides the screen share button. Default: `true` | +| `showModeButton(boolean)` | Shows or hides the mode toggle button (switch between DEFAULT and SPOTLIGHT). Default: `true` | +| `showSwitchToVideoCallButton(boolean)` | Shows or hides the button to upgrade an audio call to video. Default: `true` | +| `setMainVideoContainerSetting(MainVideoContainerSetting)` | Customizes the main video container. See [Video View Customization](/calls/v4/javascript/video-view-customisation). | +| `setIdleTimeoutPeriod(number)` | Sets idle timeout in seconds. Warning appears 60 seconds before auto-termination. Default: `180` seconds. *v4.1.0+* | + +## Call Listeners + +The `OngoingCallListener` provides real-time callbacks for call session events, including participant changes, call state updates, and error conditions. + +You can register listeners in two ways: + +1. **Via CallSettingsBuilder:** Use `.setCallListener(listener)` when building call settings +2. **Via addCallEventListener:** Use `CometChatCalls.addCallEventListener(listenerId, listener)` to add multiple listeners + +Each listener requires a unique `listenerId` string. This ID is used to: +- **Prevent duplicate registrations** — Re-registering with the same ID replaces the existing listener +- **Enable targeted removal** — Remove specific listeners without affecting others + + + +```javascript +const listenerId = "UNIQUE_LISTENER_ID"; + +CometChatCalls.addCallEventListener(listenerId, { + onUserJoined: (user) => { + console.log("User joined:", user); + }, + onUserLeft: (user) => { + console.log("User left:", user); + }, + onUserListUpdated: (userList) => { + console.log("User list updated:", userList); + }, + onCallEnded: () => { + console.log("Call ended"); + }, + onCallEndButtonPressed: () => { + console.log("End call button pressed"); + }, + onError: (error) => { + console.log("Call error:", error); + }, + onMediaDeviceListUpdated: (deviceList) => { + console.log("Device list updated:", deviceList); + }, + onUserMuted: (event) => { + console.log("User muted:", event); + }, + onScreenShareStarted: () => { + console.log("Screen sharing started"); + }, + onScreenShareStopped: () => { + console.log("Screen sharing stopped"); + }, + onCallSwitchedToVideo: (event) => { + console.log("Call switched to video:", event); + }, + onSessionTimeout: () => { + console.log("Session timed out"); + } +}); + +// Remove listener when done +CometChatCalls.removeCallEventListener(listenerId); +``` + + +```typescript +const listenerId: string = "UNIQUE_LISTENER_ID"; + +CometChatCalls.addCallEventListener(listenerId, { + onUserJoined: (user: any) => { + console.log("User joined:", user); + }, + onUserLeft: (user: any) => { + console.log("User left:", user); + }, + onUserListUpdated: (userList: any[]) => { + console.log("User list updated:", userList); + }, + onCallEnded: () => { + console.log("Call ended"); + }, + onCallEndButtonPressed: () => { + console.log("End call button pressed"); + }, + onError: (error: any) => { + console.log("Call error:", error); + }, + onMediaDeviceListUpdated: (deviceList: any[]) => { + console.log("Device list updated:", deviceList); + }, + onUserMuted: (event: any) => { + console.log("User muted:", event); + }, + onScreenShareStarted: () => { + console.log("Screen sharing started"); + }, + onScreenShareStopped: () => { + console.log("Screen sharing stopped"); + }, + onCallSwitchedToVideo: (event: any) => { + console.log("Call switched to video:", event); + }, + onSessionTimeout: () => { + console.log("Session timed out"); + } +}); + +// Remove listener when done +CometChatCalls.removeCallEventListener(listenerId); +``` + + + +### Events + +| Event | Description | +| ----- | ----------- | +| `onCallEnded()` | Invoked when the call session terminates for a 1:1 call. Both participants receive this callback. Only fires for calls with exactly 2 participants. | +| `onSessionTimeout()` | Invoked when the call is auto-terminated due to inactivity (default: 180 seconds). Warning appears 60 seconds before. *v4.1.0+* | +| `onCallEndButtonPressed()` | Invoked when the local user clicks the end call button. For ringing flow, call `CometChat.endCall()`. For standalone, call `CometChatCalls.endSession()`. | +| `onUserJoined(user)` | Invoked when a remote participant joins. The `user` contains UID, name, and avatar. | +| `onUserLeft(user)` | Invoked when a remote participant leaves the call session. | +| `onUserListUpdated(userList)` | Invoked whenever the participant list changes (join or leave events). | +| `onMediaDeviceListUpdated(deviceList)` | Invoked when available audio/video devices change (e.g., new microphone connected). | +| `onUserMuted(event)` | Invoked when a participant's mute state changes. Contains `muted` and `mutedBy` properties. | +| `onScreenShareStarted()` | Invoked when the local user starts sharing their screen. | +| `onScreenShareStopped()` | Invoked when the local user stops sharing their screen. | +| `onCallSwitchedToVideo(event)` | Invoked when an audio call is upgraded to a video call. Contains `sessionId`, `initiator`, and `responder`. | +| `onError(error)` | Invoked when an error occurs during the call session. | + +## End Call Session + +Ending a call session properly is essential to release media resources (camera, microphone, network connections) and update call state across all participants. The termination process differs based on whether you're using the Ringing flow or Session Only flow. + +### Ringing Flow + +When using the [Ringing](/calls/v4/javascript/ringing) flow, you must coordinate between the CometChat Chat SDK and the Calls SDK to properly terminate the call and notify all participants. + + + +The Ringing flow requires calling methods from both the Chat SDK (`CometChat.endCall()`) and the Calls SDK (`CometChatCalls.endSession()`) to ensure proper call termination and participant notification. + + + + + + + +**User who initiates the end call:** + +When the user clicks the end call button in the UI, the `onCallEndButtonPressed()` callback is triggered. You must call `CometChat.endCall()` inside this callback to properly terminate the call and notify other participants. On success, call `CometChat.clearActiveCall()` and `CometChatCalls.endSession()` to release resources. + + + +```javascript +onCallEndButtonPressed: () => { + CometChat.endCall(sessionId).then( + (call) => { + console.log("Call ended successfully"); + CometChat.clearActiveCall(); + CometChatCalls.endSession(); + // Close the calling screen + }, + (error) => { + console.log("End call failed:", error); + } + ); +} +``` + + +```typescript +onCallEndButtonPressed: () => { + CometChat.endCall(sessionId).then( + (call: CometChat.Call) => { + console.log("Call ended successfully"); + CometChat.clearActiveCall(); + CometChatCalls.endSession(); + // Close the calling screen + }, + (error: CometChat.CometChatException) => { + console.log("End call failed:", error); + } + ); +} +``` + + + +**Remote participant** (receives the `onCallEnded()` callback): + +Call `CometChat.clearActiveCall()` to clear the local call state, then call `CometChatCalls.endSession()` to release media resources. + + + +```javascript +onCallEnded: () => { + CometChat.clearActiveCall(); + CometChatCalls.endSession(); + // Close the calling screen +} +``` + + +```typescript +onCallEnded: () => { + CometChat.clearActiveCall(); + CometChatCalls.endSession(); + // Close the calling screen +} +``` + + + +### Session Only Flow + +When using the Session Only flow (direct call without ringing), you only need to call the Calls SDK method to end the session. There's no need to notify the Chat SDK since no call signaling was involved. + +Call `CometChatCalls.endSession()` in the `onCallEndButtonPressed()` callback to release all media resources and disconnect from the call session. + + + +```javascript +onCallEndButtonPressed: () => { + CometChatCalls.endSession(); + // Close the calling screen +} +``` + + +```typescript +onCallEndButtonPressed: () => { + CometChatCalls.endSession(); + // Close the calling screen +} +``` + + + +## Methods + +These methods are available for performing custom actions during an active call session. Use them to build custom UI controls or implement specific behaviors based on your use case. + + +These methods can only be called when a call session is active. + + +### Switch Camera + +Toggles between the front and rear camera during a video call. Only supported on mobile browsers. + + + +```javascript +CometChatCalls.switchCamera(); +``` + + +```typescript +CometChatCalls.switchCamera(); +``` + + + + +This method is only supported on mobile browsers. It has no effect on desktop browsers. *Available since v4.2.0* + + +### Mute Audio + +Controls the local audio stream transmission. When muted, other participants cannot hear the local user. + +- `true` — Mutes the microphone, stops transmitting audio +- `false` — Unmutes the microphone, resumes audio transmission + + + +```javascript +CometChatCalls.muteAudio(true); +``` + + +```typescript +CometChatCalls.muteAudio(true); +``` + + + +### Pause Video + +Controls the local video stream transmission. When paused, other participants see a frozen frame or placeholder instead of live video. + +- `true` — Pauses the camera, stops transmitting video +- `false` — Resumes the camera, continues video transmission + + + +```javascript +CometChatCalls.pauseVideo(true); +``` + + +```typescript +CometChatCalls.pauseVideo(true); +``` + + + +### Start Screen Share + +Starts sharing your screen or a specific application window with other participants. + + + +```javascript +CometChatCalls.startScreenShare(); +``` + + +```typescript +CometChatCalls.startScreenShare(); +``` + + + +### Stop Screen Share + +Stops the current screen sharing session. + + + +```javascript +CometChatCalls.stopScreenShare(); +``` + + +```typescript +CometChatCalls.stopScreenShare(); +``` + + + +### Set Mode + +Changes the call UI layout mode dynamically during the call. + +**Available modes:** +- `CometChat.CALL_MODE.DEFAULT` — Grid layout showing all participants +- `CometChat.CALL_MODE.SPOTLIGHT` — Focus on the active speaker + + + +```javascript +CometChatCalls.setMode(CometChat.CALL_MODE.SPOTLIGHT); +``` + + +```typescript +CometChatCalls.setMode(CometChat.CALL_MODE.SPOTLIGHT); +``` + + + +### Get Audio Input Devices + +Returns a list of available audio input devices (microphones). + + + +```javascript +const audioInputDevices = CometChatCalls.getAudioInputDevices(); +console.log("Available microphones:", audioInputDevices); +``` + + +```typescript +const audioInputDevices = CometChatCalls.getAudioInputDevices(); +console.log("Available microphones:", audioInputDevices); +``` + + + +### Get Audio Output Devices + +Returns a list of available audio output devices (speakers/headphones). + + + +```javascript +const audioOutputDevices = CometChatCalls.getAudioOutputDevices(); +console.log("Available speakers:", audioOutputDevices); +``` + + +```typescript +const audioOutputDevices = CometChatCalls.getAudioOutputDevices(); +console.log("Available speakers:", audioOutputDevices); +``` + + + +### Get Video Input Devices + +Returns a list of available video input devices (cameras). + + + +```javascript +const videoInputDevices = CometChatCalls.getVideoInputDevices(); +console.log("Available cameras:", videoInputDevices); +``` + + +```typescript +const videoInputDevices = CometChatCalls.getVideoInputDevices(); +console.log("Available cameras:", videoInputDevices); +``` + + + +### Set Audio Input Device + +Sets the active audio input device (microphone) by device ID. + + + +```javascript +CometChatCalls.setAudioInputDevice(deviceId); +``` + + +```typescript +CometChatCalls.setAudioInputDevice(deviceId); +``` + + + +### Set Audio Output Device + +Sets the active audio output device (speaker/headphones) by device ID. + + + +```javascript +CometChatCalls.setAudioOutputDevice(deviceId); +``` + + +```typescript +CometChatCalls.setAudioOutputDevice(deviceId); +``` + + + +### Set Video Input Device + +Sets the active video input device (camera) by device ID. + + + +```javascript +CometChatCalls.setVideoInputDevice(deviceId); +``` + + +```typescript +CometChatCalls.setVideoInputDevice(deviceId); +``` + + + +### Switch To Video Call + +Upgrades an ongoing audio call to a video call. This enables the camera and starts transmitting video to other participants. The remote participant receives the `onCallSwitchedToVideo()` callback. + + + +```javascript +CometChatCalls.switchToVideoCall(); +``` + + +```typescript +CometChatCalls.switchToVideoCall(); +``` + + + +### End Call + +Terminates the current call session and releases all media resources (camera, microphone, network connections). After calling this method, the call view should be closed. + + + +```javascript +CometChatCalls.endSession(); +``` + + +```typescript +CometChatCalls.endSession(); +``` + + diff --git a/calls/v4/javascript/custom-css.mdx b/calls/v4/javascript/custom-css.mdx new file mode 100644 index 000000000..d8958297b --- /dev/null +++ b/calls/v4/javascript/custom-css.mdx @@ -0,0 +1,173 @@ +--- +title: "Custom CSS" +sidebarTitle: "Custom CSS" +sdk_version: "4.x" +description: "CometChat Calling SDK v4 - Stable Release - Custom CSS for JavaScript" +--- + +Passing custom CSS allows you to personalize and enhance the user interface of the call screen. + +## Common CSS Classes + +There are a few common classes used for different modes in the call screen + +1. **cc-main-container** - The outermost component of the calling component is represented by a white border in the screenshots above, indicating that it acts as a container for other components. + +2. **cc-bottom-buttons-container** - The container located at the very bottom of the interface houses various action buttons, such as the mute/unmute audio and video, end call, settings icon, and participants icon, among others. It is represented by the red border in above screenshot. + +3. **cc-name-label** - This class is passed in user name text container in all modes. It is represented by green border in the above screenshots. + +4. **cc-video-container** - This class is passed to the video container in all modes. It is represented by orange border in the above screenshots. + +## Bottom Buttons + +1. **cc-bottom-buttons-container** - This is the container of all the buttons in calling. +2. **cc-bottom-buttons-icon-container** - This is the div of every button in the button bar. + +### Individual bottom buttons CSS classes + +* `cc-audio-icon-container` +* `cc-audio-icon-container-muted` +* `cc-video-icon-container` +* `cc-video-icon-container-muted` +* `cc-screen-share-icon-container` +* `cc-switch-video-icon-container` +* `cc-end-call-icon-container` + +### **Example** + + + +```css +.cc-end-call-icon-container { + background-color: green; +} +.cc-audio-icon-container { + background-color: blue; +} +.cc-video-icon-container { + background-color: blue; +} +.cc-audio-icon-container-muted { + background-color: orange; +} +.cc-video-icon-container-muted { + background-color: orange; +} +.cc-switch-video-icon-container { + background-color: blue; +} +.cc-screen-share-icon-container { + background-color: blue; +} +.cc-main-container { + border: 2px dotted white; +} +.cc-video-container { + border: 2px dotted orange; +} +.cc-bottom-buttons-container { + border: 2px dotted red; +} +.cc-name-label { + border: 2px dotted green; +} +``` + + + + + +The above example results in the below output:- + +**Mode: `DEFAULT`** + + + + + +**Mode: `TILE`** + + + + + +**Mode: `SPOTLIGHT`** + + + + + + + +```css +.cc-bottom-buttons-icon-container { + height: 50px !important; + width: 50px !important; +} + +.cc-audio-icon-container { + background-color: #0073ff !important; + border-radius: 4px !important; +} + +.cc-video-icon-container { + background-color: #0073ff !important; + border-radius: 4px !important; +} + +.cc-screen-share-icon-container { + background-color: #0073ff !important; + border-radius: 4px !important; +} + +.cc-end-call-icon-container { + background-color: #ab0090 !important; + border-radius: 4px !important; + margin-left: 50px !important; +} + +.cc-bottom-buttons.cc-bottom-buttons-container { + gap: 25px !important; +} + +.side-bar-main-user-video video { + background-color: black !important; + background-image: repeating-conic-gradient( + #0073ff2a 0% 25%, + #00000031 0% 50% + ) !important; + background-position: 0 0, 10px 10px !important; + background-size: 20px 20px !important; +} + +.cc-name-label { + background-color: #0073ff !important; +} + +.bottom-buttons-other-options { + gap: 20px !important; +} +``` + + + + + +The above example results in the below output:- + + + + + +### Guidelines for Customizing the Grid Layout + +* **CSS Classes:** + + * Please ensure that you only apply CSS classes specified in this documentation. Introducing CSS classes not covered here may cause unexpected UI issues. + +* **Grid Container Resizing:** + + * Avoid resizing the grid container. Altering the grid container's dimensions can negatively impact the grid layout, leading to undesirable visual distortions. + +By following these recommendations, you can maintain a stable and visually consistent grid layout. diff --git a/calls/v4/javascript/overview.mdx b/calls/v4/javascript/overview.mdx new file mode 100644 index 000000000..e3ef8858c --- /dev/null +++ b/calls/v4/javascript/overview.mdx @@ -0,0 +1,104 @@ +--- +title: "Calling SDK" +sidebarTitle: "Overview" +sdk_version: "4.x" +description: "CometChat Calling SDK v4 - Stable Release - Overview for JavaScript. This is the stable v4 documentation. Most users should use this version." +--- + + +🚀 **v5 Beta Available** — The Calling SDK v5 is now available in beta with significant improvements. [Check out the v5 docs →](/calls/javascript/overview) + + +## Overview + +CometChat provides voice and video calling capabilities for your web application. This guide helps you choose the right implementation approach based on your use case. + +## Prerequisites + +1. CometChat SDK installed and configured. See the [Setup](/sdk/javascript/setup) guide. +2. CometChat Calls SDK added to your project: + +```bash +npm install @cometchat/calls-sdk-javascript +``` + +For detailed setup instructions, see the [Calls SDK Setup](/calls/v4/javascript/setup) guide. + +## Choose Your Implementation + +CometChat offers three approaches to implement calling: + + + + Complete calling flow with incoming/outgoing call UI, accept/reject functionality, and call notifications. + + + Direct call session management. Use with Ringing flow or for custom call initiation logic. + + + Calls SDK only implementation without the Chat SDK dependency. + + + +### Ringing + +Use this when you need a complete calling experience with: +- Incoming and outgoing call UI +- Call accept/reject/cancel functionality +- Call notifications via push notifications +- Integration with CometChat messaging + +**Flow:** Initiate call → Receiver gets notified → Accept/Reject → Start session + +[Get started with Ringing →](/calls/v4/javascript/ringing) + +### Call Session + +Use this when you need to: +- Start a call session after the Ringing flow completes +- Implement custom call initiation logic with your own UI +- Join participants to a shared session using a session ID + +**Flow:** Generate token → Start session → Manage call → End session + +[Get started with Call Session →](/calls/v4/javascript/call-session) + +### Standalone Calling + +Use this when you want: +- Calling functionality without the Chat SDK +- Your own user authentication system +- Minimal SDK footprint + +**Flow:** Get auth token via REST API → Generate call token → Start session + +[Get started with Standalone Calling →](/calls/v4/javascript/standalone-calling) + +## Features + + + + Record audio and video calls for playback, compliance, or archival purposes. + + + Apply blur or custom image backgrounds during video calls. + + + Share your screen or specific application windows during calls. + + + Customize the video call UI layout, participant tiles, and visual appearance. + + + Style the calling UI with custom CSS to match your application's design. + + + Enable presentation capabilities with spotlight on the active speaker. + + + Retrieve and display call history including duration, participants, and status. + + + Configure automatic call termination when participants are inactive. + + diff --git a/calls/v4/javascript/presenter-mode.mdx b/calls/v4/javascript/presenter-mode.mdx new file mode 100644 index 000000000..8f292c6bb --- /dev/null +++ b/calls/v4/javascript/presenter-mode.mdx @@ -0,0 +1,148 @@ +--- +title: "Presenter Mode" +sidebarTitle: "Presenter Mode" +sdk_version: "4.x" +description: "CometChat Calling SDK v4 - Stable Release - Presenter Mode for JavaScript" +--- + +## Overview + +The Presenter Mode feature allows developers to create a calling service experience in which: + +1. There are one or more users who are presenting their video, audio and/or screen (Maximum 5) +2. Viewers who are consumers of that presentation. (They cannot send their audio, video or screen streams out). +3. The total number of presenters and viewers can go up to 100. +4. Features such as mute/unmute audio, show/hide camera capture, recording, etc. will be enabled only for the Presenter in this mode. +5. Other call participants will not get these features. Hence they act like passive viewers in the call. + +Using this feature developers can create experiences such as: + +1. All hands calls +2. Keynote speeches +3. Webinars +4. Talk shows +5. Online classes +6. and many more... + +### About this guide + +This guide demonstrates how to start a presentation into a web application. Before you begin, we strongly recommend you read the calling setup guide. + +Before starting a call session you have to generate a call token using the generateToken() method of the CometChatCalls SDK as mentioned [here](/calls/v4/javascript/call-session#generate-call-token). + +### Start Presentation Session + +The most important class that will be used in the implementation is the `PresentationSettings` class. This class allows you to set the various parameters for the Presentation Mode. In order to set the various parameters of the `PresentationSettings` class, you need to use the `PresentationSettingsBuilder` class. Below are the various options available with the `PresentationSettings` class. + +You will need to set the User Type, There are 2 type of users in Presenter Mode, `Presenter` & `Participant` , You can set this `PresentationSettingsBuilder` by using the following method `setIsPresenter(true/false)` + +A basic example of how to start a Presentation: + + + +```js +let presenterSettings = new CometChatCalls.PresenterSettingsBuilder() + .setIsPresenter(isPresenter) + .enableDefaultLayout(defaultLayout) + .setCallEventListener(callListener) + .build(); + +let htmlElement = document.getElementById("ELEMENT_ID"); +CometChatCalls.joinPresentation( + callToken, + presenterSettings, + htmlElement +); +``` + + + + + +## **Listeners** + +Listeners can be added in two ways the first one is to use `.setCallEventListener(listeners : OngoingCallListener)` method in `CallSettingsBuilder` or `PresenterSettingsBuilder` class. The second way is to use `CometChatCalls.addCallEventListener(name: string, callListener: OngoingCallListener)` by this you can add multiple listeners and remove the specific listener by their name `CometChatCalls.removeCallEventListener(name: string)` + + + +```js +useEffect(() => { + CometChatCalls.addCallEventListener('UNIQUE_ID', { + onUserJoined: user => { + console.log("user joined:", user); + }, + onUserLeft: user => { + console.log("user left:", user); + }, + onUserListUpdated: userList => { + console.log("user list:", userList); + }, + onCallEnded: () => { + console.log("Call ended"); + }, + onCallEndButtonPressed: () => { + console.log("End Call button pressed"); + }, + onError: error => { + console.log('Call Error: ', error); + }, + onAudioModesUpdated: (audioModes) => { + console.log("audio modes:", audioModes); + }, + onUserMuted: (event) => { + console.log("user muted:", event); + } + }); + return ()=> CometChatCalls.removeCallEventListener('UNIQUE_ID') +}, []) +``` + + + + + +The `CometChatCallsEventsListener` listener provides you with the below callback methods: + +| Callback Method | Description | +| ----------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------- | +| onCallEnded() | This method is called when the call is successfully ended. The call details can be obtained from the `Call` object provided. | +| onCallEndButtonPressed() | This method is called when the user press end call button. | +| onUserJoined(user: RTCUser) | This method is called when any other user joins the call. The user details can be obtained from the `User` object provided. | +| onUserLeft(user: RTCUser) | This method is called when a user leaves the call. The details of the user can be obtained from the provided `User` object. | +| onUserListUpdated(users: Array\) | This method is triggered every time a participant joins or leaves the call providing the list of users active in the call | +| onAudioModesUpdated(devices: Array\) | This callback is triggered if any new audio output source is available or becomes unavailable. | +| onUserMuted(muteObj: RTCMutedUser) | This method is triggered when a user is muted in the ongoing call. | +| onRecordingStarted(user: RTCUser) | This method is triggered when a recording starts. | +| onRecordingStopped(user: RTCUser) | This method is triggered when a recording stops. | +| onError(e: CometChatException) | This method is called when there is some error in establishing the call. | + +## Settings + +The `PresentationSettings` class is the most important class when it comes to the implementation of the Calling feature. This is the class that allows you to customize the overall calling experience. The properties for the call/conference can be set using the `PresentationSettingsBuilder` class. This will eventually give you and object of the `PresentationSettings` class which you can pass to the `joinPresentation()` method to start the call. + +The **mandatory** parameters that are required to be present for any call/conference to work are: + +1. Context - context of the activity/application +2. RelativeLayout - A RelativeLayout object in which the calling UI is loaded. + +The options available for customization of calls are: + +| Parameter | Description | +| ------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `setIsPresenter(isPresenter: boolean)` | If set to `true` user will join as the presenter. If set to `false` user will join as the viewer. | +| `enableDefaultLayout(defaultLayout: boolean)` | If set to `true` enables the default layout for handling the call operations. If set to `false` it hides the button layout and just displays the Call View. **Default value = true** | +| `showEndCallButton(showEndCallButton: boolean)` | If set to `true` it displays the EndCallButton in Button Layout. If set to `false` it hides the EndCallButton in Button Layout. **Default value = true** | +| `showPauseVideoButton(showPauseVideoButton: boolean)` | If set to `true` it displays the PauseVideoButton in Button Layout. If set to `false` it hides the PauseVideoButton in Button Layout. **Default value = true** | +| `showMuteAudioButton`(showMuteAudioButton: boolean)\`\` | If set to `true` it displays the MuteAudioButton in Button Layout. If set to `false` it hides the MuteAudioButton in Button Layout. **Default value = true** | +| `showSwitchCameraButton`(showSwitchCameraButton: boolean)\`\` | If set to `true` it displays the SwitchCameraButton in Button Layout. If set to `false` it hides the SwitchCameraButton in Button Layout. **Default value = true** | +| `showAudioModeButton`(showAudioModeButton: boolean)\`\` | If set to `true` it displays the AudioModeButton in Button Layout. If set to `false` it hides the AudioModeButton in Button Layout. **Default value = true** | +| `setIsAudioOnlyCall(audioOnly: boolean)` | If set to `true`, the call will be strictly an audio call. If set to `false`, the call will be an audio-video call.**Default value = false** | +| `startWithAudioMuted(audioMuted: boolean)` | This ensures the call is started with the audio muted if set to true. **Default value = false** | +| `startWithVideoMuted(videoMuted: boolean)` | This ensures the call is started with the video paused if set to true. **Default value = false** | +| `startWithVideoMuted(videoMuted: boolean)` | If set to true it displays the Recording in Button Layout. if set to false it hides the Recording in Button Layout. **Default value = false** | +| `setDefaultAudioMode(audioMode: string)` | This method can be used if you wish to start the call with a specific audio mode. The available options are 1. CometChatCalls.AUDIO\_MODE.SPEAKER = "SPEAKER" 2. CometChatCalls.AUDIO\_MODE.EARPIECE = "EARPIECE" 3. CometChatCalls.AUDIO\_MODE.BLUETOOTH = "BLUETOOTH" 4. CometChatCalls.AUDIO\_MODE.HEADPHONES = "HEADPHONES" | +| `setEventListener(new CometChatCallsEventsListener())` | The `CometChatCallsEventsListener` listener provides you callbacks | + +In case you wish to achieve a completely customised UI for the Calling experience, you can do so by embedding default android buttons to the screen as per your requirement and then use the below methods to achieve different functionalities for the embedded buttons. + +For the use case where you wish to align your own custom buttons and not use the default layout provided by CometChat you can embed the buttons in your layout and use the below methods to perform the corresponding operations: diff --git a/calls/v4/javascript/recording.mdx b/calls/v4/javascript/recording.mdx new file mode 100644 index 000000000..1b1d5e407 --- /dev/null +++ b/calls/v4/javascript/recording.mdx @@ -0,0 +1,140 @@ +--- +title: "Recording (Beta)" +sidebarTitle: "Recording" +sdk_version: "4.x" +description: "CometChat Calling SDK v4 - Stable Release - Recording for JavaScript" +--- + +This section will guide you to implement call recording feature for the voice and video calls. + +## Implementation + +Once you have decided to implement [Ringing](/calls/v4/javascript/ringing) or [Call Session](/calls/v4/javascript/call-session) calling and followed the steps to implement them. Just few additional listeners and methods will help you quickly implement call recording in your app. + +You need to make changes in the CometChat.startCall method and add the required listeners for recording. Please make sure your callSettings is configured accordingly for [Ringing](/calls/v4/javascript/ringing) or [Call Session](/calls/v4/javascript/call-session). + +A basic example of how to make changes to implement recording for a call session / a ringing call: + + + +```js +// Add listeners onRecordingStarted and onRecordingStopped to the startCall method +const defaultLayout = true; +const audioOnly = false; + +const callListener = new CometChatCalls.OngoingCallListener({ + onRecordingStarted: (event) => + console.log("Listener => onRecordingStarted", event.user), + onRecordingStopped: (event) => + console.log("Listener => onRecordingStopped", event.user), +}); + +const callSettings = new CometChatCalls.CallSettingsBuilder() + .enableDefaultLayout(defaultLayout) + .setIsAudioOnlyCall(audioOnly) + .setCallListener(callListener) + .build(); + +const htmlElement = document.getElementById("ELEMENT_ID"); +CometChatCalls.startSession(callToken, callSettings, htmlElement); +``` + + + + +```typescript +// Add listeners onRecordingStarted and onRecordingStopped to the startCall method +const defaultLayout = true; +const audioOnly = false; + +const callListener = new CometChatCalls.OngoingCallListener({ + onRecordingStarted: (event) => + console.log("Listener => onRecordingStarted", event.user), + onRecordingStopped: (event) => + console.log("Listener => onRecordingStopped", event.user), +}); + +const callSettings = new CometChatCalls.CallSettingsBuilder() + .enableDefaultLayout(defaultLayout) + .setIsAudioOnlyCall(audioOnly) + .setCallListener(callListener) + .build(); + +const htmlElement = document.getElementById("ELEMENT_ID"); +CometChatCalls.startSession(callToken, callSettings, htmlElement); +``` + + + + + +## Settings for call recording + +The `CallSettings`class allows you to customise the overall calling experience. The properties for the call/conference can be set using the `CallSettingsBuilder` class. This will eventually give you and object of the `CallSettings` class which you can pass to the `startSession()` method to start the call. + +The options available for recording of calls are: + +| Setting | Description | +| --------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| `showRecordingButton(showRecordingButton: boolean)` | If set to `true` it displays the Recording button in the button Layout. if set to `false` it hides the Recording button in the button Layout. **Default value = false** | +| `startRecordingOnCallStart(startRecordingOnCallStart: boolean)` | If set to `true` call recording will start as soon as the call is started. if set to `false` call recording will not start as soon as the call is started. **Default value = false** | + +For the use case where you wish to align your own custom buttons and not use the default layout provided by CometChat, you can embed the buttons in your layout and use the below methods to perform the corresponding operations: + +### Start Recording + +You can use the startRecording() method to start call recording. + + + +```javascript +CometChatCalls.startRecording(); +``` + + + + +```typescript +CometChatCalls.startRecording(); +``` + + + + + +### Stop Recording + +You can use the stopRecording() method to stop call recording. + + + +```javascript +CometChatCalls.stopRecording(); +``` + + + + +```typescript +CometChatCalls.stopRecording(); +``` + + + + + +## Downloading Recording + +Currently, the call recordings are available on the [CometChat Dashboard](https://app.cometchat.com/signup) under the Calls Section. Recordings can be accessed after clicking on the three dots menu icon to expand the menu and then select "View Recordings". You can refer to the below screenshot. You can refer to the below screenshot. + + + + + + + + + + + + diff --git a/calls/v4/javascript/ringing.mdx b/calls/v4/javascript/ringing.mdx new file mode 100644 index 000000000..b0bacf63e --- /dev/null +++ b/calls/v4/javascript/ringing.mdx @@ -0,0 +1,609 @@ +--- +title: "Ringing" +sidebarTitle: "Ringing" +sdk_version: "4.x" +description: "CometChat Calling SDK v4 - Stable Release - Ringing for JavaScript" +--- + +## Overview + +This section explains how to implement a complete calling workflow with ringing functionality, including incoming/outgoing call UI, call acceptance, rejection, and cancellation. Previously known as **Default Calling**. + + +After the call is accepted, you need to start the call session. See the [Call Session](/calls/v4/javascript/call-session#start-call-session) guide for details on starting and managing the actual call. + + +**Call Flow:** + +1. **Caller** initiates a call using `initiateCall()` +2. **Receiver** gets notified via `onIncomingCallReceived()` callback +3. **Receiver** can either: + - Accept the call using `acceptCall()` + - Reject the call using `rejectCall()` with status `CALL_STATUS_REJECTED` +4. **Caller** can cancel the call using `rejectCall()` with status `CALL_STATUS_CANCELLED` +5. Once accepted, both participants call `startSession()` to join the call + +## Initiate Call + +The `initiateCall()` method sends a call request to a user or a group. On success, the receiver gets an `onIncomingCallReceived()` callback. + + + +```javascript +const receiverID = "UID"; +const callType = CometChat.CALL_TYPE.VIDEO; +const receiverType = CometChat.RECEIVER_TYPE.USER; + +const call = new CometChat.Call(receiverID, callType, receiverType); + +CometChat.initiateCall(call).then( + (outgoingCall) => { + console.log("Call initiated:", outgoingCall); + // Show outgoing call UI + // Store outgoingCall.getSessionId() for later use + }, + (error) => { + console.log("Call initiation failed:", error); + } +); +``` + + +```javascript +const receiverID = "GUID"; +const callType = CometChat.CALL_TYPE.VIDEO; +const receiverType = CometChat.RECEIVER_TYPE.GROUP; + +const call = new CometChat.Call(receiverID, callType, receiverType); + +CometChat.initiateCall(call).then( + (outgoingCall) => { + console.log("Call initiated:", outgoingCall); + // Show outgoing call UI + }, + (error) => { + console.log("Call initiation failed:", error); + } +); +``` + + +```typescript +const receiverID: string = "UID"; +const callType: string = CometChat.CALL_TYPE.VIDEO; +const receiverType: string = CometChat.RECEIVER_TYPE.USER; + +const call: CometChat.Call = new CometChat.Call(receiverID, callType, receiverType); + +CometChat.initiateCall(call).then( + (outgoingCall: CometChat.Call) => { + console.log("Call initiated:", outgoingCall); + }, + (error: CometChat.CometChatException) => { + console.log("Call initiation failed:", error); + } +); +``` + + +```typescript +const receiverID: string = "GUID"; +const callType: string = CometChat.CALL_TYPE.VIDEO; +const receiverType: string = CometChat.RECEIVER_TYPE.GROUP; + +const call: CometChat.Call = new CometChat.Call(receiverID, callType, receiverType); + +CometChat.initiateCall(call).then( + (outgoingCall: CometChat.Call) => { + console.log("Call initiated:", outgoingCall); + }, + (error: CometChat.CometChatException) => { + console.log("Call initiation failed:", error); + } +); +``` + + + +| Parameter | Description | +| -------------- | --------------------------------------------------------------------------- | +| `receiverID` | The UID or GUID of the recipient | +| `receiverType` | `CometChat.RECEIVER_TYPE.USER` or `CometChat.RECEIVER_TYPE.GROUP` | +| `callType` | `CometChat.CALL_TYPE.AUDIO` or `CometChat.CALL_TYPE.VIDEO` | + +On success, a `Call` object is returned containing the call details including a unique `sessionId` required for starting the call session. + +By default, an unanswered call automatically cancels after 45 seconds. You can customize this duration by passing an optional `timeout` parameter (in seconds) as the second argument to `initiateCall()`. + + + +```javascript +const receiverID = "UID"; +const callType = CometChat.CALL_TYPE.VIDEO; +const receiverType = CometChat.RECEIVER_TYPE.USER; + +const call = new CometChat.Call(receiverID, callType, receiverType); + +// Set a custom timeout of 60 seconds +CometChat.initiateCall(call, 60).then( + (outgoingCall) => { + console.log("Call initiated with 60s timeout:", outgoingCall); + }, + (error) => { + console.log("Call initiation failed:", error); + } +); +``` + + +```javascript +const receiverID = "GUID"; +const callType = CometChat.CALL_TYPE.VIDEO; +const receiverType = CometChat.RECEIVER_TYPE.GROUP; + +const call = new CometChat.Call(receiverID, callType, receiverType); + +// Set a custom timeout of 60 seconds +CometChat.initiateCall(call, 60).then( + (outgoingCall) => { + console.log("Call initiated with 60s timeout:", outgoingCall); + }, + (error) => { + console.log("Call initiation failed:", error); + } +); +``` + + +```typescript +const receiverID: string = "UID"; +const callType: string = CometChat.CALL_TYPE.VIDEO; +const receiverType: string = CometChat.RECEIVER_TYPE.USER; + +const call: CometChat.Call = new CometChat.Call(receiverID, callType, receiverType); + +// Set a custom timeout of 60 seconds +CometChat.initiateCall(call, 60).then( + (outgoingCall: CometChat.Call) => { + console.log("Call initiated with 60s timeout:", outgoingCall); + }, + (error: CometChat.CometChatException) => { + console.log("Call initiation failed:", error); + } +); +``` + + +```typescript +const receiverID: string = "GUID"; +const callType: string = CometChat.CALL_TYPE.VIDEO; +const receiverType: string = CometChat.RECEIVER_TYPE.GROUP; + +const call: CometChat.Call = new CometChat.Call(receiverID, callType, receiverType); + +// Set a custom timeout of 60 seconds +CometChat.initiateCall(call, 60).then( + (outgoingCall: CometChat.Call) => { + console.log("Call initiated with 60s timeout:", outgoingCall); + }, + (error: CometChat.CometChatException) => { + console.log("Call initiation failed:", error); + } +); +``` + + + +| Parameter | Type | Description | +| ---------- | -------- | --------------------------------------------------------------------------------------------------------------- | +| `call` | `Call` | The call object created with receiver ID, call type, and receiver type. | +| `timeout` | `number` | Optional. The ringing duration in seconds before an unanswered call is automatically cancelled. Default: `45`. | + +## Call Listeners + +Register the `CallListener` to receive real-time call events. Each listener requires a unique `listenerId` string to prevent duplicate registrations and enable targeted removal. + + + +```javascript +const listenerId = "UNIQUE_LISTENER_ID"; + +// Register listener +CometChat.addCallListener( + listenerId, + new CometChat.CallListener({ + onIncomingCallReceived: (call) => { + console.log("Incoming call:", call); + // Show incoming call UI + }, + onOutgoingCallAccepted: (call) => { + console.log("Outgoing call accepted:", call); + // Receiver accepted, start the call session + }, + onOutgoingCallRejected: (call) => { + console.log("Outgoing call rejected:", call); + // Receiver rejected, dismiss outgoing call UI + }, + onIncomingCallCancelled: (call) => { + console.log("Incoming call cancelled:", call); + // Caller cancelled, dismiss incoming call UI + }, + onCallEndedMessageReceived: (call) => { + console.log("Call ended message:", call); + // Call ended by remote participant + } + }) +); + +// Unregister listener when done +CometChat.removeCallListener(listenerId); +``` + + +```typescript +const listenerId: string = "UNIQUE_LISTENER_ID"; + +// Register listener +CometChat.addCallListener( + listenerId, + new CometChat.CallListener({ + onIncomingCallReceived: (call: CometChat.Call) => { + console.log("Incoming call:", call); + }, + onOutgoingCallAccepted: (call: CometChat.Call) => { + console.log("Outgoing call accepted:", call); + }, + onOutgoingCallRejected: (call: CometChat.Call) => { + console.log("Outgoing call rejected:", call); + }, + onIncomingCallCancelled: (call: CometChat.Call) => { + console.log("Incoming call cancelled:", call); + }, + onCallEndedMessageReceived: (call: CometChat.Call) => { + console.log("Call ended message:", call); + } + }) +); + +// Unregister listener when done +CometChat.removeCallListener(listenerId); +``` + + + +### Events + +| Event | Description | +| ----- | ----------- | +| `onIncomingCallReceived(call)` | Invoked when an incoming call is received. The `call` contains caller details, session ID, and call type. Display incoming call UI here. | +| `onOutgoingCallAccepted(call)` | Invoked on the caller's device when the receiver accepts. Generate call token and start the session here. | +| `onOutgoingCallRejected(call)` | Invoked on the caller's device when the receiver rejects the call. Dismiss outgoing call UI here. | +| `onIncomingCallCancelled(call)` | Invoked on the receiver's device when the caller cancels before answering. Dismiss incoming call UI here. | +| `onCallEndedMessageReceived(call)` | Invoked when a call ends. The `call` contains final status and duration. Update call history here. | + +## Accept Call + +When an incoming call is received via `onIncomingCallReceived()`, use `acceptCall()` to accept it. On success, start the call session. + + + +```javascript +const sessionId = call.getSessionId(); // From onIncomingCallReceived + +CometChat.acceptCall(sessionId).then( + (call) => { + console.log("Call accepted:", call); + // Call accepted, now start the call session + // Generate token and call startSession() + }, + (error) => { + console.log("Accept call failed:", error); + } +); +``` + + +```typescript +const sessionId: string = call.getSessionId(); // From onIncomingCallReceived + +CometChat.acceptCall(sessionId).then( + (call: CometChat.Call) => { + console.log("Call accepted:", call); + }, + (error: CometChat.CometChatException) => { + console.log("Accept call failed:", error); + } +); +``` + + + +## Reject Call + +Use `rejectCall()` to reject an incoming call. Set the status to `CALL_STATUS_REJECTED`. + + + +```javascript +const sessionId = call.getSessionId(); +const status = CometChat.CALL_STATUS.REJECTED; + +CometChat.rejectCall(sessionId, status).then( + (call) => { + console.log("Call rejected:", call); + // Dismiss incoming call UI + }, + (error) => { + console.log("Reject call failed:", error); + } +); +``` + + +```typescript +const sessionId: string = call.getSessionId(); +const status: string = CometChat.CALL_STATUS.REJECTED; + +CometChat.rejectCall(sessionId, status).then( + (call: CometChat.Call) => { + console.log("Call rejected:", call); + }, + (error: CometChat.CometChatException) => { + console.log("Reject call failed:", error); + } +); +``` + + + +## Cancel Call + +The caller can cancel an outgoing call before it's answered using `rejectCall()` with status `CALL_STATUS_CANCELLED`. + + + +```javascript +const sessionId = call.getSessionId(); +const status = CometChat.CALL_STATUS.CANCELLED; + +CometChat.rejectCall(sessionId, status).then( + (call) => { + console.log("Call cancelled:", call); + // Dismiss outgoing call UI + }, + (error) => { + console.log("Cancel call failed:", error); + } +); +``` + + +```typescript +const sessionId: string = call.getSessionId(); +const status: string = CometChat.CALL_STATUS.CANCELLED; + +CometChat.rejectCall(sessionId, status).then( + (call: CometChat.Call) => { + console.log("Call cancelled:", call); + }, + (error: CometChat.CometChatException) => { + console.log("Cancel call failed:", error); + } +); +``` + + + +## Start Call Session + +Once the call is accepted, both participants need to start the call session. + +**Caller flow:** In the `onOutgoingCallAccepted()` callback, generate a token and start the session. + +**Receiver flow:** In the `acceptCall()` success callback, generate a token and start the session. + + + +```javascript +const sessionId = call.getSessionId(); +const loggedInUser = await CometChat.getLoggedinUser(); +const authToken = loggedInUser.getAuthToken(); + +// Step 1: Generate call token +CometChatCalls.generateToken(sessionId, authToken).then( + (callToken) => { + // Step 2: Configure call settings + const callListener = new CometChatCalls.OngoingCallListener({ + onCallEnded: () => { + CometChat.clearActiveCall(); + CometChatCalls.endSession(); + // Close calling screen + }, + onCallEndButtonPressed: () => { + CometChat.endCall(sessionId).then( + () => { + CometChat.clearActiveCall(); + CometChatCalls.endSession(); + // Close calling screen + }, + (error) => console.log("End call failed:", error) + ); + }, + onUserJoined: (user) => console.log("User joined:", user), + onUserLeft: (user) => console.log("User left:", user), + onError: (error) => console.log("Call error:", error) + }); + + const callSettings = new CometChatCalls.CallSettingsBuilder() + .enableDefaultLayout(true) + .setIsAudioOnlyCall(false) + .setCallListener(callListener) + .build(); + + // Step 3: Start the session + const htmlElement = document.getElementById("call-container"); + CometChatCalls.startSession(callToken, callSettings, htmlElement); + }, + (error) => { + console.log("Token generation failed:", error); + } +); +``` + + +```typescript +const sessionId: string = call.getSessionId(); +const loggedInUser = await CometChat.getLoggedinUser(); +const authToken: string = loggedInUser.getAuthToken(); + +// Step 1: Generate call token +CometChatCalls.generateToken(sessionId, authToken).then( + (callToken: any) => { + // Step 2: Configure call settings + const callListener = new CometChatCalls.OngoingCallListener({ + onCallEnded: () => { + CometChat.clearActiveCall(); + CometChatCalls.endSession(); + // Close calling screen + }, + onCallEndButtonPressed: () => { + CometChat.endCall(sessionId).then( + () => { + CometChat.clearActiveCall(); + CometChatCalls.endSession(); + // Close calling screen + }, + (error: CometChat.CometChatException) => console.log("End call failed:", error) + ); + }, + onUserJoined: (user: any) => console.log("User joined:", user), + onUserLeft: (user: any) => console.log("User left:", user), + onError: (error: any) => console.log("Call error:", error) + }); + + const callSettings = new CometChatCalls.CallSettingsBuilder() + .enableDefaultLayout(true) + .setIsAudioOnlyCall(false) + .setCallListener(callListener) + .build(); + + // Step 3: Start the session + const htmlElement = document.getElementById("call-container") as HTMLElement; + CometChatCalls.startSession(callToken, callSettings, htmlElement); + }, + (error: CometChat.CometChatException) => { + console.log("Token generation failed:", error); + } +); +``` + + + +For more details on call settings and customization, see the [Call Session](/calls/v4/javascript/call-session#start-call-session) guide. + +## End Call + +To end an active call in the ringing flow, the process differs based on who ends the call. + +**User who ends the call:** + +When the user clicks the end call button, the `onCallEndButtonPressed()` callback is triggered. Inside this callback, call `CometChat.endCall()` to notify other participants. On success, call `CometChat.clearActiveCall()` and `CometChatCalls.endSession()` to release resources. + + + +```javascript +onCallEndButtonPressed: () => { + CometChat.endCall(sessionId).then( + (call) => { + console.log("Call ended successfully"); + CometChat.clearActiveCall(); + CometChatCalls.endSession(); + // Close the calling screen + }, + (error) => { + console.log("End call failed:", error); + } + ); +} +``` + + +```typescript +onCallEndButtonPressed: () => { + CometChat.endCall(sessionId).then( + (call: CometChat.Call) => { + console.log("Call ended successfully"); + CometChat.clearActiveCall(); + CometChatCalls.endSession(); + // Close the calling screen + }, + (error: CometChat.CometChatException) => { + console.log("End call failed:", error); + } + ); +} +``` + + + +**Remote participant** (receives `onCallEnded()` callback): + + + +```javascript +onCallEnded: () => { + CometChat.clearActiveCall(); + CometChatCalls.endSession(); + // Close the calling screen +} +``` + + +```typescript +onCallEnded: () => { + CometChat.clearActiveCall(); + CometChatCalls.endSession(); + // Close the calling screen +} +``` + + + +For more details, see the [End Call Session](/calls/v4/javascript/call-session#end-call-session) guide. + +## Busy Call Handling + +If the receiver is already on another call, you can reject the incoming call with `CALL_STATUS_BUSY` status. + + + +```javascript +const sessionId = call.getSessionId(); +const status = CometChat.CALL_STATUS.BUSY; + +CometChat.rejectCall(sessionId, status).then( + (call) => { + console.log("Busy status sent:", call); + }, + (error) => { + console.log("Busy rejection failed:", error); + } +); +``` + + +```typescript +const sessionId: string = call.getSessionId(); +const status: string = CometChat.CALL_STATUS.BUSY; + +CometChat.rejectCall(sessionId, status).then( + (call: CometChat.Call) => { + console.log("Busy status sent:", call); + }, + (error: CometChat.CometChatException) => { + console.log("Busy rejection failed:", error); + } +); +``` + + diff --git a/calls/v4/javascript/session-timeout.mdx b/calls/v4/javascript/session-timeout.mdx new file mode 100644 index 000000000..05fd7d6c8 --- /dev/null +++ b/calls/v4/javascript/session-timeout.mdx @@ -0,0 +1,35 @@ +--- +title: "Session Timeout Flow" +sidebarTitle: "Session Timeout" +sdk_version: "4.x" +description: "CometChat Calling SDK v4 - Stable Release - Session Timeout for JavaScript" +--- + +Available since v4.1.0 + +## Overview + +CometChat Calls SDK provides a mechanism to handle session timeouts for idle participants. By default, if a participant is alone in a call session for 180 seconds (3 minutes), the following sequence is triggered: + +1. After 120 seconds of being alone in the session, the participant will see a dialog box + +2. This dialog provides options to either: + + * Stay in the call + * Leave immediately + +3. If no action is taken within the next 60 seconds, the call will automatically end + +This feature helps manage inactive call sessions and prevents unnecessary resource usage. The idle timeout period ensures that participants don't accidentally remain in abandoned call sessions. + +### Session Timeout Flow + + + + + + + +The `onSessionTimeout` event is triggered when the call automatically terminates due to session timeout, as illustrated in the diagram above. + + diff --git a/calls/v4/javascript/setup.mdx b/calls/v4/javascript/setup.mdx new file mode 100644 index 000000000..62909887e --- /dev/null +++ b/calls/v4/javascript/setup.mdx @@ -0,0 +1,118 @@ +--- +title: "Setup" +sidebarTitle: "Setup" +sdk_version: "4.x" +description: "CometChat Calling SDK v4 - Stable Release - Setup for JavaScript" +--- + +## Get your Application Keys + +[Signup for CometChat](https://app.cometchat.com) and then: + +1. Create a new app +2. Head over to the **Credentials** section and note the **App ID, Auth Key** & **Region** + +## Add the CometChatCalls Dependency + +Install the package as NPM module: + + + +```bash +npm install @cometchat/calls-sdk-javascript +``` + + + + +```bash +yarn add @cometchat/calls-sdk-javascript +``` + + + + + +Then, import the `CometChatCalls` class wherever you want to use `CometChatCalls`. + + + +```js +import { CometChatCalls } from "@cometchat/calls-sdk-javascript"; +``` + + + + +```typescript +import { CometChatCalls } from "@cometchat/calls-sdk-javascript"; +``` + + + + + +### Initialize CometChatCalls + +The `init()` method initialises the settings required for `CometChatCalls`. The `init()` method takes a single paramater, that is the instance of `CallAppSettings` class. + +The `CallAppSettingsBuilder` class allows you to configure three settings: + +1. **appID:** You CometChat App ID +2. **region**: The region where your app was created +3. **host:** This method takes the client URL as input and uses this client URL instead of the default client URL. This can be used in case of dedicated deployment of CometChat. + +You need to call init() before calling any other method from `CometChatCalls`. We suggest you call the init() method on app startup, preferably in the index.js file. + + + +```js +let appID = "APP_ID"; +let region = "REGION"; + +const callAppSetting = new CometChatCalls.CallAppSettingsBuilder() + .setAppId(appID) + .setRegion(region) + .build(); + +CometChatCalls.init(callAppSetting).then( + () => { + console.log("CometChatCalls initialization completed successfully"); + }, + (error) => { + console.log("CometChatCalls initialization failed with error:", error); + } +); +``` + + + + +```typescript +let appID = "APP_ID"; +let region = "REGION"; + +const callAppSetting = new CometChatCalls.CallAppSettingsBuilder() + .setAppId(appID) + .setRegion(region) + .build(); + +CometChatCalls.init(callAppSetting).then( + () => { + console.log("CometChatCalls initialization completed successfully"); + }, + (error) => { + console.log("CometChatCalls initialization failed with error:", error); + } +); +``` + + + + + +Make sure you replace the `APP_ID` with your CometChat **App ID** and `REGION` with your **App Region** in the above code. + +| Parameter | Description | +| ----------------- | ---------------------------------------- | +| `callAppSettings` | An object of the `CallAppSettings` class | diff --git a/calls/v4/javascript/standalone-calling.mdx b/calls/v4/javascript/standalone-calling.mdx new file mode 100644 index 000000000..9682483be --- /dev/null +++ b/calls/v4/javascript/standalone-calling.mdx @@ -0,0 +1,490 @@ +--- +title: "Standalone Calling" +sidebarTitle: "Standalone Calling" +sdk_version: "4.x" +description: "CometChat Calling SDK v4 - Stable Release - Standalone Calling for JavaScript" +--- + +## Overview + +This section demonstrates how to implement calling functionality using only the CometChat Calls SDK, without requiring the Chat SDK. This is ideal for applications that need video/audio calling capabilities without the full chat infrastructure. + + +Before you begin, ensure you have completed the [Calls SDK setup](/calls/v4/javascript/setup). + + +## User Authentication + +To start a call session, you need a user auth token. Since this implementation doesn't use the Chat SDK, you'll need to obtain the auth token via the CometChat REST API. + + +To understand user authentication in CometChat, see the [User Auth](/fundamentals/user-auth) documentation. + + +You can obtain the auth token using one of these REST API endpoints: + +- [Create Auth Token](/rest-api/auth-tokens/create) — Creates a new auth token for a user +- [Get Auth Token](/rest-api/auth-tokens/get) — Retrieves an existing auth token + + +For testing or POC purposes, you can create an auth token directly from the [CometChat Dashboard](https://app.cometchat.com). Navigate to **Users & Groups → Users**, select a user, and click **+ Create Auth Token**. + + +Store the auth token securely in your application for use when generating call tokens. + +## Generate Call Token + +A call token is required for secure access to a call session. Each token is unique to a specific session and user combination, ensuring that only authorized users can join the call. + +You can generate the token just before starting the call, or generate and store it ahead of time based on your use case. + +Use the `generateToken()` method to create a call token: + + + +```javascript +const sessionId = "UNIQUE_SESSION_ID"; // Generate a unique session ID +const userAuthToken = "USER_AUTH_TOKEN"; // Obtained from REST API + +CometChatCalls.generateToken(sessionId, userAuthToken).then( + (callToken) => { + console.log("Call token generated:", callToken.token); + // Use callToken to start the session + }, + (error) => { + console.log("Token generation failed:", error); + } +); +``` + + +```typescript +const sessionId: string = "UNIQUE_SESSION_ID"; // Generate a unique session ID +const userAuthToken: string = "USER_AUTH_TOKEN"; // Obtained from REST API + +CometChatCalls.generateToken(sessionId, userAuthToken).then( + (callToken: any) => { + console.log("Call token generated:", callToken.token); + // Use callToken to start the session + }, + (error: any) => { + console.log("Token generation failed:", error); + } +); +``` + + + +| Parameter | Description | +| --------------- | -------------------------------------------------------------------------- | +| `sessionId` | A unique session ID for the call. Generate this yourself or use a shared ID for participants to join the same call. | +| `userAuthToken` | The user auth token obtained from the CometChat REST API. | + +## Start Call Session + +Use the `startSession()` method to join a call session. This method requires: +1. A call token (generated in the previous step) +2. A `CallSettings` object that configures the call UI and behavior +3. An HTML element where the call UI will be rendered + + + +```javascript +const callListener = new CometChatCalls.OngoingCallListener({ + onUserJoined: (user) => { + console.log("User joined:", user); + }, + onUserLeft: (user) => { + console.log("User left:", user); + }, + onUserListUpdated: (userList) => { + console.log("User list updated:", userList); + }, + onCallEnded: () => { + console.log("Call ended"); + CometChatCalls.endSession(); + // Close calling screen + }, + onCallEndButtonPressed: () => { + console.log("End call button pressed"); + CometChatCalls.endSession(); + // Close calling screen + }, + onError: (error) => { + console.log("Call error:", error); + }, + onMediaDeviceListUpdated: (deviceList) => { + console.log("Device list updated:", deviceList); + }, + onUserMuted: (event) => { + console.log("User muted:", event); + }, + onScreenShareStarted: () => { + console.log("Screen sharing started"); + }, + onScreenShareStopped: () => { + console.log("Screen sharing stopped"); + }, + onCallSwitchedToVideo: (event) => { + console.log("Call switched to video:", event); + }, + onSessionTimeout: () => { + console.log("Session timed out"); + } +}); + +const callSettings = new CometChatCalls.CallSettingsBuilder() + .enableDefaultLayout(true) + .setIsAudioOnlyCall(false) + .setCallListener(callListener) + .build(); + +const htmlElement = document.getElementById("call-container"); +CometChatCalls.startSession(callToken, callSettings, htmlElement); +``` + + +```typescript +const callListener = new CometChatCalls.OngoingCallListener({ + onUserJoined: (user: any) => { + console.log("User joined:", user); + }, + onUserLeft: (user: any) => { + console.log("User left:", user); + }, + onUserListUpdated: (userList: any[]) => { + console.log("User list updated:", userList); + }, + onCallEnded: () => { + console.log("Call ended"); + CometChatCalls.endSession(); + // Close calling screen + }, + onCallEndButtonPressed: () => { + console.log("End call button pressed"); + CometChatCalls.endSession(); + // Close calling screen + }, + onError: (error: any) => { + console.log("Call error:", error); + }, + onMediaDeviceListUpdated: (deviceList: any[]) => { + console.log("Device list updated:", deviceList); + }, + onUserMuted: (event: any) => { + console.log("User muted:", event); + }, + onScreenShareStarted: () => { + console.log("Screen sharing started"); + }, + onScreenShareStopped: () => { + console.log("Screen sharing stopped"); + }, + onCallSwitchedToVideo: (event: any) => { + console.log("Call switched to video:", event); + }, + onSessionTimeout: () => { + console.log("Session timed out"); + } +}); + +const callSettings = new CometChatCalls.CallSettingsBuilder() + .enableDefaultLayout(true) + .setIsAudioOnlyCall(false) + .setCallListener(callListener) + .build(); + +const htmlElement = document.getElementById("call-container") as HTMLElement; +CometChatCalls.startSession(callToken, callSettings, htmlElement); +``` + + + +| Parameter | Description | +| -------------- | -------------------------------------------------------- | +| `callToken` | The token received from `generateToken()` onSuccess | +| `callSettings` | Object of `CallSettings` class configured via `CallSettingsBuilder` | +| `htmlElement` | DOM element where the call UI will be rendered | + +### Call Settings + +Configure the call experience using the following `CallSettingsBuilder` methods: + +| Method | Description | +| ------ | ----------- | +| `enableDefaultLayout(boolean)` | Enables or disables the default call UI layout with built-in controls. `true` shows the default layout. `false` hides the button layout. Default: `true` | +| `setIsAudioOnlyCall(boolean)` | Sets whether the call is audio-only or audio-video. `true` for audio-only, `false` for audio-video. Default: `false` | +| `setCallListener(OngoingCallListener)` | Sets the listener to receive call events. See [Call Listeners](#call-listeners). | +| `setMode(string)` | Sets the call UI layout mode. Available: `CometChat.CALL_MODE.DEFAULT`, `CometChat.CALL_MODE.SPOTLIGHT`. Default: `DEFAULT` | +| `startWithAudioMuted(boolean)` | Starts the call with the microphone muted. Default: `false` | +| `startWithVideoMuted(boolean)` | Starts the call with the camera turned off. Default: `false` | +| `showEndCallButton(boolean)` | Shows or hides the end call button in the default layout. Default: `true` | +| `showMuteAudioButton(boolean)` | Shows or hides the mute audio button. Default: `true` | +| `showPauseVideoButton(boolean)` | Shows or hides the pause video button. Default: `true` | +| `showScreenShareButton(boolean)` | Shows or hides the screen share button. Default: `true` | +| `showModeButton(boolean)` | Shows or hides the mode toggle button (switch between DEFAULT and SPOTLIGHT). Default: `true` | +| `showSwitchToVideoCallButton(boolean)` | Shows or hides the button to upgrade an audio call to video. Default: `true` | +| `setMainVideoContainerSetting(MainVideoContainerSetting)` | Customizes the main video container. See [Video View Customization](/calls/v4/javascript/video-view-customisation). | +| `setIdleTimeoutPeriod(number)` | Sets idle timeout in seconds. Warning appears 60 seconds before auto-termination. Default: `180` seconds. *v4.1.0+* | + +## Call Listeners + +The `OngoingCallListener` provides real-time callbacks for call session events, including participant changes, call state updates, and error conditions. + +You can register listeners in two ways: + +1. **Via CallSettingsBuilder:** Use `.setCallListener(listener)` when building call settings +2. **Via addCallEventListener:** Use `CometChatCalls.addCallEventListener(listenerId, listener)` to add multiple listeners + +Each listener requires a unique `listenerId` string. This ID is used to: +- **Prevent duplicate registrations** — Re-registering with the same ID replaces the existing listener +- **Enable targeted removal** — Remove specific listeners without affecting others + + + +```javascript +const listenerId = "UNIQUE_LISTENER_ID"; + +CometChatCalls.addCallEventListener(listenerId, { + onUserJoined: (user) => { + console.log("User joined:", user); + }, + onUserLeft: (user) => { + console.log("User left:", user); + }, + onUserListUpdated: (userList) => { + console.log("User list updated:", userList); + }, + onCallEnded: () => { + console.log("Call ended"); + CometChatCalls.endSession(); + // Close calling screen + }, + onCallEndButtonPressed: () => { + console.log("End call button pressed"); + CometChatCalls.endSession(); + // Close calling screen + }, + onError: (error) => { + console.log("Call error:", error); + }, + onMediaDeviceListUpdated: (deviceList) => { + console.log("Device list updated:", deviceList); + }, + onUserMuted: (event) => { + console.log("User muted:", event); + }, + onScreenShareStarted: () => { + console.log("Screen sharing started"); + }, + onScreenShareStopped: () => { + console.log("Screen sharing stopped"); + }, + onCallSwitchedToVideo: (event) => { + console.log("Call switched to video:", event); + }, + onSessionTimeout: () => { + console.log("Session timed out"); + } +}); + +// Remove listener when done +CometChatCalls.removeCallEventListener(listenerId); +``` + + +```typescript +const listenerId: string = "UNIQUE_LISTENER_ID"; + +CometChatCalls.addCallEventListener(listenerId, { + onUserJoined: (user: any) => { + console.log("User joined:", user); + }, + onUserLeft: (user: any) => { + console.log("User left:", user); + }, + onUserListUpdated: (userList: any[]) => { + console.log("User list updated:", userList); + }, + onCallEnded: () => { + console.log("Call ended"); + CometChatCalls.endSession(); + // Close calling screen + }, + onCallEndButtonPressed: () => { + console.log("End call button pressed"); + CometChatCalls.endSession(); + // Close calling screen + }, + onError: (error: any) => { + console.log("Call error:", error); + }, + onMediaDeviceListUpdated: (deviceList: any[]) => { + console.log("Device list updated:", deviceList); + }, + onUserMuted: (event: any) => { + console.log("User muted:", event); + }, + onScreenShareStarted: () => { + console.log("Screen sharing started"); + }, + onScreenShareStopped: () => { + console.log("Screen sharing stopped"); + }, + onCallSwitchedToVideo: (event: any) => { + console.log("Call switched to video:", event); + }, + onSessionTimeout: () => { + console.log("Session timed out"); + } +}); + +// Remove listener when done +CometChatCalls.removeCallEventListener(listenerId); +``` + + + +### Events + +| Event | Description | +| ----- | ----------- | +| `onCallEnded()` | Invoked when the call session terminates for a 1:1 call. Both participants receive this callback. Only fires for calls with exactly 2 participants. | +| `onSessionTimeout()` | Invoked when the call is auto-terminated due to inactivity (default: 180 seconds). Warning appears 60 seconds before. *v4.1.0+* | +| `onCallEndButtonPressed()` | Invoked when the local user clicks the end call button. Call `CometChatCalls.endSession()` to leave the session. | +| `onUserJoined(user)` | Invoked when a remote participant joins. The `user` contains UID, name, and avatar. | +| `onUserLeft(user)` | Invoked when a remote participant leaves the call session. | +| `onUserListUpdated(userList)` | Invoked whenever the participant list changes (join or leave events). | +| `onMediaDeviceListUpdated(deviceList)` | Invoked when available audio/video devices change (e.g., new microphone connected). | +| `onUserMuted(event)` | Invoked when a participant's mute state changes. Contains `muted` and `mutedBy` properties. | +| `onScreenShareStarted()` | Invoked when the local user starts sharing their screen. | +| `onScreenShareStopped()` | Invoked when the local user stops sharing their screen. | +| `onCallSwitchedToVideo(event)` | Invoked when an audio call is upgraded to a video call. Contains `sessionId`, `initiator`, and `responder`. | +| `onError(error)` | Invoked when an error occurs during the call session. | + +## End Call Session + +To end the call session and release all media resources (camera, microphone, network connections), call `CometChatCalls.endSession()` in the `onCallEndButtonPressed()` callback. + + + +```javascript +onCallEndButtonPressed: () => { + CometChatCalls.endSession(); + // Close the calling screen +} +``` + + +```typescript +onCallEndButtonPressed: () => { + CometChatCalls.endSession(); + // Close the calling screen +} +``` + + + +## Methods + +These methods are available for performing custom actions during an active call session. Use them to build custom UI controls or implement specific behaviors based on your use case. + + +These methods can only be called when a call session is active. + + +### Switch Camera + +Toggles between the front and rear camera during a video call. Only supported on mobile browsers. + +```javascript +CometChatCalls.switchCamera(); +``` + + +This method is only supported on mobile browsers. It has no effect on desktop browsers. *Available since v4.2.0* + + +### Mute Audio + +Controls the local audio stream transmission. `true` mutes, `false` unmutes. + +```javascript +CometChatCalls.muteAudio(true); +``` + +### Pause Video + +Controls the local video stream transmission. `true` pauses, `false` resumes. + +```javascript +CometChatCalls.pauseVideo(true); +``` + +### Start Screen Share + +```javascript +CometChatCalls.startScreenShare(); +``` + +### Stop Screen Share + +```javascript +CometChatCalls.stopScreenShare(); +``` + +### Set Mode + +Changes the call UI layout mode dynamically during the call. + +```javascript +CometChatCalls.setMode(CometChat.CALL_MODE.SPOTLIGHT); +``` + +### Get Audio Input Devices + +```javascript +const audioInputDevices = CometChatCalls.getAudioInputDevices(); +``` + +### Get Audio Output Devices + +```javascript +const audioOutputDevices = CometChatCalls.getAudioOutputDevices(); +``` + +### Get Video Input Devices + +```javascript +const videoInputDevices = CometChatCalls.getVideoInputDevices(); +``` + +### Set Audio Input Device + +```javascript +CometChatCalls.setAudioInputDevice(deviceId); +``` + +### Set Audio Output Device + +```javascript +CometChatCalls.setAudioOutputDevice(deviceId); +``` + +### Set Video Input Device + +```javascript +CometChatCalls.setVideoInputDevice(deviceId); +``` + +### Switch To Video Call + +```javascript +CometChatCalls.switchToVideoCall(); +``` + +### End Call + +```javascript +CometChatCalls.endSession(); +``` diff --git a/calls/v4/javascript/video-view-customisation.mdx b/calls/v4/javascript/video-view-customisation.mdx new file mode 100644 index 000000000..e63938916 --- /dev/null +++ b/calls/v4/javascript/video-view-customisation.mdx @@ -0,0 +1,97 @@ +--- +title: "Video View Customisation" +sidebarTitle: "Video View Customisation" +sdk_version: "4.x" +description: "CometChat Calling SDK v4 - Stable Release - Video View Customisation for JavaScript" +--- + + +**Quick Reference** +- **Class:** `CometChat.MainVideoContainerSetting` +- **Apply via:** `CallSettingsBuilder.setMainVideoContainerSetting(videoSettings)` +- **Customizable elements:** Aspect ratio, full screen button, name label, network label +- **Position constants:** `POSITION_TOP_LEFT`, `POSITION_TOP_RIGHT`, `POSITION_BOTTOM_LEFT`, `POSITION_BOTTOM_RIGHT` +- **Requires:** [Ringing](/calls/v4/javascript/ringing) or [Call Session](/calls/v4/javascript/call-session) setup + + +This section will guide you to customise the main video container. + +## Implementation + +Once you have decided to implement [Ringing](/calls/v4/javascript/ringing) or [Call Session](/calls/v4/javascript/call-session) calling and followed the steps to implement them. Just few additional methods will help you quickly customize the main video container. + +Please make sure your callSettings is configured accordingly for [Ringing](/calls/v4/javascript/ringing) or [Call Session](/calls/v4/javascript/call-session). + +## Main Video Container Setting + +The `MainVideoContainerSetting` Class is the required in case you want to customise the main video view. You need to pass the Object of the `MainVideoContainerSetting` Class in the `setMainVideoContainerSetting()` method of the `CallSettingsBuilder`. + +| Setting | Description | +| ------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| `setMainVideoAspectRatio(aspectRatio: string)` | This method is used to set the aspect ratio of main video. The default value is **contain.**

Possible Values:
**1. CometChat.CallSettings. ASPECT\_RATIO\_CONTAIN\*\*\*\***
**2. CometChat.CallSettings. ASPECT\_RATIO\_COVER** | +| `setFullScreenButtonParams(position: string, visibility: boolean)` | This method is used to set the position & visibility parameter of the full screen button. By default the full screen button is visible in the **bottom-right** position.

Possible Values for **POSITION:**
1. **CometChat.CallSettings. POSITION\_TOP\_LEFT**
2. **CometChat.CallSettings. POSITION\_TOP\_RIGHT**
3. **CometChat.CallSettings. POSITION\_BOTTOM\_LEFT**
4. **CometChat.CallSettings. POSITION\_BOTTOM\_RIGHT**

Possible Values for **VISIBILITY:**
1. **true**
2. **false** | +| `setNameLabelParams(position: string, visibility: boolean, backgroundColor: string)` | This method is used to set the position, visibility & background color of the name label. By default the name label is visible in the **bottom-left** position with a background-color \*\*rgba(27, 27, 27, 0.4)\*\*

Possible Values for **POSITION:**
1. **CometChat.CallSettings. POSITION\_TOP\_LEFT**
2. **CometChat.CallSettings. POSITION\_TOP\_RIGHT**
3. **CometChat.CallSettings. POSITION\_BOTTOM\_LEFT**
4. **CometChat.CallSettings. POSITION\_BOTTOM\_RIGHT**

Possible Values for **VISIBILITY:**
1. **true**
2. **false** | +| `setNetworkLabelParams(position: string, visibility: boolean)` | This method is used to set the position, visibility of the network label. By default the network label is visible in the **bottom-right** position.

Possible Values for **POSITION:**
1. **CometChat.CallSettings. POSITION\_TOP\_LEFT**
2. **CometChat.CallSettings. POSITION\_TOP\_RIGHT**
3. **CometChat.CallSettings. POSITION\_BOTTOM\_LEFT**
4. **CometChat.CallSettings. POSITION\_BOTTOM\_RIGHT**

Possible Values for **VISIBILITY:**
1. **true**
2. **false** | + +Example: + + + +```javascript +let videoSettings = new CometChat.MainVideoContainerSetting(); + +videoSettings.setMainVideoAspectRatio(CometChat.CallSettings.ASPECT_RATIO_CONTAIN); +videoSettings.setFullScreenButtonParams(CometChat.CallSettings.POSITION_BOTTOM_RIGHT, true); +videoSettings.setNameLabelParams(CometChat.CallSettings.POSITION_BOTTOM_LEFT, true, "rgba(27, 27, 27, 0.4)"); +videoSettings.setNetworkLabelParams(CometChat.CallSettings.POSITION_BOTTOM_RIGHT, true); +``` + + +```typescript +let videoSettings: CometChat.MainVideoContainerSetting = new CometChat.MainVideoContainerSetting(); + +videoSettings.setMainVideoAspectRatio(CometChat.CallSettings.ASPECT_RATIO_CONTAIN); +videoSettings.setFullScreenButtonParams(CometChat.CallSettings.POSITION_BOTTOM_RIGHT, true); +videoSettings.setNameLabelParams(CometChat.CallSettings.POSITION_BOTTOM_LEFT, true, "rgba(27, 27, 27, 0.4)"); +videoSettings.setNetworkLabelParams(CometChat.CallSettings.POSITION_BOTTOM_RIGHT, true); +``` + + + + + + +| Practice | Details | +| --- | --- | +| Aspect ratio choice | Use `ASPECT_RATIO_CONTAIN` to show the full video without cropping; use `ASPECT_RATIO_COVER` for a full-bleed look that may crop edges | +| Label positioning | Avoid placing the name label and network label in the same corner to prevent overlap | +| Full screen button | Keep the full screen button visible for better UX; only hide it if your app provides its own full screen toggle | + + + + +| Symptom | Cause | Fix | +| --- | --- | --- | +| Video settings not applied | `setMainVideoContainerSetting()` not called on `CallSettingsBuilder` | Pass the `MainVideoContainerSetting` object to `CallSettingsBuilder.setMainVideoContainerSetting()` before calling `startCall()` | +| Labels overlapping | Multiple labels positioned in the same corner | Assign different position constants to each label | +| Full screen button missing | Visibility set to `false` | Set the second parameter of `setFullScreenButtonParams()` to `true` | + + + + +## Next Steps + + + + Implement ringing with incoming/outgoing call UI. + + + Implement call session management. + + + Add virtual background and blur effects. + + + Record calls for playback. + + diff --git a/calls/v4/javascript/virtual-background.mdx b/calls/v4/javascript/virtual-background.mdx new file mode 100644 index 000000000..db532c0c0 --- /dev/null +++ b/calls/v4/javascript/virtual-background.mdx @@ -0,0 +1,155 @@ +--- +title: "Virtual Background" +sidebarTitle: "Virtual Background" +sdk_version: "4.x" +description: "CometChat Calling SDK v4 - Stable Release - Virtual Background for JavaScript" +--- + + +**Quick Reference** +- **Settings class:** `CometChat.VirtualBackground` +- **Apply via:** `CallSettingsBuilder.setVirtualBackground(virtualBackground)` +- **Toggle UI:** `CallSettingsBuilder.showVirtualBackgroundSetting(true|false)` +- **Runtime control:** `CometChat.CallController.getInstance()` → `setBackgroundBlur()`, `setBackgroundImage()`, `openVirtualBackground()` +- **Requires:** [Ringing](/calls/v4/javascript/ringing) or [Call Session](/calls/v4/javascript/call-session) setup + + +This section will guide you to implement virtual background feature in video calls. + +## Implementation + +Once you have decided to implement [Ringing](/calls/v4/javascript/ringing) or [Call Session](/calls/v4/javascript/call-session) calling and followed the steps to implement them. Just few additional methods will help you quickly implement virtual background. + +Please make sure your callSettings is configured accordingly for [Ringing](/calls/v4/javascript/ringing) or [Call Session](/calls/v4/javascript/call-session). + +## Settings + +The `CallSettings`class allows you to customise the overall calling experience. The properties for the call/conference can be set using the `CallSettingsBuilder` class. This will eventually give you and object of the `CallSettings` class which you can pass to the `startCall()` method to start the call. + +The **mandatory** parameters that are required to be present for any call/conference to work are: + +1. sessionId - The unique session Id for the call/conference session. + +The options available for virtual background are: + +| Setting | Description | +| ---------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | +| `showVirtualBackgroundSetting(showVBSettings: boolean)` | This method shows/hides the virtual background settings in the menu bar. **Default value = true** | +| `setVirtualBackground(virtualBackground: CometChat.VirtualBackground)` | This method will set the virtual background setting. This methods takes an Object of Virtual Background Class. | + +For the use case where you wish to align your own custom buttons and not use the default layout provided by CometChat, you can embed the buttons in your layout and use the below methods to perform the corresponding operations: + +### Open Virtual Background Setting + +You can use the `openVirtualBackground()` method to open the virtual background settings pop-up. + + + +```javascript +let callController = CometChat.CallController.getInstance(); +callController.openVirtualBackground(); +``` + + +```typescript +let callController: CometChat.CallController = CometChat.CallController.getInstance(); +callController.openVirtualBackground(); +``` + + + +### Set Background Blur + +You can use the `setBackgroundBlur()` method to apply background blur on the video stream. This method accepts a number which decides the level of blur to be applied. + + + +```javascript +let callController = CometChat.CallController.getInstance(); +let blurLevel = 1; +callController.setBackgroundBlur(blurLevel); +``` + + +```typescript +let callController: CometChat.CallController = CometChat.CallController.getInstance(); +let blurLevel: number = 1; +callController.setBackgroundBlur(blurLevel); +``` + + + +### Set Background Image + +You can use the `setBackgroundImage()`method to set the background image. This method takes either a URL or file Object & sets that image as the background. + + + +```javascript +let callController = CometChat.CallController.getInstance(); +let imageURL = "URL_OF_BACKGROUND_IMAGE"; +callController.setBackgroundImage(imageURL); +``` + + +```typescript +let callController: CometChat.CallController = CometChat.CallController.getInstance(); +let imageURL: string = "URL_OF_BACKGROUND_IMAGE"; +callController.setBackgroundImage(imageURL); +``` + + + +## Virtual Background Settings + +The `VirtualBackground` Class is the required in case you want to change how the end user can use virtual background features in a video call. You need to pass the Object of the `VirtualBackground` Class in the `setVirtualBackground()` method of the `CallSettingsBuilder`. + +| Setting | Description | +| -------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| `allowBackgroundBlur(allowBackgroundBlur: boolean)` | This method shows/hides the ability to allow end user to blur background. **Default = true** | +| `allowUserImages(allowUserImages: boolean)` | This method shows/hides the ability to allow end user to add their own custom background image. **Default = true** | +| `showDefaultImages(showDefaultImages: boolean)` | This method shows/hides the ability to allow end user to choose from default background images. **Default = true** | +| `setImages(images: Array)` | This method allows developer to add their custom background image which the end user can choose. | +| `enforceBackgroundBlur(enforceBackgroundBlur: number)` | This method starts the call with background blurred. To blur the background you need to pass an integer value between 1-99 which decides the blur level. **Default = 0** | +| `enforceBackgroundImage(enforceBackgroundImage: string)` | This methods starts the call with the provided background image. | + + + + +| Practice | Details | +| --- | --- | +| Blur level range | Use values between 1-99 for `enforceBackgroundBlur()`. Higher values produce stronger blur. A value of 0 disables blur | +| Image hosting | Host background images on a CDN for fast loading. Large images may cause lag when applied | +| Enforce vs allow | Use `enforceBackgroundBlur()` or `enforceBackgroundImage()` when you want a mandatory background (e.g., for privacy). Use `allowBackgroundBlur()` and `allowUserImages()` to let users choose | +| Custom buttons | Use `CallController` methods (`setBackgroundBlur`, `setBackgroundImage`, `openVirtualBackground`) when building a custom UI instead of the default CometChat menu | + + + + +| Symptom | Cause | Fix | +| --- | --- | --- | +| Virtual background option not visible | `showVirtualBackgroundSetting(false)` was set | Set `showVirtualBackgroundSetting(true)` in `CallSettingsBuilder` | +| Background blur not applied on call start | `enforceBackgroundBlur()` not set or set to 0 | Pass a value between 1-99 to `enforceBackgroundBlur()` | +| Custom images not appearing | `setImages()` not called or empty array passed | Pass a non-empty array of valid image URLs to `setImages()` | +| `CallController.getInstance()` returns null | Called before the call has started | Only use `CallController` methods after `startCall()` has been invoked | +| User can't upload their own images | `allowUserImages(false)` was set | Set `allowUserImages(true)` in the `VirtualBackground` configuration | + + + + +## Next Steps + + + + Customize the main video container layout. + + + Record calls for playback. + + + Enable screen sharing and presenter mode. + + + Customize the calling UI appearance. + + diff --git a/calls/v4/react-native/call-logs.mdx b/calls/v4/react-native/call-logs.mdx new file mode 100644 index 000000000..4c41c61f0 --- /dev/null +++ b/calls/v4/react-native/call-logs.mdx @@ -0,0 +1,129 @@ +--- +title: "Call Logs" +sidebarTitle: "Call Logs" +sdk_version: "4.x" +description: "CometChat Calling SDK v4 - Stable Release - Call Logs for React Native" +--- + + +**Quick Reference** - Fetch call logs: + +```javascript +const loggedInUser = await CometChat.getLoggedinUser(); + +let callLogRequest = new CometChatCalls.CallLogRequestBuilder() + .setLimit(30) + .setAuthToken(loggedInUser.getAuthToken()) + .setCallCategory("call") + .build(); + +const callLogs = await callLogRequest.fetchNext(); +``` + + + +**Available via:** [SDK](/calls/v4/react-native/call-logs) | [REST API](/rest-api/list-calls) | [UI Kits](/ui-kit/react/call-features#call-logs) + + +## Overview + +CometChat's React Native Call SDK provides a comprehensive way to integrate call logs into your application, allowing users to keep track of their communication history. Call logs provide crucial information such as call duration, participants, and more. + +## Fetching Call Logs + +Use the `CallLogRequestBuilder` to customize the call logs fetching process: + +```javascript +let callLogRequestBuilder = new CometChatCalls.CallLogRequestBuilder() + .setLimit(30) + .setAuthToken(loggedInUser.getAuthToken()) + .setCallCategory("call") + .build() +``` + +`CallLogRequestBuilder` settings: + +| Setting | Description | +| ---------------------------------------------------------------------------------------------------- | ------------------------------------------------------------ | +| `setLimit(limit: number)` | Specifies the number of call logs to fetch. | +| `setCallType(callType: 'video' or 'audio')` | Sets the type of calls to fetch. | +| `setCallStatus(callStatus: 'ongoing' or 'busy' or 'rejected' or 'cancelled' or 'ended' or 'missed')` | Sets the status of calls to fetch. | +| `setHasRecording(hasRecording: boolean)` | Sets whether to fetch calls that have recordings. | +| `setCallCategory(callCategory: 'call' or 'meet')` | Sets the category of calls to fetch. | +| `setCallDirection(callDirection: 'incoming' or 'outgoing')` | Sets the direction of calls to fetch. | +| `setUid(uid: string)` | Sets the UID of the user whose call logs to fetch. | +| `setGuid(guid: string)` | Sets the GUID of the user whose call logs to fetch. | +| `setAuthToken(authToken: string)` | Sets the Auth token of the logged-in user. | + +### Fetch Next + +The `fetchNext()` method retrieves the next set of call logs. + +```javascript +callLogRequestBuilder.fetchNext() + .then(callLogHistory => { + console.log(callLogHistory); + }) + .catch(err => { + console.log(err); + }); +``` + +### Fetch Previous + +The `fetchPrevious()` method retrieves the previous set of call logs. + +```javascript +callLogRequestBuilder.fetchPrevious() + .then(callLogHistory => { + console.log(callLogHistory); + }) + .catch(err => { + console.log(err); + }); +``` + +## Get Call Details + +To retrieve the specific details of a call, use the `getCallDetails()` method: + +```javascript +var sessionID = "SESSION_ID"; +CometChatCalls.getCallDetails(sessionID, authToken) + .then((callLogs) => { + console.log(callLogs); + }) + .catch(err => { + console.log(err); + }); +``` + + + + - Use pagination with a reasonable `setLimit()` value (e.g., 20-30) rather than fetching all logs at once + - Use the builder's filter methods to fetch only relevant logs for your current UI view + - Consider caching fetched call logs locally to reduce API calls + + + - **Call logs return empty:** Verify the `authToken` is valid and calls have actually been made + - **fetchNext returns the same results:** Reuse the same builder instance for pagination + - **getCallDetails returns no data:** Confirm the `sessionID` corresponds to a completed call + + + +## Next Steps + + + + Implement a complete calling experience with incoming and outgoing call UI + + + Start and manage call sessions with full configuration options + + + Record call sessions for playback and compliance + + + Implement calling without the Chat SDK + + diff --git a/calls/v4/react-native/call-session.mdx b/calls/v4/react-native/call-session.mdx new file mode 100644 index 000000000..4f35a092b --- /dev/null +++ b/calls/v4/react-native/call-session.mdx @@ -0,0 +1,516 @@ +--- +title: "Call Session" +sidebarTitle: "Call Session" +sdk_version: "4.x" +description: "CometChat Calling SDK v4 - Stable Release - Call Session for React Native" +--- + + +**Quick Reference** - Generate token and start a call session: + +```javascript +// Generate call token +const callToken = await CometChatCalls.generateToken(sessionId, userAuthToken); + +// Configure and render +const callSettings = new CometChatCalls.CallSettingsBuilder() + .enableDefaultLayout(true) + .setIsAudioOnlyCall(false) + .build(); + +// +``` + + +## Overview + +This section demonstrates how to start a call session in a React Native application. Previously known as **Direct Calling**. + + +**Available via:** SDK | UI Kits + + +Before you begin, we strongly recommend you read the [calling setup guide](/calls/v4/react-native/setup). + + + +If you want to implement a complete calling experience with ringing functionality (incoming/outgoing call UI), follow the [Ringing](/calls/v4/react-native/ringing) guide first. Once the call is accepted, return here to start the call session. + + + +## Generate Call Token + +A call token is required for secure access to a call session. Each token is unique to a specific session and user combination, ensuring that only authorized users can join the call. + +Use the `generateToken()` method to create a call token: + + + +```javascript +const loggedInUser = await CometChat.getLoggedinUser(); +const userAuthToken = loggedInUser.getAuthToken(); +const sessionId = "SESSION_ID"; + +CometChatCalls.generateToken(sessionId, userAuthToken).then( + (callToken) => { + console.log("Call token generated:", callToken.token); + }, + (error) => { + console.log("Token generation failed:", error); + } +); +``` + + +```typescript +const loggedInUser = await CometChat.getLoggedinUser(); +const userAuthToken = loggedInUser.getAuthToken(); +const sessionId: string = "SESSION_ID"; + +CometChatCalls.generateToken(sessionId, userAuthToken).then( + (callToken: GenerateToken) => { + console.log("Call token generated:", callToken.token); + }, + (error: CometChat.CometChatException) => { + console.log("Token generation failed:", error); + } +); +``` + + + +| Parameter | Description | +| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------ | +| `sessionId` | The unique random session ID. In case you are using the ringing flow, the session ID is available in the `Call` object. | +| `userAuthToken` | The user auth token from `CometChat.getLoggedinUser().getAuthToken()` | + +## Start Call Session + +Use the `CometChatCalls.Component` to render the call UI. This component requires a call token and a `CallSettings` object. + + + +```javascript +const callListener = new CometChatCalls.OngoingCallListener({ + onUserJoined: (user) => { + console.log("User joined:", user); + }, + onUserLeft: (user) => { + console.log("User left:", user); + }, + onUserListUpdated: (userList) => { + console.log("User list updated:", userList); + }, + onCallEnded: () => { + console.log("Call ended"); + }, + onCallEndButtonPressed: () => { + console.log("End call button pressed"); + }, + onError: (error) => { + console.log("Call error:", error); + }, + onAudioModesUpdated: (audioModes) => { + console.log("Audio modes updated:", audioModes); + }, + onCallSwitchedToVideo: (event) => { + console.log("Call switched to video:", event); + }, + onUserMuted: (event) => { + console.log("User muted:", event); + }, + onSessionTimeout: () => { + console.log("Session timed out"); + } +}); + +const callSettings = new CometChatCalls.CallSettingsBuilder() + .enableDefaultLayout(true) + .setIsAudioOnlyCall(false) + .setCallEventListener(callListener) + .build(); + +return ( + + + +); +``` + + +```typescript +const callListener = new CometChatCalls.OngoingCallListener({ + onUserJoined: (user: CometChat.User) => { + console.log("User joined:", user); + }, + onUserLeft: (user: CometChat.User) => { + console.log("User left:", user); + }, + onUserListUpdated: (userList: CometChat.User[]) => { + console.log("User list updated:", userList); + }, + onCallEnded: () => { + console.log("Call ended"); + }, + onCallEndButtonPressed: () => { + console.log("End call button pressed"); + }, + onError: (error: CometChat.CometChatException) => { + console.log("Call error:", error); + }, + onAudioModesUpdated: (audioModes: string[]) => { + console.log("Audio modes updated:", audioModes); + }, + onCallSwitchedToVideo: (event: any) => { + console.log("Call switched to video:", event); + }, + onUserMuted: (event: any) => { + console.log("User muted:", event); + }, + onSessionTimeout: () => { + console.log("Session timed out"); + } +}); + +const callSettings = new CometChatCalls.CallSettingsBuilder() + .enableDefaultLayout(true) + .setIsAudioOnlyCall(false) + .setCallEventListener(callListener) + .build(); + +return ( + + + +); +``` + + + +| Parameter | Description | +| -------------- | -------------------------------------------------------- | +| `callToken` | The `GenerateToken` object received from `generateToken()` onSuccess | +| `callSettings` | Object of `CallSettings` class configured via `CallSettingsBuilder` | + + +### Call Settings + +Configure the call experience using the following `CallSettingsBuilder` methods: + +| Method | Description | +| ------ | ----------- | +| `enableDefaultLayout(boolean)` | Enables or disables the default call UI layout. Default: `true` | +| `setIsAudioOnlyCall(boolean)` | Sets whether the call is audio-only or audio-video. Default: `false` | +| `setCallEventListener(OngoingCallListener)` | Sets the listener to receive call events. | +| `setMode(string)` | Sets the call UI layout mode. Available: `DEFAULT`, `SPOTLIGHT`, `SINGLE`. Default: `DEFAULT` | +| `setAvatarMode(string)` | Sets how avatars are displayed when video is off. Available: `circle`, `square`, `fullscreen`. Default: `circle` | +| `setDefaultAudioMode(string)` | Sets the initial audio output device. Available: `SPEAKER`, `EARPIECE`, `BLUETOOTH`, `HEADPHONES` | +| `startWithAudioMuted(boolean)` | Starts the call with the microphone muted. Default: `false` | +| `startWithVideoMuted(boolean)` | Starts the call with the camera turned off. Default: `false` | +| `showEndCallButton(boolean)` | Shows or hides the end call button. Default: `true` | +| `showSwitchCameraButton(boolean)` | Shows or hides the switch camera button. Default: `true` | +| `showMuteAudioButton(boolean)` | Shows or hides the mute audio button. Default: `true` | +| `showPauseVideoButton(boolean)` | Shows or hides the pause video button. Default: `true` | +| `showAudioModeButton(boolean)` | Shows or hides the audio mode selection button. Default: `true` | +| `showSwitchToVideoCallButton(boolean)` | Shows or hides the button to upgrade an audio call to video. Default: `true` | +| `setMainVideoContainerSetting(MainVideoContainerSetting)` | Customizes the main video container. See [Video View Customization](/calls/v4/react-native/video-view-customisation). | +| `enableVideoTileClick(boolean)` | Enables or disables click interactions on video tiles in Spotlight mode. Default: `true` | +| `enableVideoTileDrag(boolean)` | Enables or disables drag functionality for video tiles in Spotlight mode. Default: `true` | +| `setIdleTimeoutPeriod(number)` | Sets idle timeout in seconds. Default: `180` seconds. *v4.2.0+* | + +## Call Listeners + +The `OngoingCallListener` provides real-time callbacks for call session events. + +You can register listeners in two ways: + +1. **Via CallSettingsBuilder:** Use `.setCallEventListener(listener)` when building call settings +2. **Via addCallEventListener:** Use `CometChatCalls.addCallEventListener(listenerId, listener)` to add multiple listeners + + + +```javascript +useEffect(() => { + const listenerId = "UNIQUE_LISTENER_ID"; + + CometChatCalls.addCallEventListener(listenerId, { + onUserJoined: (user) => { + console.log("User joined:", user); + }, + onUserLeft: (user) => { + console.log("User left:", user); + }, + onUserListUpdated: (userList) => { + console.log("User list updated:", userList); + }, + onCallEnded: () => { + console.log("Call ended"); + }, + onCallEndButtonPressed: () => { + console.log("End call button pressed"); + }, + onError: (error) => { + console.log("Call error:", error); + }, + onAudioModesUpdated: (audioModes) => { + console.log("Audio modes updated:", audioModes); + }, + onCallSwitchedToVideo: (event) => { + console.log("Call switched to video:", event); + }, + onUserMuted: (event) => { + console.log("User muted:", event); + }, + onSessionTimeout: () => { + console.log("Session timed out"); + } + }); + + return () => CometChatCalls.removeCallEventListener(listenerId); +}, []); +``` + + +```typescript +useEffect(() => { + const listenerId: string = "UNIQUE_LISTENER_ID"; + + CometChatCalls.addCallEventListener(listenerId, { + onUserJoined: (user: CometChat.User) => { + console.log("User joined:", user); + }, + onUserLeft: (user: CometChat.User) => { + console.log("User left:", user); + }, + onUserListUpdated: (userList: CometChat.User[]) => { + console.log("User list updated:", userList); + }, + onCallEnded: () => { + console.log("Call ended"); + }, + onCallEndButtonPressed: () => { + console.log("End call button pressed"); + }, + onError: (error: CometChat.CometChatException) => { + console.log("Call error:", error); + }, + onAudioModesUpdated: (audioModes: string[]) => { + console.log("Audio modes updated:", audioModes); + }, + onCallSwitchedToVideo: (event: any) => { + console.log("Call switched to video:", event); + }, + onUserMuted: (event: any) => { + console.log("User muted:", event); + }, + onSessionTimeout: () => { + console.log("Session timed out"); + } + }); + + return () => CometChatCalls.removeCallEventListener(listenerId); +}, []); +``` + + + + +Always remove call event listeners when the component unmounts using `CometChatCalls.removeCallEventListener(listenerId)`. + + +### Events + +| Event | Description | +| ----- | ----------- | +| `onCallEnded()` | Invoked when the call session terminates for a 1:1 call. | +| `onSessionTimeout()` | Invoked when the call is auto-terminated due to inactivity. *v4.2.0+* | +| `onCallEndButtonPressed()` | Invoked when the local user taps the end call button. | +| `onUserJoined(user)` | Invoked when a remote participant joins. | +| `onUserLeft(user)` | Invoked when a remote participant leaves. | +| `onUserListUpdated(userList)` | Invoked whenever the participant list changes. | +| `onAudioModesUpdated(audioModes)` | Invoked when available audio devices change. | +| `onCallSwitchedToVideo(event)` | Invoked when an audio call is upgraded to video. | +| `onUserMuted(event)` | Invoked when a participant's mute state changes. | +| `onScreenShareStarted()` | Invoked when the local user starts sharing a screen. | +| `onScreenShareStopped()` | Invoked when the local user stops sharing a screen. | +| `onError(error)` | Invoked when an error occurs during the call session. | + +## End Call Session + +### Ringing Flow + +When using the [Ringing](/calls/v4/react-native/ringing) flow, you must coordinate between the CometChat Chat SDK and the Calls SDK. + + + + + +**User who initiates the end call:** + + + +```javascript +onCallEndButtonPressed: () => { + CometChat.endCall(sessionId).then( + (call) => { + console.log("Call ended successfully"); + CometChat.clearActiveCall(); + CometChatCalls.endSession(); + }, + (error) => { + console.log("End call failed:", error); + } + ); +} +``` + + +```typescript +onCallEndButtonPressed: () => { + CometChat.endCall(sessionId).then( + (call: CometChat.Call) => { + console.log("Call ended successfully"); + CometChat.clearActiveCall(); + CometChatCalls.endSession(); + }, + (error: CometChat.CometChatException) => { + console.log("End call failed:", error); + } + ); +} +``` + + + +**Remote participant** (receives the `onCallEnded()` callback): + + + +```javascript +onCallEnded: () => { + CometChat.clearActiveCall(); + CometChatCalls.endSession(); +} +``` + + +```typescript +onCallEnded: () => { + CometChat.clearActiveCall(); + CometChatCalls.endSession(); +} +``` + + + +### Session Only Flow + +When using the Session Only flow (direct call without ringing), call `CometChatCalls.endSession()` in the `onCallEndButtonPressed()` callback. + + + +```javascript +onCallEndButtonPressed: () => { + CometChatCalls.endSession(); +} +``` + + +```typescript +onCallEndButtonPressed: () => { + CometChatCalls.endSession(); +} +``` + + + +## Methods + +These methods are available for performing custom actions during an active call session. + + +These methods can only be called when a call session is active. + + +### Switch Camera + +```javascript +CometChatCalls.switchCamera(); +``` + +### Mute Audio + +```javascript +CometChatCalls.muteAudio(true); // true to mute, false to unmute +``` + +### Pause Video + +```javascript +CometChatCalls.pauseVideo(true); // true to pause, false to resume +``` + +### Set Audio Mode + +```javascript +CometChatCalls.setAudioMode(CometChat.AUDIO_MODE.EARPIECE); +``` + +### Switch To Video Call + +```javascript +CometChatCalls.switchToVideoCall(); +``` + +### Get Audio Output Modes + +```javascript +CometChatCalls.getAudioOutputModes().then( + (modes) => { + console.log("Available audio modes:", modes); + }, + (error) => { + console.log("Failed to get audio modes:", error); + } +); +``` + +### End Call + +```javascript +CometChatCalls.endSession(); +``` + + + + - Generate call tokens just before use — they are session-specific and time-limited + - Always handle call end in both flows: Ringing requires both `CometChat.endCall()` and `CometChatCalls.endSession()` + - Clean up listeners on component unmount to prevent memory leaks + - Wrap the call component in a full-screen container with `height: '100%'`, `width: '100%'`, and `position: 'relative'` + - Use unique listener IDs per component instance + + + - **Call token generation fails:** Ensure the user is logged in and the auth token is valid + - **Call UI does not render:** Verify the `CometChatCalls.Component` is wrapped in a `View` with explicit dimensions + - **Listeners not firing:** Check that the listener is registered before the call session starts + - **onCallEnded not triggered in group calls:** The callback only fires for 1:1 calls (exactly 2 participants) + - **Audio or video not working:** Check device permissions for camera and microphone + + + +## Next Steps + + + + Implement a complete calling experience with incoming and outgoing call UI + + + Record call sessions for playback and compliance + + + Customize the main video container and participant tiles + + + Enable screen sharing and presenter layouts in calls + + diff --git a/calls/v4/react-native/expo-integration-guide.mdx b/calls/v4/react-native/expo-integration-guide.mdx new file mode 100644 index 000000000..9ff3f1fae --- /dev/null +++ b/calls/v4/react-native/expo-integration-guide.mdx @@ -0,0 +1,126 @@ +--- +title: "Expo Integration" +sidebarTitle: "Expo Integration" +sdk_version: "4.x" +description: "CometChat Calling SDK v4 - Stable Release - Expo Integration Guide for React Native" +--- + + +**Quick Reference** - Key Expo setup steps: + +```json +// Android: app.json → android block +"permissions": ["CAMERA", "RECORD_AUDIO", "INTERNET", "MODIFY_AUDIO_SETTINGS"], +"plugins": [["expo-build-properties", { "android": { "minSdkVersion": 24 } }]] + +// iOS: app.json → ios block +"infoPlist": { + "NSCameraUsageDescription": "This app uses the camera for video calls.", + "NSMicrophoneUsageDescription": "This app uses the microphone for audio/video calls." +} +``` + + +## Add the CometChatCalls Dependency + + + +To add CometChat Calls SDK, please refer to the steps mentioned [here](/calls/v4/react-native/setup#add-the-cometchatcalls-dependency). + + + +## Permissions + +Our React Native Calls SDK does not work with Expo GO since it requires some custom native modules. Also, expo does not recommend using Expo GO for building production grade apps. So in order to use our Calls SDK in an expo app you need to use [development builds](https://docs.expo.dev/develop/development-builds/introduction/). You can follow the official Expo [guide](https://docs.expo.dev/guides/local-app-development/) for more details. + + +Expo GO is not supported. You must use [development builds](https://docs.expo.dev/develop/development-builds/introduction/) to use the CometChat Calls SDK in an Expo app. + + +### Android + +You need to add the below `permissions` & `plugin` block inside `android` block of the `app.json` file. You need to install `expo-build-properties` package in your app. + + + +```json +"permissions": [ + "CAMERA", + "READ_EXTERNAL_STORAGE", + "WRITE_EXTERNAL_STORAGE", + "VIBRATE", + "INTERNET", + "MODIFY_AUDIO_SETTINGS", + "RECORD_AUDIO", + "ACCESS_NETWORK_STATE" +], +"plugins": [ + [ + "expo-build-properties", + { + "android": { + "minSdkVersion": 24, + "extraMavenRepos": ["https://dl.cloudsmith.io/public/cometchat/cometchat-pro-android/maven/"] + } + } + ] +] +``` + + + +### iOS + +You need to add the below `permissions` block inside `ios` block of the `app.json` file. + + + +```json +"infoPlist": { + "NSCameraUsageDescription": "This app uses the camera for video calls.", + "NSMicrophoneUsageDescription": "This app uses the microphonr for audio/video calls." +} +``` + + + +## Initialize CometChat Calls + + + +To initialize CometChat Calls SDK, please refer to the guide [here](/calls/v4/react-native/setup#initialize-cometchatcalls) + + + +## Troubleshooting + + + + Ensure you're using a development build, not Expo GO. Run `npx expo prebuild` followed by `npx expo run:android` or `npx expo run:ios` to create a development build with native modules. + + + Verify that `minSdkVersion` is set to at least `24` in the `expo-build-properties` plugin config. + + + Check that `NSCameraUsageDescription` and `NSMicrophoneUsageDescription` are set in the `infoPlist` block of your `app.json`. + + + +--- + +## Next Steps + + + + Complete Calls SDK installation and initialization guide + + + Start and manage call sessions after setup is complete + + + Implement incoming and outgoing call UI with ringing + + + Set up the core CometChat Chat SDK for React Native + + diff --git a/calls/v4/react-native/overview.mdx b/calls/v4/react-native/overview.mdx new file mode 100644 index 000000000..9decaeda7 --- /dev/null +++ b/calls/v4/react-native/overview.mdx @@ -0,0 +1,129 @@ +--- +title: "Calling SDK" +sidebarTitle: "Overview" +sdk_version: "4.x" +description: "CometChat Calling SDK v4 - Stable Release - Overview for React Native. This is the stable v4 documentation. Most users should use this version." +--- + + +🚀 **v5 Beta Available** — The Calling SDK v5 is now available in beta with significant improvements. [Check out the v5 docs →](/calls/react-native/overview) + + +## Overview + +CometChat provides voice and video calling capabilities for your React Native application. This guide helps you choose the right implementation approach based on your use case. + +## Prerequisites + +1. CometChat SDK installed and configured. See the [Setup](/sdk/react-native/setup-sdk) guide. +2. CometChat Calls SDK added to your project: + +```bash +npm install @cometchat/calls-sdk-react-native +``` + +For detailed setup instructions, see the [Calls SDK Setup](/calls/v4/react-native/setup) guide. + +## Choose Your Implementation + +CometChat offers three approaches to implement calling: + + + + Complete calling flow with incoming/outgoing call UI, accept/reject functionality, and call notifications. + + + Direct call session management. Use with Ringing flow or for custom call initiation logic. + + + Calls SDK only implementation without the Chat SDK dependency. + + + +### Ringing + +Use this when you need a complete calling experience with: +- Incoming and outgoing call UI +- Call accept/reject/cancel functionality +- Call notifications via push notifications +- Integration with CometChat messaging + +**Flow:** Initiate call → Receiver gets notified → Accept/Reject → Start session + +[Get started with Ringing →](/calls/v4/react-native/ringing) + +### Call Session + +Use this when you need to: +- Start a call session after the Ringing flow completes +- Implement custom call initiation logic with your own UI +- Join participants to a shared session using a session ID + +**Flow:** Generate token → Start session → Manage call → End session + +[Get started with Call Session →](/calls/v4/react-native/call-session) + +### Standalone Calling + +Use this when you want: +- Calling functionality without the Chat SDK +- Your own user authentication system +- Minimal SDK footprint + +**Flow:** Get auth token via REST API → Generate call token → Start session + +[Get started with Standalone Calling →](/calls/v4/react-native/standalone-calling) + +## Features + + + + Record audio and video calls for playback, compliance, or archival purposes. + + + Customize the video call UI layout, participant tiles, and visual appearance. + + + Enable screen sharing and presentation capabilities during calls. + + + Retrieve and display call history including duration, participants, and status. + + + Configure automatic call termination when participants are inactive. + + + + + + - Initialize `CometChatCalls` on app startup, right after `CometChat.init()` + - Use the Ringing flow for user-to-user calls where you need push notification support + - Use Call Session when building custom call UIs or conference-style experiences + - Always request camera and microphone permissions before initiating a call + - Handle call errors gracefully and provide user-friendly feedback + + + - **Calls not connecting:** Verify the Calls SDK is initialized after the Chat SDK and that both use the same App ID and Region + - **No audio/video:** Check that camera and microphone permissions are granted on both Android and iOS + - **Push notifications not arriving:** Ensure push notification setup is complete — see the [Push Notifications](/sdk/react-native/push-notification) guide + - **iOS build fails:** Run `pod install` in the `ios` directory after adding the Calls SDK dependency + - **Android minSdkVersion error:** Set `minSdkVersion` to 24 or higher in your `build.gradle` + + + +## Next Steps + + + + Install dependencies, configure permissions, and initialize the Calls SDK. + + + Implement the complete incoming/outgoing call experience. + + + Manage call sessions with custom initiation logic. + + + Retrieve and display call history for your users. + + diff --git a/calls/v4/react-native/presenter-mode.mdx b/calls/v4/react-native/presenter-mode.mdx new file mode 100644 index 000000000..52f4bf3ac --- /dev/null +++ b/calls/v4/react-native/presenter-mode.mdx @@ -0,0 +1,156 @@ +--- +title: "Presenter Mode" +sidebarTitle: "Presenter Mode" +sdk_version: "4.x" +description: "CometChat Calling SDK v4 - Stable Release - Presenter Mode for React Native" +--- + + +**Quick Reference** - Start a presentation session: + +```javascript +let presenterSettings = new CometChatCalls.PresenterSettingsBuilder() + .setIsPresenter(true) // false for viewer + .enableDefaultLayout(true) + .setCallEventListener(callListener) + .build(); + +// +``` + + + +**Available via:** SDK | UI Kits + + +## Overview + +The Presenter Mode feature allows developers to create a calling service experience in which: + +1. There are one or more users who are presenting their video, audio and/or screen (Maximum 5) +2. Viewers who are consumers of that presentation (they cannot send their audio, video or screen streams out) +3. The total number of presenters and viewers can go up to 100 +4. Features such as mute/unmute audio, show/hide camera capture, recording, etc. will be enabled only for the Presenter +5. Other call participants act like passive viewers in the call + +### About this guide + +This guide demonstrates how to start a presentation into a React Native application. Before you begin, we strongly recommend you read the [calling setup guide](/calls/v4/react-native/setup). + +Before starting a call session you have to [generate a call token](/calls/v4/react-native/call-session#generate-call-token). + +### Start Presentation Session + +The `PresentationSettings` class allows you to set the various parameters for the Presentation Mode. Use the `PresentationSettingsBuilder` class to configure it. + +Set the User Type with `setIsPresenter(true/false)` — there are 2 types: `Presenter` & `Participant`. + + + +```javascript +let presenterSettings = new CometChatCalls.PresenterSettingsBuilder() + .setIsPresenter(isPresenter) + .enableDefaultLayout(defaultLayout) + .setCallEventListener(callListener) + .build(); + +return ( + + + +); +``` + + + +## Listeners + +Listeners can be added in two ways: using `.setCallEventListener(listeners)` in `PresenterSettingsBuilder`, or using `CometChatCalls.addCallEventListener(name, callListener)`. + + + +```javascript +useEffect(() => { + CometChatCalls.addCallEventListener("UNIQUE_ID", { + onUserJoined: (user) => console.log("user joined:", user), + onUserLeft: (user) => console.log("user left:", user), + onUserListUpdated: (userList) => console.log("user list:", userList), + onCallEnded: () => console.log("Call ended"), + onCallEndButtonPressed: () => console.log("End Call button pressed"), + onError: (error) => console.log("Call Error: ", error), + onAudioModesUpdated: (audioModes) => console.log("audio modes:", audioModes), + onUserMuted: (event) => console.log("user muted:", event), + }); + return () => CometChatCalls.removeCallEventListener("UNIQUE_ID"); +}, []); +``` + + + + +Always remove call event listeners when the component unmounts using `CometChatCalls.removeCallEventListener(listenerId)`. + + +### Events + +| Callback Method | Description | +| ----------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------- | +| onCallEnded() | Called when the call is successfully ended. | +| onCallEndButtonPressed() | Called when the user presses the end call button. | +| onUserJoined(user: RTCUser) | Called when any other user joins the call. | +| onUserLeft(user: RTCUser) | Called when a user leaves the call. | +| onUserListUpdated(users: Array\) | Triggered every time a participant joins or leaves the call. | +| onAudioModesUpdated(devices: Array\) | Triggered if any new audio output source is available or becomes unavailable. | +| onUserMuted(muteObj: RTCMutedUser) | Triggered when a user is muted in the ongoing call. | +| onRecordingStarted(user: RTCUser) | Triggered when a recording starts. | +| onRecordingStopped(user: RTCUser) | Triggered when a recording stops. | +| onError(e: CometChatException) | Called when there is some error in establishing the call. | + +## Settings + +The `PresentationSettings` class customization options: + +| Parameter | Description | +| ------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `setIsPresenter(isPresenter: boolean)` | If `true` user joins as presenter. If `false` user joins as viewer. | +| `enableDefaultLayout(defaultLayout: boolean)` | Enables/disables the default layout. **Default: true** | +| `showEndCallButton(showEndCallButton: boolean)` | Shows/hides the EndCallButton. **Default: true** | +| `showMuteAudioButton(showMuteAudioButton: boolean)` | Shows/hides the MuteAudioButton. **Default: true** | +| `showSwitchCameraButton(showSwitchCameraButton: boolean)` | Shows/hides the SwitchCameraButton. **Default: true** | +| `showAudioModeButton(showAudioModeButton: boolean)` | Shows/hides the AudioModeButton. **Default: true** | +| `setIsAudioOnlyCall(audioOnly: boolean)` | If `true`, audio-only call. **Default: false** | +| `startWithAudioMuted(audioMuted: boolean)` | Starts with audio muted. **Default: false** | +| `startWithVideoMuted(videoMuted: boolean)` | Starts with video paused. **Default: false** | +| `setDefaultAudioMode(audioMode: string)` | Sets initial audio mode. Options: `SPEAKER`, `EARPIECE`, `BLUETOOTH`, `HEADPHONES` | + + + + - Always explicitly set `setIsPresenter(true)` for presenters and `setIsPresenter(false)` for viewers + - Limit presenters to 5 — enforce this in your logic before calling `setIsPresenter(true)` + - Clean up listeners on component unmount + - Generate call tokens just before use + + + - **Viewer can send audio/video:** Verify `setIsPresenter(false)` is set for viewer participants + - **Presentation UI does not render:** Ensure the component is wrapped in a `View` with `flex: 1` or explicit dimensions + - **Listeners not firing:** Check that the listener is registered before the session starts + - **Maximum participant limit reached:** Presenter Mode supports up to 100 total participants + + + +## Next Steps + + + + Start and manage standard call sessions with full configuration options + + + Record presentation sessions for playback and compliance + + + Customize the main video container and participant tiles + + + Install dependencies, configure permissions, and initialize the Calls SDK + + diff --git a/calls/v4/react-native/recording.mdx b/calls/v4/react-native/recording.mdx new file mode 100644 index 000000000..ba3529039 --- /dev/null +++ b/calls/v4/react-native/recording.mdx @@ -0,0 +1,154 @@ +--- +title: "Recording (Beta)" +sidebarTitle: "Recording" +sdk_version: "4.x" +description: "CometChat Calling SDK v4 - Stable Release - Recording for React Native" +--- + + +**Quick Reference** - Start and stop call recording: + +```javascript +// Start recording +CometChatCalls.startRecording(); + +// Stop recording +CometChatCalls.stopRecording(); + +// Or enable auto-recording via CallSettings +new CometChatCalls.CallSettingsBuilder() + .startRecordingOnCallStart(true) + .showRecordingButton(true) + .build(); +``` + + + +**Available via:** SDK | UI Kits + + +## Overview + +This section guides you through implementing call recording for voice and video calls. + +Once you have decided to implement [Ringing](/calls/v4/react-native/ringing) or [Call Session](/calls/v4/react-native/call-session) and followed the steps to implement them, a few additional listeners and methods will help you quickly implement call recording in your app. + +You need to make changes in the `CometChatCalls.OngoingCallListener` constructor and add the required listeners for recording. Please make sure your callSettings is configured accordingly for [Ringing](/calls/v4/react-native/ringing) or [Call Session](/calls/v4/react-native/call-session). + +A basic example of how to make changes to implement recording: + + + +```javascript +const callListener = new CometChatCalls.OngoingCallListener({ + onRecordingStarted: recordingStartedBy => { + console.log("Listener => onRecordingStarted:", recordingStartedBy); + }, + onRecordingStopped: recordingStoppedBy => { + console.log("Listener => onRecordingStopped:", recordingStoppedBy); + }, +}); + +const callSettings = new CometChatCalls.CallSettingsBuilder() + .enableDefaultLayout(true) + .setIsAudioOnlyCall(false) + .setCallEventListener(callListener) + .build(); + +return ( + + + +); +``` + + +```typescript +const callListener = new CometChatCalls.OngoingCallListener({ + onRecordingStarted: recordingStartedBy => { + console.log("Listener => onRecordingStarted:", recordingStartedBy); + }, + onRecordingStopped: recordingStoppedBy => { + console.log("Listener => onRecordingStopped:", recordingStoppedBy); + }, +}); + +const callSettings = new CometChatCalls.CallSettingsBuilder() + .enableDefaultLayout(true) + .setIsAudioOnlyCall(false) + .setCallEventListener(callListener) + .build(); + +return ( + + + +); +``` + + + +## Settings for Call Recording + +| Setting | Description | +| --------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| `showRecordingButton(showRecordingButton: boolean)` | If set to `true` it displays the Recording button in the button Layout. **Default value = false** | +| `startRecordingOnCallStart(startRecordingOnCallStart: boolean)` | If set to `true` call recording will start as soon as the call is started. **Default value = false** | + +### Start Recording + +```javascript +CometChatCalls.startRecording(); +``` + +### Stop Recording + +```javascript +CometChatCalls.stopRecording(); +``` + +## Downloading Recording + +Currently, the call recordings are available on the [CometChat Dashboard](https://app.cometchat.com) under the Calls Section. + + + + + + + + + + + + + + + + - The ongoing call component automatically displays a recording badge when recording starts + - Use auto-recording for compliance use cases with `startRecordingOnCallStart(true)` + - If using a custom layout, track recording state using `onRecordingStarted` and `onRecordingStopped` listeners + + + - **Recording button not visible:** Ensure `showRecordingButton(true)` is set and `enableDefaultLayout(true)` is enabled + - **onRecordingStarted / onRecordingStopped not firing:** These listeners require JS SDK v3.0.8 or later + - **Recording not found on Dashboard:** Recordings may take a few minutes to process after the call ends + + + +## Next Steps + + + + Start and manage call sessions with full configuration options + + + Implement a complete calling experience with incoming and outgoing call UI + + + Customize the main video container and participant tiles + + + Retrieve and display call history including duration and participants + + diff --git a/calls/v4/react-native/ringing.mdx b/calls/v4/react-native/ringing.mdx new file mode 100644 index 000000000..814271dc6 --- /dev/null +++ b/calls/v4/react-native/ringing.mdx @@ -0,0 +1,546 @@ +--- +title: "Ringing" +sidebarTitle: "Ringing" +sdk_version: "4.x" +description: "CometChat Calling SDK v4 - Stable Release - Ringing for React Native" +--- + + +**Quick Reference** - Initiate a call and listen for events: + +```javascript +// Initiate a video call (default 45s no-answer timeout) +const call = new CometChat.Call("RECEIVER_ID", CometChat.CALL_TYPE.VIDEO, CometChat.RECEIVER_TYPE.USER); +await CometChat.initiateCall(call); + +// Initiate with custom timeout (60 seconds) +await CometChat.initiateCall(call, 60); + +// Accept an incoming call +await CometChat.acceptCall(sessionId); + +// Reject or cancel +await CometChat.rejectCall(sessionId, CometChat.CALL_STATUS.REJECTED); +``` + + + +Available via: [SDK](/calls/v4/react-native/ringing) | [REST API](/rest-api/calls) | [UI Kits](/ui-kit/react-native/call-features) + + +## Overview + +This section explains how to implement a complete calling workflow with ringing functionality, including incoming/outgoing call UI, call acceptance, rejection, and cancellation. Previously known as **Default Calling**. + + +After the call is accepted, you need to start the call session. See the [Call Session](/calls/v4/react-native/call-session#start-call-session) guide for details on starting and managing the actual call. + + +**Call Flow:** + +1. **Caller** initiates a call using `initiateCall()` +2. **Receiver** gets notified via `onIncomingCallReceived()` callback +3. **Receiver** can either: + - Accept the call using `acceptCall()` + - Reject the call using `rejectCall()` with status `CALL_STATUS_REJECTED` +4. **Caller** can cancel the call using `rejectCall()` with status `CALL_STATUS_CANCELLED` +5. Once accepted, both participants generate a call token and render the `CometChatCalls.Component` to join the call + +## Initiate Call + +The `initiateCall()` method sends a call request to a user or a group. On success, the receiver gets an `onIncomingCallReceived()` callback. + + + +```javascript +const receiverID = "UID"; +const callType = CometChat.CALL_TYPE.VIDEO; +const receiverType = CometChat.RECEIVER_TYPE.USER; + +const call = new CometChat.Call(receiverID, callType, receiverType); + +CometChat.initiateCall(call).then( + (outgoingCall) => { + console.log("Call initiated:", outgoingCall); + // Show outgoing call UI + // Store outgoingCall.getSessionId() for later use + }, + (error) => { + console.log("Call initiation failed:", error); + } +); +``` + + +```javascript +const receiverID = "GUID"; +const callType = CometChat.CALL_TYPE.VIDEO; +const receiverType = CometChat.RECEIVER_TYPE.GROUP; + +const call = new CometChat.Call(receiverID, callType, receiverType); + +CometChat.initiateCall(call).then( + (outgoingCall) => { + console.log("Call initiated:", outgoingCall); + // Show outgoing call UI + }, + (error) => { + console.log("Call initiation failed:", error); + } +); +``` + + +```typescript +const receiverID: string = "UID"; +const callType: string = CometChat.CALL_TYPE.VIDEO; +const receiverType: string = CometChat.RECEIVER_TYPE.USER; + +const call: CometChat.Call = new CometChat.Call(receiverID, callType, receiverType); + +CometChat.initiateCall(call).then( + (outgoingCall: CometChat.Call) => { + console.log("Call initiated:", outgoingCall); + }, + (error: CometChat.CometChatException) => { + console.log("Call initiation failed:", error); + } +); +``` + + +```typescript +const receiverID: string = "GUID"; +const callType: string = CometChat.CALL_TYPE.VIDEO; +const receiverType: string = CometChat.RECEIVER_TYPE.GROUP; + +const call: CometChat.Call = new CometChat.Call(receiverID, callType, receiverType); + +CometChat.initiateCall(call).then( + (outgoingCall: CometChat.Call) => { + console.log("Call initiated:", outgoingCall); + }, + (error: CometChat.CometChatException) => { + console.log("Call initiation failed:", error); + } +); +``` + + + +| Parameter | Description | +| -------------- | --------------------------------------------------------------------------- | +| `receiverID` | The UID or GUID of the recipient | +| `receiverType` | `CometChat.RECEIVER_TYPE.USER` or `CometChat.RECEIVER_TYPE.GROUP` | +| `callType` | `CometChat.CALL_TYPE.AUDIO` or `CometChat.CALL_TYPE.VIDEO` | + +On success, a `Call` object is returned containing the call details including a unique `sessionId` required for starting the call session. + +By default, an unanswered call automatically cancels after 45 seconds. You can customize this duration by passing an optional `timeout` parameter (in seconds) as the second argument to `initiateCall()`. + + + +```javascript +const receiverID = "UID"; +const callType = CometChat.CALL_TYPE.VIDEO; +const receiverType = CometChat.RECEIVER_TYPE.USER; + +const call = new CometChat.Call(receiverID, callType, receiverType); + +// Set a custom timeout of 60 seconds +CometChat.initiateCall(call, 60).then( + (outgoingCall) => { + console.log("Call initiated with 60s timeout:", outgoingCall); + }, + (error) => { + console.log("Call initiation failed:", error); + } +); +``` + + +```javascript +const receiverID = "GUID"; +const callType = CometChat.CALL_TYPE.VIDEO; +const receiverType = CometChat.RECEIVER_TYPE.GROUP; + +const call = new CometChat.Call(receiverID, callType, receiverType); + +// Set a custom timeout of 60 seconds +CometChat.initiateCall(call, 60).then( + (outgoingCall) => { + console.log("Call initiated with 60s timeout:", outgoingCall); + }, + (error) => { + console.log("Call initiation failed:", error); + } +); +``` + + +```typescript +const receiverID: string = "UID"; +const callType: string = CometChat.CALL_TYPE.VIDEO; +const receiverType: string = CometChat.RECEIVER_TYPE.USER; + +const call: CometChat.Call = new CometChat.Call(receiverID, callType, receiverType); + +// Set a custom timeout of 60 seconds +CometChat.initiateCall(call, 60).then( + (outgoingCall: CometChat.Call) => { + console.log("Call initiated with 60s timeout:", outgoingCall); + }, + (error: CometChat.CometChatException) => { + console.log("Call initiation failed:", error); + } +); +``` + + +```typescript +const receiverID: string = "GUID"; +const callType: string = CometChat.CALL_TYPE.VIDEO; +const receiverType: string = CometChat.RECEIVER_TYPE.GROUP; + +const call: CometChat.Call = new CometChat.Call(receiverID, callType, receiverType); + +// Set a custom timeout of 60 seconds +CometChat.initiateCall(call, 60).then( + (outgoingCall: CometChat.Call) => { + console.log("Call initiated with 60s timeout:", outgoingCall); + }, + (error: CometChat.CometChatException) => { + console.log("Call initiation failed:", error); + } +); +``` + + + +| Parameter | Type | Description | +| ---------- | -------- | --------------------------------------------------------------------------------------------------------------- | +| `call` | `Call` | The call object created with receiver ID, call type, and receiver type. | +| `timeout` | `number` | Optional. The ringing duration in seconds before an unanswered call is automatically cancelled. Default: `45`. | + +## Call Listeners + +Register the `CallListener` to receive real-time call events. Each listener requires a unique `listenerId` string to prevent duplicate registrations and enable targeted removal. + + + +```javascript +const listenerId = "UNIQUE_LISTENER_ID"; + +CometChat.addCallListener( + listenerId, + new CometChat.CallListener({ + onIncomingCallReceived: (call) => { + console.log("Incoming call:", call); + }, + onOutgoingCallAccepted: (call) => { + console.log("Outgoing call accepted:", call); + }, + onOutgoingCallRejected: (call) => { + console.log("Outgoing call rejected:", call); + }, + onIncomingCallCancelled: (call) => { + console.log("Incoming call cancelled:", call); + }, + onCallEndedMessageReceived: (call) => { + console.log("Call ended message:", call); + } + }) +); + +CometChat.removeCallListener(listenerId); +``` + + +```typescript +const listenerId: string = "UNIQUE_LISTENER_ID"; + +CometChat.addCallListener( + listenerId, + new CometChat.CallListener({ + onIncomingCallReceived: (call: CometChat.Call) => { + console.log("Incoming call:", call); + }, + onOutgoingCallAccepted: (call: CometChat.Call) => { + console.log("Outgoing call accepted:", call); + }, + onOutgoingCallRejected: (call: CometChat.Call) => { + console.log("Outgoing call rejected:", call); + }, + onIncomingCallCancelled: (call: CometChat.Call) => { + console.log("Incoming call cancelled:", call); + }, + onCallEndedMessageReceived: (call: CometChat.Call) => { + console.log("Call ended message:", call); + } + }) +); + +CometChat.removeCallListener(listenerId); +``` + + + + +Always remove call listeners when the component unmounts using `CometChat.removeCallListener(listenerId)`. Failing to do so can cause memory leaks and duplicate event handling. + + +### Events + +| Event | Description | +| ----- | ----------- | +| `onIncomingCallReceived(call)` | Invoked when an incoming call is received. Display incoming call UI here. | +| `onOutgoingCallAccepted(call)` | Invoked on the caller's device when the receiver accepts. Generate call token and start the session here. | +| `onOutgoingCallRejected(call)` | Invoked on the caller's device when the receiver rejects the call. Dismiss outgoing call UI here. | +| `onIncomingCallCancelled(call)` | Invoked on the receiver's device when the caller cancels before answering. Dismiss incoming call UI here. | +| `onCallEndedMessageReceived(call)` | Invoked when a call ends. Update call history here. | + +## Accept Call + +When an incoming call is received via `onIncomingCallReceived()`, use `acceptCall()` to accept it. On success, start the call session. + + + +```javascript +const sessionId = call.getSessionId(); + +CometChat.acceptCall(sessionId).then( + (call) => { + console.log("Call accepted:", call); + // Call accepted, now start the call session + }, + (error) => { + console.log("Accept call failed:", error); + } +); +``` + + +```typescript +const sessionId: string = call.getSessionId(); + +CometChat.acceptCall(sessionId).then( + (call: CometChat.Call) => { + console.log("Call accepted:", call); + }, + (error: CometChat.CometChatException) => { + console.log("Accept call failed:", error); + } +); +``` + + + +## Reject Call + +Use `rejectCall()` to reject an incoming call. Set the status to `CALL_STATUS_REJECTED`. + + + +```javascript +const sessionId = call.getSessionId(); +const status = CometChat.CALL_STATUS.REJECTED; + +CometChat.rejectCall(sessionId, status).then( + (call) => { + console.log("Call rejected:", call); + }, + (error) => { + console.log("Reject call failed:", error); + } +); +``` + + +```typescript +const sessionId: string = call.getSessionId(); +const status: string = CometChat.CALL_STATUS.REJECTED; + +CometChat.rejectCall(sessionId, status).then( + (call: CometChat.Call) => { + console.log("Call rejected:", call); + }, + (error: CometChat.CometChatException) => { + console.log("Reject call failed:", error); + } +); +``` + + + +## Cancel Call + +The caller can cancel an outgoing call before it's answered using `rejectCall()` with status `CALL_STATUS_CANCELLED`. + + + +```javascript +const sessionId = call.getSessionId(); +const status = CometChat.CALL_STATUS.CANCELLED; + +CometChat.rejectCall(sessionId, status).then( + (call) => { + console.log("Call cancelled:", call); + }, + (error) => { + console.log("Cancel call failed:", error); + } +); +``` + + +```typescript +const sessionId: string = call.getSessionId(); +const status: string = CometChat.CALL_STATUS.CANCELLED; + +CometChat.rejectCall(sessionId, status).then( + (call: CometChat.Call) => { + console.log("Call cancelled:", call); + }, + (error: CometChat.CometChatException) => { + console.log("Cancel call failed:", error); + } +); +``` + + + +## Start Call Session + +Once the call is accepted, both participants need to start the call session. See the [Call Session](/calls/v4/react-native/call-session#start-call-session) guide for full details. + +## End Call + +To end an active call in the ringing flow, call `CometChat.endCall()` in the `onCallEndButtonPressed()` callback, then call `CometChat.clearActiveCall()` and `CometChatCalls.endSession()`. + + + +```javascript +onCallEndButtonPressed: () => { + CometChat.endCall(sessionId).then( + (call) => { + console.log("Call ended successfully"); + CometChat.clearActiveCall(); + CometChatCalls.endSession(); + }, + (error) => { + console.log("End call failed:", error); + } + ); +} +``` + + +```typescript +onCallEndButtonPressed: () => { + CometChat.endCall(sessionId).then( + (call: CometChat.Call) => { + console.log("Call ended successfully"); + CometChat.clearActiveCall(); + CometChatCalls.endSession(); + }, + (error: CometChat.CometChatException) => { + console.log("End call failed:", error); + } + ); +} +``` + + + +**Remote participant** (receives `onCallEnded()` callback): + + + +```javascript +onCallEnded: () => { + CometChat.clearActiveCall(); + CometChatCalls.endSession(); +} +``` + + +```typescript +onCallEnded: () => { + CometChat.clearActiveCall(); + CometChatCalls.endSession(); +} +``` + + + +For more details, see the [End Call Session](/calls/v4/react-native/call-session#end-call-session) guide. + +## Busy Call Handling + +If the receiver is already on another call, you can reject the incoming call with `CALL_STATUS_BUSY` status. + + + +```javascript +const sessionId = call.getSessionId(); +const status = CometChat.CALL_STATUS.BUSY; + +CometChat.rejectCall(sessionId, status).then( + (call) => { + console.log("Busy status sent:", call); + }, + (error) => { + console.log("Busy rejection failed:", error); + } +); +``` + + +```typescript +const sessionId: string = call.getSessionId(); +const status: string = CometChat.CALL_STATUS.BUSY; + +CometChat.rejectCall(sessionId, status).then( + (call: CometChat.Call) => { + console.log("Busy status sent:", call); + }, + (error: CometChat.CometChatException) => { + console.log("Busy rejection failed:", error); + } +); +``` + + + + + + - Always remove call listeners on component unmount to prevent memory leaks and duplicate events + - Store the `sessionId` from `initiateCall()` or `onIncomingCallReceived()` — you'll need it for accept, reject, cancel, and starting the session + - Handle the `CALL_STATUS_BUSY` case when the receiver is already on another call + - Call `CometChat.clearActiveCall()` and `CometChatCalls.endSession()` together when a call ends to properly release all resources + - Request camera and microphone permissions before initiating or accepting a call + + + - **`onIncomingCallReceived` not firing:** Ensure `CometChat.addCallListener()` is registered before the call is initiated and that the listener ID is unique + - **Call accepted but no audio/video:** After `acceptCall()`, you must start the call session by generating a token and rendering `CometChatCalls.Component` — see the [Call Session](/calls/v4/react-native/call-session) guide + - **Duplicate call events:** You may have registered the same listener multiple times — always call `CometChat.removeCallListener(listenerId)` on unmount + - **`initiateCall` fails with error:** Verify the receiver UID/GUID exists and that the logged-in user has an active session + + + +## Next Steps + + + + Start and manage the actual call session after the ringing flow completes. + + + Install dependencies, configure permissions, and initialize the Calls SDK. + + + Record audio and video calls for playback or compliance. + + + Retrieve and display call history including duration and participants. + + diff --git a/calls/v4/react-native/session-timeout.mdx b/calls/v4/react-native/session-timeout.mdx new file mode 100644 index 000000000..12658f378 --- /dev/null +++ b/calls/v4/react-native/session-timeout.mdx @@ -0,0 +1,52 @@ +--- +title: "Session Timeout Flow" +sidebarTitle: "Session Timeout" +sdk_version: "4.x" +description: "CometChat Calling SDK v4 - Stable Release - Session Timeout for React Native" +--- + +Available since v4.2.0 + +## Overview + +CometChat Calls SDK provides a mechanism to handle session timeouts for idle participants. By default, if a participant is alone in a call session for 180 seconds (3 minutes), the following sequence is triggered: + +1. After 120 seconds of being alone in the session, the participant will see a dialog box + +2. This dialog provides options to either: + + * Stay in the call + * Leave immediately + +3. If no action is taken within the next 60 seconds, the call will automatically end + +This feature helps manage inactive call sessions and prevents unnecessary resource usage. + + +You can customize the idle timeout period using `setIdleTimeoutPeriod(seconds)` in the `CallSettingsBuilder`. See the [Call Session settings](/calls/v4/react-native/call-session#call-settings) for details. + + +### Session Timeout Flow + + + + + + + +The `onSessionTimeout` event is triggered when the call automatically terminates due to session timeout, as illustrated in the diagram above. + + + +--- + +## Next Steps + + + + Start and manage call sessions with full configuration options + + + Implement a complete calling experience with incoming and outgoing call UI + + diff --git a/calls/v4/react-native/setup.mdx b/calls/v4/react-native/setup.mdx new file mode 100644 index 000000000..6a6b7e07f --- /dev/null +++ b/calls/v4/react-native/setup.mdx @@ -0,0 +1,251 @@ +--- +title: "Setup" +sidebarTitle: "Setup" +sdk_version: "4.x" +description: "CometChat Calling SDK v4 - Stable Release - Setup for React Native" +--- + + +**Quick Reference** - Install and initialize the Calls SDK: + +```javascript +npm install @cometchat/calls-sdk-react-native + +// Initialize on app startup +import { CometChatCalls } from "@cometchat/calls-sdk-react-native"; +const callAppSettings = new CometChatCalls.CallAppSettingsBuilder() + .setAppId("APP_ID") + .setRegion("REGION") + .build(); +await CometChatCalls.init(callAppSettings); +``` + + +## Get your Application Keys + +[Signup for CometChat](https://app.cometchat.com) and then: + +1. Create a new app +2. Head over to the **API & Auth Keys** section and note the **Auth Key**, **App ID** & **Region** + +## Add the CometChatCalls Dependency + +Install the package as NPM module: + + + +```bash +npm install @cometchat/calls-sdk-react-native +``` + + + + +```bash +yarn add @cometchat/calls-sdk-react-native +``` + + + + + +The CometChat Calls SDK also requires the below dependencies to be installed. + + + +```json +{ + "@cometchat/chat-sdk-react-native": "^4.0.18", + "@react-native-async-storage/async-storage": "^1.23.1", + "@react-native-community/netinfo": "^11.3.1", // for react-native 0.63 & above. + "@react-native-community/netinfo": "6.1.0", // for react-native below 0.63 + "react-native-background-timer": "^2.4.1", + "react-native-callstats": "^3.73.7", + "react-native-webrtc": "^1.106.1" +} +``` + + + + + +## Permissions + + + +If you're using Expo, please refer to the [Expo Integration Guide](/calls/v4/react-native/expo-integration-guide) for setting up permissions. + + + +### Android + +You need to add the below in your App's `AndroidManifest.xml` file. + + + +```xml + + + + + +``` + + + + + +Also in the same file in `buildscript` section in `ext` block make sure you have set **minSdkVersion** to **24.** + + + +```gradle +buildscript { + ext { + buildToolsVersion = "29.0.2" + minSdkVersion = 24 + compileSdkVersion = 29 + targetSdkVersion = 29 + } +} +``` + + + + + +### iOS + +You need to add the below in your App's `Info.plist` file. + + + +```xml +NSCameraUsageDescription +This is for Camera permission +NSMicrophoneUsageDescription +This is for Mic permission +``` + + + + + +Also, update the minimum target version in the Podfile. Goto `./ios` folder and open the `Podfile`. In the Podfile update the platform version to `12.0.` + + + +``` +platform :ios, '12.0' +``` + + + + + +Open the `ios/App` folder and run `pod install` this will create an `App.xcworkspace` open this and run the app. + +## Initialize CometChatCalls + +The init() method initialises the settings required for CometChatCalls. The init() method takes a single paramater, that is the instance of CallAppSettingsBuilder class. + +The `CallAppSettings` class allows you to configure three settings: + +* **App ID**: CometChat app ID. +* **Region**: The region where you app was created. +* **Host(host: string)**: This method takes the client URL as input and uses this client URL instead of the default client URL. This can be used in case of dedicated deployment of CometChat. + +You need to call `init()` before calling any other method from CometChatCalls. We suggest you call the `init()` method on app startup, preferably in the `App.tsx` file. + + + +```javascript +import { CometChatCalls } from "@cometchat/calls-sdk-react-native"; + +let appID = "APP_ID"; +let region = "REGION"; + +const callAppSettings = new CometChatCalls.CallAppSettingsBuilder() + .setAppId(appID) + .setRegion(region) + .build(); + +CometChatCalls.init(callAppSettings).then( + () => { + console.log("CometChatCalls initialization completed successfully"); + }, + (error) => { + console.log("CometChatCalls initialization failed with error:", error); + } +); +``` + + + + +```typescript +import { CometChatCalls } from "@cometchat/calls-sdk-react-native"; + +let appID = "APP_ID"; +let region = "REGION"; + +const callAppSetting = new CometChatCalls.CallAppSettingsBuilder() + .setAppId(appID) + .setRegion(region) + .build(); + +CometChatCalls.init(callAppSetting).then( + () => { + console.log("CometChatCalls initialization completed successfully"); + }, + (error) => { + console.log("CometChatCalls initialization failed with error:", error); + } +); +``` + + + + + + +Make sure you replace the `APP_ID` with your CometChat `AppID` and `REGION` with your **App Region** in the above code. + + +| Parameter | Description | +| ----------------- | ---------------------------------------- | +| `callAppSettings` | An object of the `CallAppSettings` class | + + + + - Initialize `CometChatCalls` right after `CometChat.init()` on app startup + - Always call `CometChatCalls.init()` before using any calling methods + - Request camera and microphone permissions at runtime before initiating calls + - Use the correct `netinfo` version based on your React Native version (0.63+ vs below) + - Run `pod install` after adding dependencies to ensure iOS native modules are linked + + + - **Initialization fails:** Verify your App ID and Region match the values in your CometChat Dashboard + - **Android build fails:** Ensure `minSdkVersion` is set to 24 or higher in `build.gradle` + - **iOS build fails:** Run `pod install` in the `ios` directory and open the `.xcworkspace` file (not `.xcodeproj`) + - **Permission denied errors:** Confirm camera and microphone permissions are declared in `AndroidManifest.xml` and `Info.plist` + - **Module not found:** Make sure all required peer dependencies are installed — check the dependency list above + + + +## Next Steps + + + + Choose the right calling implementation for your use case. + + + Implement the complete incoming/outgoing call experience. + + + Manage call sessions with custom initiation logic. + + + Record audio and video calls for playback or compliance. + + diff --git a/calls/v4/react-native/standalone-calling.mdx b/calls/v4/react-native/standalone-calling.mdx new file mode 100644 index 000000000..90070d7b1 --- /dev/null +++ b/calls/v4/react-native/standalone-calling.mdx @@ -0,0 +1,234 @@ +--- +title: "Standalone Calling" +sidebarTitle: "Standalone Calling" +sdk_version: "4.x" +description: "CometChat Calling SDK v4 - Stable Release - Standalone Calling for React Native" +--- + + +**Quick Reference** - Generate token and start a standalone call session: + +```javascript +// Generate call token (auth token from REST API, not Chat SDK) +const callToken = await CometChatCalls.generateToken(sessionId, userAuthToken); + +// Configure and render +const callSettings = new CometChatCalls.CallSettingsBuilder() + .enableDefaultLayout(true) + .setIsAudioOnlyCall(false) + .build(); + +// +``` + + + +**Available via:** SDK | UI Kits + + +## Overview + +This section demonstrates how to implement calling functionality using only the CometChat Calls SDK, without requiring the Chat SDK. This is ideal for applications that need video/audio calling capabilities without the full chat infrastructure. + + +Before you begin, ensure you have completed the [Calls SDK setup](/calls/v4/react-native/setup). + + +## User Authentication + +To start a call session, you need a user auth token. Since this implementation doesn't use the Chat SDK, you'll need to obtain the auth token via the CometChat REST API. + + +To understand user authentication in CometChat, see the [User Auth](/fundamentals/user-auth) documentation. + + +You can obtain the auth token using one of these REST API endpoints: + +- [Create Auth Token](/rest-api/auth-tokens/create) — Creates a new auth token for a user +- [Get Auth Token](/rest-api/auth-tokens/get) — Retrieves an existing auth token + + +Auth tokens grant access to call sessions on behalf of a user. Never expose auth tokens in client-side code in production. Use a secure backend to generate and deliver tokens to your app. + + +## Generate Call Token + +Use the `generateToken()` method to create a call token: + + + +```javascript +const sessionId = "UNIQUE_SESSION_ID"; +const userAuthToken = "USER_AUTH_TOKEN"; + +CometChatCalls.generateToken(sessionId, userAuthToken).then( + (callToken) => { + console.log("Call token generated:", callToken.token); + }, + (error) => { + console.log("Token generation failed:", error); + } +); +``` + + +```typescript +const sessionId: string = "UNIQUE_SESSION_ID"; +const userAuthToken: string = "USER_AUTH_TOKEN"; + +CometChatCalls.generateToken(sessionId, userAuthToken).then( + (callToken: GenerateToken) => { + console.log("Call token generated:", callToken.token); + }, + (error: CometChat.CometChatException) => { + console.log("Token generation failed:", error); + } +); +``` + + + +| Parameter | Description | +| --------------- | -------------------------------------------------------------------------- | +| `sessionId` | A unique session ID for the call. Share this ID for participants to join the same call. | +| `userAuthToken` | The user auth token obtained from the CometChat REST API. | + +## Start Call Session + +Use the `CometChatCalls.Component` to render the call UI. + + + +```javascript +const callListener = new CometChatCalls.OngoingCallListener({ + onUserJoined: (user) => console.log("User joined:", user), + onUserLeft: (user) => console.log("User left:", user), + onUserListUpdated: (userList) => console.log("User list updated:", userList), + onCallEnded: () => { + CometChatCalls.endSession(); + }, + onCallEndButtonPressed: () => { + CometChatCalls.endSession(); + }, + onError: (error) => console.log("Call error:", error), + onAudioModesUpdated: (audioModes) => console.log("Audio modes updated:", audioModes), + onSessionTimeout: () => console.log("Session timed out") +}); + +const callSettings = new CometChatCalls.CallSettingsBuilder() + .enableDefaultLayout(true) + .setIsAudioOnlyCall(false) + .setCallEventListener(callListener) + .build(); + +return ( + + + +); +``` + + +```typescript +const callListener = new CometChatCalls.OngoingCallListener({ + onUserJoined: (user: CometChat.User) => console.log("User joined:", user), + onUserLeft: (user: CometChat.User) => console.log("User left:", user), + onUserListUpdated: (userList: CometChat.User[]) => console.log("User list updated:", userList), + onCallEnded: () => { + CometChatCalls.endSession(); + }, + onCallEndButtonPressed: () => { + CometChatCalls.endSession(); + }, + onError: (error: CometChat.CometChatException) => console.log("Call error:", error), + onAudioModesUpdated: (audioModes: string[]) => console.log("Audio modes updated:", audioModes), + onSessionTimeout: () => console.log("Session timed out") +}); + +const callSettings = new CometChatCalls.CallSettingsBuilder() + .enableDefaultLayout(true) + .setIsAudioOnlyCall(false) + .setCallEventListener(callListener) + .build(); + +return ( + + + +); +``` + + + +## End Call Session + +To end the call session, call `CometChatCalls.endSession()` in the `onCallEndButtonPressed()` callback. + +```javascript +CometChatCalls.endSession(); +``` + +## Methods + +### Switch Camera + +```javascript +CometChatCalls.switchCamera(); +``` + +### Mute Audio + +```javascript +CometChatCalls.muteAudio(true); // true to mute, false to unmute +``` + +### Pause Video + +```javascript +CometChatCalls.pauseVideo(true); // true to pause, false to resume +``` + +### Set Audio Mode + +```javascript +CometChatCalls.setAudioMode(CometChat.AUDIO_MODE.EARPIECE); +``` + +### Switch To Video Call + +```javascript +CometChatCalls.switchToVideoCall(); +``` + + + + - Generate call tokens just before use — they are session-specific and time-limited + - Use a shared session ID for participants to join the same call + - Secure your auth tokens — generate them server-side and deliver securely to the client + - Clean up listeners on component unmount + - Wrap the call component in a full-screen container + + + - **Call token generation fails:** Verify the auth token is valid and hasn't expired + - **Call UI does not render:** Ensure the component is wrapped in a `View` with explicit dimensions + - **Participants can't join the same call:** Both participants must use the exact same `sessionId` + - **Audio or video not working:** Check device permissions for camera and microphone + + + +## Next Steps + + + + Install dependencies, configure permissions, and initialize the Calls SDK + + + Record call sessions for playback and compliance + + + Customize the main video container and participant tiles + + + Full call session management with the Chat SDK integration + + diff --git a/calls/v4/react-native/video-view-customisation.mdx b/calls/v4/react-native/video-view-customisation.mdx new file mode 100644 index 000000000..17a072dcc --- /dev/null +++ b/calls/v4/react-native/video-view-customisation.mdx @@ -0,0 +1,84 @@ +--- +title: "Video View Customisation" +sidebarTitle: "Video View Customisation" +sdk_version: "4.x" +description: "CometChat Calling SDK v4 - Stable Release - Video View Customisation for React Native" +--- + + +**Quick Reference** - Customize the main video container: + +```javascript +let videoSettings = new CometChat.MainVideoContainerSetting(); +videoSettings.setMainVideoAspectRatio(CometChatCalls.CallSettings.ASPECT_RATIO_CONTAIN); +videoSettings.setFullScreenButtonParams(CometChatCalls.CallSettings.POSITION_BOTTOM_RIGHT, true); +videoSettings.setNameLabelParams(CometChatCalls.CallSettings.POSITION_BOTTOM_LEFT, true, "#333333"); + +new CometChatCalls.CallSettingsBuilder() + .setMainVideoContainerSetting(videoSettings) + .build(); +``` + + +## Overview + +This section guides you through customizing the main video container in your call UI. + +Once you have decided to implement [Ringing](/calls/v4/react-native/ringing) or [Call Session](/calls/v4/react-native/call-session) calling and followed the steps to implement them, a few additional methods will help you quickly customize the main video container. + +Please make sure your callSettings is configured accordingly for [Ringing](/calls/v4/react-native/ringing) or [Call Session](/calls/v4/react-native/call-session). + +## Main Video Container Setting + +The `MainVideoContainerSetting` class is required when you want to customise the main video view. You need to pass the object of the `MainVideoContainerSetting` class in the `setMainVideoContainerSetting()` method of the `CallSettingsBuilder`. + +| Setting | Description | +| ------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `setMainVideoAspectRatio(aspectRatio: string)` | Sets the aspect ratio of main video. Default: **contain.** Possible Values: `ASPECT_RATIO_CONTAIN`, `ASPECT_RATIO_COVER` | +| `setFullScreenButtonParams(position: string, visibility: boolean)` | Sets the position & visibility of the full screen button. Default: visible in **bottom-right** position. | +| `setNameLabelParams(position: string, visibility: boolean, backgroundColor: string)` | Sets the position, visibility & background color of the name label. Default: visible in **bottom-left** with background-color **#333333** | +| `setZoomButtonParams(position: string, visibility: boolean)` | Sets the position, visibility of the zoom button. Default: visible in **bottom-right** position. | +| `setUserListButtonParams(position: string, visibility: boolean)` | Sets the position, visibility of the user list button. Default: visible in **bottom-right** position. | + +**Position values:** `POSITION_TOP_LEFT`, `POSITION_TOP_RIGHT`, `POSITION_BOTTOM_LEFT`, `POSITION_BOTTOM_RIGHT` + +Example: + +```javascript +let videoSettings = new CometChat.MainVideoContainerSetting(); + +videoSettings.setMainVideoAspectRatio(CometChatCalls.CallSettings.ASPECT_RATIO_CONTAIN); +videoSettings.setFullScreenButtonParams(CometChatCalls.CallSettings.POSITION_BOTTOM_RIGHT, true); +videoSettings.setNameLabelParams(CometChatCalls.CallSettings.POSITION_BOTTOM_LEFT, true, "#333333"); +videoSettings.setZoomButtonParams(CometChatCalls.CallSettings.POSITION_BOTTOM_RIGHT, true); +videoSettings.setUserListButtonParams(CometChatCalls.CallSettings.POSITION_BOTTOM_RIGHT, true); +``` + + + + - Avoid placing multiple buttons in the same corner position to prevent overlapping controls + - Use `ASPECT_RATIO_CONTAIN` for most use cases to ensure the full video frame is visible + - Test on multiple screen sizes to ensure consistent experience + + + - **Custom settings not applied:** Ensure you pass the `MainVideoContainerSetting` object to `setMainVideoContainerSetting()` before calling `.build()` + - **Buttons not visible:** Check that the `visibility` parameter is set to `true` and `enableDefaultLayout(true)` is set + + + +## Next Steps + + + + Start and manage call sessions with full configuration options + + + Record call sessions for playback and compliance + + + Enable screen sharing and presenter layouts in calls + + + Implement a complete calling experience with incoming and outgoing call UI + + diff --git a/docs.json b/docs.json index 65660d5cd..ee33b651b 100644 --- a/docs.json +++ b/docs.json @@ -5294,13 +5294,58 @@ }, { "tab": "SDK", - "tab-id": "calls-sdk", "dropdowns": [ { "dropdown": "JavaScript", "icon": "/images/icons/js.svg", - "pages": [ + "versions": [ { + "version": "v4‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎", + "groups": [ + { + "group": " ", + "pages": [ + "calls/v4/javascript/overview", + { + "group": "Getting Started", + "pages": ["calls/v4/javascript/setup"] + }, + { + "group": "Calling Flows", + "pages": [ + "calls/v4/javascript/ringing", + "calls/v4/javascript/call-session", + "calls/v4/javascript/standalone-calling" + ] + }, + { + "group": "Features", + "pages": [ + "calls/v4/javascript/recording", + "calls/v4/javascript/call-logs", + "calls/v4/javascript/session-timeout" + ] + }, + { + "group": "Customisation", + "pages": [ + "calls/v4/javascript/video-view-customisation", + "calls/v4/javascript/presenter-mode", + "calls/v4/javascript/virtual-background", + "calls/v4/javascript/custom-css" + ] + } + ] + } + ] + }, + { + "version": "v5‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎", + "groups": [ + { + "group": " ", + "pages": [ + { "group": "Overview", "pages": [ "calls/javascript/overview" @@ -5372,14 +5417,65 @@ "calls/javascript/link/changelog", "calls/javascript/link/live-demo" ] + } + ] + } + ] } ] }, { "dropdown": "React Native", "icon": "/images/icons/react.svg", - "pages": [ + "versions": [ + { + "version": "v4‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎", + "groups": [ + { + "group": " ", + "pages": [ + "calls/v4/react-native/overview", + { + "group": "Getting Started", + "pages": [ + "calls/v4/react-native/setup", + "calls/v4/react-native/expo-integration-guide" + ] + }, + { + "group": "Calling Flows", + "pages": [ + "calls/v4/react-native/ringing", + "calls/v4/react-native/call-session", + "calls/v4/react-native/standalone-calling" + ] + }, + { + "group": "Features", + "pages": [ + "calls/v4/react-native/recording", + "calls/v4/react-native/call-logs", + "calls/v4/react-native/session-timeout" + ] + }, + { + "group": "Customisation", + "pages": [ + "calls/v4/react-native/video-view-customisation", + "calls/v4/react-native/presenter-mode" + ] + } + ] + } + ] + }, { + "version": "v5‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎", + "groups": [ + { + "group": " ", + "pages": [ + { "group": "Overview", "pages": [ "calls/react-native/overview" @@ -5441,14 +5537,63 @@ "calls/react-native/link/sample-apps", "calls/react-native/link/changelog" ] + } + ] + } + ] } ] }, { "dropdown": "iOS", "icon": "/images/icons/swift.svg", - "pages": [ + "versions": [ + { + "version": "v4‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎", + "groups": [ + { + "group": " ", + "pages": [ + "calls/v4/ios/overview", + { + "group": "Getting Started", + "pages": ["calls/v4/ios/setup"] + }, + { + "group": "Calling Flows", + "pages": [ + "calls/v4/ios/ringing", + "calls/v4/ios/call-session", + "calls/v4/ios/standalone-calling" + ] + }, + { + "group": "Features", + "pages": [ + "calls/v4/ios/recording", + "calls/v4/ios/call-logs", + "calls/v4/ios/session-timeout", + "calls/v4/ios/launch-call-screen-on-tap-of-push-notification" + ] + }, + { + "group": "Customisation", + "pages": [ + "calls/v4/ios/video-view-customisation", + "calls/v4/ios/presenter-mode" + ] + } + ] + } + ] + }, { + "version": "v5‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎", + "groups": [ + { + "group": " ", + "pages": [ + { "group": "Overview", "pages": [ "calls/ios/overview" @@ -5510,14 +5655,62 @@ "calls/ios/link/sample-apps", "calls/ios/link/changelog" ] + } + ] + } + ] } ] }, { "dropdown": "Android", "icon": "/images/icons/android.svg", - "pages": [ + "versions": [ + { + "version": "v4‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎", + "groups": [ + { + "group": " ", + "pages": [ + "calls/v4/android/overview", + { + "group": "Getting Started", + "pages": ["calls/v4/android/setup"] + }, + { + "group": "Calling Flows", + "pages": [ + "calls/v4/android/ringing", + "calls/v4/android/call-session", + "calls/v4/android/standalone-calling" + ] + }, + { + "group": "Features", + "pages": [ + "calls/v4/android/recording", + "calls/v4/android/call-logs", + "calls/v4/android/session-timeout" + ] + }, + { + "group": "Customisation", + "pages": [ + "calls/v4/android/video-view-customisation", + "calls/v4/android/presenter-mode" + ] + } + ] + } + ] + }, { + "version": "v5‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎", + "groups": [ + { + "group": " ", + "pages": [ + { "group": "Overview", "pages": [ "calls/android/overview" @@ -5579,14 +5772,62 @@ "calls/android/link/sample-apps", "calls/android/link/changelog" ] + } + ] + } + ] } ] }, { "dropdown": "Flutter", "icon": "/images/icons/flutter.svg", - "pages": [ + "versions": [ { + "version": "v4‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎", + "groups": [ + { + "group": " ", + "pages": [ + "calls/v4/flutter/overview", + { + "group": "Getting Started", + "pages": ["calls/v4/flutter/setup"] + }, + { + "group": "Calling Flows", + "pages": [ + "calls/v4/flutter/ringing", + "calls/v4/flutter/call-session", + "calls/v4/flutter/standalone-calling" + ] + }, + { + "group": "Features", + "pages": [ + "calls/v4/flutter/recording", + "calls/v4/flutter/call-logs", + "calls/v4/flutter/session-timeout" + ] + }, + { + "group": "Customisation", + "pages": [ + "calls/v4/flutter/video-view-customisation", + "calls/v4/flutter/presenter-mode" + ] + } + ] + } + ] + }, + { + "version": "v5‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎", + "groups": [ + { + "group": " ", + "pages": [ + { "group": "Overview", "pages": [ "calls/flutter/overview" @@ -5648,6 +5889,10 @@ "calls/flutter/link/sample-apps", "calls/flutter/link/changelog" ] + } + ] + } + ] } ] } @@ -7523,6 +7768,223 @@ "source": "/sdk/ionic/3.0/bots", "destination": "/sdk/ionic-legacy/3.0/bots" } + , + { + "source": "/sdk/javascript/calling-overview", + "destination": "/calls/v4/javascript/overview" + }, + { + "source": "/sdk/javascript/calling-setup", + "destination": "/calls/v4/javascript/setup" + }, + { + "source": "/sdk/javascript/default-call", + "destination": "/calls/v4/javascript/ringing" + }, + { + "source": "/sdk/javascript/direct-call", + "destination": "/calls/v4/javascript/call-session" + }, + { + "source": "/sdk/javascript/standalone-calling", + "destination": "/calls/v4/javascript/standalone-calling" + }, + { + "source": "/sdk/javascript/recording", + "destination": "/calls/v4/javascript/recording" + }, + { + "source": "/sdk/javascript/virtual-background", + "destination": "/calls/v4/javascript/virtual-background" + }, + { + "source": "/sdk/javascript/video-view-customisation", + "destination": "/calls/v4/javascript/video-view-customisation" + }, + { + "source": "/sdk/javascript/custom-css", + "destination": "/calls/v4/javascript/custom-css" + }, + { + "source": "/sdk/javascript/presenter-mode", + "destination": "/calls/v4/javascript/presenter-mode" + }, + { + "source": "/sdk/javascript/call-logs", + "destination": "/calls/v4/javascript/call-logs" + }, + { + "source": "/sdk/javascript/session-timeout", + "destination": "/calls/v4/javascript/session-timeout" + }, + { + "source": "/sdk/react-native/calling-overview", + "destination": "/calls/v4/react-native/overview" + }, + { + "source": "/sdk/react-native/calling-setup", + "destination": "/calls/v4/react-native/setup" + }, + { + "source": "/sdk/react-native/default-call", + "destination": "/calls/v4/react-native/ringing" + }, + { + "source": "/sdk/react-native/direct-call", + "destination": "/calls/v4/react-native/call-session" + }, + { + "source": "/sdk/react-native/standalone-calling", + "destination": "/calls/v4/react-native/standalone-calling" + }, + { + "source": "/sdk/react-native/recording", + "destination": "/calls/v4/react-native/recording" + }, + { + "source": "/sdk/react-native/video-view-customisation", + "destination": "/calls/v4/react-native/video-view-customisation" + }, + { + "source": "/sdk/react-native/presenter-mode", + "destination": "/calls/v4/react-native/presenter-mode" + }, + { + "source": "/sdk/react-native/call-logs", + "destination": "/calls/v4/react-native/call-logs" + }, + { + "source": "/sdk/react-native/expo-integration-guide", + "destination": "/calls/v4/react-native/expo-integration-guide" + }, + { + "source": "/sdk/react-native/session-timeout", + "destination": "/calls/v4/react-native/session-timeout" + }, + { + "source": "/sdk/ios/calling-overview", + "destination": "/calls/v4/ios/overview" + }, + { + "source": "/sdk/ios/calling-setup", + "destination": "/calls/v4/ios/setup" + }, + { + "source": "/sdk/ios/default-calling", + "destination": "/calls/v4/ios/ringing" + }, + { + "source": "/sdk/ios/direct-calling", + "destination": "/calls/v4/ios/call-session" + }, + { + "source": "/sdk/ios/standalone-calling", + "destination": "/calls/v4/ios/standalone-calling" + }, + { + "source": "/sdk/ios/recording", + "destination": "/calls/v4/ios/recording" + }, + { + "source": "/sdk/ios/video-view-customisation", + "destination": "/calls/v4/ios/video-view-customisation" + }, + { + "source": "/sdk/ios/presenter-mode", + "destination": "/calls/v4/ios/presenter-mode" + }, + { + "source": "/sdk/ios/call-logs", + "destination": "/calls/v4/ios/call-logs" + }, + { + "source": "/sdk/ios/session-timeout", + "destination": "/calls/v4/ios/session-timeout" + }, + { + "source": "/sdk/ios/launch-call-screen-on-tap-of-push-notification", + "destination": "/calls/v4/ios/launch-call-screen-on-tap-of-push-notification" + }, + { + "source": "/sdk/android/calling-overview", + "destination": "/calls/v4/android/overview" + }, + { + "source": "/sdk/android/calling-setup", + "destination": "/calls/v4/android/setup" + }, + { + "source": "/sdk/android/default-calling", + "destination": "/calls/v4/android/ringing" + }, + { + "source": "/sdk/android/direct-calling", + "destination": "/calls/v4/android/call-session" + }, + { + "source": "/sdk/android/standalone-calling", + "destination": "/calls/v4/android/standalone-calling" + }, + { + "source": "/sdk/android/recording", + "destination": "/calls/v4/android/recording" + }, + { + "source": "/sdk/android/video-view-customisation", + "destination": "/calls/v4/android/video-view-customisation" + }, + { + "source": "/sdk/android/presenter-mode", + "destination": "/calls/v4/android/presenter-mode" + }, + { + "source": "/sdk/android/call-logs", + "destination": "/calls/v4/android/call-logs" + }, + { + "source": "/sdk/android/session-timeout", + "destination": "/calls/v4/android/session-timeout" + }, + { + "source": "/sdk/flutter/calling-overview", + "destination": "/calls/v4/flutter/overview" + }, + { + "source": "/sdk/flutter/calling-setup", + "destination": "/calls/v4/flutter/setup" + }, + { + "source": "/sdk/flutter/default-call", + "destination": "/calls/v4/flutter/ringing" + }, + { + "source": "/sdk/flutter/direct-call", + "destination": "/calls/v4/flutter/call-session" + }, + { + "source": "/sdk/flutter/standalone-calling", + "destination": "/calls/v4/flutter/standalone-calling" + }, + { + "source": "/sdk/flutter/video-view-customisation", + "destination": "/calls/v4/flutter/video-view-customisation" + }, + { + "source": "/sdk/flutter/recording", + "destination": "/calls/v4/flutter/recording" + }, + { + "source": "/sdk/flutter/presenter-mode", + "destination": "/calls/v4/flutter/presenter-mode" + }, + { + "source": "/sdk/flutter/call-logs", + "destination": "/calls/v4/flutter/call-logs" + }, + { + "source": "/sdk/flutter/session-timeout", + "destination": "/calls/v4/flutter/session-timeout" + } ], "integrations": { "gtm": { diff --git a/sdk/android/calling-overview.mdx b/sdk/android/calling-overview.mdx index 19ef1c0f2..4a087e2ce 100644 --- a/sdk/android/calling-overview.mdx +++ b/sdk/android/calling-overview.mdx @@ -1,91 +1,16 @@ --- title: "Calling" -sidebarTitle: "Overview" +sidebarTitle: "Calling" +description: "Voice and video calling integration with CometChat Chat SDK" --- -## Overview - -CometChat provides voice and video calling capabilities for your Android application. This guide helps you choose the right implementation approach based on your use case. - -## Prerequisites - -1. CometChat SDK installed and configured. See the [Setup](/sdk/android/setup) guide. -2. CometChat Calls SDK added to your project: - -```gradle -dependencies { - implementation 'com.cometchat:calls-sdk-android:4.3.3' -} -``` - -For detailed setup instructions, see the [Calls SDK Setup](/sdk/android/calling-setup) guide. - -## Choose Your Implementation - -CometChat offers three approaches to implement calling: - - - - Complete calling flow with incoming/outgoing call UI, accept/reject functionality, and call notifications. - - - Direct call session management. Use with Ringing flow or for custom call initiation logic. - - - Calls SDK only implementation without the Chat SDK dependency. - - - -### Ringing - -Use this when you need a complete calling experience with: -- Incoming and outgoing call UI -- Call accept/reject/cancel functionality -- Call notifications via push notifications -- Integration with CometChat messaging - -**Flow:** Initiate call → Receiver gets notified → Accept/Reject → Start session - -[Get started with Ringing →](/sdk/android/default-calling) - -### Call Session - -Use this when you need to: -- Start a call session after the Ringing flow completes -- Implement custom call initiation logic with your own UI -- Join participants to a shared session using a session ID - -**Flow:** Generate token → Start session → Manage call → End session - -[Get started with Call Session →](/sdk/android/direct-calling) - -### Standalone Calling - -Use this when you want: -- Calling functionality without the Chat SDK -- Your own user authentication system -- Minimal SDK footprint - -**Flow:** Get auth token via REST API → Generate call token → Start session - -[Get started with Standalone Calling →](/sdk/android/standalone-calling) - -## Features +Voice and video calling is available through the standalone Calling SDK documentation. - - Record audio and video calls for playback, compliance, or archival purposes. - - - Customize the video call UI layout, participant tiles, and visual appearance. - - - Enable screen sharing and presentation capabilities during calls. - - - Retrieve and display call history including duration, participants, and status. + + The stable calling SDK documentation with setup, ringing, call sessions, and more. - - Configure automatic call termination when participants are inactive. + + The next-generation calling SDK with new architecture and features. diff --git a/sdk/flutter/calling-overview.mdx b/sdk/flutter/calling-overview.mdx index 61fbffcfe..6045e2f03 100644 --- a/sdk/flutter/calling-overview.mdx +++ b/sdk/flutter/calling-overview.mdx @@ -1,90 +1,16 @@ --- title: "Calling" -sidebarTitle: "Overview" +sidebarTitle: "Calling" +description: "Voice and video calling integration with CometChat Chat SDK" --- -## Overview - -CometChat provides voice and video calling capabilities for your Flutter application. This guide helps you choose the right implementation approach based on your use case. - -## Prerequisites - -1. CometChat SDK installed and configured. See the [Setup](/sdk/flutter/setup) guide. -2. CometChat Calls SDK added to your project: - -```yaml -dependencies: - cometchat_calls_sdk: ^4.0.0 -``` - -For detailed setup instructions, see the [Calls SDK Setup](/sdk/flutter/calling-setup) guide. - -## Choose Your Implementation - -CometChat offers three approaches to implement calling: - - - - Complete calling flow with incoming/outgoing call UI, accept/reject functionality, and call notifications. - - - Direct call session management. Use with Ringing flow or for custom call initiation logic. - - - Calls SDK only implementation without the Chat SDK dependency. - - - -### Ringing - -Use this when you need a complete calling experience with: -- Incoming and outgoing call UI -- Call accept/reject/cancel functionality -- Call notifications via push notifications -- Integration with CometChat messaging - -**Flow:** Initiate call → Receiver gets notified → Accept/Reject → Start session - -[Get started with Ringing →](/sdk/flutter/default-call) - -### Call Session - -Use this when you need to: -- Start a call session after the Ringing flow completes -- Implement custom call initiation logic with your own UI -- Join participants to a shared session using a session ID - -**Flow:** Generate token → Start session → Manage call → End session - -[Get started with Call Session →](/sdk/flutter/direct-call) - -### Standalone Calling - -Use this when you want: -- Calling functionality without the Chat SDK -- Your own user authentication system -- Minimal SDK footprint - -**Flow:** Get auth token via REST API → Generate call token → Start session - -[Get started with Standalone Calling →](/sdk/flutter/standalone-calling) - -## Features +Voice and video calling is available through the standalone Calling SDK documentation. - - Record audio and video calls for playback, compliance, or archival purposes. - - - Customize the video call UI layout, participant tiles, and visual appearance. - - - Enable screen sharing and presentation capabilities during calls. - - - Retrieve and display call history including duration, participants, and status. + + The stable calling SDK documentation with setup, ringing, call sessions, and more. - - Configure automatic call termination when participants are inactive. + + The next-generation calling SDK with new architecture and features. diff --git a/sdk/ios/calling-overview.mdx b/sdk/ios/calling-overview.mdx index 4883e77b1..9334636ca 100644 --- a/sdk/ios/calling-overview.mdx +++ b/sdk/ios/calling-overview.mdx @@ -1,83 +1,16 @@ --- title: "Calling" -sidebarTitle: "Overview" +sidebarTitle: "Calling" +description: "Voice and video calling integration with CometChat Chat SDK" --- -## Overview - -CometChat provides voice and video calling capabilities for your iOS application. This guide helps you choose the right implementation approach based on your use case. - -## Prerequisites - -1. CometChat SDK installed and configured. See the [Setup](/sdk/ios/setup) guide. -2. CometChat Calls SDK added to your project. For detailed setup instructions, see the [Calls SDK Setup](/sdk/ios/calling-setup) guide. - -## Choose Your Implementation - -CometChat offers three approaches to implement calling: - - - - Complete calling flow with incoming/outgoing call UI, accept/reject functionality, and call notifications. - - - Direct call session management. Use with Ringing flow or for custom call initiation logic. - - - Calls SDK only implementation without the Chat SDK dependency. - - - -### Ringing - -Use this when you need a complete calling experience with: -- Incoming and outgoing call UI -- Call accept/reject/cancel functionality -- Call notifications via push notifications -- Integration with CometChat messaging - -**Flow:** Initiate call → Receiver gets notified → Accept/Reject → Start session - -[Get started with Ringing →](/sdk/ios/default-calling) - -### Call Session - -Use this when you need to: -- Start a call session after the Ringing flow completes -- Implement custom call initiation logic with your own UI -- Join participants to a shared session using a session ID - -**Flow:** Generate token → Start session → Manage call → End session - -[Get started with Call Session →](/sdk/ios/direct-calling) - -### Standalone Calling - -Use this when you want: -- Calling functionality without the Chat SDK -- Your own user authentication system -- Minimal SDK footprint - -**Flow:** Get auth token via REST API → Generate call token → Start session - -[Get started with Standalone Calling →](/sdk/ios/standalone-calling) - -## Features +Voice and video calling is available through the standalone Calling SDK documentation. - - Record audio and video calls for playback, compliance, or archival purposes. - - - Customize the video call UI layout, participant tiles, and visual appearance. - - - Enable screen sharing and presentation capabilities during calls. - - - Retrieve and display call history including duration, participants, and status. + + The stable calling SDK documentation with setup, ringing, call sessions, and more. - - Configure automatic call termination when participants are inactive. + + The next-generation calling SDK with new architecture and features. diff --git a/sdk/javascript/calling-overview.mdx b/sdk/javascript/calling-overview.mdx index 18bc0ea62..8252748a1 100644 --- a/sdk/javascript/calling-overview.mdx +++ b/sdk/javascript/calling-overview.mdx @@ -1,98 +1,16 @@ --- title: "Calling" -sidebarTitle: "Overview" +sidebarTitle: "Calling" +description: "Voice and video calling integration with CometChat Chat SDK" --- -## Overview - -CometChat provides voice and video calling capabilities for your web application. This guide helps you choose the right implementation approach based on your use case. - -## Prerequisites - -1. CometChat SDK installed and configured. See the [Setup](/sdk/javascript/setup) guide. -2. CometChat Calls SDK added to your project: - -```bash -npm install @cometchat/calls-sdk-javascript -``` - -For detailed setup instructions, see the [Calls SDK Setup](/sdk/javascript/calling-setup) guide. - -## Choose Your Implementation - -CometChat offers three approaches to implement calling: - - - - Complete calling flow with incoming/outgoing call UI, accept/reject functionality, and call notifications. - - - Direct call session management. Use with Ringing flow or for custom call initiation logic. - - - Calls SDK only implementation without the Chat SDK dependency. - - - -### Ringing - -Use this when you need a complete calling experience with: -- Incoming and outgoing call UI -- Call accept/reject/cancel functionality -- Call notifications via push notifications -- Integration with CometChat messaging - -**Flow:** Initiate call → Receiver gets notified → Accept/Reject → Start session - -[Get started with Ringing →](/sdk/javascript/default-call) - -### Call Session - -Use this when you need to: -- Start a call session after the Ringing flow completes -- Implement custom call initiation logic with your own UI -- Join participants to a shared session using a session ID - -**Flow:** Generate token → Start session → Manage call → End session - -[Get started with Call Session →](/sdk/javascript/direct-call) - -### Standalone Calling - -Use this when you want: -- Calling functionality without the Chat SDK -- Your own user authentication system -- Minimal SDK footprint - -**Flow:** Get auth token via REST API → Generate call token → Start session - -[Get started with Standalone Calling →](/sdk/javascript/standalone-calling) - -## Features +Voice and video calling is available through the standalone Calling SDK documentation. - - Record audio and video calls for playback, compliance, or archival purposes. - - - Apply blur or custom image backgrounds during video calls. - - - Share your screen or specific application windows during calls. - - - Customize the video call UI layout, participant tiles, and visual appearance. - - - Style the calling UI with custom CSS to match your application's design. - - - Enable presentation capabilities with spotlight on the active speaker. - - - Retrieve and display call history including duration, participants, and status. + + The stable calling SDK documentation with setup, ringing, call sessions, and more. - - Configure automatic call termination when participants are inactive. + + The next-generation calling SDK with new architecture and features. diff --git a/sdk/react-native/calling-overview.mdx b/sdk/react-native/calling-overview.mdx index 12683a7c5..6a9cae181 100644 --- a/sdk/react-native/calling-overview.mdx +++ b/sdk/react-native/calling-overview.mdx @@ -1,143 +1,16 @@ --- title: "Calling" -sidebarTitle: "Overview" -description: "Add voice and video calling to your React Native app with CometChat. Choose between Ringing, Call Session, or Standalone implementations." +sidebarTitle: "Calling" +description: "Voice and video calling integration with CometChat Chat SDK" --- - -**Quick Reference** - Install the Calls SDK and initialize: - -```javascript -npm install @cometchat/calls-sdk-react-native - -// Initialize CometChatCalls -const callAppSettings = new CometChatCalls.CallAppSettingsBuilder() - .setAppId("APP_ID") - .setRegion("REGION") - .build(); -await CometChatCalls.init(callAppSettings); -``` - - - -Available via: [SDK](/sdk/react-native/calling-overview) | [REST API](/rest-api/calls) | [UI Kits](/ui-kit/react-native/call-features) - - -## Overview - -CometChat provides voice and video calling capabilities for your React Native application. This guide helps you choose the right implementation approach based on your use case. - -## Prerequisites - -1. CometChat SDK installed and configured. See the [Setup](/sdk/react-native/setup-sdk) guide. -2. CometChat Calls SDK added to your project: - -```bash -npm install @cometchat/calls-sdk-react-native -``` - -For detailed setup instructions, see the [Calls SDK Setup](/sdk/react-native/calling-setup) guide. - -## Choose Your Implementation - -CometChat offers three approaches to implement calling: - - - - Complete calling flow with incoming/outgoing call UI, accept/reject functionality, and call notifications. - - - Direct call session management. Use with Ringing flow or for custom call initiation logic. - - - Calls SDK only implementation without the Chat SDK dependency. - - - -### Ringing - -Use this when you need a complete calling experience with: -- Incoming and outgoing call UI -- Call accept/reject/cancel functionality -- Call notifications via push notifications -- Integration with CometChat messaging - -**Flow:** Initiate call → Receiver gets notified → Accept/Reject → Start session - -[Get started with Ringing →](/sdk/react-native/default-call) - -### Call Session - -Use this when you need to: -- Start a call session after the Ringing flow completes -- Implement custom call initiation logic with your own UI -- Join participants to a shared session using a session ID - -**Flow:** Generate token → Start session → Manage call → End session - -[Get started with Call Session →](/sdk/react-native/direct-call) - -### Standalone Calling - -Use this when you want: -- Calling functionality without the Chat SDK -- Your own user authentication system -- Minimal SDK footprint - -**Flow:** Get auth token via REST API → Generate call token → Start session - -[Get started with Standalone Calling →](/sdk/react-native/standalone-calling) - -## Features - - - - Record audio and video calls for playback, compliance, or archival purposes. - - - Customize the video call UI layout, participant tiles, and visual appearance. - - - Enable screen sharing and presentation capabilities during calls. - - - Retrieve and display call history including duration, participants, and status. - - - Configure automatic call termination when participants are inactive. - - - - - - - Initialize `CometChatCalls` on app startup, right after `CometChat.init()` - - Use the Ringing flow for user-to-user calls where you need push notification support - - Use Call Session when building custom call UIs or conference-style experiences - - Always request camera and microphone permissions before initiating a call - - Handle call errors gracefully and provide user-friendly feedback - - - - **Calls not connecting:** Verify the Calls SDK is initialized after the Chat SDK and that both use the same App ID and Region - - **No audio/video:** Check that camera and microphone permissions are granted on both Android and iOS - - **Push notifications not arriving:** Ensure push notification setup is complete — see the [Push Notifications](/sdk/react-native/push-notification) guide - - **iOS build fails:** Run `pod install` in the `ios` directory after adding the Calls SDK dependency - - **Android minSdkVersion error:** Set `minSdkVersion` to 24 or higher in your `build.gradle` - - - -## Next Steps +Voice and video calling is available through the standalone Calling SDK documentation. - - Install dependencies, configure permissions, and initialize the Calls SDK. - - - Implement the complete incoming/outgoing call experience. - - - Manage call sessions with custom initiation logic. + + The stable calling SDK documentation with setup, ringing, call sessions, and more. - - Retrieve and display call history for your users. + + The next-generation calling SDK with new architecture and features. From 00fe99095183bae97cdcc223104f69a04944e288 Mon Sep 17 00:00:00 2001 From: Jitvar Patil Date: Mon, 6 Apr 2026 13:27:36 +0530 Subject: [PATCH 2/5] fix: add /calls to version-aligner allowed route prefixes --- assets/version-aligner.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/assets/version-aligner.js b/assets/version-aligner.js index bbb3aca5a..7f3b2e2e8 100644 --- a/assets/version-aligner.js +++ b/assets/version-aligner.js @@ -134,7 +134,7 @@ // Route gating: version dropdown should appear only on configured prefixes const ALLOWED_VERSION_PREFIXES = (Array.isArray(window.ccVersionRoutes) && window.ccVersionRoutes.length) - ? window.ccVersionRoutes : ['/ui-kit','/sdk']; + ? window.ccVersionRoutes : ['/ui-kit','/sdk','/calls']; function isVersionRoute() { try { let p = window.location.pathname || '/'; From 1fc8ebb836b7ad65a5765094a9bbdf4abcb16f3c Mon Sep 17 00:00:00 2001 From: Jitvar Patil Date: Mon, 6 Apr 2026 14:05:06 +0530 Subject: [PATCH 3/5] fix: restore v5 flat sidebar, update beta callouts to v4 links, move UI Kit section to setup, add /calls to version-aligner --- calls/android/overview.mdx | 16 +- calls/android/setup.mdx | 13 + calls/flutter/overview.mdx | 16 +- calls/flutter/setup.mdx | 13 + calls/ios/overview.mdx | 16 +- calls/ios/setup.mdx | 13 + calls/javascript/overview.mdx | 16 +- calls/javascript/setup.mdx | 13 + calls/react-native/overview.mdx | 16 +- calls/react-native/setup.mdx | 13 + docs.json | 658 ++++++++++++++++---------------- 11 files changed, 391 insertions(+), 412 deletions(-) diff --git a/calls/android/overview.mdx b/calls/android/overview.mdx index f0a901f52..809e25c42 100644 --- a/calls/android/overview.mdx +++ b/calls/android/overview.mdx @@ -6,24 +6,10 @@ description: "CometChat Calling SDK v5 - Beta Release - Calls SDK for Android" --- - This is a **beta release** of the standalone Calls SDK. APIs and features may change before the stable release. For the current stable calling integration, see the [Android Calling Overview](/sdk/android/calling-overview). + This is a **beta release** of the Calls SDK v5. APIs and features may change before the stable release. For the current stable version, see the [Calls SDK v4 docs →](/calls/v4/android/overview). The CometChat Calls SDK enables real-time voice and video calling capabilities in your Android application. Built on top of WebRTC, it provides a complete calling solution with built-in UI components and extensive customization options. - - -**Faster Integration with UI Kits** - -If you're using CometChat UI Kits, voice and video calling can be quickly integrated: -- Incoming & outgoing call screens -- Call buttons with one-tap calling -- Call logs with history - -👉 [Android UI Kit Calling Integration](/ui-kit/android/calling-integration) - -Use this Calls SDK directly only if you need custom call UI or advanced control. - - ## Prerequisites Before integrating the Calls SDK, ensure you have: diff --git a/calls/android/setup.mdx b/calls/android/setup.mdx index 30ff35071..e19b62a01 100644 --- a/calls/android/setup.mdx +++ b/calls/android/setup.mdx @@ -5,6 +5,19 @@ sdk_version: "5.x (Beta)" description: "CometChat Calling SDK v5 - Beta Release - Setup for Android" --- + +**Faster Integration with UI Kits** + +If you're using CometChat UI Kits, voice and video calling can be quickly integrated: +- Incoming & outgoing call screens +- Call buttons with one-tap calling +- Call logs with history + +👉 [Android UI Kit Calling Integration](/ui-kit/android/calling-integration) + +Use this Calls SDK directly only if you need custom call UI or advanced control. + + This guide walks you through installing the CometChat Calls SDK and initializing it in your Android application. ## Add the CometChat Dependency diff --git a/calls/flutter/overview.mdx b/calls/flutter/overview.mdx index 742023ee5..90fdd8a87 100644 --- a/calls/flutter/overview.mdx +++ b/calls/flutter/overview.mdx @@ -6,24 +6,10 @@ description: "CometChat Calling SDK v5 - Beta Release - Calls SDK for Flutter" --- - This is a **beta release** of the standalone Calls SDK. APIs and features may change before the stable release. For the current stable calling integration, see the [Flutter Calling Overview](/sdk/flutter/calling-overview). + This is a **beta release** of the Calls SDK v5. APIs and features may change before the stable release. For the current stable version, see the [Calls SDK v4 docs →](/calls/v4/flutter/overview). The CometChat Calls SDK enables real-time voice and video calling capabilities in your Flutter application. Built on top of WebRTC, it provides a complete calling solution with built-in UI components and extensive customization options. - - -**Faster Integration with UI Kits** - -If you're using CometChat UI Kits, voice and video calling can be quickly integrated: -- Incoming & outgoing call screens -- Call buttons with one-tap calling -- Call logs with history - -👉 [Flutter UI Kit Calling Integration](/ui-kit/flutter/calling-integration) - -Use this Calls SDK directly only if you need custom call UI or advanced control. - - ## Prerequisites Before integrating the Calls SDK, ensure you have: diff --git a/calls/flutter/setup.mdx b/calls/flutter/setup.mdx index 9bf445f72..197b6f4d8 100644 --- a/calls/flutter/setup.mdx +++ b/calls/flutter/setup.mdx @@ -5,6 +5,19 @@ sdk_version: "5.x (Beta)" description: "CometChat Calling SDK v5 - Beta Release - Setup for Flutter" --- + +**Faster Integration with UI Kits** + +If you're using CometChat UI Kits, voice and video calling can be quickly integrated: +- Incoming & outgoing call screens +- Call buttons with one-tap calling +- Call logs with history + +👉 [Flutter UI Kit Calling Integration](/ui-kit/flutter/calling-integration) + +Use this Calls SDK directly only if you need custom call UI or advanced control. + + This guide walks you through installing the CometChat Calls SDK and initializing it in your Flutter application. ## Add the CometChat Dependency diff --git a/calls/ios/overview.mdx b/calls/ios/overview.mdx index b602dea9c..5d4ca20a9 100644 --- a/calls/ios/overview.mdx +++ b/calls/ios/overview.mdx @@ -6,24 +6,10 @@ description: "CometChat Calling SDK v5 - Beta Release - Calls SDK for iOS" --- - This is a **beta release** of the standalone Calls SDK. APIs and features may change before the stable release. For the current stable calling integration, see the [iOS Calling Overview](/sdk/ios/calling-overview). + This is a **beta release** of the Calls SDK v5. APIs and features may change before the stable release. For the current stable version, see the [Calls SDK v4 docs →](/calls/v4/ios/overview). The CometChat Calls SDK enables real-time voice and video calling capabilities in your iOS application. Built on top of WebRTC, it provides a complete calling solution with built-in UI components and extensive customization options. - - -**Faster Integration with UI Kits** - -If you're using CometChat UI Kits, voice and video calling can be quickly integrated: -- Incoming & outgoing call screens -- Call buttons with one-tap calling -- Call logs with history - -👉 [iOS UI Kit Calling Integration](/ui-kit/ios/calling-integration) - -Use this Calls SDK directly only if you need custom call UI or advanced control. - - ## Prerequisites Before integrating the Calls SDK, ensure you have: diff --git a/calls/ios/setup.mdx b/calls/ios/setup.mdx index 58634a11d..3850b140d 100644 --- a/calls/ios/setup.mdx +++ b/calls/ios/setup.mdx @@ -5,6 +5,19 @@ sdk_version: "5.x (Beta)" description: "CometChat Calling SDK v5 - Beta Release - Setup for iOS" --- + +**Faster Integration with UI Kits** + +If you're using CometChat UI Kits, voice and video calling can be quickly integrated: +- Incoming & outgoing call screens +- Call buttons with one-tap calling +- Call logs with history + +👉 [iOS UI Kit Calling Integration](/ui-kit/ios/calling-integration) + +Use this Calls SDK directly only if you need custom call UI or advanced control. + + This guide walks you through installing the CometChat Calls SDK and initializing it in your iOS application. ## Add the CometChat Dependency diff --git a/calls/javascript/overview.mdx b/calls/javascript/overview.mdx index 1770ae92f..afb58b0bc 100644 --- a/calls/javascript/overview.mdx +++ b/calls/javascript/overview.mdx @@ -6,24 +6,10 @@ description: "CometChat Calling SDK v5 - Beta Release - Calls SDK for JavaScript --- - This is a **beta release** of the standalone Calls SDK. APIs and features may change before the stable release. For the current stable calling integration, see the [JavaScript Calling Overview](/sdk/javascript/calling-overview). + This is a **beta release** of the Calls SDK v5. APIs and features may change before the stable release. For the current stable version, see the [Calls SDK v4 docs →](/calls/v4/javascript/overview). The CometChat Calls SDK enables real-time voice and video calling capabilities in your web application. Built on top of WebRTC, it provides a complete calling solution with built-in UI components and extensive customization options. - - -**Faster Integration with UI Kits** - -If you're using CometChat UI Kits, voice and video calling can be quickly integrated: -- Incoming & outgoing call screens -- Call buttons with one-tap calling -- Call logs with history - -👉 [React UI Kit Calling Integration](/ui-kit/react/calling-integration) - -Use this Calls SDK directly only if you need custom call UI or advanced control. - - ## Prerequisites Before integrating the Calls SDK, ensure you have: diff --git a/calls/javascript/setup.mdx b/calls/javascript/setup.mdx index c91cab42d..1ed23242f 100644 --- a/calls/javascript/setup.mdx +++ b/calls/javascript/setup.mdx @@ -5,6 +5,19 @@ sdk_version: "5.x (Beta)" description: "CometChat Calling SDK v5 - Beta Release - Setup for JavaScript" --- + +**Faster Integration with UI Kits** + +If you're using CometChat UI Kits, voice and video calling can be quickly integrated: +- Incoming & outgoing call screens +- Call buttons with one-tap calling +- Call logs with history + +👉 [React UI Kit Calling Integration](/ui-kit/react/calling-integration) + +Use this Calls SDK directly only if you need custom call UI or advanced control. + + This guide walks you through installing the CometChat Calls SDK and initializing it in your web application. ## Install the SDK diff --git a/calls/react-native/overview.mdx b/calls/react-native/overview.mdx index e775dfe1d..a97358d58 100644 --- a/calls/react-native/overview.mdx +++ b/calls/react-native/overview.mdx @@ -6,24 +6,10 @@ description: "CometChat Calling SDK v5 - Beta Release - Calls SDK for React Nati --- - This is a **beta release** of the standalone Calls SDK. APIs and features may change before the stable release. For the current stable calling integration, see the [React Native Calling Overview](/sdk/react-native/calling-overview). + This is a **beta release** of the Calls SDK v5. APIs and features may change before the stable release. For the current stable version, see the [Calls SDK v4 docs →](/calls/v4/react-native/overview). The CometChat Calls SDK enables real-time voice and video calling capabilities in your React Native application. Built on top of WebRTC, it provides a complete calling solution with built-in UI components and extensive customization options. - - -**Faster Integration with UI Kits** - -If you're using CometChat UI Kits, voice and video calling can be quickly integrated: -- Incoming & outgoing call screens -- Call buttons with one-tap calling -- Call logs with history - -👉 [React Native UI Kit Calling Integration](/ui-kit/react-native/calling-integration) - -Use this Calls SDK directly only if you need custom call UI or advanced control. - - ## Prerequisites Before integrating the Calls SDK, ensure you have: diff --git a/calls/react-native/setup.mdx b/calls/react-native/setup.mdx index 56666de46..4d1cfae3d 100644 --- a/calls/react-native/setup.mdx +++ b/calls/react-native/setup.mdx @@ -5,6 +5,19 @@ sdk_version: "5.x (Beta)" description: "CometChat Calling SDK v5 - Beta Release - Setup for React Native" --- + +**Faster Integration with UI Kits** + +If you're using CometChat UI Kits, voice and video calling can be quickly integrated: +- Incoming & outgoing call screens +- Call buttons with one-tap calling +- Call logs with history + +👉 [React Native UI Kit Calling Integration](/ui-kit/react-native/calling-integration) + +Use this Calls SDK directly only if you need custom call UI or advanced control. + + This guide walks you through installing the CometChat Calls SDK and configuring it in your React Native application. ## Add the CometChat Dependency diff --git a/docs.json b/docs.json index ee33b651b..6c2a92890 100644 --- a/docs.json +++ b/docs.json @@ -111,7 +111,9 @@ "tabs": [ { "tab": "Chat & Messaging", - "pages": ["chat-call"] + "pages": [ + "chat-call" + ] }, { "tab": "Platform", @@ -5308,7 +5310,9 @@ "calls/v4/javascript/overview", { "group": "Getting Started", - "pages": ["calls/v4/javascript/setup"] + "pages": [ + "calls/v4/javascript/setup" + ] }, { "group": "Calling Flows", @@ -5343,81 +5347,76 @@ "version": "v5‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎", "groups": [ { - "group": " ", + "group": "Overview", "pages": [ - { - "group": "Overview", - "pages": [ - "calls/javascript/overview" - ] - }, - { - "group": "Integrations", - "pages": [ - "calls/javascript/react-integration", - "calls/javascript/vue-integration", - "calls/javascript/angular-integration", - "calls/javascript/nextjs-integration", - "calls/javascript/ionic-integration" - ] - }, - { - "group": "Getting Started", - "pages": [ - "calls/javascript/setup", - "calls/javascript/authentication" - ] - }, - { - "group": "Call Session", - "pages": [ - "calls/javascript/session-settings", - "calls/javascript/join-session", - "calls/javascript/actions", - "calls/javascript/events" - ] - }, - { - "group": "Features", - "pages": [ - "calls/javascript/ringing", - "calls/javascript/call-layouts", - "calls/javascript/recording", - "calls/javascript/call-logs", - "calls/javascript/participant-management", - "calls/javascript/screen-sharing", - "calls/javascript/virtual-background", - "calls/javascript/picture-in-picture", - "calls/javascript/raise-hand", - "calls/javascript/idle-timeout" - ] - }, - { - "group": "Advanced", - "pages": [ - "calls/javascript/custom-control-panel", - "calls/javascript/device-management", - "calls/javascript/permissions-handling", - "calls/javascript/in-call-chat", - "calls/javascript/share-invite" - ] - }, - { - "group": "Migration Guide", - "pages": [ - "calls/javascript/migration-guide-v5" - ] - }, - { - "group": "Resources", - "pages": [ - "calls/javascript/troubleshooting", - "calls/javascript/link/github", - "calls/javascript/link/sample-apps", - "calls/javascript/link/changelog", - "calls/javascript/link/live-demo" - ] - } + "calls/javascript/overview" + ] + }, + { + "group": "Integrations", + "pages": [ + "calls/javascript/react-integration", + "calls/javascript/vue-integration", + "calls/javascript/angular-integration", + "calls/javascript/nextjs-integration", + "calls/javascript/ionic-integration" + ] + }, + { + "group": "Getting Started", + "pages": [ + "calls/javascript/setup", + "calls/javascript/authentication" + ] + }, + { + "group": "Call Session", + "pages": [ + "calls/javascript/session-settings", + "calls/javascript/join-session", + "calls/javascript/actions", + "calls/javascript/events" + ] + }, + { + "group": "Features", + "pages": [ + "calls/javascript/ringing", + "calls/javascript/call-layouts", + "calls/javascript/recording", + "calls/javascript/call-logs", + "calls/javascript/participant-management", + "calls/javascript/screen-sharing", + "calls/javascript/virtual-background", + "calls/javascript/picture-in-picture", + "calls/javascript/raise-hand", + "calls/javascript/idle-timeout" + ] + }, + { + "group": "Advanced", + "pages": [ + "calls/javascript/custom-control-panel", + "calls/javascript/device-management", + "calls/javascript/permissions-handling", + "calls/javascript/in-call-chat", + "calls/javascript/share-invite" + ] + }, + { + "group": "Migration Guide", + "pages": [ + "calls/javascript/migration-guide-v5" + ] + }, + { + "group": "Resources", + "pages": [ + "calls/javascript/troubleshooting", + "calls/javascript/link/github", + "calls/javascript/link/sample-apps", + "calls/javascript/link/changelog", + "calls/javascript/link/live-demo" ] } ] @@ -5473,71 +5472,66 @@ "version": "v5‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎", "groups": [ { - "group": " ", + "group": "Overview", "pages": [ - { - "group": "Overview", - "pages": [ - "calls/react-native/overview" - ] - }, - { - "group": "Getting Started", - "pages": [ - "calls/react-native/setup", - "calls/react-native/authentication", - "calls/react-native/session-settings" - ] - }, - { - "group": "Call Session", - "pages": [ - "calls/react-native/join-session", - "calls/react-native/actions", - "calls/react-native/events" - ] - }, - { - "group": "Features", - "pages": [ - "calls/react-native/call-layouts", - "calls/react-native/call-logs", - "calls/react-native/recording", - "calls/react-native/participant-management", - "calls/react-native/screen-sharing", - "calls/react-native/audio-modes", - "calls/react-native/raise-hand", - "calls/react-native/idle-timeout", - "calls/react-native/ringing" - ] - }, - { - "group": "Advanced", - "pages": [ - "calls/react-native/picture-in-picture", - "calls/react-native/voip-calling", - "calls/react-native/background-handling", - "calls/react-native/custom-control-panel", - "calls/react-native/custom-participant-list", - "calls/react-native/in-call-chat", - "calls/react-native/share-invite" - ] - }, - { - "group": "Migration Guide", - "pages": [ - "calls/react-native/migration-guide-v5" - ] - }, - { - "group": "Resources", - "pages": [ - "calls/react-native/troubleshooting", - "calls/react-native/link/github", - "calls/react-native/link/sample-apps", - "calls/react-native/link/changelog" - ] - } + "calls/react-native/overview" + ] + }, + { + "group": "Getting Started", + "pages": [ + "calls/react-native/setup", + "calls/react-native/authentication", + "calls/react-native/session-settings" + ] + }, + { + "group": "Call Session", + "pages": [ + "calls/react-native/join-session", + "calls/react-native/actions", + "calls/react-native/events" + ] + }, + { + "group": "Features", + "pages": [ + "calls/react-native/call-layouts", + "calls/react-native/call-logs", + "calls/react-native/recording", + "calls/react-native/participant-management", + "calls/react-native/screen-sharing", + "calls/react-native/audio-modes", + "calls/react-native/raise-hand", + "calls/react-native/idle-timeout", + "calls/react-native/ringing" + ] + }, + { + "group": "Advanced", + "pages": [ + "calls/react-native/picture-in-picture", + "calls/react-native/voip-calling", + "calls/react-native/background-handling", + "calls/react-native/custom-control-panel", + "calls/react-native/custom-participant-list", + "calls/react-native/in-call-chat", + "calls/react-native/share-invite" + ] + }, + { + "group": "Migration Guide", + "pages": [ + "calls/react-native/migration-guide-v5" + ] + }, + { + "group": "Resources", + "pages": [ + "calls/react-native/troubleshooting", + "calls/react-native/link/github", + "calls/react-native/link/sample-apps", + "calls/react-native/link/changelog" ] } ] @@ -5557,7 +5551,9 @@ "calls/v4/ios/overview", { "group": "Getting Started", - "pages": ["calls/v4/ios/setup"] + "pages": [ + "calls/v4/ios/setup" + ] }, { "group": "Calling Flows", @@ -5591,71 +5587,66 @@ "version": "v5‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎", "groups": [ { - "group": " ", + "group": "Overview", "pages": [ - { - "group": "Overview", - "pages": [ - "calls/ios/overview" - ] - }, - { - "group": "Getting Started", - "pages": [ - "calls/ios/setup", - "calls/ios/authentication" - ] - }, - { - "group": "Call Session", - "pages": [ - "calls/ios/session-settings", - "calls/ios/join-session", - "calls/ios/actions", - "calls/ios/events" - ] - }, - { - "group": "Features", - "pages": [ - "calls/ios/ringing", - "calls/ios/call-layouts", - "calls/ios/audio-modes", - "calls/ios/recording", - "calls/ios/call-logs", - "calls/ios/participant-management", - "calls/ios/screen-sharing", - "calls/ios/picture-in-picture", - "calls/ios/raise-hand", - "calls/ios/idle-timeout" - ] - }, - { - "group": "Advanced", - "pages": [ - "calls/ios/custom-control-panel", - "calls/ios/custom-participant-list", - "calls/ios/voip-calling", - "calls/ios/background-handling", - "calls/ios/in-call-chat", - "calls/ios/share-invite" - ] - }, - { - "group": "Migration Guide", - "pages": [ - "calls/ios/migration-guide-v5" - ] - }, - { - "group": "Resources", - "pages": [ - "calls/ios/troubleshooting", - "calls/ios/link/github", - "calls/ios/link/sample-apps", - "calls/ios/link/changelog" - ] - } + "calls/ios/overview" + ] + }, + { + "group": "Getting Started", + "pages": [ + "calls/ios/setup", + "calls/ios/authentication" + ] + }, + { + "group": "Call Session", + "pages": [ + "calls/ios/session-settings", + "calls/ios/join-session", + "calls/ios/actions", + "calls/ios/events" + ] + }, + { + "group": "Features", + "pages": [ + "calls/ios/ringing", + "calls/ios/call-layouts", + "calls/ios/audio-modes", + "calls/ios/recording", + "calls/ios/call-logs", + "calls/ios/participant-management", + "calls/ios/screen-sharing", + "calls/ios/picture-in-picture", + "calls/ios/raise-hand", + "calls/ios/idle-timeout" + ] + }, + { + "group": "Advanced", + "pages": [ + "calls/ios/custom-control-panel", + "calls/ios/custom-participant-list", + "calls/ios/voip-calling", + "calls/ios/background-handling", + "calls/ios/in-call-chat", + "calls/ios/share-invite" + ] + }, + { + "group": "Migration Guide", + "pages": [ + "calls/ios/migration-guide-v5" + ] + }, + { + "group": "Resources", + "pages": [ + "calls/ios/troubleshooting", + "calls/ios/link/github", + "calls/ios/link/sample-apps", + "calls/ios/link/changelog" ] } ] @@ -5675,7 +5666,9 @@ "calls/v4/android/overview", { "group": "Getting Started", - "pages": ["calls/v4/android/setup"] + "pages": [ + "calls/v4/android/setup" + ] }, { "group": "Calling Flows", @@ -5708,71 +5701,66 @@ "version": "v5‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎", "groups": [ { - "group": " ", + "group": "Overview", "pages": [ - { - "group": "Overview", - "pages": [ - "calls/android/overview" - ] - }, - { - "group": "Getting Started", - "pages": [ - "calls/android/setup", - "calls/android/authentication" - ] - }, - { - "group": "Call Session", - "pages": [ - "calls/android/session-settings", - "calls/android/join-session", - "calls/android/actions", - "calls/android/events" - ] - }, - { - "group": "Features", - "pages": [ - "calls/android/ringing", - "calls/android/call-layouts", - "calls/android/audio-modes", - "calls/android/recording", - "calls/android/call-logs", - "calls/android/participant-management", - "calls/android/screen-sharing", - "calls/android/picture-in-picture", - "calls/android/raise-hand", - "calls/android/idle-timeout" - ] - }, - { - "group": "Advanced", - "pages": [ - "calls/android/custom-control-panel", - "calls/android/custom-participant-list", - "calls/android/voip-calling", - "calls/android/background-handling", - "calls/android/in-call-chat", - "calls/android/share-invite" - ] - }, - { - "group": "Migration Guide", - "pages": [ - "calls/android/migration-guide-v5" - ] - }, - { - "group": "Resources", - "pages": [ - "calls/android/troubleshooting", - "calls/android/link/github", - "calls/android/link/sample-apps", - "calls/android/link/changelog" - ] - } + "calls/android/overview" + ] + }, + { + "group": "Getting Started", + "pages": [ + "calls/android/setup", + "calls/android/authentication" + ] + }, + { + "group": "Call Session", + "pages": [ + "calls/android/session-settings", + "calls/android/join-session", + "calls/android/actions", + "calls/android/events" + ] + }, + { + "group": "Features", + "pages": [ + "calls/android/ringing", + "calls/android/call-layouts", + "calls/android/audio-modes", + "calls/android/recording", + "calls/android/call-logs", + "calls/android/participant-management", + "calls/android/screen-sharing", + "calls/android/picture-in-picture", + "calls/android/raise-hand", + "calls/android/idle-timeout" + ] + }, + { + "group": "Advanced", + "pages": [ + "calls/android/custom-control-panel", + "calls/android/custom-participant-list", + "calls/android/voip-calling", + "calls/android/background-handling", + "calls/android/in-call-chat", + "calls/android/share-invite" + ] + }, + { + "group": "Migration Guide", + "pages": [ + "calls/android/migration-guide-v5" + ] + }, + { + "group": "Resources", + "pages": [ + "calls/android/troubleshooting", + "calls/android/link/github", + "calls/android/link/sample-apps", + "calls/android/link/changelog" ] } ] @@ -5792,7 +5780,9 @@ "calls/v4/flutter/overview", { "group": "Getting Started", - "pages": ["calls/v4/flutter/setup"] + "pages": [ + "calls/v4/flutter/setup" + ] }, { "group": "Calling Flows", @@ -5825,71 +5815,66 @@ "version": "v5‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎", "groups": [ { - "group": " ", + "group": "Overview", "pages": [ - { - "group": "Overview", - "pages": [ - "calls/flutter/overview" - ] - }, - { - "group": "Getting Started", - "pages": [ - "calls/flutter/setup", - "calls/flutter/authentication" - ] - }, - { - "group": "Call Session", - "pages": [ - "calls/flutter/session-settings", - "calls/flutter/join-session", - "calls/flutter/actions", - "calls/flutter/events" - ] - }, - { - "group": "Features", - "pages": [ - "calls/flutter/ringing", - "calls/flutter/call-layouts", - "calls/flutter/audio-modes", - "calls/flutter/recording", - "calls/flutter/call-logs", - "calls/flutter/participant-management", - "calls/flutter/screen-sharing", - "calls/flutter/picture-in-picture", - "calls/flutter/raise-hand", - "calls/flutter/idle-timeout" - ] - }, - { - "group": "Advanced", - "pages": [ - "calls/flutter/custom-control-panel", - "calls/flutter/custom-participant-list", - "calls/flutter/voip-calling", - "calls/flutter/background-handling", - "calls/flutter/in-call-chat", - "calls/flutter/share-invite" - ] - }, - { - "group": "Migration Guide", - "pages": [ - "calls/flutter/migration-guide-v5" - ] - }, - { - "group": "Resources", - "pages": [ - "calls/flutter/troubleshooting", - "calls/flutter/link/github", - "calls/flutter/link/sample-apps", - "calls/flutter/link/changelog" - ] - } + "calls/flutter/overview" + ] + }, + { + "group": "Getting Started", + "pages": [ + "calls/flutter/setup", + "calls/flutter/authentication" + ] + }, + { + "group": "Call Session", + "pages": [ + "calls/flutter/session-settings", + "calls/flutter/join-session", + "calls/flutter/actions", + "calls/flutter/events" + ] + }, + { + "group": "Features", + "pages": [ + "calls/flutter/ringing", + "calls/flutter/call-layouts", + "calls/flutter/audio-modes", + "calls/flutter/recording", + "calls/flutter/call-logs", + "calls/flutter/participant-management", + "calls/flutter/screen-sharing", + "calls/flutter/picture-in-picture", + "calls/flutter/raise-hand", + "calls/flutter/idle-timeout" + ] + }, + { + "group": "Advanced", + "pages": [ + "calls/flutter/custom-control-panel", + "calls/flutter/custom-participant-list", + "calls/flutter/voip-calling", + "calls/flutter/background-handling", + "calls/flutter/in-call-chat", + "calls/flutter/share-invite" + ] + }, + { + "group": "Migration Guide", + "pages": [ + "calls/flutter/migration-guide-v5" + ] + }, + { + "group": "Resources", + "pages": [ + "calls/flutter/troubleshooting", + "calls/flutter/link/github", + "calls/flutter/link/sample-apps", + "calls/flutter/link/changelog" ] } ] @@ -7767,8 +7752,7 @@ { "source": "/sdk/ionic/3.0/bots", "destination": "/sdk/ionic-legacy/3.0/bots" - } - , + }, { "source": "/sdk/javascript/calling-overview", "destination": "/calls/v4/javascript/overview" From 48819b5950a93bef46644093a13b191353812eca Mon Sep 17 00:00:00 2001 From: Jitvar Patil Date: Mon, 6 Apr 2026 17:19:32 +0530 Subject: [PATCH 4/5] Replace Chat SDK multi-page Calling groups with single overview page, update calling-overview content --- docs.json | 96 ++------------------------- sdk/android/calling-overview.mdx | 23 +++++-- sdk/flutter/calling-overview.mdx | 23 +++++-- sdk/ios/calling-overview.mdx | 24 +++++-- sdk/javascript/calling-overview.mdx | 23 +++++-- sdk/react-native/calling-overview.mdx | 24 +++++-- 6 files changed, 103 insertions(+), 110 deletions(-) diff --git a/docs.json b/docs.json index 6c2a92890..5fcf72da3 100644 --- a/docs.json +++ b/docs.json @@ -2817,23 +2817,7 @@ "sdk/javascript/reactions" ] }, - { - "group": "Calling", - "pages": [ - "sdk/javascript/calling-overview", - "sdk/javascript/calling-setup", - "sdk/javascript/default-call", - "sdk/javascript/direct-call", - "sdk/javascript/standalone-calling", - "sdk/javascript/recording", - "sdk/javascript/virtual-background", - "sdk/javascript/video-view-customisation", - "sdk/javascript/custom-css", - "sdk/javascript/presenter-mode", - "sdk/javascript/call-logs", - "sdk/javascript/session-timeout" - ] - }, + "sdk/javascript/calling-overview", { "group": "Users", "pages": [ @@ -3171,22 +3155,7 @@ "sdk/react-native/reactions" ] }, - { - "group": "Calling", - "pages": [ - "sdk/react-native/calling-overview", - "sdk/react-native/calling-setup", - "sdk/react-native/default-call", - "sdk/react-native/direct-call", - "sdk/react-native/standalone-calling", - "sdk/react-native/recording", - "sdk/react-native/video-view-customisation", - "sdk/react-native/presenter-mode", - "sdk/react-native/call-logs", - "sdk/react-native/expo-integration-guide", - "sdk/react-native/session-timeout" - ] - }, + "sdk/react-native/calling-overview", { "group": "Users", "pages": [ @@ -3510,21 +3479,7 @@ "sdk/ios/reactions" ] }, - { - "group": "Calling", - "pages": [ - "sdk/ios/calling-overview", - "sdk/ios/calling-setup", - "sdk/ios/default-calling", - "sdk/ios/direct-calling", - "sdk/ios/standalone-calling", - "sdk/ios/recording", - "sdk/ios/video-view-customisation", - "sdk/ios/presenter-mode", - "sdk/ios/call-logs", - "sdk/ios/session-timeout" - ] - }, + "sdk/ios/calling-overview", { "group": "Users", "pages": [ @@ -3858,21 +3813,7 @@ "sdk/android/reactions" ] }, - { - "group": "Calling", - "pages": [ - "sdk/android/calling-overview", - "sdk/android/calling-setup", - "sdk/android/default-calling", - "sdk/android/direct-calling", - "sdk/android/standalone-calling", - "sdk/android/recording", - "sdk/android/video-view-customisation", - "sdk/android/presenter-mode", - "sdk/android/call-logs", - "sdk/android/session-timeout" - ] - }, + "sdk/android/calling-overview", { "group": "Users", "pages": [ @@ -4196,21 +4137,7 @@ "sdk/flutter/reactions" ] }, - { - "group": "Calling", - "pages": [ - "sdk/flutter/calling-overview", - "sdk/flutter/calling-setup", - "sdk/flutter/default-call", - "sdk/flutter/direct-call", - "sdk/flutter/standalone-calling", - "sdk/flutter/video-view-customisation", - "sdk/flutter/recording", - "sdk/flutter/presenter-mode", - "sdk/flutter/call-logs", - "sdk/flutter/session-timeout" - ] - }, + "sdk/flutter/calling-overview", { "group": "Users", "pages": [ @@ -4520,18 +4447,7 @@ "sdk/ionic-legacy/reactions" ] }, - { - "group": "Calling", - "pages": [ - "sdk/ionic-legacy/calling-overview", - "sdk/ionic-legacy/calling-setup", - "sdk/ionic-legacy/default-call", - "sdk/ionic-legacy/direct-call", - "sdk/ionic-legacy/video-view-customisation", - "sdk/ionic-legacy/recording", - "sdk/ionic-legacy/presenter-mode" - ] - }, + "sdk/ionic-legacy/calling-overview", { "group": "Users", "pages": [ diff --git a/sdk/android/calling-overview.mdx b/sdk/android/calling-overview.mdx index 4a087e2ce..5a6fc28fc 100644 --- a/sdk/android/calling-overview.mdx +++ b/sdk/android/calling-overview.mdx @@ -1,16 +1,31 @@ --- title: "Calling" sidebarTitle: "Calling" -description: "Voice and video calling integration with CometChat Chat SDK" +description: "Voice and video calling integration with CometChat" --- -Voice and video calling is available through the standalone Calling SDK documentation. +CometChat's Calling SDK enables you to add voice and video calling to your Android application. The Calling SDK works alongside the Chat SDK to provide a complete communication experience including 1-on-1 calls, group calls, and conference sessions. + +## Key Features + +- **Voice & Video Calls** — High-quality 1-on-1 and group calling with adaptive bitrate +- **Screen Sharing** — Share your screen during calls for collaboration +- **Call Recording** — Record calls and access recordings later +- **Call Logs** — Track call history with detailed metadata +- **Ringing & Notifications** — Built-in call ringing flow with accept/reject +- **Customizable UI** — Presenter mode and video view customization + +## Choose Your Version - The stable calling SDK documentation with setup, ringing, call sessions, and more. + Production-ready calling SDK with full feature set including setup, ringing, call sessions, recording, and more. - The next-generation calling SDK with new architecture and features. + Next-generation calling SDK with improved architecture, better performance, and new features. Currently in beta. + + +If you are using CometChat UI Kits, calling is already integrated. The Calling SDK is only needed for custom calling implementations. + diff --git a/sdk/flutter/calling-overview.mdx b/sdk/flutter/calling-overview.mdx index 6045e2f03..35aaeec40 100644 --- a/sdk/flutter/calling-overview.mdx +++ b/sdk/flutter/calling-overview.mdx @@ -1,16 +1,31 @@ --- title: "Calling" sidebarTitle: "Calling" -description: "Voice and video calling integration with CometChat Chat SDK" +description: "Voice and video calling integration with CometChat" --- -Voice and video calling is available through the standalone Calling SDK documentation. +CometChat's Calling SDK enables you to add voice and video calling to your Flutter application. The Calling SDK works alongside the Chat SDK to provide a complete communication experience including 1-on-1 calls, group calls, and conference sessions. + +## Key Features + +- **Voice & Video Calls** — High-quality 1-on-1 and group calling with adaptive bitrate +- **Screen Sharing** — Share your screen during calls for collaboration +- **Call Recording** — Record calls and access recordings later +- **Call Logs** — Track call history with detailed metadata +- **Ringing & Notifications** — Built-in call ringing flow with accept/reject +- **Customizable UI** — Presenter mode and video view customization + +## Choose Your Version - The stable calling SDK documentation with setup, ringing, call sessions, and more. + Production-ready calling SDK with full feature set including setup, ringing, call sessions, recording, and more. - The next-generation calling SDK with new architecture and features. + Next-generation calling SDK with improved architecture, better performance, and new features. Currently in beta. + + +If you are using CometChat UI Kits, calling is already integrated. The Calling SDK is only needed for custom calling implementations. + diff --git a/sdk/ios/calling-overview.mdx b/sdk/ios/calling-overview.mdx index 9334636ca..3e12ad6c3 100644 --- a/sdk/ios/calling-overview.mdx +++ b/sdk/ios/calling-overview.mdx @@ -1,16 +1,32 @@ --- title: "Calling" sidebarTitle: "Calling" -description: "Voice and video calling integration with CometChat Chat SDK" +description: "Voice and video calling integration with CometChat" --- -Voice and video calling is available through the standalone Calling SDK documentation. +CometChat's Calling SDK enables you to add voice and video calling to your iOS application. The Calling SDK works alongside the Chat SDK to provide a complete communication experience including 1-on-1 calls, group calls, and conference sessions. + +## Key Features + +- **Voice & Video Calls** — High-quality 1-on-1 and group calling with adaptive bitrate +- **Screen Sharing** — Share your screen during calls for collaboration +- **Call Recording** — Record calls and access recordings later +- **Call Logs** — Track call history with detailed metadata +- **Ringing & Notifications** — Built-in call ringing flow with CallKit integration +- **Customizable UI** — Presenter mode and video view customization +- **Push Notifications** — Launch call screen directly from push notifications + +## Choose Your Version - The stable calling SDK documentation with setup, ringing, call sessions, and more. + Production-ready calling SDK with full feature set including setup, ringing, call sessions, recording, and more. - The next-generation calling SDK with new architecture and features. + Next-generation calling SDK with improved architecture, better performance, and new features. Currently in beta. + + +If you are using CometChat UI Kits, calling is already integrated. The Calling SDK is only needed for custom calling implementations. + diff --git a/sdk/javascript/calling-overview.mdx b/sdk/javascript/calling-overview.mdx index 8252748a1..ce87e7817 100644 --- a/sdk/javascript/calling-overview.mdx +++ b/sdk/javascript/calling-overview.mdx @@ -1,16 +1,31 @@ --- title: "Calling" sidebarTitle: "Calling" -description: "Voice and video calling integration with CometChat Chat SDK" +description: "Voice and video calling integration with CometChat" --- -Voice and video calling is available through the standalone Calling SDK documentation. +CometChat's Calling SDK enables you to add voice and video calling to your JavaScript application. The Calling SDK works alongside the Chat SDK to provide a complete communication experience including 1-on-1 calls, group calls, and conference sessions. + +## Key Features + +- **Voice & Video Calls** — High-quality 1-on-1 and group calling with adaptive bitrate +- **Screen Sharing** — Share your screen during calls for collaboration +- **Call Recording** — Record calls and access recordings later +- **Call Logs** — Track call history with detailed metadata +- **Ringing & Notifications** — Built-in call ringing flow with accept/reject +- **Customizable UI** — Presenter mode, video view customization, and virtual backgrounds + +## Choose Your Version - The stable calling SDK documentation with setup, ringing, call sessions, and more. + Production-ready calling SDK with full feature set including setup, ringing, call sessions, recording, and more. - The next-generation calling SDK with new architecture and features. + Next-generation calling SDK with improved architecture, better performance, and new features. Currently in beta. + + +If you are using CometChat UI Kits, calling is already integrated. The Calling SDK is only needed for custom calling implementations. + diff --git a/sdk/react-native/calling-overview.mdx b/sdk/react-native/calling-overview.mdx index 6a9cae181..d2318718d 100644 --- a/sdk/react-native/calling-overview.mdx +++ b/sdk/react-native/calling-overview.mdx @@ -1,16 +1,32 @@ --- title: "Calling" sidebarTitle: "Calling" -description: "Voice and video calling integration with CometChat Chat SDK" +description: "Voice and video calling integration with CometChat" --- -Voice and video calling is available through the standalone Calling SDK documentation. +CometChat's Calling SDK enables you to add voice and video calling to your React Native application. The Calling SDK works alongside the Chat SDK to provide a complete communication experience including 1-on-1 calls, group calls, and conference sessions. + +## Key Features + +- **Voice & Video Calls** — High-quality 1-on-1 and group calling with adaptive bitrate +- **Screen Sharing** — Share your screen during calls for collaboration +- **Call Recording** — Record calls and access recordings later +- **Call Logs** — Track call history with detailed metadata +- **Ringing & Notifications** — Built-in call ringing flow with accept/reject +- **Customizable UI** — Presenter mode and video view customization +- **Expo Support** — Compatible with Expo managed workflow + +## Choose Your Version - The stable calling SDK documentation with setup, ringing, call sessions, and more. + Production-ready calling SDK with full feature set including setup, ringing, call sessions, recording, and more. - The next-generation calling SDK with new architecture and features. + Next-generation calling SDK with improved architecture, better performance, and new features. Currently in beta. + + +If you are using CometChat UI Kits, calling is already integrated. The Calling SDK is only needed for custom calling implementations. + From 526ae543d1c5b1a2b3f613c8fef5b2fa264ee90a Mon Sep 17 00:00:00 2001 From: Kiro Agent Date: Wed, 8 Apr 2026 16:45:31 +0530 Subject: [PATCH 5/5] Update docs.json --- docs.json | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/docs.json b/docs.json index 969ab64cb..20db3e6bb 100644 --- a/docs.json +++ b/docs.json @@ -6820,6 +6820,10 @@ "source": "/ui-kit/react-native/5.0/:slug*", "destination": "/ui-kit/react-native/:slug*" }, + { + "source": "/ui-kit/react-native/4.0", + "destination": "/ui-kit/react-native/v4" + }, { "source": "/ui-kit/react-native/4.0/:slug*", "destination": "/ui-kit/react-native/v4/:slug*" @@ -6946,11 +6950,11 @@ }, { "source": "/sdk/android/setup-calling", - "destination": "/sdk/android/calling-setup" + "destination": "/calls/v4/android/setup" }, { "source": "/sdk/ios/calling-integration", - "destination": "/sdk/ios/calling-setup" + "destination": "/calls/v4/ios/setup" }, { "source": "/articles/docker",