Начало работы с живой транскрипцией и Vue.js

В этом посте мы расскажем о том, как настроить Deepgram для живой транскрипции в вашем приложении Vue.js. Мы настроим Deepgram в одном HTML-файле с включением Vue.js <script> и без каких-либо других зависимостей.

Перед началом работы

Вам понадобится бесплатный API-ключ Deepgram.

Настройка проекта Vue с включенным скриптом

Создайте файл index.html и откройте его в редакторе кода. Настройте проект Vue:

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

  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.0"></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 должна быть функцией, возвращающей объект.

Подключение к Deepgram

Создайте кнопку, которая начнет транскрипцию. Запустите новый метод begin() при ее нажатии:

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

  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.0"></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>
Войти в полноэкранный режим Выход из полноэкранного режима

Прежде чем продолжить, уделите время получению бесплатного API-ключа Deepgram.

Используйте встроенный в браузер интерфейс 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. Видите language=de в URL? Это говорит о том, что вы будете говорить по-немецки. У нас есть множество поддерживаемых языков, с которыми вы можете ознакомиться!

Отправка данных в 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)
    })
  }
}
Войти в полноэкранный режим Выйти из полноэкранного режима

Получение результатов расшифровки

В настоящее время вы отправляете данные через наше постоянное соединение в Deepgram каждые 0,25 секунды. Вы будете получать стенограммы обратно почти так же часто — пришло время написать код обработки.

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/vue@2.7.0"></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, и она написана для ясности, а не для краткости. Если вы хотите узнать больше о Vue 3, включая функцию setup() и составные элементы, то Сандра написала отличную серию уроков по Vue 3.

Если у вас есть вопросы, пожалуйста, не стесняйтесь писать нам в Twitter, @DeepgramDevs.

Оцените статью
devanswers.ru
Добавить комментарий