v0.9.1 QUICK REFERENCE - nself-org/nchat GitHub Wiki

v0.9.1 Quick Reference - WebRTC & Email

Fast reference for developers using WebRTC and Email features.


WebRTC Components

Import Components

// Video call window
import { CallWindow } from '@/components/voice-video/CallWindow'

// Live stream player
import { StreamPlayer } from '@/components/voice-video/StreamPlayer'

// Call controls bar
import { CallControls } from '@/components/call/call-controls'

// Participant grid
import { ParticipantGrid } from '@/components/voice-video/ParticipantGrid'

Quick Examples

Simple Video Call

<CallWindow
  callId="call-123"
  channelName="Team Meeting"
  participants={participants}
  currentUserId="user-id"
  onEndCall={() => router.push('/chat')}
  onToggleMute={() => toggleMute()}
  onToggleVideo={() => toggleVideo()}
  onToggleScreenShare={() => toggleScreenShare()}
/>

Participant Grid (Standalone)

<ParticipantGrid
  participants={participants}
  localParticipant={localUser}
  layout="auto" // or 'grid', 'spotlight', 'sidebar'
  isHost={isHost}
  onPinParticipant={(id) => setPinnedId(id)}
  onRemoveParticipant={(id) => removeUser(id)}
  onMuteParticipant={(id) => muteUser(id)}
/>

Live Stream

<StreamPlayer
  metadata={{
    streamId: 'stream-123',
    title: 'Live Event',
    streamer: { id: 'host-id', name: 'Host Name' },
    viewerCount: 1234,
    startedAt: new Date(),
    isLive: true,
  }}
  streamUrl="https://stream.example.com/index.m3u8"
  onSendMessage={(msg) => sendToChat(msg)}
  onReaction={(emoji) => sendReaction(emoji)}
/>

Email Service

Import Email Service

import { emailService } from '@/lib/email/email.service'

Send Emails

Welcome Email

await emailService.sendWelcomeEmail({
  to: '[email protected]',
  userName: 'John Doe',
  loginUrl: 'https://app.com/login',
})

Email Verification

await emailService.sendEmailVerification({
  to: '[email protected]',
  userName: 'John Doe',
  verificationUrl: 'https://app.com/verify?token=abc123',
  verificationCode: '123456',
  expiresInHours: 24,
})

Password Reset

await emailService.sendPasswordReset({
  to: '[email protected]',
  userName: 'John Doe',
  resetUrl: 'https://app.com/reset?token=xyz789',
  expiresInMinutes: 60,
  ipAddress: req.headers['x-forwarded-for'],
  userAgent: req.headers['user-agent'],
})

2FA Code

await emailService.send2FACode({
  to: '[email protected]',
  userName: 'John Doe',
  code: '123456',
  expiresInMinutes: 10,
})

Magic Link

await emailService.sendMagicLink({
  to: '[email protected]',
  userName: 'John Doe',
  magicLinkUrl: 'https://app.com/magic?token=abc',
  expiresInMinutes: 15,
})

LiveKit Setup

Environment Variables

# .env.local
NEXT_PUBLIC_LIVEKIT_URL=ws://localhost:7880
LIVEKIT_API_KEY=your_api_key
LIVEKIT_API_SECRET=your_api_secret

Generate Credentials

# Generate API key and secret
LIVEKIT_API_KEY=$(openssl rand -hex 16)
LIVEKIT_API_SECRET=$(openssl rand -hex 32)

echo "LIVEKIT_API_KEY=$LIVEKIT_API_KEY"
echo "LIVEKIT_API_SECRET=$LIVEKIT_API_SECRET"

Start LiveKit Server

# Start
docker-compose -f docker-compose.livekit.yml up -d

# Check status
docker-compose -f docker-compose.livekit.yml ps

# View logs
docker-compose -f docker-compose.livekit.yml logs -f livekit

# Stop
docker-compose -f docker-compose.livekit.yml down

Generate LiveKit Token (Server-side)

import { AccessToken } from 'livekit-server-sdk'

export function generateToken(roomName: string, participantName: string, userId: string) {
  const token = new AccessToken(process.env.LIVEKIT_API_KEY!, process.env.LIVEKIT_API_SECRET!, {
    identity: userId,
    name: participantName,
  })

  token.addGrant({
    roomJoin: true,
    room: roomName,
    canPublish: true,
    canSubscribe: true,
  })

  return token.toJwt()
}

Email Configuration

Development (Mailpit)

# .env.local
SMTP_HOST=localhost
SMTP_PORT=1025
SMTP_SECURE=false
[email protected]
EMAIL_FROM_NAME=nChat

Access Mailpit UI: http://localhost:8025

Production (SendGrid)

# .env.local
SENDGRID_API_KEY=SG.your_api_key
[email protected]
EMAIL_FROM_NAME=Your App Name

Common Patterns

Handle Video Call State

import { useCallStore } from '@/stores/call-store'

function MyComponent() {
  const {
    currentCall,
    participants,
    localParticipant,
    isMuted,
    isVideoEnabled,
    toggleMute,
    toggleVideo,
    endCall,
  } = useCallStore()

  return (
    <div>
      {currentCall && (
        <ParticipantGrid
          participants={participants}
          localParticipant={localParticipant}
        />
      )}
    </div>
  )
}

Send Email in API Route

// src/app/api/my-route/route.ts
import { emailService } from '@/lib/email/email.service'
import { NextRequest, NextResponse } from 'next/server'

export async function POST(request: NextRequest) {
  const { userEmail, userName } = await request.json()

  // Send email
  await emailService.sendWelcomeEmail({
    to: userEmail,
    userName,
  })

  return NextResponse.json({ success: true })
}

Handle Call Invitation

async function inviteToCall(userId: string, callId: string) {
  const user = await getUser(userId)

  // Send email invitation
  await emailService.send({
    to: user.email,
    subject: 'You've been invited to a call',
    html: `
      <h1>Join the Call</h1>
      <p>You've been invited to join a video call.</p>
      <a href="${process.env.NEXT_PUBLIC_APP_URL}/call/${callId}">
        Join Now
      </a>
    `,
  })

  // Send push notification (if implemented)
  await sendPushNotification(userId, {
    title: 'Call Invitation',
    body: 'Tap to join the call',
  })
}

Troubleshooting

Video Call Issues

No video/audio:

# Check browser permissions
# Verify LiveKit is running
docker-compose -f docker-compose.livekit.yml ps

# Check LiveKit logs
docker-compose -f docker-compose.livekit.yml logs livekit

# Test WebRTC
open chrome://webrtc-internals/

Poor connection:

  • Check network bandwidth
  • Verify TURN server is configured
  • Check firewall rules for ports 50000-60000

Email Issues

Emails not sending:

# Check Mailpit is running (dev)
curl http://localhost:8025

# Check SendGrid API key (prod)
# Verify in SendGrid dashboard

# Check email service logs
# See console output or Sentry

Emails in spam:

  • Configure SPF, DKIM, DMARC records
  • Use verified sender domain
  • Check SendGrid deliverability score

File Locations

Components

  • CallWindow: src/components/voice-video/CallWindow.tsx
  • StreamPlayer: src/components/voice-video/StreamPlayer.tsx
  • CallControls: src/components/call/call-controls.tsx
  • ParticipantGrid: src/components/voice-video/ParticipantGrid.tsx

Services

  • Email Service: src/lib/email/email.service.ts
  • Email Templates: src/emails/templates/

Configuration

  • LiveKit Docker: docker-compose.livekit.yml
  • LiveKit Config: livekit.yaml
  • Environment: .env.local

Documentation

  • Full Guide: docs/WebRTC-Email-Integration-Guide.md
  • Implementation: docs/v0.9.1-IMPLEMENTATION-SUMMARY.md
  • This File: docs/v0.9.1-QUICK-REFERENCE.md

Testing Commands

# Type check
pnpm type-check

# Start dev server
pnpm dev

# Start LiveKit
docker-compose -f docker-compose.livekit.yml up -d

# Access Mailpit
open http://localhost:8025

# Test email
curl -X POST http://localhost:3000/api/auth/signup \
  -H "Content-Type: application/json" \
  -d '{"email":"[email protected]","password":"Test123!","username":"testuser"}'

Links


Version: v0.9.1 Last Updated: February 3, 2026

⚠️ **GitHub.com Fallback** ⚠️