📌
기존의 로직에선 사용자의 미디어를 얻어 온 후 사용자와의 peerConnection을만들고 해당peerConnection의 ontrack 이벤트가 발생될 때 정보를 받아 users 배열에 화면에 보여줄 유저정보를 담은 객체를 만들어 주는데
수정한 로직은 ontrack이벤트가 발생 되기전 미리 유저정보를 담은 객체를 만들어 users배열에 넣어 주는것입니다! 이를통해 마이크,비디오 stream이 없는 화면에 유저도 보여집니다 😊
이후 ontrack 이벤트는 stream이 있는 유저에게만 발동 되므로 해당유저정보를 담은 객체는 삭제하고 stream을 가진 새로운 객체 정보를 users 배열에 넣어 주었습니다 !
setUsers((oldUsers) => [
...oldUsers,
{
id: socketID,
stream: null,
nickName: userNickName,
isCameraOn: false,
},
]);
pc.ontrack = (e) => {
setUsers((oldUsers) => oldUsers.filter((user) => user.id !== socketID));
setUsers((oldUsers) => [
...oldUsers,
{
id: socketID,
stream: e.streams[0],
nickName: userNickName,
isCameraOn: true,
},
]);
};
await getUserMedias()
.then((streamMedia) => {
if (videoRef.current) {
videoRef.current.srcObject = streamMedia;
}
})
.catch((error) => {
userCardImgRef.current.style.display = 'block';
videoRef.current.style.display = 'none';
console.log(`getUserMedia error: ${error}`);
});
☝
생각보다 어려워 질 줄 알았던 로직이 구현해보니 걱정했던 것 보단 간단하게 나왔습니다 :)