Handle cloud recording errors

* Do not allow to start recording when it is already in progress or
  requested.
* Introduce an error state in the CloudRecordingState, so clients can
  see the reason why their start recording request failed. For example
  when the UI renders the start recording button for a guest client who
  has no permission to control recordings.

Author: nandito

src/lib/RoomConnection.ts

@@ -21,6 +21,7 @@ import ServerSocket, {
     ChatMessage as SignalChatMessage,
     ClientLeftEvent,
     ClientMetadataReceivedEvent,
+    CloudRecordingStartedEvent,
     KnockerLeftEvent,
     KnockAcceptedEvent,
     KnockRejectedEvent,
@@ -58,7 +59,8 @@ export type ConnectionStatus =
     | "knock_rejected";
 
 export type CloudRecordingState = {
-    status: "recording" | "requested";
+    error?: string;
+    status: "recording" | "requested" | "error";
     startedAt?: number;
 };
 
@@ -140,6 +142,7 @@ export interface RoomEventsMap {
     chat_message: (e: CustomEvent<ChatMessage>) => void;
     cloud_recording_request_started: (e: CustomEvent<CloudRecordingState>) => void;
     cloud_recording_started: (e: CustomEvent<CloudRecordingState>) => void;
+    cloud_recording_started_error: (e: CustomEvent<CloudRecordingState>) => void;
     cloud_recording_stopped: (e: CustomEvent<CloudRecordingState>) => void;
     local_camera_enabled: (e: CustomEvent<LocalCameraEnabledEvent>) => void;
     local_microphone_enabled: (e: CustomEvent<LocalMicrophoneEnabledEvent>) => void;
@@ -352,6 +355,7 @@ export default class RoomConnection extends TypedEventTarget {
         this.signalSocket.on("knocker_left", this._handleKnockerLeft.bind(this));
         this.signalSocket.on("room_joined", this._handleRoomJoined.bind(this));
         this.signalSocket.on("room_knocked", this._handleRoomKnocked.bind(this));
+        this.signalSocket.on("cloud_recording_started", this._handleCloudRecordingStarted.bind(this));
         this.signalSocket.on("cloud_recording_stopped", this._handleCloudRecordingStopped.bind(this));
         this.signalSocket.on("screenshare_started", this._handleScreenshareStarted.bind(this));
         this.signalSocket.on("screenshare_stopped", this._handleScreenshareStopped.bind(this));
@@ -409,7 +413,19 @@ export default class RoomConnection extends TypedEventTarget {
         this.dispatchEvent(new RoomConnectionEvent("chat_message", { detail: message }));
     }
 
-    private _handleCloudRecordingStarted({ client }: { client: SignalClient }) {
+    private _handleCloudRecordingStarted(event: CloudRecordingStartedEvent) {
+        // Only handle the start failure event here. The recording is
+        // considered started when the recorder client joins.
+        if (event.error) {
+            this.dispatchEvent(
+                new RoomConnectionEvent("cloud_recording_started_error", {
+                    detail: { error: event.error, status: "error" },
+                })
+            );
+        }
+    }
+
+    private _handleRecorderClientJoined({ client }: { client: SignalClient }) {
         this.dispatchEvent(
             new RoomConnectionEvent("cloud_recording_started", {
                 detail: {
@@ -439,7 +455,7 @@ export default class RoomConnection extends TypedEventTarget {
 
     private _handleNewClient({ client }: NewClientEvent) {
         if (client.role.roleName === "recorder") {
-            this._handleCloudRecordingStarted({ client });
+            this._handleRecorderClientJoined({ client });
         }
         if (client.role.roleName === "streamer") {
             this._handleStreamingStarted();
@@ -569,7 +585,7 @@ export default class RoomConnection extends TypedEventTarget {
 
             const recorderClient = clients.find((c) => c.role.roleName === "recorder");
             if (recorderClient) {
-                this._handleCloudRecordingStarted({ client: recorderClient });
+                this._handleRecorderClientJoined({ client: recorderClient });
             }
 
             const streamerClient = clients.find((c) => c.role.roleName === "streamer");

src/lib/react/useRoomConnection.ts

@@ -61,6 +61,10 @@ type RoomConnectionEvent =
     | {
           type: "CLOUD_RECORDING_REQUEST_STARTED";
       }
+    | {
+          type: "CLOUD_RECORDING_STARTED_ERROR";
+          payload: CloudRecordingState;
+      }
     | {
           type: "CLOUD_RECORDING_STOPPED";
       }
@@ -243,6 +247,14 @@ function reducer(state: RoomConnectionState, action: RoomConnectionEvent): RoomC
                     startedAt: action.payload.startedAt,
                 },
             };
+        case "CLOUD_RECORDING_STARTED_ERROR":
+            return {
+                ...state,
+                cloudRecording: {
+                    status: action.payload.status,
+                    error: action.payload.error,
+                },
+            };
         case "CLOUD_RECORDING_STOPPED":
             delete state.cloudRecording;
             return {
@@ -468,6 +480,9 @@ export function useRoomConnection(
                 const { status, startedAt } = e.detail;
                 dispatch({ type: "CLOUD_RECORDING_STARTED", payload: { status, startedAt } });
             }),
+            createEventListener("cloud_recording_started_error", (e) => {
+                dispatch({ type: "CLOUD_RECORDING_STARTED_ERROR", payload: e.detail });
+            }),
             createEventListener("cloud_recording_stopped", () => {
                 dispatch({ type: "CLOUD_RECORDING_STOPPED" });
             }),
@@ -612,6 +627,10 @@ export function useRoomConnection(
                 roomConnection.rejectWaitingParticipant(participantId);
             },
             startCloudRecording: () => {
+                // don't start recording if it's already started or requested
+                if (state.cloudRecording && ["recording", "requested"].includes(state.cloudRecording?.status)) {
+                    return;
+                }
                 roomConnection.startCloudRecording();
             },
             stopCloudRecording: () => {

src/types.d.ts

@@ -139,6 +139,11 @@ declare module "@whereby/jslib-media/src/utils/ServerSocket" {
         userId: string;
     }
 
+    interface CloudRecordingStartedEvent {
+        error?: string;
+        startedAt?: string;
+    }
+
     interface ClientLeftEvent {
         clientId: string;
     }
@@ -207,6 +212,7 @@ declare module "@whereby/jslib-media/src/utils/ServerSocket" {
         chat_message: ChatMessage;
         client_left: ClientLeftEvent;
         client_metadata_received: ClientMetadataReceivedEvent;
+        cloud_recording_started: CloudRecordingStartedEvent;
         cloud_recording_stopped: void;
         chat_message: ChatMessage;
         connect: void;