Skip to content

Commit a5323bb

Browse files
RychouRychou
authored
demo: update react demo and samples
2 parents 07fc478 + 9f27c57 commit a5323bb

41 files changed

Lines changed: 2847 additions & 1283 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎quick-demo-react/README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ A React-based quick demo for [Tencent Real-Time Communication (TRTC)](https://ww
1313
- **Invite Link** – Generate a one-time invite link after entering a room, auto-refresh on copy
1414
- **Invite Page** – Simplified page for invited users to join a call directly
1515
- **i18n** – Chinese (zh-cn) and English (en) language switching
16+
- **Aegis Monitoring** – Integrated Tencent Cloud frontend monitoring
1617

1718
## Tech Stack
1819

‎quick-demo-react/README.zh.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@
1313
- **邀请链接** – 进房后生成一次性邀请链接，复制后自动刷新
1414
- **邀请页面** – 被邀请者通过链接进入精简版通话页面
1515
- **中英文切换** – 支持中文（zh-cn）和英文（en）两种语言
16+
- **Aegis 监控上报** – 集成腾讯云前端监控
1617

1718
## 技术栈
1819

‎quick-demo-react/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
2-
"name": "quick-demo-react",
2+
"name": "cloud-quick-react",
33
"version": "0.1.0",
44
"private": true,
55
"scripts": {

‎quick-demo-react/src/components/NavBar.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ export default function NavBar() {
3434
</a>
3535
<button className="navbar-lang-btn" onClick={toggleLanguage}>中/En</button>
3636
<a
37-
href="https://github.com/LiteAVSDK/TRTC_Web"
37+
href="https://github.com/Tencent-RTC/TRTC_Web"
3838
target="_blank"
3939
rel="noopener noreferrer"
4040
className="navbar-github"

‎quick-demo-react/src/hooks/useTRTC.ts‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -127,7 +127,7 @@ export function useTRTC() {
127127
} catch (error: any) {
128128
console.error('enterRoom error', error);
129129
reportFailedEvent({ name: 'enterRoom', error, roomId: strRoomId });
130-
store.addFailedLog(`[${userId}] enterRoom failed.`);
130+
store.addFailedLog(`[${userId}] enterRoom failed. Reason: ${error.message || error}`);
131131
setRoomStatus('idle');
132132
unbindEvents();
133133
}
@@ -164,7 +164,7 @@ export function useTRTC() {
164164
} catch (error: any) {
165165
console.error('exitRoom error', error);
166166
reportFailedEvent({ name: 'exitRoom', error });
167-
store.addFailedLog(`[${userId}] exitRoom failed.`);
167+
store.addFailedLog(`[${userId}] exitRoom failed. Reason: ${error.message || error}`);
168168
setRoomStatus('entered');
169169
}
170170
}, [store, micStatus, camStatus, shareStatus, unbindEvents]);
@@ -184,7 +184,7 @@ export function useTRTC() {
184184
} catch (error: any) {
185185
console.error('startLocalAudio error', error);
186186
reportFailedEvent({ name: 'startLocalAudio', error });
187-
store.addFailedLog(`${userId ? `[${userId}]` : ''} startLocalAudio failed.`);
187+
store.addFailedLog(`${userId ? `[${userId}]` : ''} startLocalAudio failed. Reason: ${error.message || error}`);
188188
setMicStatus('idle');
189189
}
190190
}, [store]);
@@ -205,7 +205,7 @@ export function useTRTC() {
205205
} catch (error: any) {
206206
console.error('stopLocalAudio error', error);
207207
reportFailedEvent({ name: 'stopLocalAudio', error });
208-
store.addFailedLog(`${userId ? `[${userId}]` : ''} stopLocalAudio failed.`);
208+
store.addFailedLog(`${userId ? `[${userId}]` : ''} stopLocalAudio failed. Reason: ${error.message || error}`);
209209
setMicStatus('started');
210210
}
211211
}, [store, micStatus]);
@@ -226,7 +226,7 @@ export function useTRTC() {
226226
} catch (error: any) {
227227
console.error('startLocalVideo error', error);
228228
reportFailedEvent({ name: 'startLocalVideo', error });
229-
store.addFailedLog(`${userId ? `[${userId}]` : ''} startLocalVideo failed.`);
229+
store.addFailedLog(`${userId ? `[${userId}]` : ''} startLocalVideo failed. Reason: ${error.message || error}`);
230230
setCamStatus('idle');
231231
}
232232
}, [store]);
@@ -247,7 +247,7 @@ export function useTRTC() {
247247
} catch (error: any) {
248248
console.error('stopLocalVideo error', error);
249249
reportFailedEvent({ name: 'stopLocalVideo', error });
250-
store.addFailedLog(`${userId ? `[${userId}]` : ''} stopLocalVideo failed.`);
250+
store.addFailedLog(`${userId ? `[${userId}]` : ''} stopLocalVideo failed. Reason: ${error.message || error}`);
251251
setCamStatus('started');
252252
}
253253
}, [store, camStatus]);
@@ -264,7 +264,7 @@ export function useTRTC() {
264264
} catch (error: any) {
265265
console.error('startScreenShare error', error);
266266
reportFailedEvent({ name: 'startScreenShare', error, type: 'share' });
267-
store.addFailedLog(`${userId ? `[${userId}]` : ''} startScreenShare failed.`);
267+
store.addFailedLog(`${userId ? `[${userId}]` : ''} startScreenShare failed. Reason: ${error.message || error}`);
268268
setShareStatus('idle');
269269
}
270270
}, [store]);
@@ -285,7 +285,7 @@ export function useTRTC() {
285285
} catch (error: any) {
286286
console.error('stopScreenShare error', error);
287287
reportFailedEvent({ name: 'stopScreenShare', error, type: 'share' });
288-
store.addFailedLog(`${userId ? `[${userId}]` : ''} stopScreenShare failed.`);
288+
store.addFailedLog(`${userId ? `[${userId}]` : ''} stopScreenShare failed. Reason: ${error.message || error}`);
289289
setShareStatus('started');
290290
}
291291
}, [store, shareStatus]);

‎quick-demo-react/src/locales/en.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@
5353
},
5454
"security": {
5555
"warning": "Notes: this Demo is only applicable for debugging. Before official launch, please migrate the UserSig calculation code and key to your backend server to avoid unauthorized traffic use caused by the leakage of encryption key.",
56-
"viewDoc": "View Documents"
56+
"viewDoc": "Learn More"
5757
},
5858
"log": {
5959
"title": "Log:"

‎quick-demo-react/src/pages/HomePage.tsx‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -56,9 +56,6 @@ export default function HomePage() {
5656

5757
const handleEnterRoom = async () => {
5858
await enterRoom();
59-
// Auto start audio and video after entering room
60-
startLocalVideo();
61-
startLocalAudio();
6259
};
6360

6461
return (

‎samples/advance-features/data-messages/index.html‎

Lines changed: 19 additions & 89 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,13 @@
88
href="https://fonts.googleapis.com/css2?family=Oxygen:wght@300;400;700&display=swap"
99
rel="stylesheet"
1010
/>
11-
<link href="../../libs/toastify.css" rel="stylesheet" />
11+
<link href="../../libs/toastify.css" rel="stylesheet" type="text/css">
1212
<title>Data Messages</title>
13+
<script src="../../util/i18n.js" defer></script>
1314
<script src="../../components/header.js" defer></script>
15+
<script src="../../components/params-form.js" defer></script>
16+
<script src="../../components/invite-section.js" defer></script>
17+
<script src="../../components/video-views.js" defer></script>
1418
<script
1519
src="https://cdn-go.cn/aegis/aegis-sdk/latest/aegis.min.js"
1620
defer
@@ -20,7 +24,7 @@
2024
src="https://web.sdk.qcloud.com/trtc/webrtc/v5/dist/trtc.js"
2125
defer
2226
></script>
23-
<script src="../../libs/toastify-js.js"></script>
27+
<script src="../../libs/toastify-js.js" defer></script>
2428
<script src="../../libs/clipboard.min.js" defer></script>
2529
<script src="../../util/utils.js" defer></script>
2630
<script src="./script.js" defer></script>
@@ -29,87 +33,22 @@
2933
<header-nav></header-nav>
3034
<main>
3135
<div class="feature-container">
32-
<h1 style="color: #1c66e5">Data Messages</h1>
36+
<h1 style="color: #1c66e5" data-i18n="dataMessages.title">Data Messages</h1>
37+
<params-form></params-form>
3338
<section>
34-
<h3>Step-1: Fill in the blanks</h3>
35-
<span class="note"
36-
>Get SDKAppId and SDKSecretKey from
37-
<a
38-
target="_top"
39-
href="https://console.trtc.io/?quickclaim=engine_trial"
40-
>TRTC Console</a
41-
>
42-
</span>
43-
<span class="warning"
44-
>Note: This demo is for demonstration purposes only. Before official
45-
launch, please migrate SDKSecretKey and the UserSig calculation code
46-
to your own backend server to avoid unauthorized traffic use caused
47-
by the key leakage.
48-
<a target="_top" href="https://trtc.io/document/35166"
49-
>View Documents</a
50-
></span
51-
>
52-
<div class="input-list">
53-
<div class="input-group">
54-
<label for="sdk-app-id">SDKAppId</label>
55-
<input
56-
id="sdk-app-id"
57-
type="number"
58-
class="form-control"
59-
placeholder="SDKAppId"
60-
/>
61-
</div>
62-
<div class="input-group">
63-
<label for="sdk-secret-key">SDKSecretKey</label>
64-
<input
65-
id="sdk-secret-key"
66-
type="text"
67-
class="form-control"
68-
placeholder="SDKSecretKey"
69-
/>
70-
</div>
71-
</div>
72-
<div class="input-list">
73-
<div class="input-group">
74-
<label for="user-id">UserId</label>
75-
<input id="user-id" type="text" class="form-control" />
76-
</div>
77-
<div class="input-group">
78-
<label for="room-id">RoomId</label>
79-
<input id="room-id" type="number" class="form-control" />
80-
</div>
81-
</div>
82-
</section>
83-
<section>
84-
<h3>Step-2: Enter the room and activate remote stream</h3>
39+
<h3><span class="step-badge">2</span><span data-i18n="dataMessages.enterAndActivate">Enter the room and activate remote stream</span></h3>
8540
<div class="btn-list">
8641
<button id="enter-btn" class="btn" onclick="enterRoom()">
87-
<span class="btn-text">Enter Room</span>
42+
<span class="btn-text" data-i18n="common.enterRoom">Enter Room</span>
8843
</button>
8944
<button id="exit-btn" class="btn" onclick="exitRoom()" disabled>
90-
<span class="btn-text">Exit Room</span>
45+
<span class="btn-text" data-i18n="common.exitRoom">Exit Room</span>
9146
</button>
9247
</div>
93-
<div class="invite-container">
94-
<span class="note"
95-
>Copy the link to send invitation. Each link can only invite one
96-
person, and the link will be updated after being copied.</span
97-
>
98-
<div class="copy">
99-
<button id="invite-btn" data-clipboard-target="#invite-url">
100-
<img
101-
src="https://web.sdk.qcloud.com/trtc/webrtc/v5/demo/samples/icons/clippy.svg"
102-
width="12px"
103-
height="12px"
104-
alt="Copy to clipboard"
105-
/>
106-
</button>
107-
<input id="invite-url" class="invite-input" readonly />
108-
</div>
109-
</div>
48+
<invite-section id="invite-section-el"></invite-section>
11049
</section>
11150
<section>
112-
<h3>Step-3: Send custom message</h3>
51+
<h3><span class="step-badge">3</span><span data-i18n="dataMessages.sendCustomMessage">Send custom message</span></h3>
11352
<div class="message-container">
11453
<input
11554
type="text"
@@ -123,50 +62,41 @@ <h3>Step-3: Send custom message</h3>
12362
onclick="sendCustomMessage()"
12463
disabled
12564
>
126-
<span class="btn-text">Send</span>
65+
<span class="btn-text" data-i18n="dataMessages.send">Send</span>
12766
</button>
12867
</div>
12968
</section>
13069
<section>
131-
<h3>Step-4: Start video and send SEI message</h3>
70+
<h3><span class="step-badge">4</span><span data-i18n="dataMessages.startVideoAndSei">Start video and send SEI message</span></h3>
13271
<div class="btn-list">
13372
<button
13473
id="start-video-btn"
13574
class="btn"
13675
onclick="startLocalVideo()"
13776
disabled
13877
>
139-
<span class="btn-text">Start Local Video</span>
78+
<span class="btn-text" data-i18n="common.startLocalVideo">Start Local Video</span>
14079
</button>
14180
<button
14281
id="stop-video-btn"
14382
class="btn"
14483
onclick="stopLocalVideo()"
14584
disabled
14685
>
147-
<span class="btn-text">Stop Local Video</span>
86+
<span class="btn-text" data-i18n="common.stopLocalVideo">Stop Local Video</span>
14887
</button>
14988
<button
15089
id="send-SEI-message-btn"
15190
class="btn"
15291
onclick="sendSEIMessage()"
15392
disabled
15493
>
155-
<span class="btn-text">Send SEI Message</span>
94+
<span class="btn-text" data-i18n="dataMessages.sendSeiMessage">Send SEI Message</span>
15695
</button>
15796
</div>
15897
</section>
15998
</div>
160-
<div class="video-container">
161-
<div class="video-sub-container">
162-
<h2>Local Video</h2>
163-
<div id="local-video-view" class="video-view"></div>
164-
</div>
165-
<div class="video-sub-container">
166-
<h2>Remote Video</h2>
167-
<div id="remote-video-view" class="video-view"></div>
168-
</div>
169-
</div>
99+
<video-views></video-views>
170100
</main>
171101
</body>
172102
</html>

‎samples/advance-features/data-messages/script.js‎

Lines changed: 48 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -13,30 +13,41 @@ function initOptions() {
1313
}
1414

1515
async function enterRoom() {
16-
const { sdkAppId, sdkSecretKey, userId, roomId, userSig } = initParams();
17-
await trtc.enterRoom({ roomId, sdkAppId, userId, userSig });
18-
document.getElementById('send-custom-message-btn').disabled = false;
19-
document.getElementById('start-video-btn').disabled = false;
20-
switchButtonStatus('enter-btn', 'exit-btn', true);
21-
reportSuccessEvent('enterRoom', sdkAppId);
22-
refreshLink({ sdkAppId, sdkSecretKey, roomId });
16+
try {
17+
const { sdkAppId, sdkSecretKey, userId, roomId, userSig } = initParams();
18+
await trtc.enterRoom({ roomId, sdkAppId, userId, userSig });
19+
document.getElementById('send-custom-message-btn').disabled = false;
20+
document.getElementById('start-video-btn').disabled = false;
21+
switchButtonStatus('enter-btn', 'exit-btn', true);
22+
reportSuccessEvent('enterRoom', sdkAppId);
23+
refreshLink({ sdkAppId, sdkSecretKey, roomId });
24+
} catch (error) {
25+
reportFailedEvent({ name: 'enterRoom', roomId: 0, error });
26+
throw error;
27+
}
2328
}
2429

2530
async function exitRoom() {
26-
await trtc.exitRoom();
27-
await stopLocalVideo();
28-
document.getElementById('send-custom-message-btn').disabled = true;
29-
document.getElementById('start-video-btn').disabled = true;
30-
switchButtonStatus('enter-btn', 'exit-btn', false);
31-
cleanShareLink();
31+
try {
32+
await trtc.exitRoom();
33+
await stopLocalVideo();
34+
document.getElementById('send-custom-message-btn').disabled = true;
35+
document.getElementById('start-video-btn').disabled = true;
36+
switchButtonStatus('enter-btn', 'exit-btn', false);
37+
cleanShareLink();
38+
reportSuccessEvent('exitRoom', 0);
39+
} catch (error) {
40+
reportFailedEvent({ name: 'exitRoom', roomId: 0, error });
41+
throw error;
42+
}
3243
}
3344

3445
function sendCustomMessage() {
3546
const message = document.getElementById('custom-message').value;
3647
const data = new TextEncoder().encode(message).buffer;
3748
trtc.sendCustomMessage({ cmdId: 1, data });
3849
document.getElementById('custom-message').value = '';
39-
toastify('Custom message sent!');
50+
toastify(t('dataMessages.customMessageSent'));
4051
}
4152

4253
async function startLocalVideo() {
@@ -54,7 +65,7 @@ async function stopLocalVideo() {
5465
function sendSEIMessage() {
5566
const unit8Array = new Uint8Array([1, 2, 3]);
5667
trtc.sendSEIMessage(unit8Array.buffer);
57-
toastify('SEI message sent!');
68+
toastify(t('dataMessages.seiMessageSent'));
5869
}
5970

6071
function handleEvent() {
@@ -64,11 +75,31 @@ function handleEvent() {
6475
});
6576
// receive custom message
6677
trtc.on(TRTC.EVENT.CUSTOM_MESSAGE, event => {
67-
toastify(`Received custom message from ${event.userId}, message: ${new TextDecoder().decode(event.data)}`);
78+
toastify(t('dataMessages.receivedCustomMsg', { userId: event.userId, message: new TextDecoder().decode(event.data) }));
6879
});
6980
// receive SEI message
7081
trtc.on(TRTC.EVENT.SEI_MESSAGE, event => {
71-
toastify(`Received sei message from ${event.userId}, data: ${event.data}, streamType: ${event.streamType}`);
82+
toastify(t('dataMessages.receivedSeiMsg', { userId: event.userId, data: event.data, streamType: event.streamType }));
7283
console.log(event.data)
7384
});
7485
}
86+
87+
// i18n initialization
88+
applyI18n();
89+
updateInviteSection();
90+
document.addEventListener('lang-changed', () => {
91+
applyI18n();
92+
updateInviteSection();
93+
});
94+
95+
function updateInviteSection() {
96+
const inviteEl = document.getElementById('invite-section-el');
97+
if (inviteEl) {
98+
inviteEl.querySelector('h3').textContent = t('invite.defaultTitle');
99+
inviteEl.querySelector('.note').textContent = t('invite.sendInvite');
100+
}
101+
const localTitle = document.querySelector('video-views .local-title');
102+
const remoteTitle = document.querySelector('video-views .remote-title');
103+
if (localTitle) localTitle.textContent = t('video.localVideo');
104+
if (remoteTitle) remoteTitle.textContent = t('video.remoteVideo');
105+
}

0 commit comments

Comments
 (0)