Skip to content

Commit 7b5f5b3

Browse files
raingxmraingxm
authored
Merge pull request #43 from dawnrking/main
【web】update English Readme
2 parents adc69d3 + 3c2ca9c commit 7b5f5b3

File tree

4 files changed

+229
-4
lines changed

4 files changed

+229
-4
lines changed

‎Web/README.en.md‎

Lines changed: 224 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,224 @@
1+
# Quick Run of TUICalling Demo for web
2+
3+
_[中文](README.md) | English_
4+
5+
This document describes how to quickly run the TRTCCalling demo for web, which contains the audio call and video call scenarios:
6+
7+
\- Audio call: Refers to audio-only interaction and supports multi-person interactive audio chat.
8+
9+
\- Video call: Refers to video call used in video communication scenarios such as online customer service.
10+
11+
### Environment requirements
12+
* Use the latest version of Chrome.
13+
* TRTCCalling uses the following ports and domain name for data transfer, which should be added to the allowlist of the firewall. After configuration, please use [Official Demo](https://web.sdk.qcloud.com/component/trtccalling/demo/web/latest/index.html) to check whether the ports work.
14+
- TCP port: 8687
15+
- UDP ports: 8000, 8080, 8800, 843, 443, 16285
16+
- Domain name: qcloud.rtc.qq.com
17+
18+
>
19+
>- Normally, the demo needs to be deployed on the server and then accessed through `https://domain/xxx`. You can also build a server locally and access the demo through `localhost:port`.
20+
> - Currently, the desktop version of Chrome offers better support for the features of TRTC SDK for desktop browsers; therefore, Chrome is recommended for the demo.
21+
22+
### Prerequisites
23+
24+
You have [signed up for a Tencent Cloud account](https://intl.cloud.tencent.com/document/product/378/17985) and completed [identity verification](https://intl.cloud.tencent.com/document/product/378/3629).
25+
26+
### Using demo UI
27+
28+
<span id="step1"></span>
29+
30+
#### Step 1. Create an application
31+
32+
1. Log in to the TRTC console and select **Development Assistance** > **[Demo Quick Run](https://console.cloud.tencent.com/trtc/quickstart)**.
33+
34+
2. Click **Start Now**, enter an application name such as `TestTRTC`, and click **Create Application**.
35+
36+
<span id="step2"></span>
37+
38+
#### Step 2. Download the SDK and demo source code
39+
2. Hover over the block of the platform you use, click **[GitHub](https://github.com/tencentyun/TRTCSDK/tree/master/Web/TRTCScenesDemo/trtc-calling-web)** (or **[ZIP](https://web.sdk.qcloud.com/trtc/webrtc/download/webrtc_latest.zip)**) to download the SDK and demo source code.
40+
![](https://main.qcloudimg.com/raw/0f35fe3bafe9fcdbd7cc73f991984d1a.png)
41+
2. After the download, return to the TRTC console and click **Downloaded and Next** to view your `SDKAppID` and key.
42+
43+
<span id="step3"></span>
44+
45+
#### Step 3. Configure demo project files
46+
47+
1. Decompress the source package downloaded in [step 2](#step2).
48+
49+
2. Find and open the `Web/TRTCScenesDemo/TRTCCalling/public/debug/GenerateTestUserSig.js` file.
50+
51+
3. Set parameters in the `GenerateTestUserSig.js` file:
52+
53+
<ul><li>SDKAPPID: `0` by default. Set it to the actual `SDKAppID`.</li>
54+
55+
<li>SECRETKEY: Left empty by default. Set it to the actual key.</li></ul>
56+
57+
<img src="https://main.qcloudimg.com/raw/0ae7a197ad22784384f1b6e111eabb22.png">
58+
59+
4. Return to the TRTC console and click **Next**.
60+
61+
5. Click **Return to Overview Page**.
62+
63+
>In this document, the method to obtain UserSig is to configure a SECRETKEY in the client code. In this method, the SECRETKEY is vulnerable to decompilation and reverse engineering. Once your SECRETKEY is leaked, attackers can steal your Tencent Cloud traffic. Therefore, ****this method is only suitable for locally running a demo project and feature debugging****.
64+
65+
>The correct `UserSig` distribution method is to integrate the calculation code of `UserSig` into your server and provide an application-oriented API. When `UserSig` is needed, your application can send a request to the business server for a dynamic `UserSig`. For more information, see [How do I calculate `UserSig` during production?](https://intl.cloud.tencent.com/document/product/647/35166).
66+
67+
#### Step 4. Run the demo
68+
>- Sync the dependency: npm install
69+
>- Start the project: npm run serve
70+
>- Visit `http://localhost:8080/` in the browser.
71+
72+
- On the demo landing page:
73+
![](https://main.qcloudimg.com/raw/90118deded971621db7bb14b55073bcc.png)
74+
- Enter your user ID and click **Log In**.
75+
![](https://main.qcloudimg.com/raw/f430fb067cddbb52ba32e4d0660cd331.png)
76+
- Enter the user ID of the callee to start a video call.
77+
![](https://main.qcloudimg.com/raw/66562b4c14690de4eb6f2da58ee6f4df.png)
78+
- Video call
79+
![](https://main.qcloudimg.com/raw/592189d0f18c91c51cdf7184853c6437.png)
80+
81+
82+
### Customizing your own UI
83+
#### Step 1. Integrate the SDK
84+
Integration via npm
85+
> Since version 0.6.0, you need to manually install dependencies [trtc-js-sdk](https://www.npmjs.com/package/trtc-js-sdk), [tim-js-sdk](https://www.npmjs.com/package/tim-js-sdk), and [tsignaling](https://www.npmjs.com/package/tsignaling).
86+
>- To reduce the size of trtc-calling-js.js, and prevent version conflict between trtc-calling-js.js and the already in use trtc-js-sdk, tim-js-sdk or tsignaling, which may stop the latter three from being packaged into the former, you need to manually install the dependencies before use.
87+
```javascript
88+
npm i trtc-js-sdk --save
89+
npm i tim-js-sdk --save
90+
npm i tsignaling --save
91+
npm i trtc-calling-js --save
92+
93+
// If you use trtc-calling-js via script, you need to manually import trtc.js first in the specified order.
94+
<script src="./trtc.js"></script>
95+
96+
// tim-js.js
97+
<script src="./tim-js.js"></script>
98+
99+
// tsignaling.js
100+
<script src="./tsignaling.js"></script>
101+
102+
// trtc-calling-js.js
103+
<script src="./trtc-calling-js.js"></script>
104+
```
105+
Import the module into the project script.
106+
```javascript
107+
import TRTCCalling from 'trtc-calling-js';
108+
```
109+
#### Step 2. Create the `trtcCalling` object
110+
>- sdkAppID: `sdkAppID` assigned by Tencent Cloud
111+
```javascript
112+
let options = {
113+
SDKAppID: 0 // Replace 0 with the `SDKAppID` of your application when connecting
114+
};
115+
const trtcCalling = new TRTCCalling(options);
116+
```
117+
118+
#### Step 3: Log in to the demo
119+
>- userID: User ID.
120+
>- userSig: User signature. For the calculation method, see [userSig](https://cloud.tencent.com/document/product/647/17275).
121+
```javascript
122+
trtcCalling.login({
123+
userID,
124+
userSig
125+
});
126+
```
127+
128+
#### Step 4. Make a one-to-one call
129+
>#### Making a call
130+
>- userID: User ID.
131+
>- type: Call type. Valid values: 0: unknown; 1: audio call; 2: video call.
132+
>- timeout: Invitation timeout period in seconds.
133+
```javascript
134+
trtcCalling.call({
135+
userID,
136+
type: 2,
137+
timeout
138+
});
139+
```
140+
>#### Answering call
141+
>- inviteID: Invitation ID, which identifies an invitation.
142+
>- roomID: Room ID.
143+
>- callType: Valid values: 0: unknown; 1: audio call; 2: video call.
144+
```javascript
145+
trtcCalling.accept({
146+
inviteID,
147+
roomID,
148+
callType
149+
});
150+
```
151+
>#### Turning on local camera
152+
```javascript
153+
trtcCalling.openCamera()
154+
```
155+
>#### Displaying a remote image
156+
>- userID: Remote user ID.
157+
>- videoViewDomID: The user's data will be rendered in this DOM node.
158+
```javascript
159+
trtcCalling.startRemoteView({
160+
userID,
161+
videoViewDomID
162+
})
163+
```
164+
165+
>#### Displaying a local image
166+
>- userID: Local user ID.
167+
>- videoViewDomID: The user's data will be rendered in this DOM node.
168+
```javascript
169+
trtcCalling.startLocalView({
170+
userID,
171+
videoViewDomID
172+
})
173+
```
174+
175+
>#### Hanging up/Rejecting a call
176+
```javascript
177+
trtcCalling.hangup()
178+
```
179+
>- inviteID: Invitation ID, which identifies an invitation.
180+
>- isBusy: Whether the line is busy. Valid values: 0: unknown; 1: audio call; 2: video call
181+
```javascript
182+
trtcCalling.reject({
183+
inviteID,
184+
isBusy
185+
})
186+
```
187+
188+
### Supported platforms
189+
190+
| OS | Browser (Desktop) | Minimum Browser Version Requirement |
191+
| :------: | :------------------: | :----------------: |
192+
| macOS | Safari | 11+ |
193+
| macOS | Chrome | 56+ |
194+
| Windows | Chrome | 56+ |
195+
| Windows | QQ Browser | 10.4 |
196+
197+
### FAQs
198+
199+
#### 1. There is only information of the public and private keys when I try to view the secret key. How do I get the secret key?
200+
TRTC SDK 6.6 (August 2019) and later versions use the new signature algorithm HMAC-SHA256. If your application was created before August 2019, you need to upgrade the signature algorithm to get a new key. Without upgrading, you can continue to use the old algorithm ECDSA-SHA256. After upgrading, you can switch between the new and old algorithms as needed.
201+
202+
Upgrade/Switch:
203+
204+
1. Log in to the TRTC console.
205+
206+
2. Click **Application Management** on the left sidebar, find your application, and click **Application Info**.
207+
208+
3. Select the **Quick Start** tab and click **Upgrade**, **asymmetric encryption**, or **HMAC-SHA256** in **Step 2: obtain the secret key to issue UserSig**.
209+
210+
- Upgrade
211+
212+
![](https://main.qcloudimg.com/raw/69bd0957c99e6a6764368d7f13c6a257.png)
213+
214+
- Switch to the old algorithm ECDSA-SHA256:
215+
216+
![](https://main.qcloudimg.com/raw/f89c00f4a98f3493ecc1fe89bea02230.png)
217+
218+
- Switch to the new algorithm HMAC-SHA256:
219+
220+
![](https://main.qcloudimg.com/raw/b0412153935704abc9e286868ad8a916.png)
221+
222+
#### 2. What firewall restrictions does the SDK face?
223+
224+
As the SDK uses the UDP protocol for audio/video transmission, it cannot be used in office networks that block UDP. If you encounter such a problem, see [Dealing with Organizational Firewall Restrictions](https://cloud.tencent.com/document/product/647/34399) for assistance.

‎Web/README.md‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,12 @@
1+
# TUICalling web 示例工程快速跑通
2+
3+
_[English](README.en.md) | 中文_
4+
15
本文主要介绍如何快速跑通 Web 版本的 TRTCCalling Demo，Demo 中包括语音通话和视频通话场景：
26

37
\- 语音通话：纯语音交互，支持多人互动语音聊天。
48

59
\- 视频通话：视频通话，面向在线客服等需要面对面交流的沟通场景。
6-
710
### 环境要求
811
* 请使用最新版本的 Chrome 浏览器。
912
* TRTCCalling 依赖以下端口进行数据传输，请将其加入防火墙白名单，配置完成后，您可以通过访问并体验 [官网 Demo](https://web.sdk.qcloud.com/component/trtccalling/demo/web/latest/index.html) 检查配置是否生效。

‎Web/src/App.vue‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,6 @@ export default {
3131
if (newIsLogin !== oldIsLogin) {
3232
if (newIsLogin) {
3333
if (this.$router.history.current.path === "/login") {
34-
// 防止已在 '/' 路由下再次 push
3534
this.$router.push("/");
3635
}
3736
} else {

‎Web/src/store/index.js‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,8 @@ function createStore () {
88
state: {
99
isLogin: false,
1010
loginUserInfo: null,
11-
// trtc 相关
1211
callStatus: '', // 状态, idle, calling, connected
13-
isInviter: false, // c2c 通话，说不定一开始不是 inviter, 后面邀请了别人就是 inviter 了
12+
isInviter: false,
1413
isAccepted: false,
1514
meetingUserIdList: [],
1615
muteVideoUserIdList: [],

0 commit comments

Comments
 (0)