Using Vue.js

Installation

yarn add @akkadu/rsi-vue
npm install @akkadu/rsi-vue

Registering the Interpretation Player

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

<script>
import { RsiInterpretationPlayer } from '@akkadu/rsi-vue'

export default {
  components: {
    RsiInterpretationPlayer
  },
  methods: {
    handleOnLanguageSelected(e) {
      console.info('handleLanguageSelected event:', e);
    },
    handleOnReady(e) {
      console.info('handleOnReady event:', e);
    },
    handleOnConnectionStatusUpdated(e) {
      console.info('handleOnConnectionStatusUpdated event:', e);
    },
  },
}
</script>
  • You can use our examples repository here

🚀 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.
<template>
  <RsiInterpretationPlayer
    sdkKey="sdk_key_XXXX" 
    roomName="your_room_name"
    isPlayerControlled="true"
  />
</template>

<script lang="js">

import { RsiInterpretationPlayer } from '@akkadu/rsi-vue'

export default {
  components: {
    RsiInterpretationPlayer
  },
}
</script>
  • You will simply need to add as parameter:
    • Your sdkKey
    • Your roomName
    • isPlayerControlled to true, more