📖 Documentation

Using React.js

Installation

yarn add @akkadu/rsi-react

npm install @akkadu/rsi-react

Registering the Interpretation Player

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

export default class ComponentInterpretationPlayer {
  const handleOnReady = (e) => {
    console.info('receive onReady event: ', e);
  }
  const handleOnLanguageSelected = (e) => {
    console.info('receive onLanguageSelected event:', e);
  }
  const handleOnConnectionStatusUpdated = (e) => {
    console.info('receive onConnectionStatusUpdated event:', e);
  }
  render() {
    return (
      <div>
        <RsiInterpretationPlayer
          sdkKey="sdk_key_XXXX"
          roomName="your_room_name"
          onReady={handleOnReady}
          onLanguageSelected={handleOnLanguageSelected}
          onConnectionStatusUpdated={handleOnConnectionStatusUpdated}
        />
      </div>
    );
  }
}

🚀 Quick Implementation

  • We made a simple version of our interpretation-player that doesn't require you to listen to our events.
  • In this version we will control your video-player for you.
import React from 'react';
import { RsiInterpretationPlayer } from '@akkadu/rsi-react'

export default class ComponentInterpretationPlayer {
  render() {
    return (
      <div>
        <RsiInterpretationPlayer
          sdkKey="sdk_key_XXXX"
          roomName="your_room_name"
          isPlayerControlled="true"
        />
      </div>
    );
  }
}
  • You will simply need to add as parameter:
    • Your sdkKey
    • Your roomName
    • isPlayerControlled to true