Restart STT + Translate

 

2022년 8월 ... 오늘이 몇 일이지?

---

일지를 다시 작성 해보려고 한다.

무작정 썼던 지난 나날과 비교해서 이번은 목적을 갖고 써보고자 한다.

6시간을 기준으로 잡고 이 시간이 끝날 때마다 지난 시간의 나를 복기하는 일지를 작성하고자 한다.물론 개발일지가 대부분일 것으로 예상한다.

 

개발일지가 아니면 일지 쓸 것이 없어서...

이번에 개발하고 있는 것은 Socket + STT + Translator다.

음성을 읽은 것과 동시에 번역이 되는 프로그램을 짜고 있고, 번역이 되는 결과물을 같은 채널안에 있는 사람들에게 출력되는 것이 목표다.

STT 자체는 MDN 에서 지원해주고 있는 API가 있어서 비교적 구현하기가 간단했다.

    recognition.addEventListener("result", (e) => {
        text = Array.from(e.results)
            .map((result) => result[0])
            .map((result) => result.transcript)
            .join("");
        console.log(subtitleText);

        subtitleText.innerText = text;
        cardBody.scrollTop = cardBody.scrollHeight;

... 이하 생략

 

Translator도 아르고스 API를 사용하니 의외로 쉽게 구현을 할 수 있었다.

if(active === true) {
      const res = await fetch("https://translate.argosopentech.com/translate", {
        method: "POST",
        body: JSON.stringify({
          q: text,
          source: "ko",
          target: getValue(),
        }),
        headers: {
          "Content-Type": "application/json"}
        });

      let data = await res.json();
      console.log(data.translatedText);
      p.innerText = data.translatedText;

      acitve = false;
    }
    ... 이하 생략...

 

아...  그리고 난관에 봉착했다 내 머리가 돌머린가? Socket Manager를 구현하는 것이 꽤 어려웠는데.... 이게 정리가 잘 안된다.

 

화상채팅에서 실행될 자막기능

 

구현하고자 하는 것은 A 자막 Element가 활성화 되었을 때 B의 시점에서는 A 아이디를 가진 Box 내부에서 A의 자막 Element가 활성화 되어야 하고, A가 말하는 내용이 자막으로 출력이 되어야 한다.

즉 Element 자체가 Socket으로 넘어가는 것이 아니라 A Element가 활성화 되어있는지, 활성화 시킨 Peer가 A가 맞는지, 같은 채널이 맞는지, 채널에 접속헤 있는지 전부 서버에서 체크하고 서버 쪽에서 B Cleint에 응답을 내려 Element와 그 안에 출력될 메시지를 호출해야 한다는 내 생각이다.

그런데 이게 의외로 복잡하다.  같은 Box(Element)안에 호출될 Element가 A의 것인지 B의 것인지 어떻게 체크해야 될지

그것을 비디오 트랙 ID로 체크할 것인지...

1. Element들의 부모와 자식을 검색해서 Element에 등록된 Peer ID와 Subtitle Box의 ID가 같은지 체크하고 같다면 Element를 출력...?

단순한 소켓이면 별 문제 없는 내용인데....

Element를 클릭하면 서로 화면이 바뀐다. Switching 되는 기능이 있어서 Box 내부 ID도 Element 구조도 달라진다.

ㅠㅠ.... 그렇게 어려운 로직은 아닌 것 같은데..... 왜 해매는거지? 어디서부터 만져야 될까? ㅠ_ ㅠ;