라이브 전사 및 Vue.js 시작하기

33292 단어 javascriptvuedeepgram
이 게시물에서는 Vue.js 애플리케이션에서 라이브 전사를 위해 Deepgram을 설정하는 방법을 다룹니다. Vue.js<script>를 포함하고 다른 종속 항목 없이 단일 HTML 파일에 Deepgram을 설정합니다.

시작하기 전에



무료Deepgram API Key가 필요합니다.

스크립트 포함으로 Vue 프로젝트 설정


index.html 파일을 생성하고 코드 편집기에서 엽니다. Vue 프로젝트 설정:

<html>
<head></head>
<body>
  <div id="app">
  </div>

  <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
  <script>
    const app = new Vue({
      el: '#app'
    })
  </script>
</body>
</html>


마이크 데이터 가져오기



이 코드는 created() 수명 주기 메서드로 작성됩니다. 즉, 즉시 발생합니다.

먼저 사용자에게 마이크에 대한 액세스 권한을 요청합니다.

const app = new Vue({
  el: '#app',
  async created() {
    const stream = await navigator.mediaDevices.getUserMedia({ audio: true })
      .catch(error => alert(error))
  }
})


다음으로, 액세스한 마이크에서 나중에 원시 데이터에 액세스할 수 있도록 스트림을 MediaRecorder에 연결합니다.

const app = new Vue({
  el: '#app',
  async created() {
    const stream = await navigator.mediaDevices.getUserMedia({ audio: true })
      .catch(error => alert(error))

    // Create MediaRecorder
    if(!MediaRecorder.isTypeSupported('audio/webm')) return alert('Unsupported browser')
    this.mediaRecorder = new MediaRecorder(stream, { mimeType: 'audio/webm' })
  },
  // Store MediaRecorder
  data: {
    mediaRecorder: null
  }
})


Vue 구성 요소를 생성하는 경우 data는 객체를 반환하는 함수여야 합니다.

딥그램에 연결



녹음을 시작할 버튼을 만듭니다. 새begin() 메서드를 클릭하면 트리거됩니다.

<html>
<head></head>
<body>
  <div id="app">
    <!-- Add button -->
    <button @click="begin">Begin transcription</button>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
  <script>
    const app = new Vue({
      el: '#app',
      async created() {
        const stream = await navigator.mediaDevices.getUserMedia({ audio: true })
          .catch(error => alert(error))

        if(!MediaRecorder.isTypeSupported('audio/webm')) return alert('Unsupported browser')
        this.mediaRecorder = new MediaRecorder(stream, { mimeType: 'audio/webm' })
      },
      data: {
        mediaRecorder: null
      },
      // Create begin method
      methods: {
        begin() {

        }
      }
    })
  </script>
</body>
</html>


계속하기 전에 잠시 시간을 내어 a free Deepgram API Key을(를) 얻으십시오.

브라우저 기본 WebSocket 인터페이스를 사용하여 Deepgram의 실시간 기록 서버에 연결합니다. WebSocket 인스턴스를 data에 저장합니다.

data: {
  mediaRecorder: null,
  // Add socket
  socket: null
},
methods: {
  begin() {
    const DG_URL = 'wss://api.deepgram.com/v1/listen?language=de'
    const DG_KEY = 'YOUR_DEEPGRAM_API_KEY'
    this.socket = new WebSocket(DG_URL, ['token', DG_KEY])
  }
}


이 WebSocket은 Deepgram과 양방향 연결을 생성합니다. URL에서 language=de를 참조하십시오. 그것은 당신이 독일어를 할 것이라고 말하는 것입니다. 확인해야 할 supported languages이 많이 있습니다!

Deepgram에 데이터 보내기



WebSocket 연결이 열리면 마이크 데이터 전송을 시작합니다.

methods: {
  begin() {
    const DG_URL = 'wss://api.deepgram.com/v1/listen?language=de'
    const DG_KEY = 'YOUR_DEEPGRAM_API_KEY'
    this.socket = new WebSocket(DG_URL, ['token', DG_KEY])
    // Run the startStreaming method when socket is opened
    this.socket.onopen = this.startStreaming
  },
  // Create startStreaming method
  startStreaming() {
    this.mediaRecorder.addEventListener('dataavailable', event => {
      if(event.data.size > 0 && this.socket.readyState == 1) {
        this.socket.send(event.data)
      }
      // Send data every 250ms (.25s)
      mediaRecorder.start(250)
    })
  }
}


성적표 결과 받기



현재 0.25초마다 Deepgram에 대한 지속적인 연결을 통해 데이터를 전송하고 있습니다. 거의 자주 성적표를 받게 될 것입니다. 이제 처리 코드를 작성할 때입니다.

methods: {
  begin() {
    const DG_URL = 'wss://api.deepgram.com/v1/listen?language=de'
    const DG_KEY = 'YOUR_DEEPGRAM_API_KEY'
    this.socket = new WebSocket(DG_URL, ['token', DG_KEY])
    this.socket.onopen = this.startStreaming
    // Run the handleResponse method when data is received
    this.socket.onmessage = this.handleResponse
  },
  startStreaming() {
    this.mediaRecorder.addEventListener('dataavailable', event => {
      if(event.data.size > 0 && this.socket.readyState == 1) {
        this.socket.send(event.data)
      }
      mediaRecorder.start(250)
    })
  },
  // Create handleResponse method
  handleResponse(message) {
    const received = JSON.parse(message.data)
    const transcript = received.channel.alternatives[0].transcript
    if(transcript) {
      console.log(transcript)
    }
  }
}


브라우저를 새로 고치면 콘솔에 표시되는 대화 내용이 표시됩니다.



페이지에 성적표 표시



먼저 빈 배열을 사용하여 transcripts에 새 data 속성을 만듭니다.

data: {
  mediaRecorder: null,
  socket: null,
  // Add this
  transcripts: []
},


그런 다음 기록을 기록하는 대신 다음 배열에 추가합니다.

if(transcript) {
  this.transcripts.push(transcript)
}


마지막으로 배열의 항목을 표시하도록 HTML을 업데이트합니다.

<div id="app">
  <button @click="begin">Begin transcription</button>
  <!-- Add looping element -->
  <p v-for="transcript in transcripts">{{ transcript }}</p>
</div>


몇 가지 구를 말하고 나면 페이지가 다음과 같이 보일 것입니다.



마무리



최종 코드는 다음과 같습니다.

<html>
<head></head>
<body>
  <div id="app">
    <button @click="begin">Begin transcription</button>
    <p v-for="transcript in transcripts">{{ transcript }}</p>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
  <script>
    const app = new Vue({
      el: '#app',
      async created() {
        const stream = await navigator.mediaDevices.getUserMedia({ audio: true })
          .catch(error => alert(error))

        if(!MediaRecorder.isTypeSupported('audio/webm')) return alert('Unsupported browser')
        this.mediaRecorder = new MediaRecorder(stream, { mimeType: 'audio/webm' })
      },
      data: {
        mediaRecorder: null,
        socket: null,
        transcripts: []
      },
      methods: {
        begin() {
          const DG_URL = 'wss://api.deepgram.com/v1/listen?language=de'
          const DG_KEY = 'YOUR_DEEPGRAM_API_KEY'
          this.socket = new WebSocket(DG_URL, ['token', DG_KEY])
          this.socket.onopen = this.startStreaming
          this.socket.onmessage = this.handleResponse
        },
        startStreaming() {
          this.mediaRecorder.addEventListener('dataavailable', event => {
            if(event.data.size > 0 && this.socket.readyState == 1) {
              this.socket.send(event.data)
            }
            mediaRecorder.start(250)
          })
        },
        handleResponse(message) {
          const received = JSON.parse(message.data)
          const transcript = received.channel.alternatives[0].transcript
          if(transcript) {
            this.transcripts.push(transcript)
          }
        }
      }
    })
  </script>
</body>
</html>


이것은 Vue를 사용한 가장 간단한 구현이며 간결함보다 명확성을 위해 작성되었습니다. setup() 함수 및 컴포저블을 포함하여 Vue 3에 대해 자세히 알아보려면 Sandra가 작성했습니다an excellent tutorial series on Vue 3.

질문이 있으시면 언제든지 트위터로 메시지를 보내주세요.
JavaScript 및 React의 메모이제이션
자택 서버용 라즈파이로 Python으로 LINE bot(HTTPS화)를 만든다(heroku, ngrok 사용하지 않는다) Apache(+wsgi)+Flask(Django에서도 같다?)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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