@applooma/rtc-vue

AppLooma RTC for Vue 3: composables and a video component for real-time voice, video and live streaming. Built on @applooma/rtc-web; every type and event of the Web SDK is re-exported.

Install

npm install @applooma/rtc-vue

vue 3.3 or newer is a peer dependency.

Quick start

Get a join token from your server (never put your API secret in the browser), then:

<script setup lang="ts">
import { useAppEngine, useLocalTracks, AppVideoView } from '@applooma/rtc-vue';

const { engine, remoteUsers, connectionState, join, leave } = useAppEngine({ appId: 'YOUR_APP_ID' });
const { cameraOn, micOn, setCamera, setMicrophone } = useLocalTracks(engine, { camera: true, microphone: true });

async function start() {
  const { token, wsUrl } = await fetch('/api/rtc-token').then((r) => r.json());
  await join(token, wsUrl, { role: 'host', camera: true, microphone: true });
}
</script>

<template>
  <p>{{ connectionState }}</p>
  <button @click="start">Join</button>
  <button @click="leave">Leave</button>
  <button @click="setCamera(!cameraOn)">Camera</button>
  <button @click="setMicrophone(!micOn)">Mic</button>

  <AppVideoView :engine="engine" local style="width: 240px; height: 180px" />
  <AppVideoView v-for="u in remoteUsers" :key="u.uid" :track="u.videoTrack" style="width: 320px; height: 240px" />
</template>

API

| | | |---|---| | useAppEngine(config \| engine) | Creates (or wraps) an engine. Returns engine, reactive connectionState, remoteUsers, activeSpeakers, and join / leave. An engine it created leaves the channel when the component unmounts. | | useRemoteUsers(engine) | A reactive list of the other people in the channel. | | useLocalTracks(engine, initial?) | cameraOn, micOn, screenOn and setCamera, setMicrophone, setScreenShare, switchCamera. | | <AppVideoView> | Props: track (a remote AppTrack), or engine + local for your own preview; mirror (defaults to on for local), fit ('cover' or 'contain'). |

Remote audio plays automatically; nothing needs to be rendered for it.

Remote diagnostics

The engine is the Web SDK engine, so remote diagnostics work with no extra setup (Web SDK 0.4.6 or later): recent log lines and stats, never audio, video, messages or names, are uploaded scrubbed after a call with a problem or when support turns collection on. Call engine.uploadDiagnostics(reason) to send them yourself; opt out with remoteDiagnostics: false in the engine config.

Docs: https://applooma.dev/sdk/vue