Real-time diarization in angular app

Question

Hello,

I'm trying to implement below code for typescript.

https://learn.microsoft.com/en-us/azure/ai-services/speech-service/get-started-stt-diarization?tabs=macos&pivots=programming-language-javascript

I'm surprised to see const fs = require("fs"), It will work in only nodejs right.

What is the alternative for implement this on only Angular application with typescript.(without nodejs server)

Please write a sample code to implement the same for Angular app.

Answer 1

@Rakesh Indla Hello! You are correct that the fs module is a Node.js module and cannot be used in a browser-based application like an Angular app.

To implement real-time diarization in an Angular app, you can use the MediaDevices.getUserMedia() method to capture audio from the user's microphone and then pass that audio to the Speech SDK for processing. Here's an example of how you can modify the code from the tutorial you linked to work in an Angular app:

1. First, install the Speech SDK for JavaScript using npm:

<span class=" active-doc-0" data-doc-items="0">npm install microsoft-cognitiveservices-speech-sdk[1](#doc-pos=0)</span>

1. In your Angular component, import the Speech SDK and create a new Recognizer object:

<span class=" active-doc-0" data-doc-items="0">import * as sdk from 'microsoft-cognitiveservices-speech-sdk[1](#doc-pos=0)</span>';

const speechConfig = sdk.SpeechConfig.fromSubscription("YOUR_SUBSCRIPTION_KEY", "YOUR_REGION");
const audioConfig = sdk.AudioConfig.fromDefaultMicrophoneInput();
const recognizer = new sdk.SpeechRecognizer(speechConfig, audioConfig);

1. Add an event listener to the "Start" button in your template that will start the recognition process:

<button (click)="startRecognition()">Start</button>

startRecognition() {
  recognizer.recognizeOnceAsync(result => {
    console.log(result.text);
  });
}

1. Finally, add the necessary CSS and JavaScript files to your angular.json file:

"styles": [
  "<span class=" active-doc-0 active-doc-2 active-doc-3" data-doc-items="0,2,3">node_modules/microsoft-cognitiveservices-speech-sdk/distrib/browser/css/speechsdk.min.css[1](#doc-pos=0)[2](#doc-pos=2)[3](#doc-pos=3)</span>"
],
"scripts": [
  "<span class=" active-doc-0 active-doc-2" data-doc-items="0,2">node_modules/microsoft-cognitiveservices-speech-sdk/distrib/browser/microsoft.cognitiveservices.speech.sdk.bundle.js[1](#doc-pos=0)[2](#doc-pos=2)</span>"
]

This code will capture audio from the user's microphone and pass it to the Speech SDK for processing. The recognizeOnceAsync() method will return a SpeechRecognitionResult object that contains the recognized text and other information.

Note that you will need to replace "YOUR_SUBSCRIPTION_KEY" and "YOUR_REGION" with your actual subscription key and region.

Answer 2

Hello @brtrach-MSFT What is the alternative for fs in angular for below code for reading file

const audioConfig = AudioConfig.fromWavFileInput(fs.readFileSync('./src/functions/twilio/conversationRecord.wav'));