Vue SDK

@applooma/rtc-vue wraps the Web SDKin Vue 3 composables. The engine's state becomes refs your template reads directly, and one component renders remote and local video. Everything from @applooma/rtc-web is re-exported, so the full engine API is one import away.

Install#

npm install @applooma/rtc-vue

Vue 3.3 or newer is a peer dependency. The Web SDK comes with it as a dependency.

Quick start#

The token comes from your server, as in the Quickstart.

<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 class="pip" />
  <AppVideoView v-for="u in remoteUsers" :key="u.uid" :track="u.videoTrack" class="tile" />
</template>

Composables#

useAppEngine(config | engine)

Creates an engine for the component, or wraps one you pass in to share it across components. An engine it created leaves the channel when the component unmounts; a shared one is left to you.

useRemoteUsers(engine)

The other people in the channel as a ref, refreshed on join, leave and track changes.

useLocalTracks(engine, initial?)

Your own devices as switches: cameraOn, micOn, screenOn, and setCamera, setMicrophone, setScreenShare, switchCamera.

<AppVideoView>#

• Remote audio plays by itself; only video needs a view.
• Your preview re-attaches automatically when the camera track is recreated (camera off and on, switch camera).

Remote diagnostics#

This package wraps the Web SDK engine, so remote diagnostics work here with no extra setup (Web SDK 0.4.6 or later). The engine keeps recent log lines and a stats snapshot in memory (never audio, video, messages or names) and uploads them, scrubbed, after a call with a problem or when support turns collection on. Call engine.uploadDiagnostics('user-report') on the engine that useAppEnginereturns to send them yourself, for example from a "Report a problem" button. Opt out with useAppEngine({ appId, remoteDiagnostics: false }).

What changed#

0.1.2

• README and this page describe remote diagnostics (uploadDiagnostics, remoteDiagnostics: false). No API changes.

0.1.1

• Requires Web SDK 0.4.7, which adds a cloud proxy over TLS 443 with automatic retry.

0.1.0

• First release.