Using Vue.js

Installation

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

Registering the Interpretation Manager

<template>
  <RsiIntepretationManager sdkKey="RSI_SDK_KEY" />
</template>

<script>

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

export default {
  components:{
    RsiInterpretationManager
  }
}
</script>

Registering the Interpretation Player

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

<script lang="js">

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 will also have to add a roomname query parameter on your audience pages. More

  • You can use our vue-example repository here

    • In this package you will find the implementation of the interpretation manager and interpretation player.
  • 🌈 Check out our Vue 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.
<template>
  <RsiInterpretationPlayer
    sdkKey="sdk_key_XXXX" 
    isPlayerControlled="true"
    roomname="ajlx" >
</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
    • isPlayerControlled to true, more
    • Your roomName