obvi icon indicating copy to clipboard operation
obvi copied to clipboard

Trying to implement in angular 8.

Open Sathyamurthy-tammina opened this issue 4 years ago • 0 comments

I have been trying to use this component in angular(version mentioned in the title). I did follow the following steps: 1, npm install --save obvi-component 2. I have pasted the html in the app component html

<voice-button id="voice-button" cloud-speech-api-key="YOUR_API_KEY" autodetect></voice-button>

<script type="module">

  import './node_modules/obvi/voice-button.js';

  var voiceEl = document.querySelector('voice-button'),
    transcriptionEl = document.getElementById('transcription');

  // can check the supported flag, and do something if it's disabled / not supported
  console.log('does this browser support WebRTC?', voiceEl.supported);

  voiceEl.addEventListener('mousedown', function(event){
    transcriptionEl.innerHTML = '';
  })

  var transcription = '';
  voiceEl.addEventListener('onSpeech', function(event){
    transcription = event.detail.speechResult;
    transcriptionEl.innerHTML = transcription;
    console.log('Speech response: ', event.detail.speechResult)
    transcriptionEl.classList.add('interim');
    if(event.detail.isFinal){
      transcriptionEl.classList.remove('interim');
    }
  })

  voiceEl.addEventListener('onStateChange', function(event){
    console.log('state:',event.detail.newValue);
  })

</script>

and then did ng serve. I get net work error as follows: image

Sathyamurthy-tammina avatar Mar 23 '21 09:03 Sathyamurthy-tammina