import React, { useCallback, useEffect, useState } from "react";
import { useCall, useCallStateHooks } from "@stream-io/video-react-native-sdk";
import { ActivityIndicator, Button } from "react-native";
export const CustomCallRecordButton = () => {
const call = useCall();
const { useIsCallRecordingInProgress } = useCallStateHooks();
const isCallRecordingInProgress = useIsCallRecordingInProgress();
const [isAwaitingResponse, setIsAwaitingResponse] = useState(false);
useEffect(() => {
if (!call) {
return;
}
// we wait until call.recording_started/stopped event
// to remove the loading indicator
const eventHandlers = [
call.on("call.recording_started", () => setIsAwaitingResponse(false)),
call.on("call.recording_stopped", () => setIsAwaitingResponse(false)),
];
return () => {
eventHandlers.forEach((unsubscribe) => unsubscribe());
};
}, [call]);
const toggleRecording = useCallback(async () => {
try {
setIsAwaitingResponse(true);
if (isCallRecordingInProgress) {
await call?.stopRecording();
} else {
await call?.startRecording();
}
} catch (e) {
console.error("Failed start recording", e);
}
}, [call, isCallRecordingInProgress]);
return isAwaitingResponse ? (
<ActivityIndicator />
) : (
<Button
onPress={toggleRecording}
title={`${isCallRecordingInProgress ? "Stop" : "Start"} Recording`}
/>
);
};Recording
Call recording supports legal compliance, quality assurance, and reference needs.
Recording calls
Use call.startRecording() and call.stopRecording() for recording control. Check status with useIsCallRecordingInProgress.
Recording takes moments to start - create a loading state for the transition period.
Permissions
Recording requires specific permissions. Use the Restricted component to conditionally render controls based on permissions.
See permissions guide.
Acquiring call recordings data
Use call.queryRecordings() to retrieve recordings. By default, returns all recordings for the call CID. Pass callSessionId to filter by session. Returns ListRecordingsResponse with recordings array of CallRecording objects.
Multiple calls can be recorded during a single call session, but a single call CID can be reused for multiple sessions, too.
The call recording is not immediately available when the call.recording_stopped event is delivered.
It may take 30 or more seconds for a recording to be available, advertised by emitting call.recording_ready event.