@videosdk.live/react-sdk 0.4.6 → 0.4.8

package/dist/types/index.d.ts

@@ -102,6 +102,8 @@ export function MeetingProvider({
     metaData?: object;
     defaultCamera?: 'front' | 'back';
     debugMode: boolean;
+    translationLanguage?: string;
+    speakingLanguage?: string;
   };
   token: string;
   joinWithoutUserInteraction?: boolean;
@@ -174,6 +176,8 @@ export function MeetingProvider({
  *      - **SEND_AND_RECV**: Both audio and video streams will be produced and consumed in this mode.
  *      - **RECV_ONLY**: Both audio and video streams will be only consumed in this mode.
  *      - **SIGNALLING_ONLY**: Audio and video streams will not be produced or consumed in this mode.
+ * ---
+ * @param onQualityLimitation - This event will be emitted when a quality limitation is detected or resolved during the meeting.
  */
 
 export function MeetingConsumer({
@@ -209,7 +213,8 @@ export function MeetingConsumer({
   onRecordingStateChanged,
   onLivestreamStateChanged,
   onMeetingStateChanged,
-  onParticipantModeChanged
+  onParticipantModeChanged,
+  onQualityLimitation,
 }: {
   children: any;
   onParticipantJoined?: (participant: Participant) => void;
@@ -336,6 +341,15 @@ export function MeetingConsumer({
     participantId: string;
     mode: 'SEND_AND_RECV' | 'SIGNALLING_ONLY' | 'RECV_ONLY'
   }) => void;
+  onQualityLimitation?: ({
+    type,
+    state,
+    timestamp,
+  }: {
+    type: "congestion" | "bandwidth" | "cpu",
+    state: "detected" | "resolved",
+    timestamp: number,
+  }) => void,
 }): any;
 
 /**
@@ -611,6 +625,53 @@ export function useParticipant(
   >;
 };
 
+/**
+ *
+ * @param streamId - ID of the stream.
+ * ---
+ * @param onStreamStateChanged - It’s a callback that triggers whenever the state of a remote participant’s video stream changes.
+ *
+ * **Code Example:**
+ * ```js
+ * function onStreamStateChanged({ state, timestamp }) {
+ *   console.log("onStreamStateChanged", state, timestamp);
+ * }
+ * const { kind, paused, pause, resume } = useStream(streamId, {
+ *   onStreamStateChanged,
+ * });
+ * ```
+ * ---
+ * @returns This will return the stream properties and methods.
+ */
+export function useStream(
+  streamId: string,
+  {
+    onStreamStateChanged,
+  }?: {
+    onStreamStateChanged?: ({
+      state,
+      timestamp,
+    }: {
+      state:
+        | 'active'
+        | 'ended'
+        | 'stuck'
+        | 'freeze-detected'
+        | 'freeze-resolved';
+      timestamp: number;
+    }) => void;
+  }
+): {
+  kind: 'audio' | 'video' | 'share' | 'shareAudio';
+  stream: Stream;
+  codec: string;
+  track: MediaStreamTrack;
+  paused: boolean;
+  pause: () => void;
+  resume: () => void;
+};
+
+
 /**
  * @param onParticipantJoined - This event callback is trigger when a new participant joins the meeting.
  * ---
@@ -677,6 +738,9 @@ export function useParticipant(
  * ---
  * @returns This will return Meeting properties and method. You can refer this [API Reference](https://docs.videosdk.live/react/api/sdk-reference/use-meeting/introduction)
  *
+ * ---
+ * @param onQualityLimitation - This event will be emitted when a quality limitation is detected or resolved during the meeting.
+
  */
 
 export function useMeeting({
@@ -719,6 +783,7 @@ export function useMeeting({
   onMediaRelayError,
   onMediaRelayRequestResponse,
   onMediaRelayRequestReceived,
+  onQualityLimitation,
 }?: {
   onParticipantJoined?: (participant: Participant) => void;
   onParticipantLeft?: (participant: Participant) => void;
@@ -887,6 +952,15 @@ export function useMeeting({
     accept: () => void;
     reject: () => void;
   }) => void;
+  onQualityLimitation?: ({
+    type,
+    state,
+    timestamp,
+  }: {
+    type: "congestion" | "bandwidth" | "cpu",
+    state: "detected" | "resolved",
+    timestamp: number,
+  }) => void,
 }): {
   meetingId: string;
   meeting: Meeting;
@@ -914,6 +988,7 @@ export function useMeeting({
     livestreamUrl: string;
   };
   transcriptionState: string;
+  translationState: string;
   selectedCameraDevice?: {
     deviceId: string;
     groupId: string;
@@ -1235,6 +1310,76 @@ export function useTranscription({
   stopTranscription: () => void;
 };
 
+/**
+ * @param onTranslationStateChanged - This will triggered when a realtime translation state is changed.
+ * ---
+ * @param onTranslationLanguageChanged - This will triggered when a realtime translation language is changed.
+ * ---
+ * @param onTranslationText - This will triggered when a realtime translation text is published.
+ * ---
+ * @returns This will return `startTranslation()`, `changeTranslationLanguage()` and `stopTranslation()` method. You can refer this [API Reference](https://docs.videosdk.live/react/api/sdk-reference/use-translation#returns)
+ * ---
+ * **useTranslation example**
+ * ```js
+ *
+ *  function onTranslationStateChanged(data) {
+ *    console.log('New State Payload:', data)
+ *  }
+ * 
+ *  function onTranslationLanguageChanged(data) {
+ *    console.log('New Language Payload:', data)
+ *  }
+ *
+ *  function onTranslationText(data) {
+ *    console.log('Translation Text Payload:', data);
+ *  }
+ *
+ *  const { startTranslation, changeTranslationLanguage, stopTranslation } = useTranslation({
+ *    onTranslationStateChanged,
+ *    onTranslationLanguageChanged
+ *    onTranslationText,
+ *  });
+ *
+ *  async function startTranslation()=>{
+ *    await startTranslation()
+ *  }
+ * 
+ *  async function changeTranslationLanguage()=>{
+ *    await changeTranslationLanguage(languageCode)
+ * }
+ *
+ *  async function stopTranslation()=>{
+ *    await stopTranslation()
+ *  }
+ * ```
+ */
+export function useTranslation({
+  onTranslationStateChanged,
+  onTranslationLanguageChanged,
+  onTranslationText
+}?: {
+  onTranslationStateChanged?: (data: { id: string; status: string }) => void;
+  onTranslationLanguageChanged?: (data: {
+    participantId: string,
+    language: string,
+  }) => void;
+  onTranslationText?: (data: {
+    participantId: string;
+    participantName: string;
+    text: string;
+    timestamp: number;
+    language: string;
+    type: string;
+  }) => void;
+}): {
+  /**
+   * @description This method is used to start the meeting translation
+   */
+  startTranslation: () => Promise<void>;
+  changeTranslationLanguage: (languageCode: string) => Promise<void>;
+  stopTranslation: () => Promise<void>;
+};
+
 /**
  * @param onCharacterStateChanged - This will triggered when a character state is changed.
  * ---
@@ -1746,10 +1891,14 @@ export const Constants: {
     STOP_HLS_FAILED: number;
     START_TRANSCRIPTION_FAILED: number;
     STOP_TRANSCRIPTION_FAILED: number;
+    START_TRANSLATION_FAILED: number;
+    STOP_TRANSLATION_FAILED: number;
+    CHANGE_TRANSLATION_LANGUAGE_FAILED: number;
     RECORDING_FAILED: number;
     LIVESTREAM_FAILED: number;
     HLS_FAILED: number;
     TRANSCRIPTION_FAILED: number;
+    TRANSLATION_FAILED: number;
     ERROR_GET_VIDEO_MEDIA: number;
     ERROR_GET_AUDIO_MEDIA: number;
     ERROR_GET_DISPLAY_MEDIA: number;
@@ -1801,6 +1950,12 @@ export const Constants: {
     TRANSCRIPTION_STOPPING: string;
     TRANSCRIPTION_STOPPED: string;
   };
+  translationEvents: {
+    TRANSLATION_STARTING: string;
+    TRANSLATION_STARTED: string;
+    TRANSLATION_STOPPING: string;
+    TRANSLATION_STOPPED: string;
+  };
   characterState: CharacterState;
   characterMode: CharacterMode;
   modes: {

package/dist/types/meeting.d.ts

@@ -70,6 +70,15 @@ export class Meeting {
     | 'TRANSCRIPTION_STARTING'
     | 'TRANSCRIPTION_STARTED'
     | 'TRANSCRIPTION_STOPPING';
+    
+    /**
+   * @description These represents the current state of the meeting translation
+   */
+  translationState:
+    | 'TRANSLATION_STOPPED'
+    | 'TRANSLATION_STARTING'
+    | 'TRANSLATION_STARTED'
+    | 'TRANSLATION_STOPPING';
 
   /**
    * @description These object will contain all the messages send using the `send` method
@@ -532,6 +541,9 @@ export class Meeting {
       | 'data'
       | 'transcription-text'
       | 'transcription-state-changed'
+      | 'translation-text'
+      | 'translation-state-changed'
+      | 'translation-language-changed'
       | 'character-joined'
       | 'character-left'
       | "paused-all-streams"
@@ -540,7 +552,8 @@ export class Meeting {
       | "media-relay-stopped"
       | "media-relay-error"
       | "media-relay-request-response"
-      | "media-relay-request-received",
+      | "media-relay-request-received"
+      | "quality-limitation",
     listener: (data: any) => void
   ): void;
   /**
@@ -586,6 +599,9 @@ export class Meeting {
       | 'data'
       | 'transcription-text'
       | 'transcription-state-changed'
+      | 'translation-text'
+      | 'translation-state-changed'
+      | 'translation-language-changed'
       | 'character-joined'
       | 'character-left'
       | "paused-all-streams"
@@ -594,7 +610,8 @@ export class Meeting {
       | "media-relay-stopped"
       | "media-relay-error"
       | "media-relay-request-response"
-      | "media-relay-request-received",
+      | "media-relay-request-received"
+      | "quality-limitation",
 
     listener: (data: any) => void
   ): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@videosdk.live/react-sdk",
-  "version": "0.4.6",
+  "version": "0.4.8",
   "license": "ISC",
   "main": "dist/index.js",
   "module": "dist/index.modern.js",
@@ -74,7 +74,7 @@
     }
   },
   "dependencies": {
-    "@videosdk.live/js-sdk": "0.3.8",
+    "@videosdk.live/js-sdk": "0.3.9",
     "events": "^3.3.0"
   }
 }