client-transcribe-streaming updated front end example?

[juworld]

I found a great example in the middle of the client-transcribe-streaming documentation: https://docs.aws.amazon.com/AWSJavaScriptSDK/v3/latest/clients/client-transcribe-streaming/index.html#acquire-from-browsers. I was able to get started with this.

However, the example is outdated and is not using the client-transcribe-streaming npm package. It would be great if we have an example that is current. Is there any plans on doing that?

I just want to extract the client-transcribe-streaming into something I can load in the browser. I was able to get it working as part of my react app. But, I'm not familiar with webpack/babel/rullupjs/browserify to isolate and use client-transcribe-streaming in browser.

Thanks!
Justin

[RanVaknin]

Hi @juworld ,

However, the example is outdated and is not using the client-transcribe-streaming npm package. It would be great if we have an example that is current. Is there any plans on doing that?

Can you elaborate on why its outdated?
When you say "not using the client-transcribe-streaming npm package" are you referring to the usage of require("microphone-stream") to read the stream from the browser?
Transcribe-streaming client is a client meant to interact between your machine and the transcribe service.
It does not offer utilities like creating audio streams from a browser.

In general, all the SDK client operations are client to server operations. So you'll have to create your own data in order to interact with services on AWS.

After you acquire the audio stream by using one of the methods listed in the guide, you can use the SDK client to send that stream to get transcribed using StartStreamTranscriptionCommand as described in the "Send the speech stream" section.

I just want to extract the client-transcribe-streaming into something I can load in the browser. I was able to get it working as part of my react app. But, I'm not familiar with webpack/babel/rullupjs/browserify to isolate and use client-transcribe-streaming in browser.

I'm a bit confused about your question. Bundling the SDK imports for web with Webpack for example, is the same as bundling it with any other dependency. The only different in your application between React and browser, is that loading credentials from file is not possible from a browser context. You'll have to use environment variables for example.

Thanks,
Ran~