v0.9.1 QUICK REFERENCE - nself-org/nchat GitHub Wiki
Fast reference for developers using WebRTC and Email features.
// 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'<CallWindow
callId="call-123"
channelName="Team Meeting"
participants={participants}
currentUserId="user-id"
onEndCall={() => router.push('/chat')}
onToggleMute={() => toggleMute()}
onToggleVideo={() => toggleVideo()}
onToggleScreenShare={() => toggleScreenShare()}
/><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)}
/><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)}
/>import { emailService } from '@/lib/email/email.service'await emailService.sendWelcomeEmail({
to: '[email protected]',
userName: 'John Doe',
loginUrl: 'https://app.com/login',
})await emailService.sendEmailVerification({
to: '[email protected]',
userName: 'John Doe',
verificationUrl: 'https://app.com/verify?token=abc123',
verificationCode: '123456',
expiresInHours: 24,
})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'],
})await emailService.send2FACode({
to: '[email protected]',
userName: 'John Doe',
code: '123456',
expiresInMinutes: 10,
})await emailService.sendMagicLink({
to: '[email protected]',
userName: 'John Doe',
magicLinkUrl: 'https://app.com/magic?token=abc',
expiresInMinutes: 15,
})# .env.local
NEXT_PUBLIC_LIVEKIT_URL=ws://localhost:7880
LIVEKIT_API_KEY=your_api_key
LIVEKIT_API_SECRET=your_api_secret# 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
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 downimport { 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()
}# .env.local
SMTP_HOST=localhost
SMTP_PORT=1025
SMTP_SECURE=false
[email protected]
EMAIL_FROM_NAME=nChatAccess Mailpit UI: http://localhost:8025
# .env.local
SENDGRID_API_KEY=SG.your_api_key
[email protected]
EMAIL_FROM_NAME=Your App Nameimport { 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>
)
}// 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 })
}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',
})
}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
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 SentryEmails in spam:
- Configure SPF, DKIM, DMARC records
- Use verified sender domain
- Check SendGrid deliverability score
- 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
- Email Service:
src/lib/email/email.service.ts - Email Templates:
src/emails/templates/
- LiveKit Docker:
docker-compose.livekit.yml - LiveKit Config:
livekit.yaml - Environment:
.env.local
- 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
# 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"}'-
Full Documentation:
/docs/WebRTC-Email-Integration-Guide.md - LiveKit Docs: https://docs.livekit.io
- SendGrid Docs: https://docs.sendgrid.com
- React Email: https://react.email
Version: v0.9.1 Last Updated: February 3, 2026