Amazon Chime SDK 애플리케이션에 BGM/SE 기능 추가

이 보도는 이 보도에 대해 수정을 진행하였다.
https://cloud.flect.co.jp/entry/2021/03/01/130602

개시하다

Amazon Chime SDK for JS[1]의 보이스 포커스를 사용해 소음을 제거하는 방법인용하다을 소개했다.이번에는 소음을 제거한 뒤 추가로 BGM과 SE를 추가하는 방법을 소개한다.앞서 몇 차례 소개된 가상 배경의 사운드 버전인용하다.
제작된 것은 아래의 영상과 같다.빗속에서 강의하는 영상에는 빗소리 대신 우주배경음악이 추가됐다.동시에 배경을 바꾸면 큰비 속의 사람들은 곧 우주에서 말하는 상황이 될 것이다.
https://youtu.be/awfXdqRoC6I
또 이번에는 아마존 치미 SDK의 소음 제거 기능인 보이스 포커스를 자세히 설명하지 않는다.지난번 문장인용하다을 참조하세요.

Amazon Chime SDK에 있는 오디오 인풋과 믹싱.

내가 아마존 Chime SDK를 처음 접한 것은 약 1년 전부터 시작됐다.그때부터 아마존 Chime SDK는 HTML5MediaStream를 입력으로 사용할 수 있다는 점에서 확장성이 높고 유연성도 좋다인용하다[2].물론 오디오 인풋은 미디어 스트림을 입력으로 처리할 수도 있다.
따라서 사운드(마이크 입력 등)에 BGM과 SE를 설치하고 Web Audio API를 사용해 BGM을 기존 사운드에 섞어 미디어스트림을 꺼내 아마존 치미 SDK의 오디오 인풋으로 설정하면 된다.Amazon Chime SDK는 내부에서 처리할 수 있는 APImixIntoAudioInput를 제공합니다.

보이스 포커스와의 협업 과제

그럼, 이걸로 한 가지 일을 해결할 수 있어!사실 이 방식은 문제가 있다.믹스인투오디오인풋과 보이스포커스를 병용하면 보이스포커스는 BGM과 SE를 소음으로 예쁘게 제거한다.아, 그럼요.문서에 상세한 설명이 없으니 제공mixIntoAudioInput의 원본 코드DefaultDeviceController를 확인하십시오.(2021/26시 최신 소스(659662238 e69c5202c3e 697aeeed54f2a 0d35b)

  mixIntoAudioInput(stream: MediaStream): MediaStreamAudioSourceNode {
    <snip...>
      node = DefaultDeviceController.getAudioContext().createMediaStreamSource(stream); // <---(1)
      node.connect(this.getMediaStreamOutputNode());                                    // <---(2)
    <snip...>
  }

(1)에서 믹스할 미디어스트림 입력 노드를 만들고 (2)에서 출력용 노드에 연결합니다.이 출력은 노드getMediaStreamOutputNode에서 얻을 수 있습니다.그럼 getMediaStreamOutputNode도 보세요.

  private getMediaStreamOutputNode(): AudioNode {
    return this.transform?.nodes?.start || this.getMediaStreamDestinationNode();
  }

따라서 보이스 포커스를 사용할 때 이 입력 노드(transform 장치의 입력 노드)를 출력 노드로 되돌려줍니다.그 결과 다음 그림과 같이 Mix의 BGM과 SE 등의 입력은 Voice Focus의 입력 노드(빨간색 선 부분)와 연결됩니다.또한 VoiceFocus를 사용하지 않으면 Destination Node에 직접 연결됩니다.(청선 부분)

믹스인투오디오인풋을 통해 입력한 BGM과 SE가 보이스포커스에 의해 소음으로 인식되면 제거되는 셈이다.어렵게 추가한 BGM과 SE는 예쁘지 않다는 평가를 받았다.이것은 큰 문제다.
이 처리는 문서에 기재되지 않은 내부 처리로 앞으로 처리가 바뀔 수 있다.그러나 적어도 지금은 BGM 대신 mixIntoAudioInput를 쓸 수는 없다.솔루션 후보 중 하나로 상속DefaultDeviceController과 중첩mixIntoAudioInput을 고려할 수 있다.상기mixIntoAudioInput의 (2) 부분에서 this.getMediaStreamOutputNode() 대신 this.getMediaStreamDestinationNode()로 출력 노드를 직접 얻는 방법.단, getMediaStreamDestinationNode()privete 방법이기 때문에 상속인에게 호칭할 수 없습니다.나는 막다른 골목에 이르렀다.
포기할 수밖에 없겠죠?삼촌 우주로 데려가면 안 돼요?아니오, 다시 생각해 봅시다.

Amazon Chime SDK의 확장성

여기서 다시 한번 돌아보고 싶은 것은 오디오 인풋으로 미디어스트림을 활용할 수 있다는 점이다.중요한 것은 어떤 가공을 하든 미디어스트림으로 출력할 수만 있다면 아마존 Chime SDK에 입력할 수 있다는 것이다.그래서 아마존 치미 SDK를 입력하기 전에 소음과 BGM을 섞는 것부터 제거하면 되지 않을까 생각한다.즉 구성은 아래 그림과 같다.

이를 위해서는 소음 제거 처리 기능이 필요하지만, 아마존 Chime SDK에는 보이스 포커스가 있다.이 기능을 유용하게 해 주세요.지난번에는 보이스 포커스가 만든 Transform Device를 audioInput으로 직접 지정했습니다.이번에는 제작된 Transform Device에서 출력을 추출하고 웹 오디오 API에서 BGM과 믹스를 선택합니다.그런 다음 audioInput에서 Mix 결과(MediaStream)를 지정합니다.

데모

다음 영상은 실제 작동한 결과다.소음을 제거한 상태에서 BGM을 추가할 수 있다.
https://youtu.be/awfXdqRoC6I

창고.

이번에 평가에 사용된 프레젠테이션 원고의 원본 코드는 다음 창고에 있습니다.
https://github.com/w-okada/flect-chime-sdk-demo
화면 위의 메뉴 표시줄에서 Noise Suppression(Voice Focus) 및 가상 배경을 설정할 수 있습니다.또한 BGM/SE는 Menu를 켜서 BGM/SE에서 재생할 수 있습니다.

또 이 창고의 앱에는 여기에 소개된 기능 외에 채팅 기능과 화이트보드 기능도 탑재돼 있다.코그니토 협업도 이뤄졌다.

총결산

이번에는 Amazon Chime SDK로 BGM/SE를 추가해 봤다.일반적인 사용법으로 보이스포커스와 동시에 사용하면 BGM/SE를 제거하기 때문에 보이스포커스의 출력을 연결해서 거기에 BGM/SE를 추가해 봅니다.결과는 시위에서 본 바와 같이 나는 잘했다고 생각한다.앞으로 믹스인투오디오인풋은 개량을 거쳐 더 직접적인 믹스가 있을 수 있지만, 이렇게 하면 가능하다는 것을 이미 알고 있다.

Acknowledgments

시위 행진에는 이쪽의'창의·공모 표시 허가증(재사용 허용)'영상이 사용됐다.
BGM은 이쪽 BGM을 사용했어요.
https://otologic.jp
가상 배경은 이쪽 그림을 사용했습니다.
https://www.irasutoya.com/
각주
Amazon Chime SDK for JS는 Amazon이 제공하는 화상회의 시스템을 웹 애플리케이션에 끼워 넣는 SDK다.↩︎
기타 SDK는 대부분 장치 ID를 지정합니다.아직 조사가 안 됐습니다.↩︎