웹에서 실시간 자막 생성 기능을 개발하는 방법은 여러 가지가 있지만, 이번 글에서는 자바스크립트와 MediaStream API를 활용하는 방법에 대해 알아보겠습니다.
목차
MediaStream API란?
MediaStream API는 웹 브라우저에서 오디오/비디오 스트림에 접근할 수 있는 JavaScript API입니다. 이를 이용하여 사용자의 마이크나 웹캠에서 스트림을 얻을 수 있습니다.
브라우저에서 마이크에 접근하기
웹페이지에서 마이크에 접근하기 위해서는 getUserMedia() 메서드를 사용합니다. 이 메서드를 호출하여 사용자의 마이크에 대한 권한을 요청하고, 스트림을 얻을 수 있습니다.
navigator.mediaDevices.getUserMedia({ audio: true })
.then(function(stream) {
// 스트림을 성공적으로 얻은 경우
})
.catch(function(err) {
// 오류가 발생한 경우
});
음성을 텍스트로 변환하기
마이크로부터 얻은 오디오 스트림을 텍스트로 변환하기 위해서는 음성 인식 API를 사용해야 합니다. 구글 Chrome 브라우저에서는 Web Speech API를 제공하고 있습니다. 이를 활용하여 음성을 텍스트로 변환할 수 있습니다.
const recognition = new window.webkitSpeechRecognition(); // Chrome에서만 동작합니다.
recognition.lang = 'ko-KR'; // 인식할 언어 설정
recognition.interimResults = true; // 중간 결과를 반환할지 여부
recognition.onresult = function(event) {
const transcription = event.results[event.results.length - 1][0].transcript;
// 변환된 텍스트 처리
}
recognition.start(); // 음성 인식 시작
실시간 자막 생성
마이크에 대한 접근권한을 얻고 음성을 텍스트로 변환하는 기능을 구현한 뒤, 이를 실시간으로 화면에 표시하여 자막을 생성할 수 있습니다. 자막은 HTML 요소를 생성하거나, 특정 영역에 동적으로 업데이트하는 방식으로 구현될 수 있습니다.
const transcriptionElement = document.getElementById('transcription');
// 실시간 자막 표시
recognition.onresult = function(event) {
const transcription = event.results[event.results.length - 1][0].transcript;
transcriptionElement.innerText = transcription;
}
결론
이번 글에서는 자바스크립트와 MediaStream API를 사용하여 웹에서 실시간 자막 생성 기능을 개발하는 방법에 대해 알아보았습니다. 마이크에 접근하여 오디오 스트림을 얻고, 음성 인식 API를 활용하여 텍스트로 변환한 후 화면에 실시간으로 표시하는 방식으로 자막을 생성할 수 있습니다. 이를 활용하여 온라인 회의나 웹 기반의 음성 인터페이스 등 다양한 분야에서 유용하게 활용할 수 있습니다.
관련 자료: