Using React.js
Installation
yarn add @akkadu/rsi-react
npm install @akkadu/rsi-react
Interpretation Player
Registering theimport 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>
);
}
}
You can also use our examples repository here.
🌈 Check out our React online demo
🚀 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
- Your