Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit ebe75bc

Browse files
Rychouanderlu
Rychou
authored and
anderlu
committed
feat: update Web/base-react-next
1 parent 7f755eb commit ebe75bc

File tree

16 files changed

+179
-69
lines changed

16 files changed

+179
-69
lines changed

‎Web/base-react-next/src/components/BaseRTC.js‎

Lines changed: 20 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,15 @@
11
import a18n from 'a18n';
22
import React from 'react';
33
import TRTC from 'trtc-js-sdk';
4-
import { isUndefined, joinRoomUpload, publishUpload } from '@utils/utils';
4+
import {
5+
isUndefined,
6+
joinRoomSuccessUpload,
7+
joinRoomFailedUpload,
8+
publishSuccessUpload,
9+
publishFailedUpload,
10+
initLocalStreamSuccessUpload,
11+
initLocalStreamFailedUpload,
12+
} from '@utils/utils';
513
import { getLatestUserSig } from '@app/index';
614
import { SDKAPPID } from '@app/config';
715
import toast from '@components/Toast';
@@ -110,15 +118,16 @@ export default class RTC extends React.Component {
110118
userId: this.userID,
111119
cameraId: this.cameraID,
112120
microphoneId: this.microphoneID,
113-
mirror: this.mirror,
114121
});
115122
try {
116123
await this.localStream.initialize();
117124
this.addStream && this.addStream(this.localStream);
125+
initLocalStreamSuccessUpload(SDKAPPID);
118126
return this.localStream;
119127
} catch (error) {
120128
this.localStream = null;
121129
alert(`${JSON.stringify(error.message)}`);
130+
initLocalStreamFailedUpload(SDKAPPID, `${JSON.stringify(error.message)}`);
122131
}
123132
}
124133

@@ -132,7 +141,10 @@ export default class RTC extends React.Component {
132141

133142
playStream(stream, dom) {
134143
if (stream.getType() === 'main' && stream.getUserId().indexOf('share') >= 0) {
135-
stream.play(dom, { objectFit: 'contain' }).catch();
144+
stream.play(dom, {
145+
objectFit: 'contain',
146+
mirror: this.mirror,
147+
}).catch();
136148
} else {
137149
stream.play(dom).catch();
138150
if (stream === this.localStream) {
@@ -154,7 +166,7 @@ export default class RTC extends React.Component {
154166
try {
155167
await this.client.join({ roomId: this.roomID });
156168
toast.success('join room success!', 2000);
157-
joinRoomUpload(SDKAPPID);
169+
joinRoomSuccessUpload(SDKAPPID);
158170

159171
this.isJoining = false;
160172
this.isJoined = true;
@@ -166,6 +178,7 @@ export default class RTC extends React.Component {
166178
this.isJoining = false;
167179
toast.error('join room failed!', 20000);
168180
console.error('join room failed', error);
181+
joinRoomFailedUpload(SDKAPPID, `${JSON.stringify(error.message)}`);
169182
}
170183
}
171184

@@ -178,7 +191,7 @@ export default class RTC extends React.Component {
178191
try {
179192
await this.client.publish(this.localStream);
180193
toast.success('publish localStream success!', 2000);
181-
publishUpload(SDKAPPID);
194+
publishSuccessUpload(SDKAPPID);
182195

183196
this.isPublishing = false;
184197
this.isPublished = true;
@@ -187,6 +200,7 @@ export default class RTC extends React.Component {
187200
this.isPublishing = false;
188201
console.error('publish localStream failed', error);
189202
toast.error('publish localStream failed!', 2000);
203+
publishFailedUpload(SDKAPPID, `${JSON.stringify(error.message)}`);
190204
}
191205
}
192206

@@ -396,13 +410,13 @@ export default class RTC extends React.Component {
396410
console.log(`remote stream added: [${remoteUserID}] type: ${remoteStream.getType()}`);
397411
// subscribe to this remote stream
398412
this.handleSubscribe(remoteStream);
413+
this.addStream && this.addStream(remoteStream);
399414
}
400415
});
401416
// fired when a remote stream has been subscribed
402417
this.client.on('stream-subscribed', (event) => {
403418
const { stream: remoteStream } = event;
404419
console.log('stream-subscribed userId: ', remoteStream.getUserId());
405-
this.addStream && this.addStream(remoteStream);
406420
});
407421
// fired when the remote stream is removed, e.g. the remote user called Client.unpublish()
408422
this.client.on('stream-removed', (event) => {

‎Web/base-react-next/src/components/RtcClient/basic-live-rtc-client.js‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
import RTC from '@components/BaseRTC';
22
import toast from '@components/Toast';
3-
import { joinRoomUpload } from '@utils/utils';
3+
import {
4+
joinRoomSuccessUpload,
5+
joinRoomFailedUpload,
6+
} from '@utils/utils';
47
import { SDKAPPID } from '@app/config';
58
class Client extends RTC {
69
constructor(options) {
@@ -17,7 +20,7 @@ class Client extends RTC {
1720
try {
1821
await this.client.join({ roomId: this.roomID, role: this.role });
1922
toast.success('join room success!', 2000);
20-
joinRoomUpload(SDKAPPID);
23+
joinRoomSuccessUpload(SDKAPPID);
2124

2225
this.isJoining = false;
2326
this.isJoined = true;
@@ -29,6 +32,7 @@ class Client extends RTC {
2932
this.isJoining = false;
3033
toast.error('join room failed!', 20000);
3134
console.error('join room failed', error);
35+
joinRoomFailedUpload(SDKAPPID, `${JSON.stringify(error.message)}`);
3236
}
3337
}
3438
}

‎Web/base-react-next/src/components/RtcClient/improve-beauty-rtc-client.js‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,10 @@
11
import RTC from '@components/BaseRTC.js';
22
import RTCBeautyPlugin from 'rtc-beauty-plugin';
33
import toast from '@components/Toast';
4-
import { publishUpload } from '@utils/utils';
4+
import {
5+
publishSuccessUpload,
6+
joinRoomFailedUpload,
7+
} from '@utils/utils';
58
import { SDKAPPID } from '@app/config';
69

710
export default class RTCClient extends RTC {
@@ -17,7 +20,7 @@ export default class RTCClient extends RTC {
1720
const stream = this.beautyPlugin.generateBeautyStream(this.localStream);
1821
await this.client.publish(stream);
1922
toast.success('publish localStream success!', 2000);
20-
publishUpload(SDKAPPID);
23+
publishSuccessUpload(SDKAPPID);
2124

2225
this.isPublishing = false;
2326
this.isPublished = true;
@@ -26,6 +29,7 @@ export default class RTCClient extends RTC {
2629
this.isPublishing = false;
2730
console.error('publish localStream failed', error);
2831
toast.error('publish localStream failed!', 2000);
32+
joinRoomFailedUpload(SDKAPPID, `${JSON.stringify(error.message)}`);
2933
}
3034
}
3135
}

‎Web/base-react-next/src/components/RtcClient/improve-cross-room-link-rtc-client.js‎

Lines changed: 15 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,13 @@
11
import a18n from 'a18n';
22
import React from 'react';
33
import TRTC from 'trtc-js-sdk';
4-
import { isUndefined, joinRoomUpload, publishUpload } from '@utils/utils';
4+
import {
5+
isUndefined,
6+
joinRoomSuccessUpload,
7+
joinRoomFailedUpload,
8+
publishSuccessUpload,
9+
publishFailedUpload,
10+
} from '@utils/utils';
511
import { getLatestUserSig } from '@app/index';
612
import { SDKAPPID } from '@app/config';
713
import toast from '@components/Toast';
@@ -109,7 +115,6 @@ export default class RTC extends React.Component {
109115
userId: this.userID,
110116
cameraId: this.cameraID,
111117
microphoneId: this.microphoneID,
112-
mirror: this.mirror,
113118
});
114119
await this.localStream.initialize();
115120
this.addStream && this.addStream(this.localStream);
@@ -125,7 +130,10 @@ export default class RTC extends React.Component {
125130

126131
playStream(stream, dom) {
127132
if (stream.getType() === 'main' && stream.getUserId().indexOf('share') >= 0) {
128-
stream.play(dom, { objectFit: 'contain' }).catch();
133+
stream.play(dom, {
134+
objectFit: 'contain',
135+
mirror: this.mirror,
136+
}).catch();
129137
} else {
130138
stream.play(dom).catch();
131139
}
@@ -144,7 +152,7 @@ export default class RTC extends React.Component {
144152
try {
145153
await this.client.join({ roomId: this.roomID });
146154
toast.success('join room success!', 2000);
147-
joinRoomUpload(SDKAPPID);
155+
joinRoomSuccessUpload(SDKAPPID);
148156

149157
this.isJoining = false;
150158
this.isJoined = true;
@@ -156,6 +164,7 @@ export default class RTC extends React.Component {
156164
this.isJoining = false;
157165
toast.error('join room failed!', 20000);
158166
console.error('join room failed', error);
167+
joinRoomFailedUpload(SDKAPPID, `${JSON.stringify(error.message)}`);
159168
}
160169
}
161170

@@ -168,7 +177,7 @@ export default class RTC extends React.Component {
168177
try {
169178
await this.client.publish(this.localStream);
170179
toast.success('publish localStream success!', 2000);
171-
publishUpload(SDKAPPID);
180+
publishSuccessUpload(SDKAPPID);
172181

173182
this.isPublishing = false;
174183
this.isPublished = true;
@@ -177,6 +186,7 @@ export default class RTC extends React.Component {
177186
this.isPublishing = false;
178187
console.error('publish localStream failed', error);
179188
toast.error('publish localStream failed!', 2000);
189+
publishFailedUpload(SDKAPPID, `${JSON.stringify(error.message)}`);
180190
}
181191
}
182192

‎Web/base-react-next/src/components/RtcClient/improve-publishCDNStream-rtc-client.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
import RTC from '@components/BaseRTC';
22
import Toast from '@components/Toast';
3+
import { publishCdnSuccessUpload, publishCdnFailedUpload } from '@utils/utils';
4+
import { SDKAPPID } from '@app/config';
35
class Client extends RTC {
46
constructor(options) {
57
super(options);
@@ -96,9 +98,11 @@ class Client extends RTC {
9698
try {
9799
await this.client.startPublishCDNStream(options);
98100
Toast.success('start publishCDNStream success', 2000);
101+
publishCdnSuccessUpload(SDKAPPID);
99102
} catch (error) {
100103
console.error('start publishCDNStream error', error);
101104
Toast.error('start publishCDNStream error', 2000);
105+
publishCdnFailedUpload(SDKAPPID, `${JSON.stringify(error.message)}`);
102106
}
103107
}
104108

‎Web/base-react-next/src/components/ShareRTC.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@ export default class ShareRTC extends React.Component {
5959
screen: true,
6060
userId: this.userID,
6161
});
62-
this.localStream.setScreenProfile('1080p');
62+
this.localStream.setScreenProfile({ width: 1920, height: 1080, frameRate: 15, bitrate: 2000 });
6363
try {
6464
await this.localStream.initialize();
6565
} catch (error) {
@@ -68,7 +68,7 @@ export default class ShareRTC extends React.Component {
6868
alert(a18n('屏幕分享失败，请确保系统允许当前浏览器获取屏幕内容'));
6969
throw error;
7070
case 'NotAllowedError':
71-
if (error.message === 'Permission denied by system') {
71+
if (error.message.includes('Permission denied by system')) {
7272
alert(a18n('屏幕分享失败，请确保系统允许当前浏览器获取屏幕内容'));
7373
} else {
7474
console.log('User refused to share the screen');

‎Web/base-react-next/src/components/TopBar/index.js‎

Lines changed: 56 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import a18n from 'a18n';
2-
import React, { useState } from 'react';
2+
import React, { useState, useEffect, useContext } from 'react';
33
import styles from './index.module.scss';
44
import Cookies from 'js-cookie';
5-
import { goToPage } from '@utils/common';
5+
import { goToPage, getLanguage } from '@utils/common';
66
import clsx from 'clsx';
77
import Menu from '@material-ui/core/Menu';
88
import MenuItem from '@material-ui/core/MenuItem';
@@ -15,15 +15,25 @@ import QueuePlayNextIcon from '@material-ui/icons/QueuePlayNext';
1515
import PowerSettingsNewIcon from '@material-ui/icons/PowerSettingsNew';
1616
import GitHubIcon from '@material-ui/icons/GitHub';
1717
import ExitToAppIcon from '@material-ui/icons/ExitToApp';
18-
import LanguageChange from '@components/LanguageChange';
1918
import DeviceDetector from '@components/DeviceDetector';
2019
import toast from '@components/Toast';
2120
import { unRegister } from '@api/http';
2221
import Modal from '@components/Modal';
22+
import Tooltip from '@material-ui/core/Tooltip';
23+
import { MyContext } from '@utils/context-manager';
2324

2425
function TopBar({ title, isMobile = false }) {
2526
const [isOpenMenu, setIsOpenMenu] = useState(false);
2627
const [anchorEl, setAnchorEl] = useState(null);
28+
const [language, setLanguage] = useState('');
29+
const { changeLanguage } = useContext(MyContext);
30+
31+
useEffect(() => {
32+
const language = getLanguage();
33+
a18n.setLocale(language);
34+
setLanguage(language);
35+
}, []);
36+
2737
const openMenu = (event) => {
2838
setIsOpenMenu(true);
2939
setAnchorEl(event.target);
@@ -39,7 +49,7 @@ function TopBar({ title, isMobile = false }) {
3949
};
4050

4151
const handleGitHub = () => {
42-
window.open('https://github.com/tencentyun/TRTCSDK/tree/master/Web/base-react-next', '_blank');
52+
window.open('https://github.com/LiteAVSDK/TRTC_Web/tree/main/base-react-next', '_blank');
4353
handleClose();
4454
};
4555

@@ -69,6 +79,12 @@ function TopBar({ title, isMobile = false }) {
6979
}
7080
};
7181

82+
const handleLanguageChange = () => {
83+
const newLanguage = language === 'zh-CN' ? 'en' : 'zh-CN';
84+
setLanguage(newLanguage);
85+
changeLanguage(newLanguage);
86+
};
87+
7288
const handleUnregister = () => {
7389
Modal.confirm({
7490
title: a18n('注销'),
@@ -94,31 +110,52 @@ function TopBar({ title, isMobile = false }) {
94110
});
95111
};
96112

97-
const configList = [
113+
const menuConfigList = [
98114
{ key: 'user', icon: PermIdentityOutlinedIcon, text: Cookies.get('trtc-api-example-phoneNumber') },
115+
{ key: 'log-out', icon: PowerSettingsNewIcon, text: a18n('退出登录'), callback: handleQuit },
116+
];
117+
const functionConfigList = [
99118
{ key: 'device', icon: QueuePlayNextIcon, text: a18n('设备检测'), callback: handleDeviceDetector },
100119
{ key: 'link', icon: ShareIcon, text: a18n('复制链接'), callback: handleCopyLink },
101-
{ key: 'language', icon: TranslateIcon, text: a18n('语言切换') },
120+
{ key: 'language', icon: TranslateIcon, text: a18n('语言切换'), callback: handleLanguageChange },
102121
{ key: 'github', icon: GitHubIcon, text: a18n('GitHub 地址'), callback: handleGitHub },
103-
{ key: 'log-out', icon: PowerSettingsNewIcon, text: a18n('退出登录'), callback: handleQuit },
104122
];
105123
if (unRegister && typeof unRegister === 'function') {
106-
configList.splice(5, 0, { key: 'unregister', icon: ExitToAppIcon, text: a18n('注销'), callback: handleUnregister });
124+
menuConfigList.splice(-1, 0, { key: 'unregister', icon: ExitToAppIcon, text: a18n('注销'), callback: handleUnregister });
125+
}
126+
if (isMobile) {
127+
menuConfigList.splice(1, 0, ...functionConfigList);
107128
}
108129

109130
return (
110131
<div className={clsx(styles['top-bar-container'], isMobile && styles['top-bar-container-mobile'])}>
111132
<p className={styles['top-bar-title']}>{title}</p>
112-
<IconButton
113-
aria-label="more"
114-
aria-controls="long-menu"
115-
aria-haspopup="true"
116-
onClick={openMenu}
117-
style={{ color: '#1890fe' }}
118-
className={styles['more-menu']}
119-
>
120-
<MoreVertIcon />
121-
</IconButton>
133+
134+
{
135+
!isMobile && functionConfigList.map(configItem => <Tooltip key={configItem.key} title={ configItem.text }>
136+
<IconButton
137+
aria-label="more"
138+
aria-controls="long-menu"
139+
aria-haspopup="true"
140+
onClick={configItem.callback}
141+
className={styles['top-bar-icon']}
142+
>
143+
<configItem.icon style={{ fontSize: '20px' }}></configItem.icon>
144+
</IconButton>
145+
</Tooltip>)
146+
}
147+
148+
<Tooltip title={a18n('更多')}>
149+
<IconButton
150+
aria-label="more"
151+
aria-controls="long-menu"
152+
aria-haspopup="true"
153+
onClick={openMenu}
154+
className={styles['top-bar-icon']}
155+
>
156+
<MoreVertIcon />
157+
</IconButton>
158+
</Tooltip>
122159

123160
<Menu
124161
id="simple-menu"
@@ -128,10 +165,9 @@ function TopBar({ title, isMobile = false }) {
128165
onClose={handleClose}
129166
>
130167
{
131-
configList.map(configItem => <MenuItem key={configItem.key} onClick={configItem.callback}>
168+
menuConfigList.map(configItem => <MenuItem key={configItem.key} onClick={configItem.callback}>
132169
<configItem.icon style={{ color: '#1890fe', fontSize: '20px' }}></configItem.icon>
133170
<span className={styles['menu-item-text']}>{configItem.text}</span>
134-
{configItem.key === 'language' && <LanguageChange toolTipsVisible={false}></LanguageChange>}
135171
</MenuItem>)
136172
}
137173
</Menu>

0 commit comments

Comments
 (0)