使用patch-package使得TRTCCalling可以自定义roomID

待我称王封你为后i 2022-09-11 07:18 20阅读 0赞

## 视频通话技术背景 ##

**视频通话**是基于腾讯云的“实时音视频”产品，其根据业务复杂度提供三种版本的sdk：**精简版（TRTC）、专业版（Professional）和企业版（Enterprise）**。我们这里用的是精简版（TRTC） ，在精简版（TRTC）的基础上，它还提供了“实时语音通话”的**场景实践**相关的包**TRTCCalling**，v1.5中用到的就是TRTCCalling。结构图如下：  
![技术结构图][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAS291X0hp_size_20_color_FFFFFF_t_70_g_se_x_16]

## 前端代码 ##

### 业务逻辑背景 ###

呼叫需要传入参数userID和roomID：客户端当前登录的userID是唯一的（同一个人不同身份不能同时登录），因此能传userId就能保证打给唯一用户。但是userID和签署信息是多对多的关系，因此还需要传一个用户签署ID——userSignId（在这里通过callUser的入参roomID来传）来告诉客户端对应哪一条签署信息。

### TRTC ###

实现过程参考文档：

*  [搭建自己的视频通话][Link 1]
 *  实时视频通话场景实践的[官方demo][demo]  
    版本

"tim-js-sdk": "^2.13.1",
        "trtc-calling-js": "^0.10.2",
        "trtc-js-sdk": "^4.11.4",
        "tsignaling": "^0.7.0",

#### Model ####

src/models/TRTCState.ts:  
用model维护TRTC的全局状态，包括

1.  meetingUserMap（当前会议的人群）： meetingUserMap的key是UserSignStatus中的roomId，在每条签署详情的办理人信息中，每个办理人有自己的roomId并且不重复，所以用roomId作为key。
2.  roomID：当前版本还是一对一通过，在办理详情-开始办理-选择办理人之后，更新为当前办理的roomID。
3.  callStatus：视频的连接状态，有idle, calling, connected
4.  modal控制当前应该显示那个弹框，属于遗留的代码  
    …

值得注意的是，这里用到的useClassState是自定义hook，支持合并更新状态。

export interface ITRTCContextData { 
      /** 会议人群，用roomId作为key——全局唯一 Map<roomId, obj> */
      meetingUserMap: Map<string, UserSignStatus | UserInfoType>;
      /** todo 一对一通话，暂存handleCallUser中的roomID，后续多人通话方案暂定 */
      roomID?: number;
      callStatus: ECallStatus; // 状态, idle, calling, connected
      /** 是否是发起方 */
      isInviter?: boolean;
      userAccepted?: boolean;
      modal: 'tip' | 'center' | '';
      signDetail?: ISignDetailVO;
      sponsorInfo?: SponsorInfo;
      invitedInfo?: TRTCCalling.InvitedInfo;
    }

#### TRTC/index.ts ####

src/components/TRTC/index.tsx  
该文件中主要做了如下事情：  
登录TRTC：trtcCalling.login()  
注册事件：USER\_ACCEPT、USER\_ENTER、CALLING\_CANCEL、NO\_RESP等

#### useTRTC ####

src/components/TRTC/hooks.ts  
主要功能是:

1.  维护meetingUserMap，提供用户加入会议userJoinMeeting、用户离开会userLeaveMeeting等方法
2.  提供呼叫用户handleCallUser方法

## 注意，这里有hack！！ ##

### patch-package ###

在前文逻辑背景中提到过，客户端还需要userSignID来确定签署详情，故利用另一参数roomID来传递参数。但因为在trtc-calling-js.js v0.6.2中callUser方法暴露的入参只有一个userID，如下：

declare class TRTCCalling { 
       call(options: TRTCCalling.CallOptions): Promise<void>;
    }

/** 1对1通话邀请参数类型 */
    interface CallOptions extends UserInfo { 
      type: 1 | 2;
      timeout: number;
    
    }

/** 共有参数类型 */
    interface UserInfo { 
      userID: string;
    }

查看trtc-calling-js.js v0.6.2混淆后的代码，可发现其roomID是方法内部通过生成的随机值  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAS291X0hp_size_20_color_FFFFFF_t_70_g_se_x_16 1]

故利用patch-package，修改trtc-calling-ts.js包其所有generateRandomRoomID调用的地方，改为从参数获取，如下：  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAS291X0hp_size_20_color_FFFFFF_t_70_g_se_x_16 2]

并修改@types/trtc-calling-ts.js 的类型，如下：

/** 1对1通话邀请参数类型 */
    interface CallOptions extends UserInfo { 
      type: 1 | 2;
      timeout: number;
      roomID: number; // new add
    }

便可实现自定义roomID。

### ps.坑 ###

web端roomId只支持number类型，不支持string  
视频通话只支持localhost或https，不支持http

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAS291X0hp_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/a0f908660cb545e1ad2a085b00ddb038.png
[Link 1]: https://cloud.tencent.com/document/product/647/49789#.E6.90.AD.E5.BB.BA.E8.87.AA.E5.B7.B1.E7.9A.84.E8.A7.86.E9.A2.91.E9.80.9A.E8.AF.9D
[demo]: https://github.com/tencentyun/TRTCSDK/tree/master/Web/TRTCScenesDemo/trtc-calling-web
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAS291X0hp_size_20_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220828/0b5870dd5ee34d23b6324fb55a1a8751.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAS291X0hp_size_20_color_FFFFFF_t_70_g_se_x_16 2]: /images/20220828/c98b523aab8d48d69b7ff413aef45c9f.png