Danny YapIntroduction
This tutorial provides a step-by-step guide on how to create an ASR webapp — well under 5 mins! Using a provided Ins8.ai’s sample code as a skeleton, you can continue building on a ReactJS sample User Interface while testing out Ins8.ai’s ASR capabilities.
If you already have a webapp at hand, great. Refer to the Ins8.ai API Documentation for all the API codes you’ll need for integration.
The eventual Webapp allows you start on real-time streaming transcription immediately, without going through the hassle of integrating to a Microphone component via JavaScript — a necessary step when via Python code.
Steps
- Create the Webapp.
- Retrieve an API token.
- Start transcribing.
Step 1. Create the Webapp
1a) Pull the source code from Ins8.ai Github. The code has already been preconfigured to be able to make API request to Ins8.ai’s ASR deployed on the cloud.
1b) Run it on your favourite IDE.
1c) Ensure that Node.js is installed in your system (Tested on Node.js Version 16.19.1).
1d) Install required packages by running the command “npm install”.
1e) Once packages are installed, run the code using “npm start”.
1f) Once completed, the following GUI should open in your web browser.
Step 2. Retrieve an API token
2a) Register for a trial account over at the Ins8.ai webapp.
2b) Log into the portal. Generate an API token. Copy it.
Step 3. Start Transcribing
3a) Paste the copied API token into the Webapp. You can now activate 2 transcription methods.
3b) First, try transcribing through Real-Time Streaming via the Record button (WebSocket API).
3c) Next, try transcribing by Batch Upload via the Upload File button (REST API). As this is a demo, ensure that your uploaded files are in WAV (PCM-16 bit) or MP3 format with less than 10 MB in size. The language spoken in the audio must also exact the language specified in your code.
You have now successfully created an ASR webapp that is fully functional in testing out Ins8.ai’s ASR capabilities. Well done!
Authored by Danny Yap and Renee Tan
06 Apr 2023