How to use @aws-sdk/client-transcribe-streaming correctly in react native?

[Jack-Sam]

Hello
I have been trying to use @aws-sdk/client-transcribe-streaming in react native, but it's still not working.
It gives the error below:
TypeError: Invalid attempt to iterate non-iterable instance.
In order to be iterable, non-array objects must have a Symbol.iterator method.
_createForOfIteratorHelperLoose@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.easybot&modulesOnly=false&runModule=true:101839:413
handleResult$@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.easybot&modulesOnly=false&runModule=true:102022:75
tryCatch@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.easybot&modulesOnly=false&runModule=true:7739:23
...

My code is as follows:
...
import 'react-native-get-random-values';
import 'react-native-url-polyfill/auto';

import { TranscribeStreamingClient, StartStreamTranscriptionCommand, MediaEncoding } from "@aws-sdk/client-transcribe-streaming";

...
const transStreamingClient = new TranscribeStreamingClient({
...
})

const _audioStreamFunc = async function*() {
try {
while (true)
{
const data = await getAudioDataPromise;
// console.log('got data', data);
if (!data) break;
yield data;
}
} finally {

}
}

const audioStreamFunc = function() {
return {
[Symbol.asyncIterator]: _audioStreamFunc
}
}

...
this.audioStream = audioStreamFunc();

let command = new StartStreamTranscriptionCommand({
  LanguageCode: 'en-US',
  MediaSampleRateHertz: 16000,
  MediaEncoding: MediaEncoding.PCM,
  AudioStream: this.audioStream
})

try {
  const response = await transStreamingClient.send(command);
  const transcribesStream = response.TranscriptResultStream;
  const handleResult = async function() {
    for await (const data of transcribesStream) {
      console.log(data);
	  ...
    }
  };

  handleResult();
} catch (e) {
  console.log(e);
}

}

...

Could anyone help me to make this work?
Thanks in advance.

[mukashow]

import "react-native-url-polyfill/auto";
import "react-native-get-random-values";
import {NativeModules, PermissionsAndroid} from "react-native";
import EventEmitter from "react-native/Libraries/EventEmitter/NativeEventEmitter";
import {Buffer} from "buffer";
import LiveAudioStream from "react-native-live-audio-stream";
import {
StartMedicalStreamTranscriptionCommand,
TranscribeStreamingClient
} from "@aws-sdk/client-transcribe-streaming";

export class TranscribeController {
constructor() {
this.isStarted = false
this.emitter = new EventEmitter(NativeModules);
this.audioPayloadStream = []
this.audioStream = LiveAudioStream
this.transcribeStreamingClient = new TranscribeStreamingClient({
region: 'eu-west-1',
credentials: {
accessKeyId: '',
secretAccessKey: '',
},
})
}

async init() {
await PermissionsAndroid.requestMultiple([
PermissionsAndroid.PERMISSIONS.RECORD_AUDIO,
]);
this.audioStream.init({
sampleRate: 44100,
channels: 1,
audioSource: 6,
bitsPerSample: 16,
bufferSize: 2048
})
this.audioStream.start()
this.audioStream.on('data', data => {
this.audioPayloadStream.push(Buffer.from(data, 'base64'))
if (!this.isStarted && this.audioPayloadStream.length !== 0) {
this.start()
}
})
}

async start() {
try {
this.isStarted = true
const command = new StartMedicalStreamTranscriptionCommand({
LanguageCode: 'en-US',
MediaEncoding: 'pcm',
Specialty: 'PRIMARYCARE',
Type: 'DICTATION',
MediaSampleRateHertz: 44100,
AudioStream: this.audioGenerator()
})
const data = await this.transcribeStreamingClient.send(command);

  for await (const event of data.TranscriptResultStream) {
    const results = event.TranscriptEvent?.Transcript?.Results;
    if (results && results.length > 0) {
      const [result] = results;
      const final = !result.IsPartial;
      const alternatives = result.Alternatives;
      if (alternatives && alternatives.length > 0) {
        const [alternative] = alternatives;
        const text = alternative.Transcript;
        this.emitter.emit('recognized', {text, final});
      }
    }
  }
} catch (e) {
  console.log(e)
  if (this.isStarted) this.emitter.emit('error', true)
  this.stop()
}

}

stop() {
this.audioPayloadStream = []
this.audioStream.stop()
this.transcribeStreamingClient.destroy()
this.isStarted = false
}

async* audioGenerator() {
for await (const chunk of this.audioPayloadStream) {
yield {AudioEvent: {AudioChunk: chunk}};
}
}
}

[gbower30]

Has anyone had luck with this in React Native? My code is almost identical to @mukashow but I keep getting a TypeError that the object is not async iterable. The transcribeStreamingClient.send(command) in the start function returns:

{"$metadata": {"attempts": 1, "cfId": undefined, "extendedRequestId": undefined, "httpStatusCode": 200, "requestId": undefined, "totalRetryDelay": 0}, "SessionId": "633592f0-8ce5-487d-a67e-6c05001f7b98", "TranscriptResultStream": {"options": {"deserializer": [Function anonymous], "messageStream": [MessageDecoderStream]}}}

But when I dig into the messageDecoderStream it has an empty array

[alabhyajindal]

Hey, were you able to figure this out?

I'm facing the same problem right now where I get the error TypeError: this.options.inputStream is not async iterable. When I print my payload stream I correctly see an array of buffers.

[ganesh-moorthy-5999]

Hi, Hermes doesn't support async iterators yet (the feature is planned, but no release date yet), so for await is unsupported and produces the corresponding error message when encountered. As you know, in RN apps JS code undergoes Babel transformations which should eliminate instances of for await. - Please disable Hermes on iOS & android. It works fine!!!.