398 lines
12 KiB
TypeScript
398 lines
12 KiB
TypeScript
import React, { useState, useRef, useCallback, useEffect } from 'react';
|
|
import { useNavigate } from 'react-router-dom';
|
|
import { toast } from 'react-toastify';
|
|
|
|
interface SessionRecordingProps {
|
|
onSessionStart?: (sessionId: string) => void;
|
|
onSessionEnd?: (sessionId: string, reportPath: string) => void;
|
|
}
|
|
|
|
export const SessionRecording: React.FC<SessionRecordingProps> = ({
|
|
onSessionStart,
|
|
onSessionEnd
|
|
}) => {
|
|
const [isRecording, setIsRecording] = useState(false);
|
|
const [sessionId, setSessionId] = useState<string | null>(null);
|
|
const [recordingTime, setRecordingTime] = useState(0);
|
|
const [screenshots, setScreenshots] = useState<string[]>([]);
|
|
const [isProcessing, setIsProcessing] = useState(false);
|
|
|
|
const mediaRecorderRef = useRef<MediaRecorder | null>(null);
|
|
const streamRef = useRef<MediaStream | null>(null);
|
|
const recordedChunksRef = useRef<Blob[]>([]);
|
|
const timerRef = useRef<NodeJS.Timeout | null>(null);
|
|
|
|
const navigate = useNavigate();
|
|
|
|
useEffect(() => {
|
|
return () => {
|
|
if (timerRef.current) {
|
|
clearInterval(timerRef.current);
|
|
}
|
|
if (streamRef.current) {
|
|
streamRef.current.getTracks().forEach(track => track.stop());
|
|
}
|
|
};
|
|
}, []);
|
|
|
|
const startRecording = useCallback(async () => {
|
|
try {
|
|
// Coletar informações de contexto
|
|
const metadata = await collectContextMetadata();
|
|
|
|
// Criar sessão no backend
|
|
const response = await fetch('/api/sessions/create', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(metadata)
|
|
});
|
|
|
|
if (!response.ok) {
|
|
throw new Error('Erro ao criar sessão');
|
|
}
|
|
|
|
const { sessionId: newSessionId } = await response.json();
|
|
setSessionId(newSessionId);
|
|
|
|
// Solicitar captura de tela
|
|
const stream = await navigator.mediaDevices.getDisplayMedia({
|
|
video: { mediaSource: 'screen' },
|
|
audio: true
|
|
});
|
|
|
|
streamRef.current = stream;
|
|
|
|
// Configurar MediaRecorder
|
|
const mediaRecorder = new MediaRecorder(stream, {
|
|
mimeType: 'video/webm;codecs=vp9'
|
|
});
|
|
|
|
mediaRecorderRef.current = mediaRecorder;
|
|
recordedChunksRef.current = [];
|
|
|
|
mediaRecorder.ondataavailable = (event) => {
|
|
if (event.data.size > 0) {
|
|
recordedChunksRef.current.push(event.data);
|
|
}
|
|
};
|
|
|
|
mediaRecorder.onstop = () => {
|
|
handleRecordingStop(newSessionId);
|
|
};
|
|
|
|
// Iniciar gravação
|
|
mediaRecorder.start(1000); // Gravar em chunks de 1 segundo
|
|
setIsRecording(true);
|
|
setRecordingTime(0);
|
|
|
|
// Iniciar timer
|
|
timerRef.current = setInterval(() => {
|
|
setRecordingTime(prev => prev + 1);
|
|
}, 1000);
|
|
|
|
// Overlay de informações na tela
|
|
createScreenOverlay(metadata);
|
|
|
|
onSessionStart?.(newSessionId);
|
|
toast.success('Gravação de sessão iniciada!');
|
|
|
|
} catch (error) {
|
|
console.error('Erro ao iniciar gravação:', error);
|
|
toast.error('Erro ao iniciar gravação: ' + error.message);
|
|
}
|
|
}, [onSessionStart]);
|
|
|
|
const stopRecording = useCallback(() => {
|
|
if (mediaRecorderRef.current && isRecording) {
|
|
mediaRecorderRef.current.stop();
|
|
setIsRecording(false);
|
|
|
|
if (timerRef.current) {
|
|
clearInterval(timerRef.current);
|
|
timerRef.current = null;
|
|
}
|
|
|
|
if (streamRef.current) {
|
|
streamRef.current.getTracks().forEach(track => track.stop());
|
|
}
|
|
|
|
removeScreenOverlay();
|
|
}
|
|
}, [isRecording]);
|
|
|
|
const takeScreenshot = useCallback(async () => {
|
|
if (!sessionId || !streamRef.current) {
|
|
toast.error('Sessão não ativa');
|
|
return;
|
|
}
|
|
|
|
try {
|
|
// Capturar screenshot usando Canvas
|
|
const canvas = document.createElement('canvas');
|
|
const video = document.createElement('video');
|
|
|
|
video.srcObject = streamRef.current;
|
|
video.play();
|
|
|
|
video.onloadedmetadata = async () => {
|
|
canvas.width = video.videoWidth;
|
|
canvas.height = video.videoHeight;
|
|
|
|
const ctx = canvas.getContext('2d');
|
|
ctx?.drawImage(video, 0, 0);
|
|
|
|
// Converter para base64
|
|
const screenshotData = canvas.toDataURL('image/png');
|
|
|
|
// Enviar para o backend
|
|
const response = await fetch(`/api/sessions/${sessionId}/screenshot`, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ screenshot: screenshotData })
|
|
});
|
|
|
|
if (response.ok) {
|
|
const { filename } = await response.json();
|
|
setScreenshots(prev => [...prev, filename]);
|
|
toast.success('Screenshot capturado!');
|
|
}
|
|
};
|
|
|
|
} catch (error) {
|
|
console.error('Erro ao capturar screenshot:', error);
|
|
toast.error('Erro ao capturar screenshot');
|
|
}
|
|
}, [sessionId]);
|
|
|
|
const handleRecordingStop = async (sessionId: string) => {
|
|
try {
|
|
setIsProcessing(true);
|
|
|
|
// Combinar chunks do vídeo
|
|
const blob = new Blob(recordedChunksRef.current, { type: 'video/webm' });
|
|
|
|
// Enviar vídeo para o backend
|
|
const formData = new FormData();
|
|
formData.append('video', blob, `session_${sessionId}.webm`);
|
|
|
|
const uploadResponse = await fetch(`/api/sessions/${sessionId}/video`, {
|
|
method: 'POST',
|
|
body: formData
|
|
});
|
|
|
|
if (!uploadResponse.ok) {
|
|
throw new Error('Erro ao enviar vídeo');
|
|
}
|
|
|
|
// Finalizar sessão e gerar relatório
|
|
const finalizeResponse = await fetch(`/api/sessions/${sessionId}/finalize`, {
|
|
method: 'POST'
|
|
});
|
|
|
|
if (!finalizeResponse.ok) {
|
|
throw new Error('Erro ao finalizar sessão');
|
|
}
|
|
|
|
const { reportPath } = await finalizeResponse.json();
|
|
|
|
onSessionEnd?.(sessionId, reportPath);
|
|
toast.success('Sessão finalizada e relatório gerado!');
|
|
|
|
// Navegar para página de resultados
|
|
navigate(`/sessions/report/${sessionId}`);
|
|
|
|
} catch (error) {
|
|
console.error('Erro ao processar gravação:', error);
|
|
toast.error('Erro ao processar gravação: ' + error.message);
|
|
} finally {
|
|
setIsProcessing(false);
|
|
}
|
|
};
|
|
|
|
const formatTime = (seconds: number): string => {
|
|
const hours = Math.floor(seconds / 3600);
|
|
const minutes = Math.floor((seconds % 3600) / 60);
|
|
const secs = seconds % 60;
|
|
|
|
return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
|
|
};
|
|
|
|
return (
|
|
<div className="max-w-4xl mx-auto p-6">
|
|
<div className="bg-white rounded-lg shadow-lg p-6">
|
|
<h2 className="text-2xl font-bold text-gray-900 mb-6">
|
|
Gravação de Sessão de Coleta de Prova
|
|
</h2>
|
|
|
|
<div className="space-y-6">
|
|
{/* Status da gravação */}
|
|
<div className="flex items-center justify-between p-4 bg-gray-50 rounded-lg">
|
|
<div className="flex items-center space-x-3">
|
|
<div className={`w-3 h-3 rounded-full ${isRecording ? 'bg-red-500 animate-pulse' : 'bg-gray-300'}`} />
|
|
<span className="font-medium">
|
|
{isRecording ? 'Gravando' : isProcessing ? 'Processando...' : 'Pronto para gravar'}
|
|
</span>
|
|
{isRecording && (
|
|
<span className="font-mono text-lg text-red-600">
|
|
{formatTime(recordingTime)}
|
|
</span>
|
|
)}
|
|
</div>
|
|
|
|
{sessionId && (
|
|
<span className="text-sm text-gray-500">
|
|
Sessão: {sessionId}
|
|
</span>
|
|
)}
|
|
</div>
|
|
|
|
{/* Controles */}
|
|
<div className="flex justify-center space-x-4">
|
|
{!isRecording && !isProcessing && (
|
|
<button
|
|
onClick={startRecording}
|
|
className="px-6 py-3 bg-red-600 text-white rounded-lg hover:bg-red-700 font-medium"
|
|
>
|
|
Iniciar Gravação
|
|
</button>
|
|
)}
|
|
|
|
{isRecording && (
|
|
<>
|
|
<button
|
|
onClick={takeScreenshot}
|
|
className="px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 font-medium"
|
|
>
|
|
Capturar Tela
|
|
</button>
|
|
|
|
<button
|
|
onClick={stopRecording}
|
|
className="px-6 py-3 bg-gray-600 text-white rounded-lg hover:bg-gray-700 font-medium"
|
|
>
|
|
Parar Gravação
|
|
</button>
|
|
</>
|
|
)}
|
|
</div>
|
|
|
|
{/* Informações da sessão */}
|
|
{(isRecording || screenshots.length > 0) && (
|
|
<div className="border-t pt-4">
|
|
<h3 className="font-medium text-gray-900 mb-2">Informações da Sessão</h3>
|
|
<div className="grid grid-cols-2 gap-4 text-sm">
|
|
<div>
|
|
<span className="text-gray-500">Screenshots capturados:</span>
|
|
<span className="ml-2 font-medium">{screenshots.length}</span>
|
|
</div>
|
|
<div>
|
|
<span className="text-gray-500">Tempo de gravação:</span>
|
|
<span className="ml-2 font-medium">{formatTime(recordingTime)}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Lista de screenshots */}
|
|
{screenshots.length > 0 && (
|
|
<div className="border-t pt-4">
|
|
<h3 className="font-medium text-gray-900 mb-2">Screenshots Capturados</h3>
|
|
<div className="space-y-1">
|
|
{screenshots.map((screenshot, index) => (
|
|
<div key={index} className="text-sm text-gray-600">
|
|
{index + 1}. {screenshot}
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{isProcessing && (
|
|
<div className="text-center py-8">
|
|
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto mb-4" />
|
|
<p className="text-gray-600">Processando gravação e gerando relatório...</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
// Função para coletar metadados de contexto
|
|
async function collectContextMetadata() {
|
|
const getLocation = (): Promise<GeolocationPosition | null> => {
|
|
return new Promise((resolve) => {
|
|
if (!navigator.geolocation) {
|
|
resolve(null);
|
|
return;
|
|
}
|
|
|
|
navigator.geolocation.getCurrentPosition(
|
|
(position) => resolve(position),
|
|
() => resolve(null),
|
|
{ timeout: 5000 }
|
|
);
|
|
});
|
|
};
|
|
|
|
const location = await getLocation();
|
|
|
|
return {
|
|
userAgent: navigator.userAgent,
|
|
language: navigator.language,
|
|
platform: navigator.platform,
|
|
cookieEnabled: navigator.cookieEnabled,
|
|
onlineStatus: navigator.onLine,
|
|
screenResolution: `${screen.width}x${screen.height}`,
|
|
viewportSize: `${window.innerWidth}x${window.innerHeight}`,
|
|
timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
|
|
geolocation: location ? {
|
|
latitude: location.coords.latitude,
|
|
longitude: location.coords.longitude,
|
|
accuracy: location.coords.accuracy
|
|
} : null,
|
|
timestamp: new Date().toISOString(),
|
|
url: window.location.href,
|
|
referrer: document.referrer
|
|
};
|
|
}
|
|
|
|
// Função para criar overlay na tela
|
|
function createScreenOverlay(metadata: any) {
|
|
const overlay = document.createElement('div');
|
|
overlay.id = 'recording-overlay';
|
|
overlay.style.cssText = `
|
|
position: fixed;
|
|
top: 10px;
|
|
right: 10px;
|
|
background: rgba(0, 0, 0, 0.8);
|
|
color: white;
|
|
padding: 10px;
|
|
border-radius: 5px;
|
|
font-family: monospace;
|
|
font-size: 12px;
|
|
z-index: 10000;
|
|
max-width: 300px;
|
|
`;
|
|
|
|
overlay.innerHTML = `
|
|
<div>🔴 GRAVAÇÃO ATIVA</div>
|
|
<div>IP: ${metadata.ipAddress || 'Coletando...'}</div>
|
|
<div>Timestamp: ${new Date().toLocaleString()}</div>
|
|
<div>User-Agent: ${metadata.userAgent.substring(0, 50)}...</div>
|
|
`;
|
|
|
|
document.body.appendChild(overlay);
|
|
}
|
|
|
|
// Função para remover overlay
|
|
function removeScreenOverlay() {
|
|
const overlay = document.getElementById('recording-overlay');
|
|
if (overlay) {
|
|
overlay.remove();
|
|
}
|
|
}
|
|
|
|
export default SessionRecording;
|