AI Translated Subtitles

  1. Quick implementationπŸš€
  2. How does it work?
  3. Step by step guide
  4. Events
  5. πŸ”Ή React
  6. πŸ”Ή Vue
  7. πŸ”Ή Vanilla JavaSript
  8. Properties

Quick implementation πŸš€

GO!

How does it work?

An image

You send us the original stream using iframe, YouTube or Vimeo formats then automatically we send back to the SDK the fully AI generated subtitles. If you want use HLS, flv or RTMP we recommend you use our RTMP approach, if not the subtitles won't be synchronized with the video.

An image

In below video you can see how every time you select a language the live AI Translated Subtitles will automatically show up through the SDK:



Step by step guide

Note: The arrows below are dropdowns, click to open them and see the image.

1. Go to your dahsboard

You can type the URL rsi.akkadu.com/dashboard or click Login

An image

2. Generate an API Key

Click API Keys

An image

Click + Create New

An image

Insert the App Name and Domain, then click Save

An image

You will see your API Key in your dashboard

An image

⬇️ For the next steps you can use the Dashboard or the REST API. We will be using the dashboard:

3. Create an Event

Click + Create Event

An image

Insert all the relevant information and make sure you choose the service "AI Translated Subtitles"

An image

⚠️ For original stream please use iframe, YouTube or Vimeo. If you want to use flv, HLS and RTMP we recommend you use our RTMP approach, if not your video and AI Translated Subtitles won't be synchronized.

4. Assign Languages

Click on Languages

An image

Click + Add Languages

An image

5. Select Output Type

Select: None

An image

6. Integrate the SDK in your audience event page

Choose between any of our repos: React, Vue or Vanilla JavaScript

You should be able to see the languages you created in the dahsboard

An imageAn image

7. Insert your API Key and room name

Once you insert your API Key and room name you are connecting the SDK with the interpreters pages.

  • 🚨 Set hasSubtitles to true

8. Test

0. Test your API Key (optional)

In this fake event audience page, without doing any integration, by inserting your API Key and room name you can check:

  • if the SDK is showing the languages you created in the dashboard
  • if you can receive the AI Translated Subtitles

An image

As you can see in the below image the SDK is showing the languages I created in the dashboard: English, Spanish and Korean.

If I enter to the Spanish interpreter account and start interpreting I should be able to hear the audio after selecting the Spanish channel. An image

1. Check you can see the AI Translated Subtitles in the SDK For this case you should see Spanish subtitles.

Events

Here is the list of the events for the RSI Subtitles Widget that can be passed as props when suing our React and Vue verison, for VanillJS you can register this listeners using addEventListener, for usage please see the examples in the docs.

EventsDescription
onReadyCalled when the event is ready

πŸ”Ή React

  • 🚨 RsiInterpretationPlayer must be imported before rsiSubtitles.

    • RsiSubtitles cannot work without the widget RsinterpretationPlayer
  • 🚨 In order to use the widget subtitles you must add as parameter of RsiInterpretationPlayer hasSubtitles to be true.

import React from 'react';
import { RsiInterpretationPlayer, RsiSubtitles } from '@akkadu/rsi-react'

export default class ComponentInterpretationPlayer {
  const handleOnSubtitlesReady = (e) => {
    console.info('receive onReady event for the subtitles widget: ',e );
  }

  render() {
    return (
      <div>
        <RsiInterpretationPlayer
          sdkKey="sdk_key_XXXX"
          roomName="your_room_name"
          hasSubtitles={true}
          onReady={handleOnReady}
          onLanguageSelected={handleOnLanguageSelected}
          onConnectionStatusUpdated={handleOnConnectionStatusUpdated}
        />
        <RsiSubtitles
          sdkKey="sdk_key_XXXX"
          roomName="your_room_name"
          onReady={handleOnSubtitlesReady}
        />
      </div>
    );
  }
}

πŸ”Ή Vue

  • 🚨 RsiInterpretationPlayer must be imported before rsiSubtitles.

    • RsiSubtitles cannot work without the widget RsinterpretationPlayer
  • 🚨 In order to use the widget subtitles you must add as parameter of RsiInterpretationPlayer hasSubtitles to be true.

<template>
  <RsiInterpretationPlayer
    sdkKey="sdk_key_XXXX"
    roomName="your_room_name"
    :hasSubtitles="true"
    v-on:onLanguageSelected="handleOnLanguageSelected"
    v-on:onReady="handleOnReady"
    v-on:onConnectionStatusUpdated="handleOnConnectionStatusUpdated"
  />
  <RsiSubtitles
    sdkKey="sdk_key_XXXX"
    roomName="your_room_name"
    v-on:onReady="handleOnSubtitlesReady"
  />
</template>

<script lang="js">
  import { RsiInterpretationPlayer, RsiSubtitles } from '@akkadu/rsi-vue'
  export default {
    components: {
      RsiInterpretationPlayer,
      RsiSubtitles
    },
    methods: {
      handleOnSubtitlesReady(e) {
        console.info('handleOnReady event for the subtitles widget:', e);
      },
    },
  }
</script> 

πŸ”Ή Vanilla JavaScript

  • 🚨 RsiInterpretationPlayer must be imported before rsiSubtitles.

    • RsiSubtitles cannot work without the widget RsinterpretationPlayer
  • 🚨 In order to use the widget subtitles you must add as parameter of RsiInterpretationPlayer data-has-subtitles to be true.

<!-- stylesheet -->
<link rel="stylesheet" href="https://akkadu-assets.s3.amazonaws.com/akkadu-rsi-widget/rsi-vanilla/1.0.62/interpretation-player.min.css" />

<link rel="stylesheet" href="https://akkadu-assets.s3.amazonaws.com/akkadu-rsi-widget/rsi-vanilla/1.0.62/rsi-subtitles.min.css" />

<!-- Component -->
<div
  id="akkadu-interpretation-player"
  data-sdk-key="your_sdk_key"
  data-room-name="your_room_name"
  data-position-menu="bottom"
  data-is-box-shadow="true"
  data-is-player-controlled="true"
  data-has-subtitles="true">
</div>
<div
  id="akkadu-rsi-subtitles"
  data-sdk-key="your_sdk_key"
  data-room-name="your_room_name">
</div> 
<script>
  const component = document.querySelector('#akkadu-interpretation-player')
  component.addEventListener('onReady', function (e) { 
    console.info('received onReady event for subtitles:', e.detail.isReady);
  });
</script>

<!-- 🚨 Script must be loaded after the component -->
<script src="https://akkadu-assets.s3.amazonaws.com/akkadu-rsi-widget/rsi-vanilla/1.0.62/interpretation-player.min.js" ></script>

<script src="https://akkadu-assets.s3.amazonaws.com/akkadu-rsi-widget/rsi-vanilla/1.0.62/rsi-subtitles.min.js" ></script>

Properties

The properties for the RSI Subtitles widget

PropertiesDescriptionRequiredChoicesDefault
sdkKeyYour RSI sdk keytruestring: sdk_key_XXXXnull
roomNameYou can either add your roomName as a query parameter or as a propertie morefalsestring: "abcd""abcd"

Additional properties To further customize the RSI Subtitles Widget you can use the following props.

PropertiesDescriptionRequiredTypeDefault
subtitlesWrapperClassTo set a custom class for RSI Subtitles widget wrapperfalsestringnone
subtitlesTextClassTo set a custom class for the text of the RSI Subtitles'swidget.falsestringnone

⚠️ For VanillaJS version all the props should be prefixed with data-* and instead of camelcase kebab-case should be used e.g. data-display-flag


roomName

When creating an event in your Dashboard or using the REST API you will generate (dashboard) or get as a response (REST API) the variable roomName which is unique for every event.

You need to add this roomName inside the SDK. This is one of the main properties of the SDK which will connect the SDK with the interpreters room.

Note: You can also add a query parameter on the audience page URL of the event you want to get the Simultaneous Interpretation. For example:

  • URL path : wvw.your-application/your-audience-page?rsi-roomname=abcd

The refresh button

When the stream is stuck, some browser/devices requires an action from the user to play the stream again.

This is what we are solving with the refresh button.

When the interpreted stream is stuck and need to be unmuted a refresh button will appear near the widget.


Error Messages

Sometimes the SDK may return below error messages in the browser console:

1. "Your sdkKey doesn't have an event with the roomName: abcd"

This means the roomName added in the SDK you integrated in your audience page doesn't match the roomName associated to the event of that sdkKey.

When creating an event with the REST API you should get in response a roomName, when creating an event in your dashboard you will automatically create a room name for that event, regardless of the method you use, please make sure you insert the same roomName in the properties of the SDK or you used the same roomName as a query parameter on the page.

More info about the roomName here

2. "The origin: www.your-website.com doesn't match the origin accepted by your sdkKey: xx_your_sdk_key"

Each sdkKey can only have one origin. You can create a new sdkKey in your dashboard and associate an origin (website) to it. If you are using our widget on localhost, you should not get any origin issues.

3. "The sdkKey or roomName is not defined"

This means the property sdkKey or/and the roomName is undefined. Make sure you didn't left them empty.