Speech Recognition

cert.vue

<template>
  <div>
    <IconMic @dictate="dictate"/>
    <div>{{ text }}</div>
  </div>
</template>

<script>
import IconMic from '@/components/icons/mic'
export default {
  components: {
    IconMic
  },

  data: () => ({
    synth: null,
    recognition: null,
    complete: null,
    text: null
  }),

  mounted () {
    window.SpeechRecognition = window.webkitSpeechRecognition || window.SpeechRecognition
    this.synth = window.speechSynthesis
    this.recognition = new SpeechRecognition()
  },

  methods: {
    dictate () {
      this.recognition.start()
      this.recognition.onresult = event => {
        const speechToText = event.results[0][0].transcript
        this.text = speechToText

        if (event.results[0].isFinal) {
          if (speechToText.includes('check cert')) {
            this.speak(getCert)
          }
        }
      }
    },
    speak (action) {
      this.complete = new SpeechSynthesisUtterance(action())
      this.synth.speak(complete)
    },

    async getCert () {
      const x = await (await fetch(`https://api.devoops/v1/cert`)).json()

      if (x.code === 404) {
        this.complete = new SpeechSynthesisUtterance(`I cannot find the cert`);
        this.synth.speak(this.complete)
        return
      }
      this.complete = new SpeechSynthesisUtterance(`Cert is valid for ${x.validTo} days`);
      this.synth.speak(this.complete)
    }
  }
}
</script>