'use client'
import React, { useState, useEffect, useRef } from 'react'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import { Button } from '@/components/ui/button'
import { Badge } from '@/components/ui/badge'
import { Slider } from '@/components/ui/slider'
import { Switch } from '@/components/ui/switch'
import { Alert, AlertDescription } from '@/components/ui/alert'
import {
Camera,
Video,
VideoOff,
Download,
Settings,
RefreshCw,
Zap,
AlertCircle,
Loader2
} from 'lucide-react'
interface StreamSettings {
resolution: string
fps: number
quality: number
brightness: number
contrast: number
auto_exposure: boolean
night_mode: boolean
}
interface StreamStats {
fps: number
bitrate: number
latency: number
resolution: string
format: string
}
interface YahboomCameraStreamProps {
robotId: string
onCommand: (robotId: string, command: any) => void
className?: string
}
export function YahboomCameraStream({ robotId, onCommand, className }: YahboomCameraStreamProps) {
const [isStreaming, setIsStreaming] = useState(false)
const [streamUrl, setStreamUrl] = useState<string | null>(null)
const [settings, setSettings] = useState<StreamSettings>({
resolution: '640x480',
fps: 30,
quality: 80,
brightness: 50,
contrast: 50,
auto_exposure: true,
night_mode: false
})
const [stats, setStats] = useState<StreamStats | null>(null)
const [loading, setLoading] = useState(false)
const [error, setError] = useState<string | null>(null)
const videoRef = useRef<HTMLVideoElement>(null)
const canvasRef = useRef<HTMLCanvasElement>(null)
const startStream = async () => {
setLoading(true)
setError(null)
try {
const response = await fetch(`http://localhost:8081/api/robots/${robotId}/camera/stream`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
action: 'start_stream',
settings: settings
})
})
if (response.ok) {
const data = await response.json()
setStreamUrl(data.stream_url)
setIsStreaming(true)
} else {
setError(`Failed to start stream: ${response.status}`)
}
} catch (err) {
setError(`Network error: ${err instanceof Error ? err.message : 'Unknown error'}`)
} finally {
setLoading(false)
}
}
const stopStream = async () => {
setLoading(true)
try {
await fetch(`http://localhost:8081/api/robots/${robotId}/camera/stream`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ action: 'stop_stream' })
})
setIsStreaming(false)
setStreamUrl(null)
setStats(null)
} catch (err) {
console.error('Failed to stop stream:', err)
} finally {
setLoading(false)
}
}
const captureImage = async () => {
if (!videoRef.current) return
const canvas = canvasRef.current
if (!canvas) return
const ctx = canvas.getContext('2d')
if (!ctx) return
canvas.width = videoRef.current.videoWidth
canvas.height = videoRef.current.videoHeight
ctx.drawImage(videoRef.current, 0, 0)
canvas.toBlob(async (blob) => {
if (!blob) return
const formData = new FormData()
formData.append('image', blob, `yahboom-${robotId}-${Date.now()}.png`)
try {
const response = await fetch(`http://localhost:8081/api/robots/${robotId}/camera/capture`, {
method: 'POST',
body: formData
})
if (response.ok) {
// Trigger download
const url = window.URL.createObjectURL(blob)
const a = document.createElement('a')
a.href = url
a.download = `yahboom-${robotId}-${Date.now()}.png`
document.body.appendChild(a)
a.click()
document.body.removeChild(a)
window.URL.revokeObjectURL(url)
}
} catch (err) {
console.error('Failed to save image:', err)
}
}, 'image/png')
}
const updateSettings = async () => {
if (!isStreaming) return
try {
await fetch(`http://localhost:8081/api/robots/${robotId}/camera/settings`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ settings })
})
} catch (err) {
console.error('Failed to update settings:', err)
}
}
// Fetch stream stats periodically
useEffect(() => {
if (!isStreaming) return
const fetchStats = async () => {
try {
const response = await fetch(`http://localhost:8081/api/robots/${robotId}/camera/stats`)
if (response.ok) {
const data = await response.json()
setStats(data)
}
} catch (err) {
// Silently fail for stats
}
}
const interval = setInterval(fetchStats, 1000)
return () => clearInterval(interval)
}, [isStreaming, robotId])
// Auto-update settings when they change
useEffect(() => {
const timeoutId = setTimeout(updateSettings, 500)
return () => clearTimeout(timeoutId)
}, [settings])
return (
<Card className={className}>
<CardHeader>
<CardTitle className="flex items-center justify-between">
<div className="flex items-center gap-2">
<Camera className="w-5 h-5 text-blue-500" />
Yahboom Camera Stream
</div>
{stats && (
<div className="flex items-center gap-2 text-sm text-gray-600">
<Badge variant="outline">{stats.fps} FPS</Badge>
<Badge variant="outline">{stats.resolution}</Badge>
<Badge variant="outline">{Math.round(stats.latency)}ms</Badge>
</div>
)}
</CardTitle>
<CardDescription>
Real-time camera streaming from Yahboom ROSMASTER (M1/X3/X3 Plus)
</CardDescription>
</CardHeader>
<CardContent className="space-y-4">
{/* Video Display */}
<div className="relative bg-black rounded-lg overflow-hidden">
{isStreaming && streamUrl ? (
<video
ref={videoRef}
src={streamUrl}
autoPlay
muted
className="w-full h-64 object-contain"
onError={() => setError('Video stream failed')}
/>
) : (
<div className="w-full h-64 flex items-center justify-center text-gray-500">
<div className="text-center">
<VideoOff className="w-12 h-12 mx-auto mb-2 opacity-50" />
<p>Camera stream not active</p>
</div>
</div>
)}
{loading && (
<div className="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center">
<Loader2 className="w-8 h-8 animate-spin text-white" />
</div>
)}
</div>
<canvas ref={canvasRef} className="hidden" />
{/* Controls */}
<div className="flex flex-wrap gap-2">
<Button
onClick={isStreaming ? stopStream : startStream}
disabled={loading}
className="flex items-center gap-2"
variant={isStreaming ? "destructive" : "default"}
>
{loading ? (
<Loader2 className="w-4 h-4 animate-spin" />
) : isStreaming ? (
<VideoOff className="w-4 h-4" />
) : (
<Video className="w-4 h-4" />
)}
{isStreaming ? 'Stop Stream' : 'Start Stream'}
</Button>
<Button
onClick={captureImage}
disabled={!isStreaming || loading}
variant="outline"
className="flex items-center gap-2"
>
<Download className="w-4 h-4" />
Capture Image
</Button>
<Button
onClick={() => onCommand(robotId, { action: 'camera_calibrate' })}
disabled={!isStreaming || loading}
variant="outline"
className="flex items-center gap-2"
>
<RefreshCw className="w-4 h-4" />
Calibrate
</Button>
</div>
{/* Error Display */}
{error && (
<Alert variant="destructive">
<AlertCircle className="h-4 w-4" />
<AlertDescription>{error}</AlertDescription>
</Alert>
)}
{/* Settings Panel */}
<div className="border-t pt-4">
<h4 className="text-sm font-medium mb-3 flex items-center gap-2">
<Settings className="w-4 h-4" />
Camera Settings
</h4>
<div className="grid grid-cols-2 md:grid-cols-3 gap-4">
<div>
<label className="text-xs text-gray-600 mb-1 block">Resolution</label>
<select
value={settings.resolution}
onChange={(e) => setSettings(prev => ({ ...prev, resolution: e.target.value }))}
className="w-full p-2 text-sm border rounded"
disabled={isStreaming}
>
<option value="320x240">320x240</option>
<option value="640x480">640x480</option>
<option value="1280x720">1280x720</option>
<option value="1920x1080">1920x1080</option>
</select>
</div>
<div>
<label className="text-xs text-gray-600 mb-1 block">FPS: {settings.fps}</label>
<Slider
value={[settings.fps]}
onValueChange={(value) => setSettings(prev => ({ ...prev, fps: value[0] }))}
max={60}
min={1}
step={1}
className="w-full"
disabled={isStreaming}
/>
</div>
<div>
<label className="text-xs text-gray-600 mb-1 block">Quality: {settings.quality}%</label>
<Slider
value={[settings.quality]}
onValueChange={(value) => setSettings(prev => ({ ...prev, quality: value[0] }))}
max={100}
min={10}
step={5}
className="w-full"
/>
</div>
<div>
<label className="text-xs text-gray-600 mb-1 block">Brightness: {settings.brightness}%</label>
<Slider
value={[settings.brightness]}
onValueChange={(value) => setSettings(prev => ({ ...prev, brightness: value[0] }))}
max={100}
min={0}
step={5}
className="w-full"
/>
</div>
<div>
<label className="text-xs text-gray-600 mb-1 block">Contrast: {settings.contrast}%</label>
<Slider
value={[settings.contrast]}
onValueChange={(value) => setSettings(prev => ({ ...prev, contrast: value[0] }))}
max={100}
min={0}
step={5}
className="w-full"
/>
</div>
<div className="space-y-2">
<div className="flex items-center space-x-2">
<Switch
checked={settings.auto_exposure}
onCheckedChange={(checked) => setSettings(prev => ({ ...prev, auto_exposure: checked }))}
/>
<label className="text-xs text-gray-600">Auto Exposure</label>
</div>
<div className="flex items-center space-x-2">
<Switch
checked={settings.night_mode}
onCheckedChange={(checked) => setSettings(prev => ({ ...prev, night_mode: checked }))}
/>
<label className="text-xs text-gray-600">Night Mode</label>
</div>
</div>
</div>
</div>
{/* Advanced Stats */}
{stats && (
<div className="border-t pt-4">
<h4 className="text-sm font-medium mb-3">Stream Statistics</h4>
<div className="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm">
<div>
<span className="text-gray-600">FPS:</span>
<span className="ml-2 font-mono">{stats.fps}</span>
</div>
<div>
<span className="text-gray-600">Bitrate:</span>
<span className="ml-2 font-mono">{Math.round(stats.bitrate / 1000)}Kbps</span>
</div>
<div>
<span className="text-gray-600">Latency:</span>
<span className="ml-2 font-mono">{stats.latency}ms</span>
</div>
<div>
<span className="text-gray-600">Format:</span>
<span className="ml-2 font-mono">{stats.format}</span>
</div>
</div>
</div>
)}
</CardContent>
</Card>
)
}
