meetapp-vue

Vue 3 bindings for meetapp-sdk.

Install

npm install meetapp-vue meetapp-sdk vue

Usage

<script setup lang="ts">
import { useMeetapp, MeetappVideo } from 'meetapp-vue'

const {
  status, error,
  localStream, peers,
  micEnabled, cameraEnabled, screenSharing, recording,
  setMicEnabled, setCamEnabled, toggleScreenShare,
  startRecording, stopRecording, leave,
} = useMeetapp({
  serverUrl: 'https://meet.example.com',
  roomId: 'team-standup',
  autoJoin: true,
})
</script>

<template>
  <div v-if="status === 'error'">Error: {{ error?.message }}</div>
  <div v-else-if="status !== 'joined'">Joining…</div>

  <div v-else>
    <MeetappVideo :stream="localStream" muted />
    <MeetappVideo v-for="[id, p] in peers" :key="id" :stream="p.stream" />

    <button @click="setMicEnabled(!micEnabled)">
      {{ micEnabled ? 'Mute' : 'Unmute' }}
    </button>
    <button @click="setCamEnabled(!cameraEnabled)">
      {{ cameraEnabled ? 'Stop cam' : 'Start cam' }}
    </button>
    <button @click="toggleScreenShare">
      {{ screenSharing ? 'Stop sharing' : 'Share screen' }}
    </button>

    <template v-if="recording.state === 'recording'">
      <button @click="stopRecording">Stop recording</button>
    </template>
    <template v-else>
      <button @click="startRecording">Record</button>
    </template>
    <a v-if="recording.state === 'ready'" :href="recording.url" target="_blank">
      Recording ready ↗
    </a>

    <button @click="leave">Leave</button>
  </div>
</template>

API

useMeetapp(options) → UseMeetappApi

Same shape as the React hook but all state values are Refs and peers is a reactive Map.

<MeetappVideo :stream="..." :muted="false" />

<video> wrapper that handles srcObject assignment reactively.