Azure Cognitive Speech SDK Issue in Vuejs Project

Question

I am importing & using microsoft-cognitiveservices-speech-sdkin VueJS Project but whenever I click on mic, I am getting below issue.

This is what I tried:

import * as SDK from "microsoft-cognitiveservices-speech-sdk";
import { RecognitionResult } from "microsoft-cognitiveservices-speech-sdk";

 const speechConfig = SDK.SpeechConfig.fromSubscription(
      this.subscriptionKey,
      this.serviceRegion
    );
    speechConfig.speechRecognitionLanguage = "en-US";
    const audioConfig = SDK.AudioConfig.fromDefaultMicrophoneInput();
    const recognizer = await new SDK.SpeechRecognizer(speechConfig, audioConfig);
    if (recognizer) {
      this.isMicClicked = !this.isMicClicked;
      recognizer.recognizeOnceAsync((result: RecognitionResult) => {
        console.log(result);
        this.setCapturedText(result.text);
        this.isMicClicked = false;
        recognizer.close();
      }, (e: string) => {
        console.log(e);
        recognizer.close();
        this.isMicClicked = false;
      });
    }