Skip to content

Commit 228c11d

Browse files
Rychouanderlu
authored andcommitted
feat: update Web/base-react-next
1 parent 7e691ac commit 228c11d

File tree

11 files changed

+106
-43
lines changed

11 files changed

+106
-43
lines changed

Web/base-react-next/public/graph.js

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,6 @@
1010
'use strict';
1111
/* exported TimelineDataSeries, TimelineGraphView */
1212

13-
// The maximum number of data points bufferred for each stats. Old data points
14-
// will be shifted out when the buffer is full.
15-
const MAX_STATS_DATA_POINT_BUFFER_SIZE = 1000;
16-
1713
const TimelineDataSeries = (function() {
1814
/**
1915
* @constructor
@@ -30,6 +26,9 @@ const TimelineDataSeries = (function() {
3026
this.cacheStartTime_ = null;
3127
this.cacheStepSize_ = 0;
3228
this.cacheValues_ = [];
29+
// The maximum number of data points bufferred for each stats. Old data points
30+
// will be shifted out when the buffer is full.
31+
this.maxStatsDataPointBufferSize = 1000;
3332
}
3433

3534
TimelineDataSeries.prototype = {
@@ -60,7 +59,7 @@ const TimelineDataSeries = (function() {
6059
let time = new Date(timeTicks);
6160
this.dataPoints_.push(new DataPoint(time, value));
6261

63-
if (this.dataPoints_.length > MAX_STATS_DATA_POINT_BUFFER_SIZE) {
62+
if (this.dataPoints_.length > this.maxStatsDataPointBufferSize) {
6463
this.dataPoints_.shift();
6564
}
6665
},

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

Lines changed: 16 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -111,9 +111,14 @@ export default class RTC extends React.Component {
111111
microphoneId: this.microphoneID,
112112
mirror: this.mirror,
113113
});
114-
await this.localStream.initialize();
115-
this.addStream && this.addStream(this.localStream);
116-
return this.localStream;
114+
try {
115+
await this.localStream.initialize();
116+
this.addStream && this.addStream(this.localStream);
117+
return this.localStream;
118+
} catch (error) {
119+
this.localStream = null;
120+
alert(`${JSON.stringify(error.message)}`);
121+
}
117122
}
118123

119124
destroyLocalStream() {
@@ -350,8 +355,14 @@ export default class RTC extends React.Component {
350355
console.error(error);
351356
alert(error);
352357
});
353-
this.client.on('client-banned', (error) => {
358+
this.client.on('client-banned', async (error) => {
354359
console.error(`client has been banned for ${error}`);
360+
361+
this.isPublished = false;
362+
this.localStream = null;
363+
this.setState && this.setState('publish', this.isPublished);
364+
await this.handleLeave();
365+
355366
alert(error);
356367
});
357368
// fired when a remote peer is joining the room
@@ -378,13 +389,13 @@ export default class RTC extends React.Component {
378389
console.log(`remote stream added: [${remoteUserID}] type: ${remoteStream.getType()}`);
379390
// subscribe to this remote stream
380391
this.handleSubscribe(remoteStream);
381-
this.addStream && this.addStream(remoteStream);
382392
}
383393
});
384394
// fired when a remote stream has been subscribed
385395
this.client.on('stream-subscribed', (event) => {
386396
const { stream: remoteStream } = event;
387397
console.log('stream-subscribed userId: ', remoteStream.getUserId());
398+
this.addStream && this.addStream(remoteStream);
388399
});
389400
// fired when the remote stream is removed, e.g. the remote user called Client.unpublish()
390401
this.client.on('stream-removed', (event) => {

Web/base-react-next/src/components/CountryCodeSelect/index.js

Lines changed: 18 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
11
import a18n from 'a18n';
22
/* eslint-disable no-use-before-define */
3-
import React, { useState } from 'react';
3+
import React, { useState, useEffect } from 'react';
44
import PropTypes from 'prop-types';
55
import styles from './index.module.scss';
66
import Autocomplete, { createFilterOptions } from '@material-ui/lab/Autocomplete';
77
import InputAdornment from '@material-ui/core/InputAdornment';
88
import Input from '@material-ui/core/Input';
99
import { COUNTRIES } from '../../utils/constants';
10+
import { getLanguage } from '@utils/common';
1011

1112
// ISO 3166-1 alpha-2
1213
// ⚠️ No support for IE 11
@@ -25,6 +26,13 @@ function countryToFlag(isoCode) {
2526

2627
export default function CountryCodeSelect(props) {
2728
const [defaultValue] = useState(() => (props.defaultValue ? props.defaultValue : 46));
29+
const [mountFlag, setMountFlag] = useState(false);
30+
31+
useEffect(() => {
32+
const language = getLanguage();
33+
a18n.setLocale(language);
34+
setMountFlag(true);
35+
}, []);
2836

2937
const handleChange = (event, newValue, reason) => {
3038
console.log('CountryCodeSelect handleChange', event, newValue, reason);
@@ -57,14 +65,15 @@ export default function CountryCodeSelect(props) {
5765
</React.Fragment>
5866
)}
5967
renderInput={params => (<div ref= {params.InputProps.ref}>
60-
<Input
61-
type= "text"
62-
placeholder={a18n('区号')}
63-
startAdornment= {
64-
<InputAdornment position="start">+</InputAdornment>
65-
}
66-
{...params.inputProps}
67-
/>
68+
{ mountFlag && <Input
69+
type= "text"
70+
placeholder={a18n('区号')}
71+
startAdornment= {
72+
<InputAdornment position="start">+</InputAdornment>
73+
}
74+
{...params.inputProps}
75+
/>
76+
}
6877
</div>
6978
)}
7079
/>

Web/base-react-next/src/components/DeviceSelect/DeviceData.js

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,12 +30,14 @@ export default function DeviceData({ deviceType, updateDeviceList, updateActiveD
3030
alert(a18n`请允许网页访问${deviceType === 'microphone' ? a18n('麦克风') : a18n('摄像头')}的权限!`);
3131
} else if (error.name === 'NotFoundError') {
3232
alert(a18n`请检查${deviceType === 'microphone' ? a18n('麦克风') : a18n('摄像头')}设备连接是否正常!`);
33+
} else if (error.name === 'NotReadableError') {
34+
alert(a18n`请检查${deviceType === 'microphone' ? a18n('麦克风') : a18n('摄像头')}设备是否被其它应用占用或未授权应用权限!`);
3335
}
3436
}
3537

3638
const list = await getDeviceList(deviceType);
3739
updateDeviceList && updateDeviceList(list);
38-
const activeDeviceId = list[0].deviceId;
40+
const activeDeviceId = (list[0] && list[0].deviceId) || '';
3941
updateActiveDeviceId && updateActiveDeviceId(activeDeviceId);
4042
}, []);
4143

Web/base-react-next/src/components/DeviceSelect/index.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -35,11 +35,11 @@ export default function DeviceSelect({ deviceType, onChange }) {
3535
const [activeDevice, setActiveDevice] = useState({});
3636
const [activeDeviceId, setActiveDeviceId] = useState('');
3737

38-
const updateDeviceList = (list) => {
38+
const updateDeviceList = (list = []) => {
3939
setDeviceList((prevList) => {
4040
if (prevList.length === 0) {
41-
setActiveDevice(list[0]);
42-
setActiveDeviceId(list[0].deviceId);
41+
list[0] && setActiveDevice(list[0]);
42+
list[0] && list[0].deviceId && setActiveDeviceId(list[0].deviceId);
4343
}
4444
return list;
4545
});

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,17 +2,17 @@ import RTC from '@components/BaseRTC';
22
import toast from '@components/Toast';
33

44
class Client extends RTC {
5-
async handlePublish(videoBitRate = 480) {
5+
async handlePublish(options) {
66
if (!this.isJoined || this.isPublished) {
77
return;
88
}
99
await this.initLocalStream();
1010

1111
await this.localStream.setVideoProfile({
12-
width: 640,
13-
height: 480,
14-
frameRate: 15,
15-
bitrate: videoBitRate,
12+
width: (options && options.videoWidth) || 640,
13+
height: (options && options.videoHeight) || 480,
14+
frameRate: (options && options.videoFps) || 15,
15+
bitrate: (options && options.videoBitRate) || 900,
1616
});
1717

1818
try {

Web/base-react-next/src/locales/en.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@
3434
"麦克风": "Mic",
3535
"摄像头": "Camera",
3636
"请检查%s设备连接是否正常!": "Check whether device %s is connected.",
37+
"请检查%s设备是否被其它应用占用!": "Check whether device %s is occupied by other applications.",
3738
"中文": "Chinese",
3839
"英文": "English",
3940
"语言切换": "Language",
@@ -87,7 +88,7 @@
8788
"远端流为空,无法录制": "The remote stream is empty and cannot be recorded",
8889
"录制内容为空,请先录制": "The recording is empty, please record first",
8990
"请先同意隐私协议!": "Agree to the Privacy Policy first.",
90-
"请检查手机号是否正确": "Invalid phone number",
91+
"请检查手机号、区号是否正确": "Please check whether the cell phone number and area code are correct",
9192
"请检查密码,密码长度不低于6个字符": "The password must contain at least 6 characters.",
9293
"登录异常,请重新登录": "Login error. Please try again.",
9394
"请检查短信验证码": "Verification code required",

Web/base-react-next/src/locales/zh-CN.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@
2929
"麦克风": "麦克风",
3030
"摄像头": "摄像头",
3131
"请检查%s设备连接是否正常!": "请检查%s设备连接是否正常!",
32+
"请检查%s设备是否被其它应用占用!": "请检查%s设备是否被其它应用占用!",
3233
"中文": "中文",
3334
"英文": "英文",
3435
"语言切换": "语言切换",
@@ -83,7 +84,7 @@
8384
"远端流为空,无法录制": "远端流为空,无法录制",
8485
"录制内容为空,请先录制": "录制内容为空,请先录制",
8586
"请先同意隐私协议!": "请先同意隐私协议!",
86-
"请检查手机号是否正确": "请检查手机号是否正确",
87+
"请检查手机号、区号是否正确": "请检查手机号、区号是否正确",
8788
"请检查密码,密码长度不低于6个字符": "请检查密码,密码长度不低于6个字符",
8889
"登录异常,请重新登录": "登录异常,请重新登录",
8990
"请检查短信验证码": "请检查短信验证码",

Web/base-react-next/src/pages/improve-bwe/index.js

Lines changed: 48 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import RoomIDInput from '@components/RoomIDInput';
1111
import { getNavConfig } from '@api/nav';
1212
import { getUrlParam } from '@utils/utils';
1313
import { handlePageUrl, handlePageChange, getLanguage } from '@utils/common';
14-
import { Button, Accordion, AccordionSummary, AccordionDetails, makeStyles, Select, TextField, Typography, MenuItem, FormControl, InputLabel } from '@material-ui/core';
14+
import { Button, Accordion, AccordionSummary, AccordionDetails, makeStyles, TextField, Typography } from '@material-ui/core';
1515
import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
1616
import SideBar from '@components/SideBar';
1717
import styles from '@styles/common.module.scss';
@@ -64,9 +64,12 @@ export default function BasicRtc(props) {
6464
const [isJoined, setIsJoined] = useState(false);
6565
const [isPublished, setIsPublished] = useState(false);
6666
const [isMobile, setIsMobile] = useState(false);
67-
const [videoBitRate, setVideoBitRate] = useState(500);
68-
const [bandValue, setBandValue] = useState('None');
69-
const bandWidthList = ['None', '2000', '1000', '500', '250', '125'];
67+
const [videoWidth, setVideoWidth] = useState(640);
68+
const [videoHeight, setVideoHeight] = useState(480);
69+
const [videoFps, setVideoFps] = useState(15);
70+
const [videoBitRate, setVideoBitRate] = useState(900);
71+
// const [bandValue, setBandValue] = useState('None');
72+
// const bandWidthList = ['None', '2000', '1000', '500', '250', '125'];
7073
const [mountFlag, setMountFlag] = useState(false);
7174

7275
useEffect(() => {
@@ -98,18 +101,21 @@ export default function BasicRtc(props) {
98101

99102
let bytes;
100103
let packets;
104+
let framesSent;
101105
RTC && RTC.client.getLocalVideoStats().then((stats) => {
102106
(Object.keys(stats || {}) || []).forEach((userId) => {
103107
console.log(`userId: ${userId} bytesSent: ${stats[userId].bytesSent} packetsSent: ${stats[userId].packetsSent}
104108
framesEncoded: ${stats[userId].framesEncoded} framesSent: ${stats[userId].framesSent} frameWidth: ${stats[userId].frameWidth}
105-
frameHeight: stats[userId].frameHeight`);
109+
frameHeight: ${stats[userId].frameHeight}`);
106110
bytes = stats[userId].bytesSent;
107111
packets = stats[userId].packetsSent;
112+
framesSent = stats[userId].framesSent;
108113
const now = new Date().getTime();
109114
if (lastResult) {
110115
// calculate bitrate
111116
const bitrate = (8 * (bytes - lastResult.bytes)) / (now - lastResult.timestamp);
112117
console.log(`video bitrate: ${bitrate}`);
118+
console.log(`video fps: ${(framesSent - lastResult.framesSent) / (now - lastResult.timestamp) * 1000}`);
113119
// append to chart
114120
bitrateSeries.addPoint(now, bitrate);
115121
bitrateGraph.setDataSeries([bitrateSeries]);
@@ -119,10 +125,10 @@ export default function BasicRtc(props) {
119125
packetGraph.setDataSeries([packetSeries]);
120126
packetGraph.updateEndDate();
121127
}
122-
lastResult = { bytes, packets, timestamp: now };
128+
lastResult = { bytes, packets, timestamp: now, framesSent };
123129
});
124130
});
125-
}, 1000);
131+
}, 3000);
126132
} else {
127133
clearInterval(timerId);
128134
}
@@ -133,11 +139,21 @@ export default function BasicRtc(props) {
133139

134140
const handleJoin = async () => {
135141
await RTC.handleJoin();
136-
await RTC.handlePublish(videoBitRate);
142+
await RTC.handlePublish({
143+
videoWidth,
144+
videoHeight,
145+
videoFps,
146+
videoBitRate,
147+
});
137148
};
138149

139150
const handlePublish = async () => {
140-
await RTC.handlePublish();
151+
await RTC.handlePublish({
152+
videoWidth,
153+
videoHeight,
154+
videoFps,
155+
videoBitRate,
156+
});
141157
};
142158

143159
const handleUnPublish = async () => {
@@ -470,22 +486,43 @@ export default function BasicRtc(props) {
470486
<UserIDInput disabled={isJoined} onChange={value => setUserID(value)}></UserIDInput>
471487
<RoomIDInput disabled={isJoined} onChange={value => setRoomID(value)}></RoomIDInput>
472488

489+
<TextField
490+
value={videoWidth}
491+
label="videoWidth"
492+
className={clsx(classes['band-input'], isMobile && classes['band-input-mobile'])}
493+
onChange={e => setVideoWidth(e.target.value)}
494+
></TextField>
495+
496+
<TextField
497+
value={videoHeight}
498+
label="videoHeight"
499+
className={clsx(classes['band-input'], isMobile && classes['band-input-mobile'])}
500+
onChange={e => setVideoHeight(e.target.value)}
501+
></TextField>
502+
503+
<TextField
504+
value={videoFps}
505+
label="VideoFps"
506+
className={clsx(classes['band-input'], isMobile && classes['band-input-mobile'])}
507+
onChange={e => setVideoFps(e.target.value)}
508+
></TextField>
509+
473510
<TextField
474511
value={videoBitRate}
475512
label="VideoBitrate(kbps)"
476513
className={clsx(classes['band-input'], isMobile && classes['band-input-mobile'])}
477514
onChange={e => setVideoBitRate(e.target.value)}
478515
></TextField>
479516

480-
<FormControl className={clsx(classes['band-input'], isMobile && classes['band-input-mobile'])}>
517+
{/* <FormControl className={clsx(classes['band-input'], isMobile && classes['band-input-mobile'])}>
481518
<InputLabel id="simple-select-label">BandWidth</InputLabel>
482519
<Select
483520
value={bandValue}
484521
onChange={e => setBandValue(e.target.value)}
485522
>
486523
{bandWidthList.map(num => <MenuItem value={num} key={num}>{num}</MenuItem>)}
487524
</Select>
488-
</FormControl>
525+
</FormControl> */}
489526

490527
<DeviceSelect deviceType="camera" onChange={value => setCameraID(value)}></DeviceSelect>
491528
<DeviceSelect deviceType="microphone" onChange={value => setMicrophoneID(value)}></DeviceSelect>

Web/base-react-next/src/pages/improve-record-stream/index.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -404,6 +404,7 @@ export default function BasicRtc(props) {
404404
try {
405405
const mediaStream = new MediaStream();
406406
mediaStream.addTrack(remoteStreamConfigList[0].stream.getAudioTrack());
407+
mediaStream.addTrack(remoteStreamConfigList[0].stream.getVideoTrack());
407408
mediaRecorder = new MediaRecorder(mediaStream);
408409
} catch (error) {
409410
console.error('Exception while creating MediaRecorder:', error);

0 commit comments

Comments
 (0)