TIM OFFICIAL website address TIM SDK API document address TRTC official website address TRTC SDK API document address

Concepts and problems that may cause confusion

  1. What is the SDK? Github address Tencent Cloud will be the bottom and background code packaging confusion after the generation of SDK, users download SDK, you can simply use the encapsulated functions. In this package contains sending network requests to automatically communicate with Tencent Cloud servers. IM is the predecessor of QQ instant messaging system. We took away the general module of QQ and integrated it into IM SDK and background services suitable for terminal access. You can think of IM SDK as a QQ without user interface. Integrating IM SDK into your App is equivalent to integrating a QQ kernel into your App.
  2. Concept of SDKAppID and key Parameters that need to be passed in when some SDK interfaces are called. These two things need to be generated from the console. Application acquisition, similar to other cloud platforms. The key is what separates you from yourself, and you need to keep it safe from leakage.
  3. TIM focuses on messaging. TRTC allows users to enter a room for audio and video streaming and receiving. TRTC CALLING allows users to make calls to designated users. Visible problem:Cloud.tencent.com/developer/a…

  1. What is TRTC Audio and video call room? There is no automatic generation, equivalent to a channel that does not need to be created.

1 TIM Im access

IM provides global access, single chat, group chat, message push, data relationship chain hosting, account authentication and other comprehensive solutions, and provides a complete App access, background management interface. The logic of using these functions is to download the SDK package given by Tencent Cloud and call the API encapsulated by the SDK package.

The introduction of the SDK packagesThe document address

It is recommended to use NPM integration to create an instance and register the plug-in according to the document address.

User login registration/authentication

Official website Documentation API documentation

You need two parameters

  • UserID: formerly known as Identifier, the user name used by the user to log in to the IM, that is, the UserID in your App. For example, if you have a user in the App whose ID is 27149, you can use 27149 as the UserID for logging in to the IM.
  • UserSig: indicates the password used by a user to log in to an IM. In essence, it is the data that the App Server encrypts the UserID and other information with the key.

The UserSig document is generated

Here Demo in the front-end generation method: direct use of the official Demo JS file

We need to modify it

The reason: Because the lib-generate-test-usersig.min.js in Demo registers the global method GenerateTestUserSig() in window, and GenerateTestUserSig calls this method, It is not registered in our code, so we cannot use it directly, otherwise we will be prompted that the global method cannot be found.

Modification: Insert GenerateTestUserSig. Js into lib-generate-test-usersig.min.js and export it. In this case, you can directly introduce the genTestUserSig() function in lib-generate-test-usersig.min.js where the UserSig needs to be generated.

Two inspiring places: this blog and Github.

Listening logic with SDK Ready

After a successful login, the SDK cannot be used immediately. Instead, interfaces requiring authentication, such as sendMessage, can be invoked only after the SDK is in the ready state (monitoring EVENT tim.event.sdk_ready).

My solution here is to add a listener where the call needs to be made, and cancel it once the listener is executed.

Group related

Related documents Address group system introduction

Use of group custom fields

There is no example on the official website. How to use it is:

      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 }],
      });
Copy the code

Array + key-value pair form, value preferably toString(). When take is such groupProfile groupCustomField [r]. “0” value

Message is sent

The API documentation needs to pay attention to the coordination between the asynchronous creation of messages and the asynchronous sending of messages, and the message sent by oneself is not received, if you need to display the message sent by oneself, need to do separate processing.

Other useful document addresses

The fields of the received messages. The received messages are stored in an array. Each message is in E2 format and needs to be iterated through.

2 TRTC Real-time audio and video access

API document address

As with TIM, the first step is to introduce the SDK

The official website address is simpler than TIM.

To join the room

Unlike TIM, there is no longer the concept of creating a room. When you join, you create, and when you leave, you destroy. After joining a room call, the process is as follows

  1. Create the TRTC client

        const client = TRTC.createClient({
      mode: "rtc",
      sdkAppId: window.options.SDKAppID,
      userId: state.formState.userID,
      userSig: state.userSig,
      useStringRoomId: true,
    });
Copy the code

    UseStringRoomId: true if RoomID is of type number, it must be an integer [1, 4294967294]. See here for detailed restrictions

  2. If the client listens, it needs to listen after entering. Otherwise, it may miss the message when listening after joining

    client.on("stream-added", (event) => { const remoteStream = event.stream; Console. log(" remoteStream added: "+ remotestream.getid ()); Client.subscribe (remoteStream); }); client.on("stream-subscribed", (event) => { const remoteStream = event.stream; Console. log(" remoteStream subscribed successfully: "+ remotestream.getid ()); Remotestream. play("remote_stream"); });Copy the code

  3. Initializing the local stream This is the same as the official document, but it’s important to note that this should not be repeated in any way, otherwise two or more local video Windows will appear, right

  4. Add room and push flow, need to join and then push flow, here I do not distinguish the needs, just directly write together

    Window.client.join ({roomId: roomId}).catch((error) => {console.error(" failed to enter the room "+ roomId + error); console.log(roomID); }).then(() => {console.log(" successful entry "); Window.client.publish (localStream).catch((error) => {console.error(" failed to publish localStream "+ error); }).then(() => {console.log(" local stream published successfully "); }); });Copy the code

  5. Cancel the push stream and exit the room. When cancel the push stream, the local screen does not change, and the other side’s own screen will disappear. When exit the room, the local other side’s screen will disappear, but the video element will not be automatically removed. Here is also different from the official website, I wrote together.

    console.log("leave1v1Room Action"); Window.client.unpublish (window.localstream).then(() => {console.log(" unpublish "); Client.leave ().then(() => {// Check out successfully, you can call client.join again to enter the room and start a new call. console.log("leave success"); }). Catch ((error) => {console.error(" failed to check out "+ error); // The error is unrecoverable and the page needs to be refreshed. }); });Copy the code

Refer to the link

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