diff --git a/calls/javascript/actions.mdx b/calls/javascript/actions.mdx index ba7eed138..75a3742e0 100644 --- a/calls/javascript/actions.mdx +++ b/calls/javascript/actions.mdx @@ -22,7 +22,7 @@ CometChatCalls.muteAudio(); Unmutes your local microphone, resuming audio transmission. ```javascript -CometChatCalls.unMuteAudio(); +CometChatCalls.unmuteAudio(); ``` ## Video Controls @@ -344,21 +344,3 @@ Sets the video input device by device ID. CometChatCalls.setVideoInputDevice(deviceId); ``` -## Picture-in-Picture - -### Enable Picture-in-Picture Layout - -Enables Picture-in-Picture mode for the call. - -```javascript -CometChatCalls.enablePictureInPictureLayout(); -``` - -### Disable Picture-in-Picture Layout - -Disables Picture-in-Picture mode. - -```javascript -CometChatCalls.disablePictureInPictureLayout(); -``` - diff --git a/calls/javascript/angular-integration.mdx b/calls/javascript/angular-integration.mdx index b8e40c270..2f090ec3f 100644 --- a/calls/javascript/angular-integration.mdx +++ b/calls/javascript/angular-integration.mdx @@ -142,8 +142,8 @@ export class CometChatCallsService { CometChatCalls.muteAudio(); } - unMuteAudio(): void { - CometChatCalls.unMuteAudio(); + unmuteAudio(): void { + CometChatCalls.unmuteAudio(); } // Video controls @@ -392,7 +392,7 @@ export class CallScreenComponent implements OnInit, OnDestroy { */ toggleAudio(): void { if (this.isMuted) { - this.callsService.unMuteAudio(); + this.callsService.unmuteAudio(); } else { this.callsService.muteAudio(); } diff --git a/calls/javascript/custom-control-panel.mdx b/calls/javascript/custom-control-panel.mdx index 6bd2103e2..1b38eedeb 100644 --- a/calls/javascript/custom-control-panel.mdx +++ b/calls/javascript/custom-control-panel.mdx @@ -30,7 +30,7 @@ With the control panel hidden, use the SDK's action methods to build your own UI // Mute/unmute microphone function toggleAudio(isMuted) { if (isMuted) { - CometChatCalls.unMuteAudio(); + CometChatCalls.unmuteAudio(); } else { CometChatCalls.muteAudio(); } @@ -172,7 +172,7 @@ CometChatCalls.addEventListener("onVideoResumed", () => { // Button handlers document.getElementById("audio-btn").onclick = () => { - isAudioMuted ? CometChatCalls.unMuteAudio() : CometChatCalls.muteAudio(); + isAudioMuted ? CometChatCalls.unmuteAudio() : CometChatCalls.muteAudio(); }; document.getElementById("video-btn").onclick = () => { @@ -196,7 +196,7 @@ All these methods can be used to build custom controls: | Action | Method | |--------|--------| | Mute audio | `CometChatCalls.muteAudio()` | -| Unmute audio | `CometChatCalls.unMuteAudio()` | +| Unmute audio | `CometChatCalls.unmuteAudio()` | | Pause video | `CometChatCalls.pauseVideo()` | | Resume video | `CometChatCalls.resumeVideo()` | | Start screen share | `CometChatCalls.startScreenSharing()` | diff --git a/calls/javascript/idle-timeout.mdx b/calls/javascript/idle-timeout.mdx index a9e61c7d2..9fb7741b7 100644 --- a/calls/javascript/idle-timeout.mdx +++ b/calls/javascript/idle-timeout.mdx @@ -20,7 +20,7 @@ Set the timeout periods when joining a session: ```javascript const callSettings = { idleTimeoutPeriodBeforePrompt: 60000, // 60 seconds before showing prompt - idleTimeoutPeriodAfterPrompt: 120000, // 120 seconds after prompt before ending + idleTimeoutPeriodAfterPrompt: 180000, // 180 seconds (3 minutes) after prompt before ending // ... other settings }; @@ -30,7 +30,7 @@ await CometChatCalls.joinSession(callToken, callSettings, container); | Property | Type | Default | Description | |----------|------|---------|-------------| | `idleTimeoutPeriodBeforePrompt` | Number | `60000` | Time in milliseconds before showing the timeout prompt | -| `idleTimeoutPeriodAfterPrompt` | Number | `120000` | Time in milliseconds after the prompt before ending the session | +| `idleTimeoutPeriodAfterPrompt` | Number | `180000` | Time in milliseconds after the prompt before ending the session | ## Session Timeout Event diff --git a/calls/javascript/ionic-integration.mdx b/calls/javascript/ionic-integration.mdx index 5a04a95ea..9869bf97e 100644 --- a/calls/javascript/ionic-integration.mdx +++ b/calls/javascript/ionic-integration.mdx @@ -125,8 +125,8 @@ export class CometChatCallsService { CometChatCalls.muteAudio(); } - unMuteAudio() { - CometChatCalls.unMuteAudio(); + unmuteAudio() { + CometChatCalls.unmuteAudio(); } pauseVideo() { @@ -280,7 +280,7 @@ export class CallPage implements OnInit, OnDestroy { } toggleAudio() { - this.isMuted ? this.callsService.unMuteAudio() : this.callsService.muteAudio(); + this.isMuted ? this.callsService.unmuteAudio() : this.callsService.muteAudio(); } toggleVideo() { @@ -689,7 +689,7 @@ const CallPage: React.FC = () => { // Control handlers const toggleAudio = () => { - isMuted ? CometChatCalls.unMuteAudio() : CometChatCalls.muteAudio(); + isMuted ? CometChatCalls.unmuteAudio() : CometChatCalls.muteAudio(); }; const toggleVideo = () => { @@ -1131,7 +1131,7 @@ async function joinCall() { } function toggleAudio() { - isMuted.value ? CometChatCalls.unMuteAudio() : CometChatCalls.muteAudio(); + isMuted.value ? CometChatCalls.unmuteAudio() : CometChatCalls.muteAudio(); } function toggleVideo() { diff --git a/calls/javascript/migration-guide-v5.mdx b/calls/javascript/migration-guide-v5.mdx index 4e386bc1a..c6ab13382 100644 --- a/calls/javascript/migration-guide-v5.mdx +++ b/calls/javascript/migration-guide-v5.mdx @@ -91,7 +91,7 @@ CometChatCalls.generateToken(sessionId, authToken).then( ```javascript // Login to the Calls SDK once (after your Chat SDK login) -CometChatCalls.login(authToken).then( +CometChatCalls.loginWithAuthToken(authToken).then( (user) => { /* Calls SDK is now authenticated */ }, (error) => { } ); @@ -106,7 +106,7 @@ CometChatCalls.generateToken(sessionId).then( -Call `CometChatCalls.login()` once after your user authenticates. The SDK stores the auth token internally, so subsequent calls like `generateToken()` and `joinSession()` use it automatically. +Call `CometChatCalls.loginWithAuthToken()` once after your user authenticates. The SDK stores the auth token internally, so subsequent calls like `generateToken()` and `joinSession()` use it automatically. --- @@ -126,7 +126,7 @@ const callSettings = new CometChatCalls.CallSettingsBuilder() .showPauseVideoButton(true) .showRecordingButton(true) .showScreenShareButton(true) - .showSwitchModeButton(true) + .showModeButton(true) .startWithAudioMuted(false) .startWithVideoMuted(false) .setMode("DEFAULT") @@ -172,7 +172,7 @@ const sessionSettings = { | `showPauseVideoButton(bool)` | `hideToggleVideoButton: !bool` | Inverted logic | | `showRecordingButton(bool)` | `hideRecordingButton: !bool` | Inverted logic | | `showScreenShareButton(bool)` | `hideScreenSharingButton: !bool` | Inverted logic | -| `showSwitchModeButton(bool)` | `hideChangeLayoutButton: !bool` | Inverted logic | +| `showModeButton(bool)` | `hideChangeLayoutButton: !bool` | Inverted logic | | `startWithAudioMuted(bool)` | `startAudioMuted: bool` | Same logic | | `startWithVideoMuted(bool)` | `startVideoPaused: bool` | Same logic | | `setMode("DEFAULT")` | `layout: "SIDEBAR"` | `"DEFAULT"` maps to `"SIDEBAR"` | @@ -195,13 +195,10 @@ CometChatCalls.generateToken(sessionId, authToken).then((token) => { ```javascript -// Option A: With token +// Generate a call token for the session, then join with it CometChatCalls.generateToken(sessionId).then((token) => { CometChatCalls.joinSession(token, sessionSettings, document.getElementById("callContainer")); }); - -// Option B: With session ID (recommended) -CometChatCalls.joinSession(sessionId, sessionSettings, document.getElementById("callContainer")); ``` @@ -223,8 +220,6 @@ Static methods remain on `CometChatCalls` but some have been renamed. | `CometChatCalls.setMode(mode)` | `CometChatCalls.setLayout(layout)` | | `CometChatCalls.startScreenShare()` | `CometChatCalls.startScreenSharing()` | | `CometChatCalls.stopScreenShare()` | `CometChatCalls.stopScreenSharing()` | -| `CometChatCalls.enterPIPMode()` | `CometChatCalls.enablePictureInPictureLayout()` | -| `CometChatCalls.exitPIPMode()` | `CometChatCalls.disablePictureInPictureLayout()` | | `CometChatCalls.openVirtualBackground()` | `CometChatCalls.showVirtualBackgroundDialog()` | | `CometChatCalls.closeVirtualBackground()` | `CometChatCalls.hideVirtualBackgroundDialog()` | | `CometChatCalls.setBackgroundBlur(level)` | `CometChatCalls.setVirtualBackgroundBlurLevel(level)` | @@ -250,9 +245,9 @@ const callSettings = new CometChatCalls.CallSettingsBuilder() onUserJoined: (user) => { }, onUserLeft: (user) => { }, onUserListUpdated: (userList) => { }, - onAudioModeChanged: (audioModeList) => { }, onUserMuted: (muteInfo) => { }, - onRecordingToggled: (recordingInfo) => { }, + onRecordingStarted: (recordingInfo) => { }, + onRecordingStopped: () => { }, onError: (error) => { }, })) .build(); @@ -288,8 +283,6 @@ CometChatCalls.addEventListener("onToggleVideoButtonClicked", () => { }); // Layout events CometChatCalls.addEventListener("onCallLayoutChanged", (layoutType) => { }); -CometChatCalls.addEventListener("onPictureInPictureLayoutEnabled", () => { }); -CometChatCalls.addEventListener("onPictureInPictureLayoutDisabled", () => { }); ``` @@ -305,9 +298,8 @@ CometChatCalls.addEventListener("onPictureInPictureLayoutDisabled", () => { }); | `onUserJoined(user)` | `onParticipantJoined(participant)` | | `onUserLeft(user)` | `onParticipantLeft(participant)` | | `onUserListUpdated(userList)` | `onParticipantListChanged(participants)` | -| `onAudioModeChanged(list)` | `onAudioModeChanged(audioMode)` | | `onUserMuted(info)` | `onParticipantAudioMuted(participant)` | -| `onRecordingToggled(info)` | `onRecordingStarted` / `onRecordingStopped` | +| `onRecordingStarted` / `onRecordingStopped` | `onRecordingStarted` / `onRecordingStopped` | | `onError(error)` | Errors returned via Promise rejection | --- @@ -321,5 +313,3 @@ CometChatCalls.addEventListener("onPictureInPictureLayoutDisabled", () => { }); | `CometChatCalls.OngoingCallListener` | `CometChatCalls.addEventListener()` | | `CometChatCalls.startSession()` | `CometChatCalls.joinSession()` | | `CometChatCalls.endSession()` | `CometChatCalls.leaveSession()` | -| `RTCRecordingInfo` | `onRecordingStarted` / `onRecordingStopped` events | -| `CallSwitchRequestInfo` | *Removed (no replacement)* | diff --git a/calls/javascript/nextjs-integration.mdx b/calls/javascript/nextjs-integration.mdx index e7a03a6d2..b1f76d8dc 100644 --- a/calls/javascript/nextjs-integration.mdx +++ b/calls/javascript/nextjs-integration.mdx @@ -251,7 +251,7 @@ export default function CallScreen({ sessionId, onCallEnd }: CallScreenProps) { // Control handlers const toggleAudio = () => { - isMuted ? CometChatCalls.unMuteAudio() : CometChatCalls.muteAudio(); + isMuted ? CometChatCalls.unmuteAudio() : CometChatCalls.muteAudio(); }; const toggleVideo = () => { @@ -517,7 +517,7 @@ export function useCall() { }, [CometChatCalls]); const toggleAudio = useCallback(() => { - isMuted ? CometChatCalls?.unMuteAudio() : CometChatCalls?.muteAudio(); + isMuted ? CometChatCalls?.unmuteAudio() : CometChatCalls?.muteAudio(); }, [CometChatCalls, isMuted]); const toggleVideo = useCallback(() => { diff --git a/calls/javascript/picture-in-picture.mdx b/calls/javascript/picture-in-picture.mdx deleted file mode 100644 index 1a1d68da9..000000000 --- a/calls/javascript/picture-in-picture.mdx +++ /dev/null @@ -1,116 +0,0 @@ ---- -title: "Picture-in-Picture" -sidebarTitle: "Picture-in-Picture" -sdk_version: "5.x" -description: "Configure picture-in-picture for CometChat Calls SDK v5 on JavaScript to keep video calls visible while users multitask." ---- - -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. - -## Enable Picture-in-Picture - -Enable PiP mode during a call: - -```javascript -CometChatCalls.enablePictureInPictureLayout(); -``` - -## Disable Picture-in-Picture - -Return to the normal call view: - -```javascript -CometChatCalls.disablePictureInPictureLayout(); -``` - -## Browser Support - -Picture-in-Picture support varies by browser: - -| Browser | Support | Notes | -|---------|---------|-------| -| Chrome | ✅ Full support | Chrome 70+ | -| Edge | ✅ Full support | Chromium-based | -| Safari | ✅ Full support | Safari 13.1+ | -| Firefox | ⚠️ Limited | Behind flag in some versions | -| Opera | ✅ Full support | Opera 57+ | - -## Check PiP Support - -Before enabling PiP, check if the browser supports it: - -```javascript -function isPiPSupported() { - return document.pictureInPictureEnabled || false; -} - -if (isPiPSupported()) { - CometChatCalls.enablePictureInPictureLayout(); -} else { - console.log("Picture-in-Picture not supported in this browser"); -} -``` - -## PiP Events - -The SDK doesn't provide specific PiP events, but you can listen to the browser's native PiP events on the video element if needed: - -```javascript -// If you have access to the video element -videoElement.addEventListener("enterpictureinpicture", () => { - console.log("Entered PiP mode"); -}); - -videoElement.addEventListener("leavepictureinpicture", () => { - console.log("Left PiP mode"); -}); -``` - -## User-Initiated PiP - -Browsers typically require PiP to be triggered by a user gesture (click, tap). Wrap the enable call in a button handler: - -```javascript -document.getElementById("pip-btn").addEventListener("click", () => { - CometChatCalls.enablePictureInPictureLayout(); -}); -``` - -## Auto-PiP on Tab Switch - -Some browsers support automatic PiP when switching tabs. This is a browser-level feature and may require user permission. - -```javascript -// Check if auto-PiP is available (Chrome) -if ("documentPictureInPicture" in window) { - // Document PiP API available -} -``` - -## Styling Considerations - -When PiP is active: -- The main call container may appear empty or show a placeholder -- Consider showing a message indicating the call is in PiP mode -- Provide a button to exit PiP and return to the full view - -```javascript -let isPiPActive = false; - -function togglePiP() { - if (isPiPActive) { - CometChatCalls.disablePictureInPictureLayout(); - isPiPActive = false; - } else { - CometChatCalls.enablePictureInPictureLayout(); - isPiPActive = true; - } - updateUI(); -} - -function updateUI() { - const placeholder = document.getElementById("pip-placeholder"); - placeholder.style.display = isPiPActive ? "block" : "none"; -} -``` - diff --git a/calls/javascript/react-integration.mdx b/calls/javascript/react-integration.mdx index f4ebbe649..274151baf 100644 --- a/calls/javascript/react-integration.mdx +++ b/calls/javascript/react-integration.mdx @@ -202,7 +202,7 @@ export default function CallScreen({ sessionId, onCallEnd }) { // Control handlers const toggleAudio = () => { - isMuted ? CometChatCalls.unMuteAudio() : CometChatCalls.muteAudio(); + isMuted ? CometChatCalls.unmuteAudio() : CometChatCalls.muteAudio(); }; const toggleVideo = () => { @@ -372,7 +372,7 @@ export function useCall() { }, []); const toggleAudio = useCallback(() => { - isMuted ? CometChatCalls.unMuteAudio() : CometChatCalls.muteAudio(); + isMuted ? CometChatCalls.unmuteAudio() : CometChatCalls.muteAudio(); }, [isMuted]); const toggleVideo = useCallback(() => { diff --git a/calls/javascript/session-settings.mdx b/calls/javascript/session-settings.mdx index b898a7eb9..61cb0e078 100644 --- a/calls/javascript/session-settings.mdx +++ b/calls/javascript/session-settings.mdx @@ -116,10 +116,10 @@ idleTimeoutPeriodBeforePrompt: 60000 // 60 seconds Time in milliseconds after the prompt before automatically ending the session. ```javascript -idleTimeoutPeriodAfterPrompt: 120000 // 120 seconds +idleTimeoutPeriodAfterPrompt: 180000 // 180 seconds (3 minutes) ``` -**Default:** `120000` (120 seconds) +**Default:** `180000` (180 seconds / 3 minutes) ## UI Visibility Settings @@ -178,7 +178,7 @@ hideToggleVideoButton: true Hides the recording start/stop button from the control panel. ```javascript -hideRecordingButton: false +hideRecordingButton: true ``` **Default:** `true` @@ -207,18 +207,6 @@ hideChangeLayoutButton: true **Default:** `false` -### Hide Switch Layout Button - -**Property:** `hideSwitchLayoutButton` - -Hides the layout switch button. - -```javascript -hideSwitchLayoutButton: true -``` - -**Default:** `false` - ### Hide Virtual Background Button **Property:** `hideVirtualBackgroundButton` @@ -241,7 +229,7 @@ Hides the network quality indicator. hideNetworkIndicator: true ``` -**Default:** `false` +**Default:** `true` ## Complete Example @@ -256,7 +244,7 @@ const callSettings = { // Timeout settings idleTimeoutPeriodBeforePrompt: 60000, - idleTimeoutPeriodAfterPrompt: 120000, + idleTimeoutPeriodAfterPrompt: 180000, // UI visibility hideControlPanel: false, @@ -267,7 +255,7 @@ const callSettings = { hideScreenSharingButton: false, hideChangeLayoutButton: false, hideVirtualBackgroundButton: false, - hideNetworkIndicator: false, + hideNetworkIndicator: true, }; ``` @@ -280,7 +268,7 @@ const callSettings = { | `startVideoPaused` | Boolean | `false` | Start with camera off | | `autoStartRecording` | Boolean | `false` | Auto-start recording | | `idleTimeoutPeriodBeforePrompt` | Number | `60000` | Idle timeout before prompt (ms) | -| `idleTimeoutPeriodAfterPrompt` | Number | `120000` | Idle timeout after prompt (ms) | +| `idleTimeoutPeriodAfterPrompt` | Number | `180000` | Idle timeout after prompt (ms) | | `hideControlPanel` | Boolean | `false` | Hide control panel | | `hideLeaveSessionButton` | Boolean | `false` | Hide leave button | | `hideToggleAudioButton` | Boolean | `false` | Hide audio toggle | @@ -288,8 +276,7 @@ const callSettings = { | `hideRecordingButton` | Boolean | `true` | Hide recording button | | `hideScreenSharingButton` | Boolean | `false` | Hide screen share button | | `hideChangeLayoutButton` | Boolean | `false` | Hide layout change button | -| `hideSwitchLayoutButton` | Boolean | `false` | Hide layout switch button | | `hideVirtualBackgroundButton` | Boolean | `false` | Hide virtual background button | -| `hideNetworkIndicator` | Boolean | `false` | Hide network indicator | +| `hideNetworkIndicator` | Boolean | `true` | Hide network indicator | diff --git a/calls/javascript/troubleshooting.mdx b/calls/javascript/troubleshooting.mdx index d04765f72..da1e6de6b 100644 --- a/calls/javascript/troubleshooting.mdx +++ b/calls/javascript/troubleshooting.mdx @@ -83,4 +83,4 @@ sdk_version: "5.x" | --- | --- | --- | | Event listener not firing | Wrong event name or listener not registered | Check the [Events](/calls/javascript/events) page for exact event names | | Duplicate event triggers | Multiple listeners registered without cleanup | Remove listeners when the component unmounts or before re-registering | -| `onUserJoined` not called | Listener registered after user already joined | Register listeners before calling `joinSession()` | +| `onParticipantJoined` not called | Listener registered after user already joined | Register listeners before calling `joinSession()` | diff --git a/calls/javascript/vue-integration.mdx b/calls/javascript/vue-integration.mdx index c00662fdb..ff3ffc909 100644 --- a/calls/javascript/vue-integration.mdx +++ b/calls/javascript/vue-integration.mdx @@ -276,7 +276,7 @@ async function joinCall() { */ function toggleAudio() { if (isMuted.value) { - CometChatCalls.unMuteAudio(); + CometChatCalls.unmuteAudio(); } else { CometChatCalls.muteAudio(); } @@ -532,7 +532,7 @@ export function useCall() { } function toggleAudio() { - isMuted.value ? CometChatCalls.unMuteAudio() : CometChatCalls.muteAudio(); + isMuted.value ? CometChatCalls.unmuteAudio() : CometChatCalls.muteAudio(); } function toggleVideo() { diff --git a/calls/react-native/actions.mdx b/calls/react-native/actions.mdx index 107c57d25..69bbb3759 100644 --- a/calls/react-native/actions.mdx +++ b/calls/react-native/actions.mdx @@ -164,6 +164,16 @@ const participantId = 'participant_pid'; CometChatCalls.pauseParticipantVideo(participantId); ``` +### Participant List Panel + +Show, hide, or toggle the built-in participant list panel programmatically: + +```tsx +CometChatCalls.showParticipantList(); +CometChatCalls.hideParticipantList(); +CometChatCalls.toggleParticipantList(); +``` + ## Chat Integration ### Set Chat Button Unread Count diff --git a/calls/react-native/audio-modes.mdx b/calls/react-native/audio-modes.mdx index e54be7b2a..0475f514c 100644 --- a/calls/react-native/audio-modes.mdx +++ b/calls/react-native/audio-modes.mdx @@ -28,6 +28,18 @@ const sessionSettings = { }; ``` +## Set Audio Mode Programmatically + +Change the audio output route during an active call with `CometChatCalls.setAudioMode()`. Pass one of the mode constants: + +```tsx +CometChatCalls.setAudioMode('SPEAKER'); // or 'EARPIECE' | 'BLUETOOTH' | 'HEADPHONES' +``` + + +The requested route takes effect when the corresponding device is available (for example, `'BLUETOOTH'` requires a connected Bluetooth device). + + ## Show Audio Mode Button Enable the audio mode button in the call UI: @@ -49,14 +61,18 @@ CometChatCalls.addEventListener('onAudioModeChanged', (mode) => { }); ``` -## Audio Mode Object +## Audio Mode Event Payload -When receiving audio mode updates, each mode object contains: +The `onAudioModeChanged` event delivers the **active mode as a plain string** — not an object. Its value is one of `'SPEAKER'`, `'EARPIECE'`, `'BLUETOOTH'`, or `'HEADPHONES'`: -| Property | Type | Description | -|----------|------|-------------| -| `type` | string | Mode type (`SPEAKER`, `EARPIECE`, `BLUETOOTH`, `HEADPHONES`) | -| `selected` | boolean | Whether this mode is currently active | +```tsx +CometChatCalls.addEventListener('onAudioModeChanged', (mode) => { + // mode is a string, e.g. 'SPEAKER' + if (mode === 'BLUETOOTH') { + console.log('Now routing audio to Bluetooth'); + } +}); +``` ## Complete Example @@ -82,7 +98,9 @@ const audioModeOptions: AudioModeOption[] = [ function AudioModeSelector() { const [currentMode, setCurrentMode] = useState('SPEAKER'); - const [availableModes, setAvailableModes] = useState(['SPEAKER', 'EARPIECE']); + // NOTE: The SDK does not expose a list of currently-available audio modes. + // This array is illustrative — populate it from your own device detection if needed. + const [availableModes] = useState(['SPEAKER', 'EARPIECE', 'BLUETOOTH', 'HEADPHONES']); const [modalVisible, setModalVisible] = useState(false); useEffect(() => { diff --git a/calls/react-native/background-handling.mdx b/calls/react-native/background-handling.mdx index 26fb3d8f0..80946deda 100644 --- a/calls/react-native/background-handling.mdx +++ b/calls/react-native/background-handling.mdx @@ -51,19 +51,24 @@ Add to your `AndroidManifest.xml`: ```xml - + + + + + ``` ### Configure Foreground Service -For Android 10+, calls require a foreground service to continue in the background: +For Android 10+, calls require a foreground service to continue in the background. The SDK ships this service (`com.cometchat.calls.services.CometChatOngoingCallService`) and declares it in its own manifest, so it is merged into your app automatically — you usually don't need to declare it yourself. + +If you do need to override its configuration, use the SDK's actual service class and foreground-service types: ```xml + android:name="com.cometchat.calls.services.CometChatOngoingCallService" + android:foregroundServiceType="camera|microphone|mediaProjection|mediaPlayback" /> ``` ### Keep Screen Awake diff --git a/calls/react-native/events.mdx b/calls/react-native/events.mdx index ec23ef7de..af039027a 100644 --- a/calls/react-native/events.mdx +++ b/calls/react-native/events.mdx @@ -28,6 +28,7 @@ unsubscribe(); | `onSessionLeft` | - | Left the session | | `onConnectionLost` | - | Connection to the session was lost | | `onConnectionRestored` | - | Connection was restored | +| `onConnectionFailed` | Connection error | Failed to establish the connection to the session | | `onConnectionClosed` | - | Connection was closed | | `onSessionTimedOut` | - | Session timed out due to inactivity | @@ -48,6 +49,10 @@ CometChatCalls.addEventListener('onConnectionRestored', () => { console.log('Connection restored'); }); +CometChatCalls.addEventListener('onConnectionFailed', (error) => { + console.log('Connection failed:', error); +}); + CometChatCalls.addEventListener('onSessionTimedOut', () => { console.log('Session timed out'); }); diff --git a/calls/react-native/idle-timeout.mdx b/calls/react-native/idle-timeout.mdx index e631e60c8..29e62a5a9 100644 --- a/calls/react-native/idle-timeout.mdx +++ b/calls/react-native/idle-timeout.mdx @@ -22,8 +22,8 @@ const sessionSettings = { | Parameter | Type | Default | Description | |-----------|------|---------|-------------| -| `idleTimeoutPeriodBeforePrompt` | number | `180000` | Milliseconds of inactivity before the prompt appears | -| `idleTimeoutPeriodAfterPrompt` | number | `120000` | Milliseconds the user has to respond before the session ends | +| `idleTimeoutPeriodBeforePrompt` | number | `60000` | Milliseconds you may remain alone in the call before the idle prompt appears | +| `idleTimeoutPeriodAfterPrompt` | number | `180000` | Milliseconds the prompt stays on screen waiting for a response before the session ends | ## How It Works diff --git a/calls/react-native/migration-guide-v5.mdx b/calls/react-native/migration-guide-v5.mdx index e17ad5c0d..40ddc74e6 100644 --- a/calls/react-native/migration-guide-v5.mdx +++ b/calls/react-native/migration-guide-v5.mdx @@ -73,7 +73,7 @@ CometChatCalls.init(callAppSettings).then( 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. +v5 introduces dedicated authentication. Use `login(uid, authKey)` with the user's UID, or `loginWithAuthToken(authToken)` if you already hold an auth token (for example, one obtained from the Chat SDK). After login, the SDK caches the auth token internally. @@ -90,8 +90,10 @@ CometChatCalls.generateToken(sessionId, authToken).then( ```javascript -// Login to the Calls SDK once (after your Chat SDK login) -CometChatCalls.login(authToken).then( +// Login to the Calls SDK once (after your Chat SDK login). +// You already have an auth token here, so use loginWithAuthToken(). +// To log in by UID instead, use CometChatCalls.login(uid, authKey). +CometChatCalls.loginWithAuthToken(authToken).then( (user) => { /* Calls SDK is now authenticated */ }, (error) => { } ); @@ -106,7 +108,7 @@ CometChatCalls.generateToken(sessionId).then( -Call `CometChatCalls.login()` once after your user authenticates. The SDK stores the auth token internally, so subsequent calls like `generateToken()` use it automatically. +Call `CometChatCalls.login()` (or `CometChatCalls.loginWithAuthToken()`) once after your user authenticates. The SDK stores the auth token internally, so subsequent calls like `generateToken()` use it automatically. --- @@ -125,11 +127,10 @@ const callSettings = new CometChatCalls.CallSettingsBuilder() .showMuteAudioButton(true) .showPauseVideoButton(true) .showRecordingButton(true) - .showSwitchModeButton(true) .startWithAudioMuted(false) .startWithVideoMuted(false) .setMode(CometChatCalls.CALL_MODE.DEFAULT) - .setCallListener(new CometChatCalls.OngoingCallListener({ + .setCallEventListener(new CometChatCalls.OngoingCallListener({ onCallEnded: () => { }, onCallEndButtonPressed: () => { }, onUserJoined: (user) => { }, @@ -170,12 +171,12 @@ const sessionSettings = { | `showMuteAudioButton(bool)` | `hideToggleAudioButton: !bool` | Inverted logic | | `showPauseVideoButton(bool)` | `hideToggleVideoButton: !bool` | Inverted logic | | `showRecordingButton(bool)` | `hideRecordingButton: !bool` | Inverted logic | -| `showSwitchModeButton(bool)` | `hideChangeLayoutButton: !bool` | Inverted logic | +| `showSwitchCameraButton(bool)` | `hideSwitchCameraButton: !bool` | Inverted logic | | `startWithAudioMuted(bool)` | `startAudioMuted: bool` | Same logic | | `startWithVideoMuted(bool)` | `startVideoPaused: bool` | Same logic | | `setMode(CALL_MODE.DEFAULT)` | `layout: "TILE"` | Enum instead of constant | | `startRecordingOnCallStart(bool)` | `autoStartRecording: bool` | Same logic | -| `setCallListener(listener)` | Use `addEventListener()` | See [Events](#event-listeners) section | +| `setCallEventListener(listener)` | Use `addEventListener()` | See [Events](#event-listeners) section | --- @@ -224,7 +225,7 @@ Static methods remain on `CometChatCalls` but some have been renamed. | `CometChatCalls.exitPIPMode()` | `CometChatCalls.disablePictureInPictureLayout()` | | `CometChatCalls.startRecording()` | `CometChatCalls.startRecording()` | | `CometChatCalls.stopRecording()` | `CometChatCalls.stopRecording()` | -| `CometChatCalls.switchToVideoCall()` | *Removed* | +| `CometChatCalls.switchToVideoCall()` | *Deprecated — retained as a no-op, no longer supported* | --- @@ -236,15 +237,16 @@ The single `OngoingCallListener` is replaced by `addEventListener()` with specif ```javascript const callSettings = new CometChatCalls.CallSettingsBuilder() - .setCallListener(new CometChatCalls.OngoingCallListener({ + .setCallEventListener(new CometChatCalls.OngoingCallListener({ onCallEnded: () => { }, onCallEndButtonPressed: () => { }, onUserJoined: (user) => { }, onUserLeft: (user) => { }, onUserListUpdated: (userList) => { }, - onAudioModeChanged: (audioModeList) => { }, + onAudioModesUpdated: (audioModes) => { }, onUserMuted: (muteInfo) => { }, - onRecordingToggled: (recordingInfo) => { }, + onRecordingStarted: (recordingInfo) => { }, + onRecordingStopped: (recordingInfo) => { }, onError: (error) => { }, })) .build(); @@ -297,9 +299,9 @@ CometChatCalls.addEventListener("onPictureInPictureLayoutDisabled", () => { }); | `onUserJoined(user)` | `onParticipantJoined(participant)` | | `onUserLeft(user)` | `onParticipantLeft(participant)` | | `onUserListUpdated(userList)` | `onParticipantListChanged(participants)` | -| `onAudioModeChanged(list)` | `onAudioModeChanged(audioMode)` | +| `onAudioModesUpdated(list)` | `onAudioModeChanged(audioMode)` | | `onUserMuted(info)` | `onParticipantAudioMuted(participant)` | -| `onRecordingToggled(info)` | `onRecordingStarted` / `onRecordingStopped` | +| `onRecordingStarted` / `onRecordingStopped` | `onRecordingStarted` / `onRecordingStopped` | | `onError(error)` | Errors returned via Promise rejection | --- diff --git a/calls/react-native/session-settings.mdx b/calls/react-native/session-settings.mdx index f40a36f29..2f28d0825 100644 --- a/calls/react-native/session-settings.mdx +++ b/calls/react-native/session-settings.mdx @@ -77,13 +77,18 @@ const sessionSettings = { | Property | Type | Default | Description | |----------|------|---------|-------------| -| `hideControlPanel` | boolean | `false` | Hide the default button layout | +| `hideControlPanel` | boolean | `false` | Hide the entire bottom control bar | | `hideLeaveSessionButton` | boolean | `false` | Hide the leave session button | | `hideToggleAudioButton` | boolean | `false` | Hide the mute audio button | | `hideToggleVideoButton` | boolean | `false` | Hide the pause video button | | `hideSwitchCameraButton` | boolean | `false` | Hide the switch camera button | -| `hideAudioModeButton` | boolean | `false` | Hide the audio mode button | +| `hideAudioModeButton` | boolean | `false` | Hide the audio output (route) button | | `hideRecordingButton` | boolean | `true` | Hide the recording button | +| `hideChangeLayoutButton` | boolean | `false` | Hide the layout-switcher button | +| `hideParticipantListButton` | boolean | `false` | Hide the button that opens the participant list | +| `hideChatButton` | boolean | `true` | Hide the in-call chat button | +| `hideRaiseHandButton` | boolean | `false` | Hide the raise-hand button | +| `hideShareInviteButton` | boolean | `true` | Hide the share / invite button | ```tsx const sessionSettings = { @@ -140,8 +145,8 @@ const sessionSettings = { | Property | Type | Default | Description | |----------|------|---------|-------------| -| `idleTimeoutPeriodBeforePrompt` | number | `180000` | Milliseconds of inactivity before the prompt appears | -| `idleTimeoutPeriodAfterPrompt` | number | `120000` | Milliseconds the user has to respond before the session ends | +| `idleTimeoutPeriodBeforePrompt` | number | `60000` | Milliseconds you may remain alone in the call before the idle prompt appears | +| `idleTimeoutPeriodAfterPrompt` | number | `180000` | Milliseconds the prompt stays on screen waiting for a response before the session ends | ```tsx const sessionSettings = { @@ -164,6 +169,41 @@ const sessionSettings = { }; ``` +### Header & Status Indicators + +| Property | Type | Default | Description | +|----------|------|---------|-------------| +| `title` | string | `''` | Title text shown in the call's header panel (for example, the room name) | +| `hideHeaderPanel` | boolean | `false` | Hide the top header bar (title, session timer, etc.) | +| `hideSessionTimer` | boolean | `false` | Hide the elapsed-time timer | +| `hideNetworkIndicator` | boolean | `true` | Hide the per-participant network-quality indicator | +| `hideRecordingStatusIndicator` | boolean | `false` | Hide the "recording in progress" badge (recording itself is unaffected) | + +```tsx +const sessionSettings = { + title: 'Team Standup', + hideSessionTimer: false, + hideNetworkIndicator: false, +}; +``` + +### Identity & Behavior + +| Property | Type | Default | Description | +|----------|------|---------|-------------| +| `displayName` | string | `''` | Display name shown for the local user. Falls back to the logged-in user's name when empty | +| `initialCameraFacing` | string | - | Which camera to use at call start: `'FRONT'` or `'REAR'`. The user can still switch afterwards | +| `enableNotifications` | boolean | `true` | Show the in-call toast notifications surfaced by the SDK (e.g. "X joined the call"). Set `false` to suppress them | +| `enableParticipantContextMenu` | boolean | `true` | Enable the per-participant long-press context menu (pin, etc.). Unavailable in `'SPOTLIGHT'` and picture-in-picture layouts | + +```tsx +const sessionSettings = { + displayName: 'Alex', + initialCameraFacing: 'FRONT', + enableNotifications: true, +}; +``` + ## Event Subscription Subscribe to call events with `CometChatCalls.addEventListener`. Pass an `AbortSignal` to each listener and call `controller.abort()` once to remove them all on cleanup: diff --git a/calls/react-native/setup.mdx b/calls/react-native/setup.mdx index 191291903..239782e85 100644 --- a/calls/react-native/setup.mdx +++ b/calls/react-native/setup.mdx @@ -25,13 +25,38 @@ This guide walks you through installing the CometChat Calls SDK and configuring ### Using npm ```bash -npm install @cometchat/calls-sdk-react-native@5.0.0 +npm install @cometchat/calls-sdk-react-native ``` ### Using Yarn ```bash -yarn add @cometchat/calls-sdk-react-native@5.0.0 +yarn add @cometchat/calls-sdk-react-native +``` + +## Install Required Dependencies + +The Calls SDK relies on the following packages. Install them alongside the SDK: + +| Package | Version | +| --- | --- | +| `@react-native-async-storage/async-storage` | `^2.1.2` | +| `react-native-background-timer` | `^2.4.1` | +| `react-native-performance` | `^5.1.2` | +| `react-native-svg` | `^15.12.0` | +| `react-native-url-polyfill` | `2.0.0` | +| `react-native-webrtc` | `124.0.7` | + +### Using npm + +```bash +npm install @react-native-async-storage/async-storage@^2.1.2 react-native-background-timer@^2.4.1 react-native-performance@^5.1.2 react-native-svg@^15.12.0 react-native-url-polyfill@2.0.0 react-native-webrtc@124.0.7 +``` + +### Using Yarn + +```bash +yarn add @react-native-async-storage/async-storage@^2.1.2 react-native-background-timer@^2.4.1 react-native-performance@^5.1.2 react-native-svg@^15.12.0 react-native-url-polyfill@2.0.0 react-native-webrtc@124.0.7 ``` ## iOS Configuration diff --git a/calls/react-native/troubleshooting.mdx b/calls/react-native/troubleshooting.mdx index 6f5b0353e..23d7685dd 100644 --- a/calls/react-native/troubleshooting.mdx +++ b/calls/react-native/troubleshooting.mdx @@ -31,7 +31,7 @@ sdk_version: "5.x" | --- | --- | --- | | `generateToken()` fails | User not logged in or invalid session ID | Ensure `login()` completes before generating a token | | Session joins but no audio/video | Permissions not granted | Request camera and microphone permissions before joining. See platform permission guides | -| `joinSession()` throws error | Invalid or expired token | Generate a fresh token using `generateToken()` before joining | +| Call fails to connect after rendering `` | Invalid or expired `callToken` | Generate a fresh token with `generateToken()` and pass it as the `callToken` prop. There is no `joinSession()` method in React Native — you join by rendering the component | --- diff --git a/docs.json b/docs.json index f2ad5f2c5..6faa406aa 100644 --- a/docs.json +++ b/docs.json @@ -5366,7 +5366,6 @@ "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" ]