Live transcription implementation on ReactJS app

What happened and what did you expect to happen?

I’m currently needing to implement a feature that will show the entire transcript during the meeting. I completed the first step which would be “Creating a Service-Linked Role for Amazon Chime Live Transcription” from this url (https://docs.aws.amazon.com/chime/latest/ag/using-service-linked-roles-transcription.html)

after that, as soon as the meeting starts I call this url -> meetings/${meetingIdFromAWS}/transcription?operation=start that meetingIdFromAWS is MeetingId returned from join?title=meetingId&name=name&regionregion

First problem: in my local computer this url returns 404 not found meetings/${meetingIdFromAWS}/transcription?operation=start, only on production this url works

Second problem: even in production when I call this url and it returns 200(OK), the class Transcript of this import always returns empty

import { Transcript } from 'amazon-chime-sdk-js';

const transcript = new Transcript();
console.log('transcript', transcript);

I’m kind of confused about the documentation, what would be the correct way to use this transcription feature

Have you reviewed our existing documentation?

• GitHub issues
• FAQs page
• README page
• Feature-specific guides

Reproduction steps

npm run start

Amazon Chime SDK for JavaScript version

^2.17.0

What browsers are you seeing the problem on?

Chrome

Browser version

97.0.4692.99 64 bits

Meeting and Attendee ID Information.

No response

Browser console logs

none

[xuesichao]

@Brenerss I assume you were using the HTTP request to start the transcription service following this doc: https://docs.aws.amazon.com/chime/latest/dg/initiate-transcription.html

I’m not familiar with this part. However I checked our browser demo where it calls StartMeetingTranscription API to start the transcription service.

Could you please follow below steps to start the transcription service and see if it helps?

1. Use either of the chime or chimeSDKMeetings client. https://github.com/aws/amazon-chime-sdk-js/blob/db36d8a4191ad6fe58af68d51008c12a5b1286a9/demos/browser/server.js#L28-L38

2. Use the above client to call startMeetingTranscription() API.

• The client in below code is either chimeSDKMeetings or chime.
• The value of MeetingId should be JoinInfo.Meeting.MeetingId you got. https://github.com/aws/amazon-chime-sdk-js/blob/db36d8a4191ad6fe58af68d51008c12a5b1286a9/demos/browser/server.js#L239-L243

[xuesichao]

@Brenerss For your second question:

even in production when I call this url and it returns 200(OK), the class Transcript of this import always returns empty

According to our doc:

OK (200) with empty body, if you successfully apply the TranscriptionConfiguration to the meeting.

You got the response 200, basically it means you started the transcription service successfully. I assume the cause here is you used the wrong way to receive the transcription result.

According to our demo App implementation and the AWS doc:

You need to implement a transcript event dandler, and subscribe to transcript event:

transcriptEventHandler = (transcriptEvent: TranscriptEvent): void => {
  // `transcriptEvent` could be either a `Transcript` or `TranscriptionStatus`
  // if it is `Transcript`, then it should contain transcription results
  // else you need to handle the logic of `TranscriptionStatus` changes (start/ stop/ ...)

  if (transcriptEvent instanceof TranscriptionStatus) {
    // Print Transcript Status, could be `STARTED`, `INTERRUPTED`, `RESUMED`, `STOPPED` or `FAILED`
    console.log(transcriptEvent.type);
  } else if (transcriptEvent instanceof Transcript) {
    // Print Transcript result collection
    console.log(transcriptEvent.results);
  }
};

this.audioVideo.transcriptionController?.subscribeToTranscriptEvent(this.transcriptEventHandler);

No problem, please refer to our demo App implementation. This should be most useful.