최근 메시지로 스크롤 이동

최신의 메시지가 오는 경우, 스크롤이 자동으로 최신 메시지를 향해 내려가도록 설정하는 이벤트를 구현하였다. 원리는 생각보다 매우 단순한 편, 메시지가 올 수록 스크롤의 크기는 메시지 컴포넌트 만큼 씩 커지고, 커진 스크롤의 크기를, 스크롤의 제일 탑 포인트로 설정해주면 된다.

  function scrollToBottom() {
    setTimeout(() => {
      try {
        chattingLog.current.scrollTop = chattingLog.current.scrollHeight
      } catch (err) {}
    }, 20)
  }

디바이스 토글링 이벤트

해당 서비스의 유저가 원하는 대로, 마이크를 키고 끄거나, 비디오를 키고 끌 수 있는 기능을 추가하였다.

1. mic, camera에 boolean 값을 나타내는 useState() 걸어준다.
2. onClick 이벤트를 통해, state 값이 변경되도록 하자. 켜진 상태면 true이고 꺼진 상태면 false 이다.
3. mic와 camera의 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} />