# 실시간 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

```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://teamsmiley.gitbook.io/devops/ai/whisper/realtime-voice.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.