-
Notifications
You must be signed in to change notification settings - Fork 73
/
JoinChannelVideo.tsx
143 lines (133 loc) · 3.44 KB
/
JoinChannelVideo.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
import {
ClientRoleType,
LocalVideoStreamReason,
LocalVideoStreamState,
VideoSourceType,
} from 'agora-electron-sdk';
import React, { useCallback, useEffect, useState } from 'react';
import * as log from '../../../utils/log';
import { BaseComponent } from '../components/BaseComponent';
import BaseRenderChannel from '../components/BaseRenderChannel';
import BaseRenderUsers from '../components/BaseRenderUsers';
import useInitRtcEngine from '../hooks/useInitRtcEngine';
export default function JoinChannelVideo() {
const [enableVideo] = useState<boolean>(true);
const {
channelId,
setChannelId,
token,
uid,
joinChannelSuccess,
remoteUsers,
startPreview,
engine,
} =
/**
* Step 1: initRtcEngine
*/
useInitRtcEngine(enableVideo);
/**
* Step 2: joinChannel
*/
const joinChannel = () => {
if (!channelId) {
log.error('channelId is invalid');
return;
}
if (uid < 0) {
log.error('uid is invalid');
return;
}
// start joining channel
// 1. Users can only see each other after they join the
// same channel successfully using the same app id.
// 2. If app certificate is turned on at dashboard, token is needed
// when joining channel. The channel name and uid used to calculate
// the token has to match the ones used for channel join
engine.current.joinChannel(token, channelId, uid, {
// Make myself as the broadcaster to send stream to remote
clientRoleType: ClientRoleType.ClientRoleBroadcaster,
});
};
/**
* Step 3: leaveChannel
*/
const leaveChannel = () => {
engine.current.leaveChannel();
};
const onVideoDeviceStateChanged = useCallback(
(deviceId: string, deviceType: number, deviceState: number) => {
log.info(
'onVideoDeviceStateChanged',
'deviceId',
deviceId,
'deviceType',
deviceType,
'deviceState',
deviceState
);
},
[]
);
const onLocalVideoStateChanged = useCallback(
(
source: VideoSourceType,
state: LocalVideoStreamState,
error: LocalVideoStreamReason
) => {
log.info(
'onLocalVideoStateChanged',
'source',
source,
'state',
state,
'error',
error
);
},
[]
);
useEffect(() => {
engine.current.addListener(
'onVideoDeviceStateChanged',
onVideoDeviceStateChanged
);
engine.current.addListener(
'onLocalVideoStateChanged',
onLocalVideoStateChanged
);
const engineCopy = engine.current;
return () => {
engineCopy.removeListener(
'onVideoDeviceStateChanged',
onVideoDeviceStateChanged
);
engineCopy.removeListener(
'onLocalVideoStateChanged',
onLocalVideoStateChanged
);
};
}, [engine, onLocalVideoStateChanged, onVideoDeviceStateChanged]);
return (
<BaseComponent
name={'JoinChannelVideo'}
renderChannel={() => (
<BaseRenderChannel
channelId={channelId}
joinChannel={joinChannel}
leaveChannel={leaveChannel}
joinChannelSuccess={joinChannelSuccess}
onChannelIdChange={setChannelId}
/>
)}
renderUsers={() => (
<BaseRenderUsers
enableVideo={enableVideo}
startPreview={startPreview}
joinChannelSuccess={joinChannelSuccess}
remoteUsers={remoteUsers}
/>
)}
/>
);
}