RS Agora V1

Agora video conferencing module with whiteboard support for Vue 3 applications.

Features

• 🎥 Video Conferencing - High-quality video calls with Agora RTC
• 💬 Real-time Messaging - RTM support for chat and signaling
• 🎨 Whiteboard Integration - Netless Fastboard integration
• 📱 Responsive Design - Works on desktop and mobile
• 🎛️ Advanced Controls - Recording, layout switching, device management
• 🌙 Theme Support - Light and dark themes

Installation

npm install rs-agora-v1

Quick Start

import { createApp } from 'vue'
import { AgoraConference } from 'rs-agora-v1'
import 'rs-agora-v1/dist/193.css'  // CSS'i manuel import et

const app = createApp({
  // Your app
})

// Component'i global olarak kaydet
app.component('AgoraConference', AgoraConference)

Usage

Basic Video Conference

<template>
  <div>
    <AgoraConference 
      :app-id="appId"
      :token="token"
      :channel="channel"
      @user-joined="onUserJoined"
      @user-left="onUserLeft"
    />
  </div>
</template>

<script>
import { AgoraConference } from 'rs-agora-v1'

export default {
  components: {
    AgoraConference
  },
  data() {
    return {
      appId: 'your-agora-app-id',
      token: 'your-token',
      channel: 'test-channel'
    }
  },
  methods: {
    onUserJoined(user) {
      console.log('User joined:', user)
    },
    onUserLeft(user) {
      console.log('User left:', user)
    }
  }
}
</script>

With Whiteboard

<template>
  <div>
    <AgoraConference 
      :app-id="appId"
      :token="token"
      :channel="channel"
      :enable-whiteboard="true"
      :netless-config="netlessConfig"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      appId: 'your-agora-app-id',
      token: 'your-token',
      channel: 'test-channel',
      netlessConfig: {
        appIdentifier: 'your-netless-app-id',
        apiToken: 'your-netless-token'
      }
    }
  }
}
</script>

Configuration

Agora Configuration

import { AGORA_CONFIG } from 'rs-agora-v1'

// Customize Agora settings
const customConfig = {
  ...AGORA_CONFIG,
  mode: 'rtc',
  codec: 'h264',
  enableDualStream: false
}

Netless Whiteboard Configuration

import { NETLESS_CONFIG } from 'rs-agora-v1'

// Customize Netless settings
const customNetlessConfig = {
  ...NETLESS_CONFIG,
  region: 'cn-hz',
  theme: 'light'
}

Components

• AgoraConference - Main conference component
• AgoraVideo - Video display component
• AgoraControls - Conference controls
• AdvancedWhiteboard - Whiteboard component
• LayoutSwitcher - Layout switching controls

Composables

• useMeeting - Meeting management
• useVideo - Video stream management
• useNetlessWhiteboard - Whiteboard functionality
• useRecording - Recording functionality
• useRTM - Real-time messaging

Requirements

• Vue 3.x
• Agora App ID and Token
• Netless App ID and Token (for whiteboard)

License

MIT

Support

For issues and questions, please visit our GitHub repository.