React 下使用 TRTC

TRTC

却说进来厂里要做视频聊天,由于厂里用🐧☁️,就发现有 TRTC 支持。于是打算用 TRTC。浏览🐧厂文档,内容简略、模糊不清,且样例、SDK并没有 react 专用版,实在ごみ。搜一圈也就只有 Vue 版,只能根据改编了。

Vue 的样子

这篇所述,将 SDK 里方法进行了封装。

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
createClient (userId) {
//获取签名
const config = this.genTestUserSig(userId)
const sdkAppId = config.sdkAppId
const userSig = config.userSig
this.client = TRTC.createClient({
mode: 'videoCall',
sdkAppId,
userId,
userSig
});
//注册远程监听,要放在加入房间前--这里用了发布订阅模式
this.subscribeStream(this.client)
//初始化后才能加入房间
this.joinRoom(this.client, this.roomId)
},
joinRoom (client, roomId) {
client.join({ roomId })
.catch(error => {
console.error('进房失败 ' + error);
})
.then(() => {
console.log('进房成功');
//创建本地流
this.createStream(this.userId)
//播放远端流
this.playStream(this.client)
});
},

因此 react 版也如此封装,使用 hooks 后去除 this。观察到 localStream、client 在退出时有用,存入 state。

初始化

观察到文中使用随机数生成 userId,填入 roomId,sdkAppId 等,因此直接就创建。

生产环境显然是查出来上述信息,因此需要等待请求结果后再创建,以免报错。使用 useEffect 等待请求 hooks 完成后再创建。

react 写法

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
const Chat = () => {
// 假设请求后端有 hooks
const {sdkAppId, sig, loading} = useQuery(‘generate usersig', userId);

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

useEffect(() => {
if(sdkAppId){
const client = TRTC.createClient({
mode: 'videoCall',
sdkAppId,
userId: accountId,
userSig: sig
});
subscribeStream(client);
joinRoom(client, roomId, userId, setLocalStream, setClient);
}

return () =>{
if(client && localStream){
leaveRoom(client, localStream, setLocalStream, setClient)
}
}
}, [loading])

return (
sdkAppId
? <div className='video'>
<div className='video-content'>
<div id='local_stream' className='video-content-local_stream'/>
<div id='remote_stream' className='video-content-remote_stream'/>
<div
className='video-content-btn'
onClick={() => leaveRoom(client, localStream, setLocalStream, setClient, history)}
>退出</div>
</div>
</div>
: <div className='video-loading'>
<Spin tip='Loading...' size='large'/>
</div>
)
}

结论

除却 vue 与 react 不同语法,大体原理相同可以转化。使用 react hooks 注意其异步特性,有时序要求需做控制。由于 react 不同于 vue 存储变量方式,方法里传递了 setState 方法。


React 下使用 TRTC
https://blog.ckyol.moe/2020/06/05/reactTRTC/
作者
ϵ( 'Θ' )϶
发布于
2020年6月5日
许可协议