BAŞLANGIÇ / QUICKSTART

Web SDK ile 10 dakikada ilk görüşme

Volor Web SDK’yı kurun, güvenli token alın, kanala katılın ve kamera ile mikrofonunuzu yayınlayın.

Son güncelleme: 15 Ağustos 2026Okuma: 10 dkDüzenleme öner

Gereksinimler

Bu rehber modern bir TypeScript uygulamasını temel alır. Aynı yaşam döngüsü React, Vue, Svelte ve yalın JavaScript projelerinde geçerlidir.

✓Node.js 20 veya üzeri
✓HTTPS ya da localhost üzerinde çalışan bir web uygulaması
✓Volor.io Console’dan alınmış proje kimliği
✓Token üretmek için güvenilir bir backend endpoint’i

1. SDK’yı kurun

Paket ESM olarak dağıtılır ve TypeScript tiplerini içerir. Kamera ve mikrofon yalnız kullanıcı etkileşimi sonrasında başlatılmalıdır.

npm install @volor/rtc
# veya
pnpm add @volor/rtc

2. Token endpoint’i oluşturun

Backend, oturum açmış kullanıcıyı doğruladıktan sonra yalnız katılacağı kanal için bir token üretmelidir. Örnekteki secret sunucu ortam değişkeninden okunur.

import { VolorToken } from '@volor/server'

export async function POST(request: Request) {
  const user = await requireSession(request)
  const { channelId } = await request.json()

  const token = await VolorToken.create({
    projectId: process.env.VOLOR_PROJECT_ID!,
    secret: process.env.VOLOR_APP_SECRET!,
    subject: user.id,
    channelId,
    role: 'publisher',
    expiresIn: '15m'
  })

  return Response.json({ token })
}

3. Kanala katılın ve yayınlayın

import { createVolorClient } from '@volor/rtc'

const { token } = await fetch('/api/volor-token', {
  method: 'POST',
  body: JSON.stringify({ channelId: 'daily-room' })
}).then((response) => response.json())

const client = createVolorClient({
  projectId: 'prj_live_xxxxxxxxx',
  region: 'auto'
})

const channel = await client.join({
  channelId: 'daily-room',
  participantId: crypto.randomUUID(),
  token
})

const localTracks = await client.media.createCameraTracks({
  audio: true,
  video: { width: 1280, height: 720, frameRate: 30 }
})

localTracks.video?.play(document.querySelector('#local-video')!)
await channel.publish(localTracks)

4. Uzak katılımcıları gösterin

✓Sayfa kapanırken local track’leri stop edin.
✓Kanalı leave ile kapatın ve olay dinleyicilerini temizleyin.
✓Autoplay engeline karşı ilk kullanıcı tıklamasında audio context’i başlatın.

channel.on('track.published', async ({ participant, track }) => {
  await channel.subscribe(track)

  if (track.kind === 'video') {
    const node = document.createElement('div')
    node.dataset.participant = participant.id
    document.querySelector('#remote-grid')?.append(node)
    track.play(node)
  }

  if (track.kind === 'audio') track.play()
})

channel.on('participant.left', ({ participant }) => {
  document.querySelector(`[data-participant="${participant.id}"]`)?.remove()
})