> For the complete documentation index, see [llms.txt](https://teamsmiley.gitbook.io/devops/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://teamsmiley.gitbook.io/devops/ai/whisper/realtime-voice.md).

# 실시간 voice chat

//todo

여기는 아직 완료 전

## architecture

좀 복잡하네..

![](https://github.com/teamsmiley/gitbook/blob/master/ai/whisper/images/2023-04-23-07-02-51.png)

## plan

1. 오디오 스트리밍해서 서버로 보내기
2. realtime으로 whisper에 넣기
3. realtime으로 결과값을 브라우저로 보내기

## audio로

브라우저에서 녹음하는방식은 2개가 있다.

1. mic : navigator.mediaDevices.getUserMedia
2. 영상/소리 소스에서 바로 (예를들명 강의틀어놓고 바로 강의 내용 저장) : navigator.mediaDevices.getDisplayMedia

마이크를 통해서 저장하는것으로 결정

매초마다 짤라서 보내서 결과를 봐야하는듯. 결과를 보여주는 창도 필요

<https://www.youtube.com/watch?v=8CNVYWiR5fg&list=PL_jn5jikluSLgUm21t_9PSR5ZvzYc40-E>

<https://tutorialedge.net/typescript/angular/angular-services-tutorial/>

ng g service websocket

```ts
import * as rx from rxjs/RX

private subject: Rx.Subject<MessageEvent>;
public connect(url ): Rx.Subject<MessageEvent>{
  if(! this.subject) {
    this.subject = this.create(url);
    console.log("successfully connect:"+ url);
  }
  return this.subject;

}

private create(url): Rx.Subject<messageEvent>{
  let ws = new WebSocket(url);
  let observable = Rx.Obserable.create(
    (obs: Rx.Observer<MessageEvent>) => {
      ws.onmessage = obs.net.bind(0bs)
      we.onerror = obs.error.bind(0bs)
      ws.onclose = obs.complete.bind(obs);
      return ws.close.bind(ws)
    }
  )

  let observer = {
    next: (data: Object) => {
      if(ws.readyState === WebSocket.OPEN) {
        ws.send(JSON.stringify(data));
      }
    }
  }

  return Rx.Subject.create(observer,observable);

}

ng g service chat

chatservice

```