Skip to content
This repository was archived by the owner on Oct 18, 2025. It is now read-only.
This repository was archived by the owner on Oct 18, 2025. It is now read-only.

Trying to implement in angular 8. #5

Description

@Sathyamurthy-tammina

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

<script src="node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
<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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions