브라우저에서 실시간 음성 전사 받기

12401 단어 microphonejavascriptlive
Deepgram의 스트리밍 오디오 트랜스크립션으로 구축할 수 있는 프로젝트가 너무 많습니다. 오늘은 브라우저 내부의 사용자 마이크에서 라이브 전사를 얻을 것입니다.

시작하기 전에



이 프로젝트에는 Deepgram API 키get one here가 필요합니다. 종속성 측면에서 그게 전부입니다. 이 프로젝트는 전적으로 브라우저 기반입니다.

새index.html 파일을 만들고 코드 편집기에서 연 후 다음 상용구 코드를 추가합니다.

<!DOCTYPE html>
<html>
  <body>
    <p id="status">Connection status will go here</p>
    <p id="transcript">Deepgram transcript will go here</p>
    <script>
      // Further code goes here
    </script>
  </body>
</html>


사용자 마이크 가져오기



기본 제공getUserMedia() 방법을 사용하여 사용자의 미디어 입력 장치(마이크 및 카메라)에 대한 액세스를 요청할 수 있습니다. 사용자가 허용하면 MediaStream를 반환하여 Deepgram으로 보낼 준비를 할 수 있습니다. <script> 내부에 다음을 추가합니다.

navigator.mediaDevices.getUserMedia({ audio: true }).then((stream) => {
  console.log({ stream })
  // Further code goes here
})

index.html 파일을 브라우저에 로드하면 마이크에 액세스하라는 메시지가 즉시 표시됩니다. 권한을 부여한 다음 개발자 도구에서 콘솔을 확인합니다.



이제 MediaStream 데이터를 준비하고 MediaRecorder 이벤트와 함께 데이터를 내보낼 datavailable에 제공해야 합니다.

if (!MediaRecorder.isTypeSupported('audio/webm'))
  return alert('Browser not supported')
const mediaRecorder = new MediaRecorder(stream, { mimeType: 'audio/webm' })


이제 Deepgram을 보내는 데 필요한 모든 것이 있습니다.

딥그램에 연결



오디오를 Deepgram의 음성 인식 서비스로 스트리밍하려면 WebSocket 연결을 열고 이를 통해 데이터를 보내야 합니다. 먼저 연결을 설정합니다.

const socket = new WebSocket('wss://api.deepgram.com/v1/listen', [
  'token',
  'YOUR_DEEPGRAM_API_KEY',
])


!!! 이 키는 클라이언트 측이므로 사용자가 볼 수 있다는 알림입니다. 이것을 실제 프로젝트에 반영하십시오.

그런 다음 socket onopen , onmessage , onclose 및 onerror 이벤트가 트리거될 때 기록합니다.

socket.onopen = () => {
  console.log({ event: 'onopen' })
}

socket.onmessage = (message) => {
  console.log({ event: 'onmessage', message })
}

socket.onclose = () => {
  console.log({ event: 'onclose' })
}

socket.onerror = (error) => {
  console.log({ event: 'onerror', error })
}


브라우저를 새로 고치고 콘솔을 보십시오. 소켓 연결이 열렸다가 닫히는 것을 볼 수 있습니다. 연결을 열린 상태로 유지하려면 연결이 열린 후 일부 데이터를 신속하게 보내야 합니다.

Deepgram에 데이터 보내기


socket.onopen 함수 내부에서 250ms 단위로 Deepgram에 데이터를 보냅니다.

mediaRecorder.addEventListener('dataavailable', async (event) => {
  if (event.data.size > 0 && socket.readyState == 1) {
    socket.send(event.data)
  }
})
mediaRecorder.start(250)


Deepgram은 귀하가 제공하는 타임슬라이스(여기서는 250ms)에 대해 까다롭지 않지만 이 숫자가 클수록 말하는 단어와 전송되는 단어 사이의 간격이 길어져 전사 속도가 느려집니다. 100-250이 이상적입니다.

이제 마이크에 대고 말하는 동안 콘솔을 살펴보십시오. Deepgram에서 데이터가 반환되는 것을 볼 수 있습니다!



Deepgram 응답 처리


socket.onmessage 함수 내에서 Deepgram에서 보낸 데이터를 구문 분석하고 기록만 추출한 다음 해당 구문("발화")의 최종 기록인지 확인합니다.

const received = JSON.parse(message.data)
const transcript = received.channel.alternatives[0].transcript
if (transcript && received.is_final) {
  console.log(transcript)
}


각 구문에 대해 Deepgram으로부터 여러 메시지를 받았음을 알아차렸을 것입니다. 각 메시지는 한 단어씩 증가합니다(예: "hello", "hello how", "hello how are"등). Deepgram은 각 단어가 기록될 때마다 데이터를 다시 보내므로 빠른 응답을 받는 데 좋습니다. 이 간단한 프로젝트의 경우 응답에서 is_final 속성으로 표시되는 각 발화의 최종 버전만 표시합니다.

이를 정리하려면 이 함수에서 console.log({ event: 'onmessage', message })를 제거한 다음 코드를 다시 테스트하십시오.



그게 다야! 그것이 프로젝트입니다. 마무리하기 전에 사용자에게 웹 페이지 자체의 진행 상황을 표시해 보겠습니다.

브라우저에서 상태 및 진행률 표시


<p id="status"> 안의 텍스트를 '연결되지 않음'으로 변경합니다. 그런 다음 socket.onopen 함수 맨 위에 다음 줄을 추가합니다.

document.querySelector('#status').textContent = 'Connected'

<p id="transcript"> 안에 있는 텍스트를 제거합니다. socket.onmessage 함수에서 기록을 기록하는 위치에 다음 줄을 추가합니다.

document.querySelector('#transcript').textContent += transcript + ' '


프로젝트를 한 번 더 시도하면 Deepgram의 음성 인식 덕분에 웹 페이지에 연결된 시점과 말한 단어가 표시됩니다.

최종 프로젝트 코드는 https://github.com/deepgram-devs/browser-mic-streaming에서 사용할 수 있으며 질문이 있는 경우 Twitter에서 언제든지 문의하십시오.
【Rails】Sprockets::DoubleLinkError 해결
[Rails] 조건부 분기를 사용하여 데이터가 있는 한 이미지 게시

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage