Engineer (AI Inside)

1
createClient (userId) {
2
      //获取签名
3
      const config = this.genTestUserSig(userId)
4
      const sdkAppId = config.sdkAppId
5
      const userSig = config.userSig
6
      this.client = TRTC.createClient({
7
        mode: 'videoCall',
8
        sdkAppId,
9
        userId,
10
        userSig
11
      });
12
      //注册远程监听，要放在加入房间前--这里用了发布订阅模式
13
      this.subscribeStream(this.client)
14
      //初始化后才能加入房间
15
      this.joinRoom(this.client, this.roomId)
16
    },
17
joinRoom (client, roomId) {
18
      client.join({ roomId })
19
        .catch(error => {
20
          console.error('进房失败 ' + error);
21
        })
22
        .then(() => {
23
          console.log('进房成功');
24
          //创建本地流
25
          this.createStream(this.userId)
26
          //播放远端流
27
          this.playStream(this.client)
28
      });
29
    },

1
const Chat = () => {
2
    // 假设请求后端有 hooks
3
    const {sdkAppId, sig, loading} = useQuery(‘generate usersig', userId);
4

5
    const [localStream, setLocalStream] = useState(null);
6
    const [client, setClient] = useState(null);
7

8
    useEffect(() => {
9
        if(sdkAppId){
10
            const client = TRTC.createClient({
11
                mode: 'videoCall',
12
                sdkAppId,
13
                userId: accountId,
14
                userSig: sig
15
            });
16
            subscribeStream(client);
17
            joinRoom(client, roomId, userId, setLocalStream, setClient);
18
        }
19

20
        return () =>{
21
            if(client && localStream){
22
                leaveRoom(client, localStream, setLocalStream, setClient)
23
            }
24
        }
25
    }, [loading])
26

27
    return (
28
        sdkAppId
29
            ? <div className='video'>
30
                <div className='video-content'>
31
                    <div id='local_stream' className='video-content-local_stream'/>
32
                    <div id='remote_stream' className='video-content-remote_stream'/>
33
                    <div
34
                        className='video-content-btn'
35
                        onClick={() => leaveRoom(client, localStream, setLocalStream, setClient, history)}
36
                    >退出</div>
37
                </div>
38
            </div>
39
            : <div className='video-loading'>
40
                <Spin tip='Loading...' size='large'/>
41
            </div>
42
    )
43
}