최신의 메시지가 오는 경우, 스크롤이 자동으로 최신 메시지를 향해 내려가도록 설정하는 이벤트를 구현하였다. 원리는 생각보다 매우 단순한 편, 메시지가 올 수록 스크롤의 크기는 메시지 컴포넌트 만큼 씩 커지고, 커진 스크롤의 크기를, 스크롤의 제일 탑 포인트로 설정해주면 된다.
function scrollToBottom() {
setTimeout(() => {
try {
chattingLog.current.scrollTop = chattingLog.current.scrollHeight
} catch (err) {}
}, 20)
}
해당 서비스의 유저가 원하는 대로, 마이크를 키고 끄거나, 비디오를 키고 끌 수 있는 기능을 추가하였다.
boolean
값을 나타내는 useState()
걸어준다.onClick
이벤트를 통해, state
값이 변경되도록 하자. 켜진 상태면 true
이고 꺼진 상태면 false
이다.state
를 매개로, 새로운 publihser
를 생성한다. 단, 새로운 publisher
를 연결하기전, 이전에 session
에서 이전의 mainStreamManager
를 제거해주어야 한다. // 디바이스 토글링 이벤트
...
...
const [mic, setMic] = useState(true)
const [camera, setCamera] = useState(false)
useEffect(() => {
onToggleDevice(mic, camera)
}, [mic, camera])
...
...
const toggleDevice = async (audio, video) => {
try {
let devices = await openvidu.OV.getDevices()
let videoDevices = devices.filter(device => device.kind === 'videoinput')
let newPublisher = openvidu.OV.initPublisher(undefined, {
audioSource: undefined, // The source of audio. If undefined default microphone
videoSource: videoDevices[0].deviceId, // The source of video. If undefined default webcam
publishAudio: audio, // Whether you want to start publishing with your audio unmuted or not
publishVideo: video, // Whether you want to start publishing with your video enabled or not
resolution: '640x480', // The resolution of your video
frameRate: 30, // The frame rate of your video
insertMode: 'APPEND', // How the video is inserted in the target element 'video-container'
mirror: false, // Whether to mirror your local video
})
await openvidu.session.unpublish(openvidu.mainStreamManager)
await openvidu.session.publish(newPublisher)
const dataObj = {
currentVideoDevice: videoDevices[0],
publisher: newPublisher,
}
dispatch(ovActions.createPublisher(dataObj))
} catch (error) {
console.log(error)
}
}
...
...
<VideoControlBtns onToggleDevice={toggleDevice} />