Audio message#120

[jirheee]

개요

클라이언트 사이드에서 voice message기능과 그것을 같은 반의 참가자들에게 broadcasting하는 기능을 구현했습니다.

세부 사항

1. AudioRecorder Component 구현 (client/src/components/audioRecorder.tsx)

목소리를 녹음하고,그것을 서버로 보내는 컴포넌트를 개발하였습니다.

녹음 버튼을 클릭하면 녹음이 시작되면서 빨간색으로 아이콘 색이 변하고, 다시 한번 누르면 녹음이 멈춥니다.

그리고 Send Audio Message 버튼을 클릭하면 그것이 서버로 보내져서 반 접속자들에게 broadcast됩니다.

아래와 같은 방식으로 사용할 수 있습니다

https://user-images.githubusercontent.com/65358599/144810912-a057f4b6-e1e4-44d6-933c-f7caa1c6ccf8.mov

2. LiveChatAudioMessage 프로토콜

클라이언트에서 보낸 음성 메세지를 반 접속자들에게 broadcast합니다.

Request

{ 
  classUuid: string, 
  lectureId: number, 
  arrayBuffer: ArrayBuffer // 음성 메세지 버퍼 
}

Broadcasted Message

{
  senderId: number,
  arrayBuffer: ArrayBuffer // 음성 메세지 버퍼 
}

TODO & Problems

• Recorder Design Enhancement
  • 몇초 녹음했는지 보여주기?
  • Send Audio Message 디자인 수정
  • 본인의 녹음
• 시간 부족으로 Marker/Individual Chat에서의 음성 메세지는 구현이 어려울 것 같음
  • 오디오 레코더 컴포넌트 라이브챗에서만 보이도록 해야함
• 말하고 있는 사람 표시하기