웹에서의 실시간 음성 명령을 받아들이는 가상 비서 앱 개발을 위한 MediaStream API 활용 방법

13 Oct 2023

javascript

개요

가상 비서 앱은 실시간 음성 명령을 받아들여 사용자의 요청을 처리하는 매우 유용한 도구입니다. 이번 글에서는 웹에서 이러한 실시간 음성 명령을 받아들이기 위해 MediaStream API를 활용하는 방법에 대해 알아보겠습니다.

MediaStream API 소개

MediaStream API는 웹 음성 및 비디오 스트림을 다루기 위한 JavaScript API입니다. 이를 사용하면 웹 앱에서 마이크 및 카메라와 같은 미디어 장치에 액세스하여 음성 및 비디오 데이터를 스트리밍할 수 있습니다.

MediaStream 가져오기

MediaStream API를 사용하여 마이크에서 실시간 음성 스트림을 가져오는 방법을 알아보겠습니다. 아래의 JavaScript 코드를 사용하면 해당 작업을 수행할 수 있습니다.

// MediaStream 가져오기
navigator.mediaDevices.getUserMedia({ audio: true })
  .then(function(stream) {
    // 음성 스트림에 대한 작업 수행
  })
  .catch(function(err) {
    // 오류 처리
  });

위의 코드에서는 getUserMedia() 메서드를 사용하여 미디어 장치에 대한 액세스 권한을 요청합니다. audio:true를 설정하여 오디오 스트림만 가져옵니다. 스트림이 성공적으로 가져오면 .then() 블록에서 해당 스트림을 사용하여 원하는 작업을 수행할 수 있습니다. 만약 오류가 발생하면 .catch() 블록에서 적절히 처리할 수 있습니다.

음성 인식

MediaStream을 사용하여 실시간 음성 명령을 받아들이기 위해서는 음성 인식 기술이 필요합니다. 음성 인식 기술은 다양한 제공 업체 및 API로 제공되며, 대표적으로 Google Cloud Speech-to-Text API, Microsoft Azure Speech-to-Text API, IBM Watson Speech-to-Text API 등이 있습니다.

아래는 Google Cloud의 Speech-to-Text API를 사용하여 음성 인식을 수행하는 예시입니다.

// Google Cloud Speech-to-Text API 키 설정
const apiKey = "YOUR_API_KEY";

// SpeechRecognition 객체 생성
const recognition = new SpeechRecognition();

// 음성 인식 시작
recognition.start();

// 음성 인식 결과 처리
recognition.onresult = function(event) {
  const transcript = event.results[0][0].transcript;
  // 음성 명령 처리
};

// Google Cloud Speech-to-Text API 호출
function transcribeAudio(audioFile) {
  const data = new FormData();
  data.append("file", audioFile);

  fetch("https://speech.googleapis.com/v1/speech:recognize?key=" + apiKey, {
    method: "POST",
    body: data
  })
  .then(function(response) {
    return response.json();
  })
  .then(function(data) {
    const transcript = data.results[0].alternatives[0].transcript;
    // 음성 명령 처리
  })
  .catch(function(error) {
    console.log(error);
  });
}

위의 예시 코드에서는 Google Cloud API 키를 설정하고 SpeechRecognition 객체를 생성하여 음성 인식을 시작합니다. 음성 인식 결과는 onresult 이벤트 핸들러에서 처리할 수 있습니다. 인식된 텍스트를 받아들여 API를 호출하여 실제 음성 명령을 처리할 수 있습니다.

결론

이번 글에서는 웹에서의 실시간 음성 명령을 받아들이기 위해 MediaStream API를 활용하는 방법에 대해 알아보았습니다. MediaStream API를 사용하여 마이크에서 음성 스트림을 가져오고, 이를 음성 인식 API와 함께 사용하여 실제 음성 명령을 처리하는 것이 가능합니다. 이러한 방법을 사용하여 가상 비서 앱을 개발할 수 있습니다.

개요

MediaStream API 소개

MediaStream 가져오기

음성 인식

결론

참고 자료