@tencent-rtc/mcp 1.0.0

package/resource/doc/tuicallkit/react/api_TUICallKit.md

@@ -0,0 +1,354 @@
+## TUICallKit (including UI Interface)
+
+## TUICallKit APIs
+
+UICallKit API, you can quickly implement a WeChat-like audio and video call scenario through simple interfaces.
+<table>
+<tr>
+<td rowspan="1" colSpan="1" >API</td>
+
+<td rowspan="1" colSpan="1" >Description</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >[login](https://write.woa.com/document/162412580951224320)</td>
+
+<td rowspan="1" colSpan="1" >Login.</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >[logout](https://write.woa.com/document/162412580951224320)</td>
+
+<td rowspan="1" colSpan="1" >Logout.</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >[calls](https://write.woa.com/document/162412580951224320)</td>
+
+<td rowspan="1" colSpan="1" >Initiate a one-to-one or multi-person call.</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >[call](https://write.woa.com/document/162412580951224320)</td>
+
+<td rowspan="1" colSpan="1" >To make a one-on-one call, supports custom room ID, call timeout, offline push content, and more.</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >[groupCall](https://write.woa.com/document/162412580951224320)</td>
+
+<td rowspan="1" colSpan="1" >To make a group call, supports custom room ID, call timeout, offline push content, and more.</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >[joinInGroupCall](https://write.woa.com/document/162412580951224320)</td>
+
+<td rowspan="1" colSpan="1" >Join a group call.</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >[setCallingBell](https://write.woa.com/document/162412580951224320)</td>
+
+<td rowspan="1" colSpan="1" >Customize user's ringtone.</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >[enableMuteMode](https://write.woa.com/document/162412580951224320)</td>
+
+<td rowspan="1" colSpan="1" >Enable/Disable Ringtone.</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >[enableVirtualBackground](https://write.woa.com/document/162412580951224320)</td>
+
+<td rowspan="1" colSpan="1" >Enable/disable blurry background feature.</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >[setScreenOrientation](https://write.woa.com/document/162412580951224320)</td>
+
+<td rowspan="1" colSpan="1" >Set Screen Orientation.</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >[on](https://write.woa.com/document/162412580951224320)</td>
+
+<td rowspan="1" colSpan="1" >Listen to TUICallKit events.</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >[off](https://write.woa.com/document/162412580951224320)</td>
+
+<td rowspan="1" colSpan="1" >Cancel listening to TUICallKit events.</td>
+</tr>
+</table>
+
+
+## TUICallEvent
+
+TUICallEvent is the callback event class corresponding to TUICallKit. Through this callback, you can listen to the callback events you are interested in.
+<table>
+<tr>
+<td rowspan="1" colSpan="1" >Event</td>
+
+<td rowspan="1" colSpan="1" >Description</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >[TUICallEvent.onError](https://write.woa.com/document/162412628639113216)</td>
+
+<td rowspan="1" colSpan="1" >Error Callback during Call.</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >[TUICallEvent.onCallReceived](https://write.woa.com/document/162412628639113216)</td>
+
+<td rowspan="1" colSpan="1" >Callback for a Call Request.</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >[TUICallEvent.onCallCancelled](https://write.woa.com/document/162412628639113216)</td>
+
+<td rowspan="1" colSpan="1" >Callback for Call Cancellation.</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >[TUICallEvent.onCallBegin](https://write.woa.com/document/162412628639113216)</td>
+
+<td rowspan="1" colSpan="1" >Callback for Call Connection.</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >[TUICallEvent.onCallEnd](https://write.woa.com/document/162412628639113216)</td>
+
+<td rowspan="1" colSpan="1" >Callback for Call Termination.</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >[TUICallEvent.onUserReject](https://write.woa.com/document/162412628639113216)</td>
+
+<td rowspan="1" colSpan="1" >xxxx User declines the call Callback.</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >[TUICallEvent.onUserNoResponse](https://write.woa.com/document/162412628639113216)</td>
+
+<td rowspan="1" colSpan="1" >xxxx User Non-response Callback.</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >[TUICallEvent.onUserLineBusy](https://write.woa.com/document/162412628639113216)</td>
+
+<td rowspan="1" colSpan="1" >xxxx User Busy Line Callback.</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >[TUICallEvent.onUserJoin](https://write.woa.com/document/162412628639113216)</td>
+
+<td rowspan="1" colSpan="1" >xxxx User Joins Call Callback.</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >[TUICallEvent.onUserLeave](https://write.woa.com/document/162412628639113216)</td>
+
+<td rowspan="1" colSpan="1" >A user left the call.</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >[TUICallEvent.onCallMediaTypeChanged](https://write.woa.com/document/162412628639113216)</td>
+
+<td rowspan="1" colSpan="1" >Callback for a change in the Call's Media Type.</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >[TUICallEvent.onKickedOffline](https://write.woa.com/document/162412628639113216)</td>
+
+<td rowspan="1" colSpan="1" >Current user kicked offline.</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >[TUICallEvent.onUserSigExpired](https://write.woa.com/document/162412628639113216)</td>
+
+<td rowspan="1" colSpan="1" >Ticket expired while online.</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >[TUICallEvent.onUserVideoAvailable](https://write.woa.com/document/162412628639113216)</td>
+
+<td rowspan="1" colSpan="1" >Whether a user has a video stream.</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >[TUICallEvent.onUserAudioAvailable](https://write.woa.com/document/162412628639113216)</td>
+
+<td rowspan="1" colSpan="1" >Whether a user has an audio stream.</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >[TUICallEvent.onUserVoiceVolumeChanged](https://write.woa.com/document/162412628639113216)</td>
+
+<td rowspan="1" colSpan="1" >The volume levels of all users.</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >[TUICallEvent.onUserNetworkQualityChanged](https://write.woa.com/document/162412628639113216)</td>
+
+<td rowspan="1" colSpan="1" >The network quality of all users.</td>
+</tr>
+</table>
+
+
+## TUICallEngine (No UI)
+
+`TUICallEngine` is an audio/video call component that **does not include UI elements**. If `TUICallKit` does not meet your requirements, you can use the APIs of `TUICallEngine` to customize your project.
+<table>
+<tr>
+<td rowspan="1" colSpan="1" >API</td>
+
+<td rowspan="1" colSpan="1" >Description</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >[createInstance](https://write.woa.com/document/165654454250659840)</td>
+
+<td rowspan="1" colSpan="1" >Creates a `TUICallEngine` instance (singleton mode).</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >[destroyInstance](https://write.woa.com/document/165654454250659840)</td>
+
+<td rowspan="1" colSpan="1" >Terminates a `TUICallEngine` instance (singleton mode).</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >[login](https://write.woa.com/document/165654454250659840)</td>
+
+<td rowspan="1" colSpan="1" >Authenticates the basic audio/video call capabilities.</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >[on](https://write.woa.com/document/165654454250659840)</td>
+
+<td rowspan="1" colSpan="1" >Registers an event listener.</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >[off](https://write.woa.com/document/165654454250659840)</td>
+
+<td rowspan="1" colSpan="1" >Unregisters an event listener.</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >[call](https://write.woa.com/document/165654454250659840)</td>
+
+<td rowspan="1" colSpan="1" >Makes a one-to-one call.</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >[accept](https://write.woa.com/document/165654454250659840)</td>
+
+<td rowspan="1" colSpan="1" >Accepts a call.</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >[reject](https://write.woa.com/document/165654454250659840)</td>
+
+<td rowspan="1" colSpan="1" >Rejects a call.</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >[ignore](https://write.woa.com/document/165654454250659840)</td>
+
+<td rowspan="1" colSpan="1" >Ignores a call.</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >[hangup](https://write.woa.com/document/165654454250659840)</td>
+
+<td rowspan="1" colSpan="1" >Ends a call.</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >[switchCallMediaType](https://write.woa.com/document/165654454250659840)</td>
+
+<td rowspan="1" colSpan="1" >Changes the call type, for example, from video call to audio call.</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >[startRemoteView](https://write.woa.com/document/165654454250659840)</td>
+
+<td rowspan="1" colSpan="1" >Subscribes to the video stream of a remote user.</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >[stopRemoteView](https://write.woa.com/document/165654454250659840)</td>
+
+<td rowspan="1" colSpan="1" >Unsubscribes from the video stream of a remote user.</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >[openCamera](https://write.woa.com/document/165654454250659840)</td>
+
+<td rowspan="1" colSpan="1" >Turns the camera on.</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >[switchCamera](https://write.woa.com/document/165654454250659840)</td>
+
+<td rowspan="1" colSpan="1" >Switches between the front and rear cameras.</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >[closeCamera](https://write.woa.com/document/165654454250659840)</td>
+
+<td rowspan="1" colSpan="1" >Turns the camera off.</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >[openMicrophone](https://write.woa.com/document/165654454250659840)</td>
+
+<td rowspan="1" colSpan="1" >Turns the mic on.</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >[closeMicrophone](https://write.woa.com/document/165654454250659840)</td>
+
+<td rowspan="1" colSpan="1" >Turns the mic off.</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >[selectAudioPlaybackDevice](https://write.woa.com/document/165654454250659840)</td>
+
+<td rowspan="1" colSpan="1" >Selects the audio playback device (receiver or speaker).</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >[setVideoRenderParams](https://write.woa.com/document/165654454250659840)</td>
+
+<td rowspan="1" colSpan="1" >Set the rendering mode of video image.</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >[setVideoEncoderParams](https://write.woa.com/document/165654454250659840)</td>
+
+<td rowspan="1" colSpan="1" >Set the encoding parameters of video encoder.</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >[setBeautyLevel](https://write.woa.com/document/165654454250659840)</td>
+
+<td rowspan="1" colSpan="1" >Set beauty level, support turning off default beauty.</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >[setSelfInfo](https://write.woa.com/document/165654454250659840)</td>
+
+<td rowspan="1" colSpan="1" >Sets the alias and profile photo.</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >[enableMultiDeviceAbility](https://write.woa.com/document/165654454250659840)</td>
+
+<td rowspan="1" colSpan="1" >Sets whether to enable multi-device login for `TUICallEngine` .</td>
+</tr>
+</table>

package/resource/doc/tuicallkit/react/how_to_integrated_react_callkit.md

@@ -0,0 +1,166 @@
+This article will guide you through the process of integrating the TUICallKit component quickly. By following this documentation, you can complete the access work in just 10 minutes and ultimately obtain an application with a complete user interface as well as audio and video calling features.
+<table>
+<tr>
+<td rowspan="1" colSpan="1" >Video Call</td>
+
+<td rowspan="1" colSpan="1" >Group call</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027182394/1390039d18d011ef9ff4525400f65c2a.png)</td>
+
+<td rowspan="1" colSpan="1" >![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027182394/4cd1634b18ce11efb8185254005ac0ca.png)</td>
+</tr>
+</table>
+
+
+## Environment Preparations
+- [Node.js](https://nodejs.org/en/) version 16+.
+
+- two Mobile phone.
+
+
+## Step 1. Activate the service
+
+Refer to [Activate the Service](https://trtc.io/document/59832?platform=web&product=call) to obtain `SDKAppID, SDKSecretKey`, which will be used as **Mandatory Parameters in **[Initialize the TUICallKit](https://write.woa.com/document/133160392291844096)**.**
+
+## Step 2. Download the TUICallKit
+1. Download the [@tencentcloud/call-uikit-react-native](https://www.npmjs.com/package/@tencentcloud/call-uikit-react) component.
+
+   
+   
+   【shell】
+   ``` bash
+   yarn add @tencentcloud/call-uikit-react-native
+   ```
+2. Copy the `debug` directory to your project directory `src/debug`, it is necessary when generating userSig locally.
+
+
+   
+
+
+【MacOS】
+``` bash
+cp -r node_modules/@tencentcloud/call-uikit-react-native/src/debug ./src
+```
+
+
+【Windows】
+``` bash
+xcopy node_modules\@tencentcloud\call-uikit-react\src\debug .\src\debug /i /e
+```
+
+
+## Step 3. Login the TUICallKit
+
+You can choose to import the sample code in the `/src/App.tsx` file.
+1. Import the call uikit.
+
+   ``` javascript
+   import { TUICallKit, MediaType } from '@tencentcloud/call-uikit-react-native';
+   import * as GenerateTestUserSig from "./debug/GenerateTestUserSig-es"; // Refer to Step 2.2
+   ```
+2. using the [TUICallKit.login](https://write.woa.com/document/162412491425603584) API to log in to the component, you need to `fill in``SDKAppID, SDKSecretKey `as two parameters in the code.
+
+   ``` javascript
+     const handleLogin = async () => {
+       const userId = "denny";     // Please replace with your userId
+       const SDKAppID = 0;         // Please replace with the SDKAppID obtained from step 1
+       const SecretKey = "****";   // Please replace with the SDKSecretKey obtained from step 1
+       
+       const { userSig } = genTestUserSig({ userID: userId, SDKAppID, SecretKey });
+   
+       TUICallKit.login(
+         {
+           sdkAppId: SDKAppID,
+           userId,
+           userSig,
+         },
+         (res) => {},
+         (errCode, errMsg) => {}
+       );
+     };
+   ```
+<table>
+<tr>
+<td rowspan="1" colSpan="1" >**Parameter**</td>
+
+<td rowspan="1" colSpan="1" >**Type**</td>
+
+<td rowspan="1" colSpan="1" >**Note**</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >userId</td>
+
+<td rowspan="1" colSpan="1" >String</td>
+
+<td rowspan="1" colSpan="1" >**Unique identifier of the user, **`defined by you`**, **it is allowed to contain only upper and lower case letters (a-z, A-Z), numbers (0-9), underscores, and hyphens.</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >SDKAppID</td>
+
+<td rowspan="1" colSpan="1" >Number</td>
+
+<td rowspan="1" colSpan="1" >The unique identifier for the audio and video application created in the [Tencent RTC Console](https://console.trtc.io/).</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >SecretKey</td>
+
+<td rowspan="1" colSpan="1" >String</td>
+
+<td rowspan="1" colSpan="1" >The SDKSecretKey of the audio and video application created in the [Tencent RTC Console](https://console.trtc.io/).</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >userSig</td>
+
+<td rowspan="1" colSpan="1" >String</td>
+
+<td rowspan="1" colSpan="1" >A security protection signature used for user log in authentication to confirm the user's identity and prevent malicious attackers from stealing your cloud service usage rights.</td>
+</tr>
+</table>
+   
+
+   > **Explanation of userSig:**
+   > 
+>   - **Development environment:** If you are running a demo locally and developing debugging, you can use the `genTestUserSig` (Refer to Step 3.2) function in the debug file to generate a `userSig`. In this method, SDKSecretKey is vulnerable to decompilation and reverse engineering. Once your key is leaked, attackers can steal your Tencent Cloud traffic.
+>   - **Production environment: **If your project is going live, please use the [Server-side Generation of UserSig](https://trtc.io/document/35166) method.
+
+
+## Step 4. Make your first call
+1. using the [TUICallKit.call API](https://write.woa.com/document/162412580951224320) to make a call.
+
+   ``` javascript
+   //【3】Make a 1v1 video call
+   const users: string[] = ["mike"];
+   const call = async () => {
+     await TUICallKit.calls({
+       userID: users,
+       mediaType: MediaType.Video,
+     });
+   };
+   ```
+2. **After both userID login to successfully**,  make a call..
+
+<table>
+<tr>
+<td rowspan="1" colSpan="1" >Caller initiates an audio call</td>
+
+<td rowspan="1" colSpan="1" >Callee receives an audio call request</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027119876/078b6eea190411ef8a48525400762795.png)<br></td>
+
+<td rowspan="1" colSpan="1" >![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027119876/077a2a05190411ef88ad5254002977b6.png)</td>
+</tr>
+</table>
+
+
+## FAQs
+- If you encounter any problems with access and use, please refer to [FAQs](https://trtc.io/document/51024?platform=web&product=call).
+
+- If you have any requirements or feedback, you can contact: info_rtc@tencent.com.

package/resource/doc/tuicallkit/react/how_to_run_react_callkit_demo.md

@@ -0,0 +1,61 @@
+This article will guide you on how to quickly run through the Audio and Video Call Demo. By following this document, you can have the Demo up and running in 10 minutes, and ultimately experience an Audio and Video Call feature with a complete UI interface.
+<table>
+<tr>
+<td rowspan="1" colSpan="1" >1v1 Video Call</td>
+
+<td rowspan="1" colSpan="1" >Group call</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100029836296/cf76ae94b6d911ef916f525400f69702.png)</td>
+
+<td rowspan="1" colSpan="1" >![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100029836296/cf6073deb6d911efbb92525400329841.png)</td>
+</tr>
+</table>
+
+
+## Step 1: Download the demo
+1. Open the terminal and clone the repository.
+
+   ``` bash
+   git clone https://github.com/Tencent-RTC/TUICallKit.git
+   ```
+2. Install dependencies.
+
+   ``` bash
+   cd ./TUICallKit/ReactNative
+   yarn install
+   ```
+
+## Step 2: Configure the demo
+1. [Go to the Activate Service page](https://trtc.io/document/59832?platform=web&product=call&menulabel=web) and get `the SDKAppID and SDKSecretKey`![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100029836296/f829ea3fb6e711ef9cb452540075b605.png)
+
+2. Fill them in the `TUICallKit/ReactNative/src/debug/GenerateTestUserSig-es.js` file.
+
+
+   ![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100029836296/1806fd5fb6db11ef9448525400fdb830.png)
+
+
+## Step 3: Run the demo
+``` bash
+# TUICallKit/ReactNative
+yarn start
+```
+
+## Step 4: Make the first call
+
+> **Note:**
+> 
+
+> To experience the complete audio and video calling process, please log into the Demo on two devices as two different users, with one acting as the caller and the other as the callee.
+> 
+
+- log in to userID (defined by you).
+
+
+   ![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100029836296/6528eb62b6e911ef9cb452540075b605.png)
+
+- Input the callee's userID and click all to experience your first call.
+
+
+   ![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100029836296/100d4889b6ec11ef9cb452540075b605.png)