【將QQ內核融入應用】騰訊雲即時通訊TIM、實時音視頻TRTC —— Web端接入經驗分享

即時通訊TIM官網地址 即時通訊TIM SDK API文檔地址 實時音視頻TRTC官網地址 實時音視頻TRTC SDK API文檔地址

概念與可能形成疑惑的問題

0. SDK 是什麼？ Github 地址 騰訊雲將底層與後臺代碼封裝混淆以後生成 SDK，用戶下載 SDK 後，便可簡單使用封裝的功能。在這個包內包含了發送網絡請求自動與騰訊雲的服務器通訊。 即時通訊 IM 的前身是 QQ 的即時通訊系統，咱們抽離 QQ 的通用模塊，並將其整合成適合終端接入的 IM SDK 及後臺服務。 您能夠把 IM SDK 理解爲一個沒有用戶交互界面的 QQ，把 IM SDK 集成到您的 App 裏，就至關於把一個 QQ 的內核集成在您的 App 內部。
1. SDKAppID 與密鑰的概念 在調 部分 SDK 接口時，須要傳入的參數。 這兩個東西須要從控制檯生成。應用得到，與其餘雲平臺操做步驟相似。 密鑰是區分你是不是本人的關鍵，須要保管好，以防泄露。
2. TIM 即時通訊， TRTC 實時音視頻，TRTC CALLING 三者的關係 TIM 專一於消息通訊，TRTC 可使用戶進入一個房間進行音視頻推流與接收，TRTC CALLING 能夠向指定用戶進行呼叫。可見問題：cloud.tencent.com/developer/a…

4. TRTC 音視頻通話房間是什麼？ 不存在會自動生成，至關於一個不須要建立的頻道。

1 TIM 即時通訊接入

即時通訊 IM 提供全球接入、單聊、羣聊、消息推送、資料關係鏈託管、賬號鑑權等全方位解決方案，並提供完備的 App 接入、後臺管理接口。 使用這些功能的邏輯是，下載騰訊雲給出的SDK包，根據SDK包封裝好的API進行調用。

引入 SDK 包 文檔地址

推薦使用NPM 集成 建立實例並註冊插件按照文檔地址來便可，再也不贅述。

用戶登陸註冊/鑑權

官網文檔 API文檔

須要兩個參數

• UserID：舊稱爲 Identifier，用戶登陸即時通訊 IM 時使用的用戶名，即您 App 裏的用戶 ID。 例如，App 裏有一個用戶，該用戶的 ID 是27149 ，那麼您能夠用27149做爲登陸即時通訊 IM 的 UserID。
• UserSig：用戶登陸即時通訊 IM 時使用的密碼，其本質是 App Server 用密鑰對 UserID 等信息加密後的數據。

生成UserSig 文檔

此處演示在前端生成方法： 直接用官方Demo裏的js文件

咱們須要加以修改

緣由：由於Demo裏的 lib-generate-test-usersig.min.js是註冊了全局方法GenerateTestUserSig()在 window 裏，而後GenerateTestUserSig調用了這個方法，而咱們的代碼裏沒有註冊過，因此咱們不能直接使用，不然會提示找不到全局方法。

修改：將GenerateTestUserSig.js粘貼進lib-generate-test-usersig.min.js，並export 導出，這樣須要生成UserSig的地方直接引入lib-generate-test-usersig.min.js裏面的genTestUserSig()函數便可。

兩個有啓發的地方：這個博客 和 github 。

監聽邏輯 與 SDK Ready

登陸成功後，並不能立刻使用SDK，而是需等待 sdk 處於 ready 狀態後（監聽事件 TIM.EVENT.SDK_READY）才能調用 sendMessage 等須要鑑權的接口。

這裏個人解決方案是：在須要在調用的地方添加監聽，在監聽執行一次以後即撤銷。

羣組相關

相關文檔地址 羣組系統介紹

羣組自定義字段的使用

官網沒有示例，使用方法爲：

     let promise = window.tim.createGroup({
        type: TIM.TYPES.GRP_AVCHATROOM,
        name: state.formState.roomName,
        groupID: state.formState.roomID,
        introduction: state.formState.roomIntro,
        groupCustomField: [{ key: "partyBeginTime", value: partyBeginTime }],
      });
複製代碼

數組 + 鍵值對的形式，value 最好 toString()。 在取的時候是這樣的 groupProfile.groupCustomField["0"].value

消息發送

API文檔 須要注意的是建立消息的異步與發送消息異步的協調，並且本身發送的消息本身是不會收到的，若是須要顯示本身發的消息，須要單獨作處理。

其餘頗有用的文檔地址

EVENT 事件列表文檔 羣成員對象的字段 接受到的消息的字段 這裏接收到的消息存在一個數組裏，每個消息都是 e2 格式，須要遍歷出來。

2 TRTC 實時音視頻接入

API 文檔地址

與 TIM 相同，第一步是引入SDK

官網地址 比 TIM 更簡單一點。

加入房間

這裏與 TIM 不一樣的是，再也不有建立房間這一律念，加入即建立，退出即銷燬。 加入房間通話後的流程爲

0. 建立TRTC client

      const client = TRTC.createClient({
         mode: "rtc",
         sdkAppId: window.options.SDKAppID,
         userId: state.formState.userID,
         userSig: state.userSig,
         useStringRoomId: true,
       });
   複製代碼

   注意，若是 RoomID 你想整成字符串，須要跟上述代碼同樣 useStringRoomId: true，不然roomId 爲 number 類型時，取值要求爲 [1, 4294967294] 的整數; 詳細限制請看這裏

1. client 加監聽，進來以後須要監聽，不然加入以後再監聽可能錯過消息

      client.on("stream-added", (event) => {
         const remoteStream = event.stream;
         console.log("遠端流增長: " + remoteStream.getId());
         //訂閱遠端流
         client.subscribe(remoteStream);
       });
       client.on("stream-subscribed", (event) => {
         const remoteStream = event.stream;
         console.log("遠端流訂閱成功：" + remoteStream.getId());
         // 播放遠端流
         remoteStream.play("remote_stream");
       });
   複製代碼

2. 初始化本地流 這裏與 官方文檔 無異，須要額外注意的一點是，這裏不管如何不能重複執行，不然會出現兩個乃至多個本地視頻窗口

3. 加入房間與推流，須要先加入以後再推流，這裏我沒有區分的需求，索性直接合起來寫

      window.client
         .join({ roomId: roomID })
         .catch((error) => {
           console.error("進房失敗 " + roomID + error);
           console.log(roomID);
         })
         .then(() => {
           console.log("進房成功");
           window.client
             .publish(localStream)
             .catch((error) => {
               console.error("本地流發佈失敗 " + error);
             })
             .then(() => {
               console.log("本地流發佈成功");
             });
         });
   複製代碼

4. 取消推流與退出房間，取消推流時，本地的畫面其實沒有任何改變，對方那裏本身的畫面會消失，退出房間時，本地的對方畫面消失，但都不會自動移除 video 元素，若有須要，本身移除。這裏也與官網不同，我合起來寫了。

      console.log("leave1v1Room Action");
       window.client.unpublish(window.localStream).then(() => {
         console.log("取消推送");
         client
           .leave()
           .then(() => {
             // 退房成功，可再次調用client.join從新進房開啓新的通話。
             console.log("leave success");
           })
           .catch((error) => {
             console.error("退房失敗 " + error);
             // 錯誤不可恢復，須要刷新頁面。
           });
       });
   複製代碼

參考連接

www.cnblogs.com/fqh123/p/12… www.zhongweipeng.cn/2020/03/31/… blog.csdn.net/b7410852963…