Using Vue.js

Installation

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

Registering the Interpretation Manager

<template>
  <RsiApiIntepretationManager apiKey="RSI_API_KEY" />
</template>

<script>

import { RsiApiInterpretationManager } from '@akkadu/rsi-api-vue'

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

Registering the Interpretation Player

<template>
  <RsiApiInterpretationPlayer
    apiKey="api_key_XXXX" 
    positionMenu="bottom" 
    v-on:onLanguageSelected="handleOnLanguageSelected"
    v-on:onReady="handleOnReady"
    v-on:onConnectionStatusUpdated="handleOnConnectionStatusUpdated"  >
</template>

<script lang="js">

import { RsiApiInterpretationPlayer } from '@akkadu/rsi-api-vue'

export default {
  components:{
    RsiApiInterpretationPlayer
  },
  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 respository here.

    • In this package you will find the implementation of the interpretation manager and interpretation player.
  • 🌈 Check out our Vue online demo