@@ -11,7 +11,7 @@ import RoomIDInput from '@components/RoomIDInput';
11
11
import { getNavConfig } from '@api/nav' ;
12
12
import { getUrlParam } from '@utils/utils' ;
13
13
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' ;
15
15
import ExpandMoreIcon from '@material-ui/icons/ExpandMore' ;
16
16
import SideBar from '@components/SideBar' ;
17
17
import styles from '@styles/common.module.scss' ;
@@ -64,9 +64,12 @@ export default function BasicRtc(props) {
64
64
const [ isJoined , setIsJoined ] = useState ( false ) ;
65
65
const [ isPublished , setIsPublished ] = useState ( false ) ;
66
66
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'];
70
73
const [ mountFlag , setMountFlag ] = useState ( false ) ;
71
74
72
75
useEffect ( ( ) => {
@@ -98,18 +101,21 @@ export default function BasicRtc(props) {
98
101
99
102
let bytes ;
100
103
let packets ;
104
+ let framesSent ;
101
105
RTC && RTC . client . getLocalVideoStats ( ) . then ( ( stats ) => {
102
106
( Object . keys ( stats || { } ) || [ ] ) . forEach ( ( userId ) => {
103
107
console . log ( `userId: ${ userId } bytesSent: ${ stats [ userId ] . bytesSent } packetsSent: ${ stats [ userId ] . packetsSent }
104
108
framesEncoded: ${ stats [ userId ] . framesEncoded } framesSent: ${ stats [ userId ] . framesSent } frameWidth: ${ stats [ userId ] . frameWidth }
105
- frameHeight: stats[userId].frameHeight` ) ;
109
+ frameHeight: ${ stats [ userId ] . frameHeight } ` ) ;
106
110
bytes = stats [ userId ] . bytesSent ;
107
111
packets = stats [ userId ] . packetsSent ;
112
+ framesSent = stats [ userId ] . framesSent ;
108
113
const now = new Date ( ) . getTime ( ) ;
109
114
if ( lastResult ) {
110
115
// calculate bitrate
111
116
const bitrate = ( 8 * ( bytes - lastResult . bytes ) ) / ( now - lastResult . timestamp ) ;
112
117
console . log ( `video bitrate: ${ bitrate } ` ) ;
118
+ console . log ( `video fps: ${ ( framesSent - lastResult . framesSent ) / ( now - lastResult . timestamp ) * 1000 } ` ) ;
113
119
// append to chart
114
120
bitrateSeries . addPoint ( now , bitrate ) ;
115
121
bitrateGraph . setDataSeries ( [ bitrateSeries ] ) ;
@@ -119,10 +125,10 @@ export default function BasicRtc(props) {
119
125
packetGraph . setDataSeries ( [ packetSeries ] ) ;
120
126
packetGraph . updateEndDate ( ) ;
121
127
}
122
- lastResult = { bytes, packets, timestamp : now } ;
128
+ lastResult = { bytes, packets, timestamp : now , framesSent } ;
123
129
} ) ;
124
130
} ) ;
125
- } , 1000 ) ;
131
+ } , 3000 ) ;
126
132
} else {
127
133
clearInterval ( timerId ) ;
128
134
}
@@ -133,11 +139,21 @@ export default function BasicRtc(props) {
133
139
134
140
const handleJoin = async ( ) => {
135
141
await RTC . handleJoin ( ) ;
136
- await RTC . handlePublish ( videoBitRate ) ;
142
+ await RTC . handlePublish ( {
143
+ videoWidth,
144
+ videoHeight,
145
+ videoFps,
146
+ videoBitRate,
147
+ } ) ;
137
148
} ;
138
149
139
150
const handlePublish = async ( ) => {
140
- await RTC . handlePublish ( ) ;
151
+ await RTC . handlePublish ( {
152
+ videoWidth,
153
+ videoHeight,
154
+ videoFps,
155
+ videoBitRate,
156
+ } ) ;
141
157
} ;
142
158
143
159
const handleUnPublish = async ( ) => {
@@ -470,22 +486,43 @@ export default function BasicRtc(props) {
470
486
< UserIDInput disabled = { isJoined } onChange = { value => setUserID ( value ) } > </ UserIDInput >
471
487
< RoomIDInput disabled = { isJoined } onChange = { value => setRoomID ( value ) } > </ RoomIDInput >
472
488
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
+
473
510
< TextField
474
511
value = { videoBitRate }
475
512
label = "VideoBitrate(kbps)"
476
513
className = { clsx ( classes [ 'band-input' ] , isMobile && classes [ 'band-input-mobile' ] ) }
477
514
onChange = { e => setVideoBitRate ( e . target . value ) }
478
515
> </ TextField >
479
516
480
- < FormControl className = { clsx ( classes [ 'band-input' ] , isMobile && classes [ 'band-input-mobile' ] ) } >
517
+ { /* <FormControl className={clsx(classes['band-input'], isMobile && classes['band-input-mobile'])}>
481
518
<InputLabel id="simple-select-label">BandWidth</InputLabel>
482
519
<Select
483
520
value={bandValue}
484
521
onChange={e => setBandValue(e.target.value)}
485
522
>
486
523
{bandWidthList.map(num => <MenuItem value={num} key={num}>{num}</MenuItem>)}
487
524
</Select>
488
- </ FormControl >
525
+ </FormControl> */ }
489
526
490
527
< DeviceSelect deviceType = "camera" onChange = { value => setCameraID ( value ) } > </ DeviceSelect >
491
528
< DeviceSelect deviceType = "microphone" onChange = { value => setMicrophoneID ( value ) } > </ DeviceSelect >
0 commit comments