@trtc/calls-uikit-react 4.1.0

package/src/TUICallService/const/call.ts

@@ -0,0 +1,157 @@
+/**
+ * @property {String} call 1v1 通话 + 群组通话
+ * @property {String} CUSTOM 自定义 Store
+*/
+export enum StoreName {
+  CALL = 'call',
+  CUSTOM = 'custom'
+}
+/**
+ * @property {String} idle 空闲
+ * @property {String} connecting 呼叫等待中
+ * @property {String} connected 通话中
+*/
+export enum CallMediaType {
+  UNKNOWN,
+  AUDIO,
+  VIDEO,
+}
+/**
+ * @property {String} caller 主叫
+ * @property {String} callee 被叫
+*/
+export enum CallRole {
+  UNKNOWN = 'unknown',
+  CALLEE = 'callee',
+  CALLER = 'caller',
+}
+/**
+ * @property {String} idle 空闲
+ * @property {String} calling 呼叫等待中
+ * @property {String} connected 通话中
+*/
+export enum CallStatus {
+  IDLE = 'idle',
+  CALLING = 'calling',
+  CONNECTED = 'connected',
+}
+/**
+ * 视频画面显示模式
+ * 播放视频流默认使用 cover 模式; 播放屏幕共享流默认使用 contain 模式。
+ * @property {String} contain 优先保证视频内容全部显示。视频尺寸等比缩放，直至视频窗口的一边与视窗边框对齐。如果视频尺寸与显示视窗尺寸不一致，在保持长宽比的前提下，将视频进行缩放后填满视窗，缩放后的视频四周会有一圈黑边。
+ * @property {String} cover 优先保证视窗被填满。视频尺寸等比缩放，直至整个视窗被视频填满。如果视频长宽与显示窗口不同，则视频流会按照显示视窗的比例进行周边裁剪或图像拉伸后填满视窗
+ * @property {String} fill 保证视窗被填满的同时保证视频内容全部显示，但是不保证视频尺寸比例不变。视频的宽高会被拉伸至和视窗尺寸一致。(该选项值自 v4.12.1 开始支持)
+*/
+export enum VideoDisplayMode {
+  CONTAIN = 'contain',
+  COVER = 'cover',
+  FILL = 'fill',
+}
+/**
+ * 视频分辨率
+ * @property {String} 480p 
+ * @property {String} 720p 
+ * @property {String} 1080p 
+*/
+export enum VideoResolution {
+  RESOLUTION_480P = '480p',
+  RESOLUTION_720P = '720p',
+  RESOLUTION_1080P = '1080p',
+}
+// 支持的语言
+export enum LanguageType {
+  EN = 'en',
+  'ZH-CN' = 'zh-cn',
+  JA_JP = 'ja_JP',
+}
+
+export type TDeviceList = {
+  cameraList: any[],
+  microphoneList: any[],
+  currentCamera: any,
+  currentMicrophone: any,
+};
+
+/* === 【原来 TUICallKit 对外暴露】=== */
+// 原来 web callKit 定义通知外部状态变更的变量, 对外暴露
+export const StatusChange = {
+  IDLE: "idle",
+  BE_INVITED: "be-invited",
+  DIALING_C2C: "dialing-c2c",
+  DIALING_GROUP: "dialing-group",
+  CALLING_C2C_AUDIO: "calling-c2c-audio",
+  CALLING_C2C_VIDEO: "calling-c2c-video",
+  CALLING_GROUP_AUDIO: "calling-group-audio",
+  CALLING_GROUP_VIDEO: "calling-group-video",
+} as const;
+
+export const CallType = {
+  'unknown': CallMediaType.UNKNOWN,
+  'audio': CallMediaType.AUDIO,
+  'video': CallMediaType.VIDEO,
+} as const;
+
+/* === 【小程序使用】=== */
+/**
+ * @property {String} ear 听筒
+ * @property {String} speaker 免提
+*/
+export enum AudioPlayBackDevice {
+  EAR = 'ear',
+  SPEAKER = 'speaker',
+};
+
+export enum DeviceType {
+  MICROPHONE = 'microphone',
+  CAMERA = 'camera',
+  SPEAKER = 'speaker',
+}
+
+export enum CameraPosition {
+  FRONT = 0,
+  BACK = 1,
+}
+
+export enum FeatureButton {
+  Camera = 'camera',
+  Microphone = 'microphone',
+  SwitchCamera = 'switchCamera',
+  InviteUser = 'inviteUser',
+}
+
+export enum ButtonState {
+  Open = 'open',
+  Close = 'close',
+}
+
+export interface IViewBackgroundImage {
+  [userId: string]: string,
+}
+
+export enum ViewName {
+  LOCAL = 'local',
+  REMOTE = 'remote',
+}
+
+export enum LayoutMode {
+  LocalInLargeView = ViewName.LOCAL,
+  RemoteInLargeView = ViewName.REMOTE,
+}
+export interface ICustomUIConfig {
+  button?: {
+    [buttonName in FeatureButton]?: {
+      show: boolean;
+      state: ButtonState;
+    };
+  }
+  viewBackground?: IViewBackgroundImage;
+  layoutMode?: LayoutMode,
+}
+
+export enum ACTION_TYPE {
+  INVITE = 1,
+  CANCEL_INVITE = 2,
+  ACCEPT_INVITE = 3,
+  REJECT_INVITE = 4,
+  INVITE_TIMEOUT = 5,
+}

package/src/TUICallService/const/error.ts

@@ -0,0 +1,20 @@
+// 错误码
+export const ErrorCode: any = {
+  SWITCH_TO_AUDIO_CALL_FAILED: 60001,
+  SWITCH_TO_VIDEO_CALL_FAILED: 60002,
+  MICROPHONE_UNAVAILABLE: 60003,
+  CAMERA_UNAVAILABLE: 60004,
+  BAN_DEVICE: 60005,
+  NOT_SUPPORTED_WEBRTC: 60006,
+  ERROR_BLACKLIST: 20007,
+} as const;
+
+export const ErrorMessage: any = {
+  SWITCH_TO_AUDIO_CALL_FAILED: 'switchToAudioCall-call-failed',
+  SWITCH_TO_VIDEO_CALL_FAILED: 'switchToVideoCall-call-failed',
+  MICROPHONE_UNAVAILABLE: 'microphone-unavailable',
+  CAMERA_UNAVAILABLE: 'camera-unavailable',
+  BAN_DEVICE: 'ban-device',
+  NOT_SUPPORTED_WEBRTC: 'not-supported-webrtc',
+  ERROR_BLACKLIST: 'blacklist-user-tips'
+} as const;

package/src/TUICallService/const/index.ts

@@ -0,0 +1,103 @@
+export * from './call';
+export * from './error';
+export * from './log';
+
+export const CALL_DATA_KEY: any = {
+  CALL_STATUS: 'callStatus',
+  CALL_ROLE: 'callRole',
+  CALL_MEDIA_TYPE: 'callMediaType',
+  LOCAL_USER_INFO: 'localUserInfo',
+  LOCAL_USER_INFO_EXCLUDE_VOLUMN: 'localUserInfoExcludeVolume',
+  REMOTE_USER_INFO_LIST: 'remoteUserInfoList',
+  REMOTE_USER_INFO_EXCLUDE_VOLUMN_LIST: 'remoteUserInfoExcludeVolumeList',
+  CALLER_USER_INFO: 'callerUserInfo',
+  IS_GROUP: 'isGroup',
+  CALL_DURATION: 'callDuration',
+  CALL_TIPS: 'callTips',
+  TOAST_INFO: 'toastInfo',
+  IS_MINIMIZED: 'isMinimized',
+  ENABLE_FLOAT_WINDOW: 'enableFloatWindow',
+  BIG_SCREEN_USER_ID: 'bigScreenUserId',
+  LANGUAGE: 'language',
+  IS_CLICKABLE: 'isClickable',
+  DISPLAY_MODE: 'displayMode',
+  VIDEO_RESOLUTION: 'videoResolution',
+  PUSHER: 'pusher',
+  PLAYER: 'player',
+  IS_EAR_PHONE: 'isEarPhone',
+  IS_MUTE_SPEAKER: 'isMuteSpeaker',
+  SHOW_PERMISSION_TIP: 'SHOW_PERMISSION_TIP',
+  NETWORK_STATUS: 'NetWorkStatus',
+  CALL_ID: 'callID',
+  GROUP_ID: 'groupID',
+  ROOM_ID: 'roomID',
+  ROOM_ID_TYPE: 'roomIdType',
+  SHOW_SELECT_USER: 'showSelectUser',
+  IS_SHOW_ENABLE_VIRTUAL_BACKGROUND: 'isShowEnableVirtualBackground',
+  ENABLE_VIRTUAL_BACKGROUND: 'enableVirtualBackground',
+  GROUP_CALL_MEMBERS: 'groupCallMembers',
+  PUSHER_ID: 'pusherId',
+  IS_FORCE_USE_V2_API: 'isForceUseV2API',
+};
+
+export const CHAT_DATA_KEY: any = {
+  "INNER_ATTR_KIT_INFO": "inner_attr_kit_info",
+};
+
+export const PUSHER_ID = {
+  INITIAL_PUSHER: 'initialPusher',
+  NEW_PUSHER: 'newPusher'
+};
+
+export const NAME = {
+  PREFIX: '【CallService】',
+  AUDIO: 'audio',
+  VIDEO: 'video',
+  LOCAL_VIDEO: 'localVideo',
+  ERROR: 'error',
+  TIMEOUT: 'timeout',
+  RAF: 'raf',
+  INTERVAL: 'interval',
+  DEFAULT: 'default',
+  BOOLEAN: 'boolean',
+  STRING: 'string',
+  NUMBER: 'number',
+  OBJECT: 'object',
+  ARRAY: 'array',
+  FUNCTION: 'function',
+  UNDEFINED: "undefined",
+  UNKNOWN: 'unknown',
+  ALL: 'all',
+  MYSELF: 'myself',
+  DEVICE_LIST: 'deviceList',
+  CAMERA_POSITION: 'cameraPosition',
+  CUSTOM_UI_CONFIG: 'customUIConfig',
+  TRANSLATE: 'translate',
+  ...PUSHER_ID,
+  ...CALL_DATA_KEY,
+  ...CHAT_DATA_KEY,
+};
+
+export const AudioCallIcon = 'https://web.sdk.qcloud.com/component/TUIKit/assets/call.png';
+export const VideoCallIcon = 'https://web.sdk.qcloud.com/component/TUIKit/assets/call-video-reverse.svg';
+export const MAX_NUMBER_ROOM_ID = 2147483647;
+export const DEFAULT_BLUR_LEVEL = 3;
+export const NETWORK_QUALITY_THRESHOLD = 4;
+export enum PLATFORM {
+  // eslint-disable-next-line no-unused-vars
+  MAC = 'mac',
+  // eslint-disable-next-line no-unused-vars
+  WIN = 'win',
+};
+export enum COMPONENT {
+  // eslint-disable-next-line no-unused-vars
+  TUI_CALL_KIT = 14,
+  // eslint-disable-next-line no-unused-vars
+  TIM_CALL_KIT = 15,
+};
+export enum ROOM_ID_TYPE {
+  // eslint-disable-next-line no-unused-vars
+  NUMBER_ROOM_ID = 1,
+  // eslint-disable-next-line no-unused-vars
+  STRING_ROOM_ID = 2,
+};

package/src/TUICallService/const/log.ts

@@ -0,0 +1,9 @@
+/* eslint-disable */
+// 唯一一个变量格式有问题的, 但是为了和原来 TUICallKit 对外暴露的保持一致
+export enum LOG_LEVEL {
+  NORMAL = 0, // 普通级别，日志量较多，接入时建议使用
+  RELEASE = 1, // release级别，SDK 输出关键信息，生产环境时建议使用
+  WARNING = 2, // 告警级别，SDK 只输出告警和错误级别的日志
+  ERROR = 3, // 错误级别，SDK 只输出错误级别的日志
+  NONE = 4, // 无日志级别，SDK 将不打印任何日志
+}

package/src/TUICallService/index.ts

@@ -0,0 +1,37 @@
+import TUICallService, { TUIGlobal, TUIStore, uiDesign } from './CallService/index';
+import {
+  StoreName,
+  NAME,
+  CallRole,
+  CallMediaType,
+  CallStatus,
+  StatusChange,
+  VideoResolution,
+  VideoDisplayMode,
+  AudioPlayBackDevice,
+  FeatureButton,
+  LayoutMode,
+} from './const/index';
+import { t } from './locales/index';
+
+// 实例化
+const TUICallKitAPI = TUICallService.getInstance();
+// 输出产物
+export {
+  TUIGlobal,
+  TUIStore,
+  StoreName,
+  TUICallKitAPI,
+  NAME,
+  CallStatus,
+  CallRole,
+  CallMediaType,
+  StatusChange,
+  VideoResolution,
+  VideoDisplayMode,
+  AudioPlayBackDevice,
+  t,
+  uiDesign,
+  FeatureButton,
+  LayoutMode,
+};

package/src/TUICallService/interface/ICallService.ts

@@ -0,0 +1,70 @@
+import { CallStatus, CallRole } from '../const/index';
+
+type SDKAppID = { SDKAppID: number; } | { sdkAppID: number; };
+export interface IInitParamsBase {
+  userID: string;
+  userSig: string;
+  tim?: any;
+  isFromChat?: boolean;
+  component?: number;
+}
+export type IInitParams = IInitParamsBase & SDKAppID;
+// calls params interface
+export interface ICallsParams {
+  userIDList: Array<string>;
+  type: number;
+  chatGroupID?: string;
+  roomID?: number;
+  strRoomID?: string;
+  userData?: string;
+  timeout?: number;
+  offlinePushInfo?: IOfflinePushInfo;
+}
+// userInfo interface
+export interface IUserInfo {
+  userId: string;
+  nick?: string;
+  avatar?: string;
+  remark?: string;
+  displayUserInfo?: string; // 远端用户信息展示: remark -> nick -> userId, 简化 UI 组件; 本地用户信息展示: nick -> userId
+  isAudioAvailable?: boolean; // 用来设置: 麦克风是否打开
+  isVideoAvailable?: boolean; // 用来设置: 摄像头是否打开
+  volume?: number;
+  isEnter?: boolean; // 远端用户, 用来控制预览远端是否显示 loading 效果; 本地用户, 用来控制 "呼叫"、"接通" 接通后显示的 loading 效果
+  domId?: string; // 播放流 dom 节点, localUserInfo 的 domId = 'localVideo'; remoteUserInfo 的 domId 就是 userId
+}
+export interface IOfflinePushInfo {
+  title?: string,
+  description?: string,
+  androidOPPOChannelID?: string,
+  extension: String
+}
+export interface ICallbackParam {
+  beforeCalling?: (...args: any[]) => void;
+  afterCalling?: (...args: any[]) => void;
+  onMinimized?: (...args: any[]) => void;
+  onMessageSentByMe?: (...args: any[]) => void;
+  kickedOut?: (...args: any[]) => void;
+  statusChanged?: (...args: any[]) => void;
+}
+
+export interface ISelfInfoParams {
+  nickName: string;
+  avatar: string;
+}
+
+export interface IBellParams {
+  callRole?: CallRole; 
+  callStatus?: CallStatus;
+  isMuteBell?: boolean;
+  calleeBellFilePath?: string;
+}
+export interface IInviteUserParams {
+  userIDList: string[];
+  offlinePushInfo?: IOfflinePushInfo;
+}
+
+export interface INetWorkQuality {
+  userId: string;
+  quality: number
+}

package/src/TUICallService/interface/ICallStore.ts

@@ -0,0 +1,55 @@
+import { CallStatus, CallRole, CallMediaType, VideoDisplayMode, VideoResolution, TDeviceList, CameraPosition, ICustomUIConfig } from '../const/index';
+import { IUserInfo, INetWorkQuality } from './index';
+
+export interface IToastInfo {
+  text: string;
+  type?: string; // 默认 info 通知, 取值: 'info' | 'warn' | 'success' | 'error'
+}
+export interface ICallStore {
+  callStatus: CallStatus; // 当前的通话状态, 默认: 'idle'
+  callRole: CallRole; // 通话角色, 默认: 'callee'
+  callMediaType: CallMediaType; // 通话类型
+  localUserInfo: IUserInfo; // 自己的信息, 默认: { userId: '' }
+  localUserInfoExcludeVolume: IUserInfo; // 不包含音量的当前用户信息
+  remoteUserInfoList: Array<IUserInfo>; // 远端用户信息列表, 默认: []
+  remoteUserInfoExcludeVolumeList: Array<IUserInfo>; // 不包含音量的远端用户信息列表
+  // 被叫在未接通时，展示主叫的 userId、头像。但是如果主叫进入通话后再挂断，此时被叫无法知道主叫的信息了。
+  // 因为目前 store 中仅提供了 remoteUserInfoList 数据，主叫离开后，被叫就没有主叫的信息了。因此考虑在 store 中增加 callerUserInfo 字段。
+  callerUserInfo: IUserInfo;
+  isGroup: boolean; // 是否是群组通话, 默认: false
+  callDuration: string; // 通话时长, 默认: '00:00:00'
+  callTips: string; // 通话提示的信息. 例如: '等待谁接听', 'xxx 拒绝通话', 'xxx 挂断通话'
+  toastInfo: IToastInfo; // 远端用户挂断、拒绝、超时、忙线等的 toast 提示信息
+  isMinimized: boolean; // 当前是否悬浮窗模式, 默认: false
+  enableFloatWindow: boolean, // 开启/关闭悬浮窗功能，默认: false
+  bigScreenUserId: string, // 当前大屏幕显示的 userID 用户
+  language: string; // 当前语言
+  isClickable: boolean; // 按钮是否可点击（呼叫后, '挂断' 按钮不可点击, 发送信令后才可以点击）
+  showPermissionTip: boolean; // 设备权限弹窗是否展示（如果有麦克风权限为 false，如果没有麦克风也没有摄像头权限为 true）
+  netWorkQualityList: Array<INetWorkQuality>; // 通话中用户的网络状态
+  deviceList: TDeviceList;
+  callID: string; // callEngine v3.1 support
+  groupID: string;
+  roomID: number | string;
+  roomIdType: number;
+  cameraPosition: CameraPosition; // 前置或后置，值为front, back
+  isMuteSpeaker: boolean;
+  groupCallMembers: IUserInfo[];  // chat 群会话中在通话的成员
+  // TUICallKit 组件上的属性
+  displayMode: VideoDisplayMode; // 设置预览远端的画面显示模式, 默认: VideoDisplayMode.COVER
+  videoResolution: VideoResolution; // 设置视频分辨率, 默认: VideoResolution.RESOLUTION_720P
+  // 小程序相关属性
+  pusher: any;
+  player: any[];
+  isEarPhone: boolean; // 是否是听筒, 默认: false
+  showSelectUser: boolean;
+  // 是否开启虚拟背景, 目前仅 web 支持
+  isShowEnableVirtualBackground: boolean, // 是否显示虚拟背景图标, 默认: false
+  enableVirtualBackground: boolean, // 是否开启虚拟背景， 默认: false
+  // customUIConfig
+  customUIConfig: ICustomUIConfig,
+  pusherId: string, // 重新渲染 live-Pusher 的标识位
+  // translate function
+  translate: Function,
+  isForceUseV2API: boolean, // 是否使用 call/groupCall 接口, 默认: false
+}

package/src/TUICallService/interface/ITUIGlobal.ts

@@ -0,0 +1,36 @@
+/**
+ * @interface TUIGlobal
+ * @property {Object} global 根据运行环境代理 wx、uni、window
+ * @property {Boolean} isPC true 标识是 pc 网页
+ * @property {Boolean} isH5 true 标识是 手机 H5
+ * @property {Boolean} isWeChat true 标识是 微信小程序
+ * @property {Boolean} isApp true 标识是 uniapp 打包的 native app
+ * @property {Boolean} isUniPlatform true 标识当前应用是通过 uniapp 平台打包的产物
+ * @property {Boolean} isOfficial true 标识是腾讯云官网 Demo 应用
+ * @property {Boolean} isWIN true 标识是window系统pc
+ * @property {Boolean} isMAC true 标识是mac os系统pc
+*/
+export interface ITUIGlobal {
+  global: any; // 挂在 wx、uni、window 对象
+  isPC: boolean;
+  isH5: boolean;
+  isWeChat: boolean;
+  isApp: boolean;
+  isUniPlatform: boolean;
+  isOfficial: boolean;
+  isWIN: boolean;
+  isMAC: boolean;
+  /**
+   * 初始化 TUIGlobal 环境变量
+   * @function
+   * @private
+   */
+  initEnv(): void;
+  /**
+   * 初始化 isOfficial
+   * @function
+   * @param {number} SDKAppID 当前实例的应用 SDKAppID
+   * @private
+   */
+  initOfficial(SDKAppID: number): void;
+}

package/src/TUICallService/interface/ITUIStore.ts

@@ -0,0 +1,87 @@
+import { StoreName } from '../const/index';
+
+// 此处 Map 的 value = 1 为占位作用
+export type Task = Record<StoreName, Record<string, Map<(data?: unknown) => void, 1>>>
+
+export interface IOptions {
+  [key: string]: (newData?: any) => void;
+}
+
+/**
+ * @class TUIStore
+ * @property {ICustomStore} customStore 自定义 store，可根据业务需要通过以下 API 进行数据操作。
+*/
+export interface ITUIStore {
+  task: Task;
+  /**
+   * UI 组件注册监听
+   * @function
+   * @param {StoreName} storeName store 名称
+   * @param {IOptions} options UI 组件注册的监听信息
+   * @param {Object} params 扩展参数
+   * @param {String} params.notifyRangeWhenWatch 注册时监听时的通知范围
+   * @example
+   * // UI 层监听会话列表更新通知
+   * let onConversationListUpdated = function(conversationList) {
+   *   console.warn(conversationList);
+   * }
+   * TUIStore.watch(StoreName.CONV, {
+   *   conversationList: onConversationListUpdated,
+   * })
+   */
+  watch(storeName: StoreName, options: IOptions, params?: any): void;
+  /**
+   * UI 组件取消监听回调
+   * @function
+   * @param {StoreName} storeName store 名称
+   * @param {IOptions} options 监听信息，包含需要取消的回调等
+   * @example
+   * // UI 层取消监听会话列表更新通知
+   * TUIStore.unwatch(StoreName.CONV, {
+   *   conversationList: onConversationListUpdated,
+   * })
+   */
+  unwatch(storeName: StoreName, options: IOptions | string): void;
+  /**
+   * 获取 store 中的上一个状态
+   * @function
+   * @param {StoreName} storeName store 名称
+   * @param {String} key 需要获取的 key
+   * @private
+   */
+  getPrevData(storeName: StoreName, key: string): any;
+  /**
+   * 获取 store 中的数据
+   * @function
+   * @param {StoreName} storeName store 名称
+   * @param {String} key 需要获取的 key
+   * @private
+   */
+  getData(storeName: StoreName, key: string): any;
+  /**
+   * 更新 store
+   * - 需要使用自定义 store 时可以用此 API 更新自定义数据
+   * @function
+   * @param {StoreName} storeName store 名称
+   * @param {String} key 需要更新的 key
+   * @example
+   * // UI 层更新自定义 Store 数据
+   * TUIStore.update(StoreName.CUSTOM, 'customKey', 'customData')
+   */
+  update(storeName: StoreName, key: string, data: unknown): void;
+  /**
+   * 重置 store 内数据
+   * @function
+   * @param {StoreName} storeName store 名称
+   * @param {Array<string>} keyList 需要 reset 的 keyList
+   * @param {boolean} isNotificationNeeded 是否需要触发更新
+   * @private
+   */
+  reset: (storeName: StoreName, keyList?: Array<string>, isNotificationNeeded?: boolean) => void;
+  /**
+   * 修改多个 key-value
+   * @param {Object} params 多个 key-value 组成的 object
+   * @param {StoreName} storeName store 名称
+   */
+  updateStore: (params: any, name?: StoreName) => void;
+}

package/src/TUICallService/interface/index.ts

@@ -0,0 +1,4 @@
+export * from './ICallService';
+export * from './ICallStore';
+export * from './ITUIGlobal';
+export * from './ITUIStore';