Amazon IVS 라이브 스트림에 자막(CC)을 추가하는 방법

세상에는 두 종류의 사람이 있습니다. 자막을 켜놓고 TV 프로그램을 보는 사람과 이상한 사람입니다.

농담은 제쳐두고, 비디오 자막의 중요성은 아무리 강조해도 지나치지 않습니다. 청각 장애가 있거나 난청이 있는 사람들에게 중요한 역할을 하는 것 외에도 캡션은 오디오를 사용할 수 없거나 명확하게 들리지 않는 경우에도 중요합니다. 공공 장소에서 비디오를 시청하고 있는데 주변 소음 때문에 오디오가 들리지 않을 수도 있습니다. 아니면 영상 속 말하는 사람이 품질이 좋지 않은 마이크를 사용하고 있거나, 시청자에게 낯선 사투리나 사투리를 사용하고 있을 수도 있습니다. 자막은 언제나 좋습니다. 불행하게도 라이브 스트림에서 오디오에 캡션을 추가하는 것은 까다롭습니다.

라이브 스트림 캡션 문제를 자세히 살펴보기 전에 의미론에 대해 조금 이야기해 보겠습니다. 자막 과 자막이라는 용어에 차이가 있다는 것을 알고 계셨나요? HTML 사양 자막을 다음과 같이 설명합니다.

사운드를 사용할 수 있지만 이해할 수 없는 경우(예: 사용자가 미디어 리소스의 오디오 트랙 언어를 이해하지 못하기 때문에)에 적합한 대화의 전사 또는 번역입니다. 영상에 겹쳤습니다.

사양에서는 캡션을 다음과 같이 설명합니다.

대화, 음향 효과, 관련 음악 신호 및 기타 관련 오디오 정보의 전사 또는 번역. 소리를 사용할 수 없거나 명확하게 들리지 않는 경우(예: 음소거되었거나 주변 소음으로 인해 들리지 않거나 사용자가 귀머거리인 경우) ). 영상에 겹쳐서;; 청각 장애가 있는 사람에게 적합한 것으로 표시되었습니다.

즉, 라이브 비디오의 "자막"에 관해 이야기할 때 일반적으로 캡션 에는 설명 정보가 포함되므로 자막을 언급합니다. 배우가 집을 떠나기 위해 차를 타고 배우자에게 작별 인사를 하는 TV 쇼의 장면을 생각해 보십시오. 이 장면의 캡션은 "안녕, 자기야. [자동차 엔진 시동]"이라고 읽을 수 있습니다.

우리는 AI 시스템이 이와 같은 상황 정보를 설명하도록 하는 데 가깝지 않기 때문에 순수한 "음성-텍스트" 자막 캡션을 라이브 스트림에 추가하는 것으로 제한됩니다. 아래 방법을 사용하여 그렇게 할 수 있습니다.

참고: 여기서 실제로 이야기하고 있는 내용은 위의 정의에 따른 자막이지만 이 블로그 게시물의 제목과 본문에는 '캡션' 또는 '자막'이라는 용어가 사용됩니다. 불행하게도 '자막'이라는 용어는 흔히 오용되기 때문에 개발자가 이 블로그 게시물을 찾고 이 기능을 라이브 스트림에 추가하는 방법을 배우는 데 도움을 주기 위해 이 용어를 부적절하게 사용하는 것이 가장 합리적입니다. 여기서 우리가 실제로 이야기하고 있는 것은 자막이라는 점만 알아두세요!

Amazon IVS 라이브 스트림에 캡션 추가

이 게시물에서 살펴보는 솔루션은 Amazon Interactive Video Service(Amazon IVS) 라이브 스트림으로 방송하는 데 중점을 둡니다. OBS 스튜디오 . OBS는 캡션에 대한 기본 지원을 제공하지 않지만 필요한 음성-텍스트 변환을 수행하고 캡션을 RTMP 스트림에 게시할 수 있는 여러 플러그인이 있습니다. Amazon IVS에서 지원되는 CEA-708/EIA-608 형식 .

이 데모에서는 ratwithacompiler의 OBS-captions-plugin 사용하기로 선택했습니다( GitHub 그리고 플러그인 페이지 ). 이 플러그인을 시작하려면, 다운로드 해 그리고 설치하다 . OBS에 설치한 후 Docks를 선택하고 Captions Dock가 활성화되어 있는지 확인하세요.

그런 다음 캡션 독에서 '기어' 아이콘을 선택하여 설정을 수정합니다.

캡션 소스가 선택되었는지 확인하고 필요에 맞게 플러그인 구성을 수정하십시오. 예를 들어 기본 캡션 시간 초과는 15.0 초로 설정되어 있었지만 5.0 초가 더 나은 값이라고 생각했습니다.

구성을 저장하고 새 라이브 스트림을 시작하면 플러그인이 음성을 텍스트로 변환하고 라이브 스트림에 필요한 캡션 정보를 생성합니다.

Amazon IVS 플레이어로 캡션 데이터를 재생하려면 TextCue 이벤트를 수신하는 이벤트 리스너를 추가하면 됩니다( 문서 ).

 ivsPlayer.addEventListener(IVSPlayer.PlayerEventType.TEXT_CUE, (evt) => { console.log(evt); }

위에 구성된 핸들러는 들어오는 모든 TextCue 이벤트를 콘솔에 기록합니다.

TextCue 이벤트의 text 속성에는 캡션 데이터가 포함되어 있습니다.

일부 HTML과 CSS를 사용하면 캡션 데이터를 <video> 요소에 오버레이로 렌더링할 수 있습니다. 이 구현은 요구 사항에 따라 크게 다르지만 캡션 데이터가 없는 지정된 기간이 지나면 오버레이 자동 숨기기를 고려해야 합니다.

요약

이 게시물에서는 OBS 플러그인을 사용하여 음성을 텍스트로 변환하고 해당 텍스트를 Amazon IVS 라이브 스트림에 캡션 데이터로 게시하는 방법을 살펴보았습니다.