mirror of
https://github.com/hwanny1128/HGZero.git
synced 2025-12-06 16:06:23 +00:00
3e411eb8d5
- EventHub 공유 액세스 정책 재설정 (send-policy, listen-policy) - STT 서비스: send-policy 연결 문자열 업데이트 - AI-Python 서비스: listen-policy 연결 문자열 업데이트 - Meeting 서비스: listen-policy 연결 문자열 업데이트 - Redis DB 2번 Slave → Master 승격 - STT 테스트 페이지 추가 (stt-test-wav.html) - EventHub 재설정 가이드 문서 추가 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
424 lines
15 KiB
HTML
424 lines
15 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ko">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>STT WebSocket 테스트</title>
|
|
<style>
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 20px;
|
|
background-color: #f5f5f5;
|
|
}
|
|
.container {
|
|
background: white;
|
|
border-radius: 8px;
|
|
padding: 20px;
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
|
margin-bottom: 20px;
|
|
}
|
|
h2 {
|
|
color: #333;
|
|
border-bottom: 2px solid #4CAF50;
|
|
padding-bottom: 10px;
|
|
}
|
|
.controls {
|
|
display: flex;
|
|
gap: 10px;
|
|
margin-bottom: 20px;
|
|
flex-wrap: wrap;
|
|
}
|
|
button {
|
|
padding: 10px 20px;
|
|
font-size: 14px;
|
|
border: none;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
transition: background-color 0.3s;
|
|
}
|
|
button:disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
}
|
|
.btn-connect {
|
|
background-color: #4CAF50;
|
|
color: white;
|
|
}
|
|
.btn-connect:hover:not(:disabled) {
|
|
background-color: #45a049;
|
|
}
|
|
.btn-disconnect {
|
|
background-color: #f44336;
|
|
color: white;
|
|
}
|
|
.btn-disconnect:hover:not(:disabled) {
|
|
background-color: #da190b;
|
|
}
|
|
.btn-record {
|
|
background-color: #2196F3;
|
|
color: white;
|
|
}
|
|
.btn-record:hover:not(:disabled) {
|
|
background-color: #0b7dda;
|
|
}
|
|
.btn-stop {
|
|
background-color: #ff9800;
|
|
color: white;
|
|
}
|
|
.btn-stop:hover:not(:disabled) {
|
|
background-color: #e68900;
|
|
}
|
|
.btn-clear {
|
|
background-color: #9E9E9E;
|
|
color: white;
|
|
}
|
|
.status {
|
|
padding: 10px;
|
|
border-radius: 4px;
|
|
margin-bottom: 10px;
|
|
font-weight: bold;
|
|
}
|
|
.status-connected {
|
|
background-color: #dff0d8;
|
|
color: #3c763d;
|
|
}
|
|
.status-disconnected {
|
|
background-color: #f2dede;
|
|
color: #a94442;
|
|
}
|
|
.status-recording {
|
|
background-color: #d9edf7;
|
|
color: #31708f;
|
|
}
|
|
.log-container {
|
|
background-color: #f9f9f9;
|
|
border: 1px solid #ddd;
|
|
border-radius: 4px;
|
|
padding: 10px;
|
|
max-height: 300px;
|
|
overflow-y: auto;
|
|
font-family: 'Courier New', monospace;
|
|
font-size: 12px;
|
|
}
|
|
.log-entry {
|
|
padding: 5px;
|
|
margin: 2px 0;
|
|
border-radius: 3px;
|
|
}
|
|
.log-info {
|
|
background-color: #e7f4ff;
|
|
}
|
|
.log-success {
|
|
background-color: #d4edda;
|
|
}
|
|
.log-error {
|
|
background-color: #f8d7da;
|
|
color: #721c24;
|
|
}
|
|
.log-data {
|
|
background-color: #fff3cd;
|
|
}
|
|
.transcript {
|
|
padding: 15px;
|
|
background-color: #f0f8ff;
|
|
border-left: 4px solid #2196F3;
|
|
margin: 10px 0;
|
|
border-radius: 4px;
|
|
}
|
|
.transcript-text {
|
|
font-size: 16px;
|
|
color: #333;
|
|
margin-bottom: 5px;
|
|
}
|
|
.transcript-meta {
|
|
font-size: 12px;
|
|
color: #666;
|
|
}
|
|
input {
|
|
padding: 8px;
|
|
border: 1px solid #ddd;
|
|
border-radius: 4px;
|
|
font-size: 14px;
|
|
}
|
|
.stats {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
gap: 10px;
|
|
margin-top: 10px;
|
|
}
|
|
.stat-box {
|
|
background-color: #f9f9f9;
|
|
padding: 10px;
|
|
border-radius: 4px;
|
|
text-align: center;
|
|
}
|
|
.stat-label {
|
|
font-size: 12px;
|
|
color: #666;
|
|
}
|
|
.stat-value {
|
|
font-size: 24px;
|
|
font-weight: bold;
|
|
color: #333;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>🎤 STT WebSocket 테스트 도구</h1>
|
|
|
|
<div class="container">
|
|
<h2>연결 설정</h2>
|
|
<div class="controls">
|
|
<input type="text" id="wsUrl" value="ws://localhost:8084/ws/audio" placeholder="WebSocket URL" style="width: 300px;">
|
|
<input type="text" id="meetingId" value="test-mtg-001" placeholder="Meeting ID" style="width: 200px;">
|
|
<button class="btn-connect" id="connectBtn" onclick="connect()">연결</button>
|
|
<button class="btn-disconnect" id="disconnectBtn" onclick="disconnect()" disabled>연결 해제</button>
|
|
</div>
|
|
<div id="status" class="status status-disconnected">연결 안 됨</div>
|
|
</div>
|
|
|
|
<div class="container">
|
|
<h2>녹음 제어</h2>
|
|
<div class="controls">
|
|
<button class="btn-record" id="recordBtn" onclick="startRecording()" disabled>녹음 시작</button>
|
|
<button class="btn-stop" id="stopBtn" onclick="stopRecording()" disabled>녹음 중지</button>
|
|
<button class="btn-clear" onclick="clearLogs()">로그 지우기</button>
|
|
</div>
|
|
<div class="stats">
|
|
<div class="stat-box">
|
|
<div class="stat-label">전송된 청크</div>
|
|
<div class="stat-value" id="chunkCount">0</div>
|
|
</div>
|
|
<div class="stat-box">
|
|
<div class="stat-label">전송 데이터</div>
|
|
<div class="stat-value" id="dataSize">0 KB</div>
|
|
</div>
|
|
<div class="stat-box">
|
|
<div class="stat-label">녹음 시간</div>
|
|
<div class="stat-value" id="recordTime">0초</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container">
|
|
<h2>STT 결과</h2>
|
|
<div id="transcripts"></div>
|
|
</div>
|
|
|
|
<div class="container">
|
|
<h2>통신 로그</h2>
|
|
<div class="log-container" id="logContainer"></div>
|
|
</div>
|
|
|
|
<script>
|
|
let ws = null;
|
|
let mediaRecorder = null;
|
|
let audioStream = null;
|
|
let chunkCounter = 0;
|
|
let totalDataSize = 0;
|
|
let recordStartTime = null;
|
|
let recordTimer = null;
|
|
|
|
function addLog(message, type = 'info') {
|
|
const logContainer = document.getElementById('logContainer');
|
|
const timestamp = new Date().toLocaleTimeString('ko-KR', { hour12: false });
|
|
const logEntry = document.createElement('div');
|
|
logEntry.className = `log-entry log-${type}`;
|
|
logEntry.textContent = `[${timestamp}] ${message}`;
|
|
logContainer.appendChild(logEntry);
|
|
logContainer.scrollTop = logContainer.scrollHeight;
|
|
}
|
|
|
|
function updateStatus(message, isConnected, isRecording = false) {
|
|
const statusEl = document.getElementById('status');
|
|
statusEl.textContent = message;
|
|
statusEl.className = 'status ' +
|
|
(isRecording ? 'status-recording' : (isConnected ? 'status-connected' : 'status-disconnected'));
|
|
}
|
|
|
|
function updateStats() {
|
|
if (recordStartTime) {
|
|
const elapsed = Math.floor((Date.now() - recordStartTime) / 1000);
|
|
document.getElementById('recordTime').textContent = `${elapsed}초`;
|
|
}
|
|
}
|
|
|
|
function connect() {
|
|
const wsUrl = document.getElementById('wsUrl').value;
|
|
const meetingId = document.getElementById('meetingId').value;
|
|
|
|
addLog(`WebSocket 연결 시도: ${wsUrl}`, 'info');
|
|
|
|
ws = new WebSocket(wsUrl);
|
|
|
|
ws.onopen = () => {
|
|
addLog('WebSocket 연결 성공!', 'success');
|
|
updateStatus('연결됨', true);
|
|
|
|
// 녹음 시작 메시지 전송
|
|
const startMsg = {
|
|
type: 'start',
|
|
meetingId: meetingId
|
|
};
|
|
ws.send(JSON.stringify(startMsg));
|
|
addLog(`START 메시지 전송: ${JSON.stringify(startMsg)}`, 'data');
|
|
|
|
document.getElementById('connectBtn').disabled = true;
|
|
document.getElementById('disconnectBtn').disabled = false;
|
|
document.getElementById('recordBtn').disabled = false;
|
|
};
|
|
|
|
ws.onmessage = (event) => {
|
|
try {
|
|
const data = JSON.parse(event.data);
|
|
addLog(`메시지 수신: ${JSON.stringify(data)}`, 'success');
|
|
|
|
if (data.transcript) {
|
|
// STT 결과 표시
|
|
const transcriptsEl = document.getElementById('transcripts');
|
|
const transcriptDiv = document.createElement('div');
|
|
transcriptDiv.className = 'transcript';
|
|
transcriptDiv.innerHTML = `
|
|
<div class="transcript-text">${data.transcript}</div>
|
|
<div class="transcript-meta">
|
|
신뢰도: ${(data.confidence * 100).toFixed(1)}% |
|
|
화자: ${data.speaker} |
|
|
시간: ${new Date(data.timestamp).toLocaleTimeString('ko-KR')}
|
|
</div>
|
|
`;
|
|
transcriptsEl.insertBefore(transcriptDiv, transcriptsEl.firstChild);
|
|
}
|
|
} catch (e) {
|
|
addLog(`메시지 파싱 오류: ${e.message}`, 'error');
|
|
}
|
|
};
|
|
|
|
ws.onerror = (error) => {
|
|
addLog(`WebSocket 오류: ${error}`, 'error');
|
|
};
|
|
|
|
ws.onclose = () => {
|
|
addLog('WebSocket 연결 종료', 'info');
|
|
updateStatus('연결 안 됨', false);
|
|
document.getElementById('connectBtn').disabled = false;
|
|
document.getElementById('disconnectBtn').disabled = true;
|
|
document.getElementById('recordBtn').disabled = true;
|
|
document.getElementById('stopBtn').disabled = true;
|
|
};
|
|
}
|
|
|
|
function disconnect() {
|
|
if (ws) {
|
|
const stopMsg = { type: 'stop' };
|
|
ws.send(JSON.stringify(stopMsg));
|
|
addLog(`STOP 메시지 전송: ${JSON.stringify(stopMsg)}`, 'data');
|
|
ws.close();
|
|
ws = null;
|
|
}
|
|
if (mediaRecorder && mediaRecorder.state === 'recording') {
|
|
stopRecording();
|
|
}
|
|
}
|
|
|
|
async function startRecording() {
|
|
try {
|
|
audioStream = await navigator.mediaDevices.getUserMedia({
|
|
audio: {
|
|
channelCount: 1,
|
|
sampleRate: 16000,
|
|
echoCancellation: true,
|
|
noiseSuppression: true
|
|
}
|
|
});
|
|
|
|
addLog('마이크 접근 허용됨', 'success');
|
|
|
|
mediaRecorder = new MediaRecorder(audioStream, {
|
|
mimeType: 'audio/webm;codecs=opus',
|
|
audioBitsPerSecond: 16000
|
|
});
|
|
|
|
chunkCounter = 0;
|
|
totalDataSize = 0;
|
|
recordStartTime = Date.now();
|
|
recordTimer = setInterval(updateStats, 1000);
|
|
|
|
mediaRecorder.ondataavailable = (event) => {
|
|
if (event.data.size > 0 && ws && ws.readyState === WebSocket.OPEN) {
|
|
const reader = new FileReader();
|
|
reader.readAsDataURL(event.data);
|
|
reader.onloadend = () => {
|
|
const base64Audio = reader.result.split(',')[1];
|
|
const meetingId = document.getElementById('meetingId').value;
|
|
|
|
const chunkMsg = {
|
|
type: 'chunk',
|
|
meetingId: meetingId,
|
|
audioData: base64Audio,
|
|
timestamp: Date.now(),
|
|
chunkIndex: chunkCounter++,
|
|
format: 'audio/webm',
|
|
sampleRate: 16000
|
|
};
|
|
|
|
ws.send(JSON.stringify(chunkMsg));
|
|
|
|
totalDataSize += event.data.size;
|
|
document.getElementById('chunkCount').textContent = chunkCounter;
|
|
document.getElementById('dataSize').textContent = (totalDataSize / 1024).toFixed(2) + ' KB';
|
|
|
|
addLog(`청크 #${chunkCounter} 전송: ${(event.data.size / 1024).toFixed(2)} KB`, 'data');
|
|
};
|
|
}
|
|
};
|
|
|
|
mediaRecorder.start(1000); // 1초마다 청크 전송
|
|
addLog('녹음 시작 (1초 간격)', 'success');
|
|
updateStatus('녹음 중', true, true);
|
|
|
|
document.getElementById('recordBtn').disabled = true;
|
|
document.getElementById('stopBtn').disabled = false;
|
|
|
|
} catch (error) {
|
|
addLog(`마이크 접근 실패: ${error.message}`, 'error');
|
|
}
|
|
}
|
|
|
|
function stopRecording() {
|
|
if (mediaRecorder && mediaRecorder.state === 'recording') {
|
|
mediaRecorder.stop();
|
|
mediaRecorder = null;
|
|
addLog('녹음 중지', 'info');
|
|
}
|
|
|
|
if (audioStream) {
|
|
audioStream.getTracks().forEach(track => track.stop());
|
|
audioStream = null;
|
|
}
|
|
|
|
if (recordTimer) {
|
|
clearInterval(recordTimer);
|
|
recordTimer = null;
|
|
}
|
|
|
|
updateStatus('연결됨', true, false);
|
|
document.getElementById('recordBtn').disabled = false;
|
|
document.getElementById('stopBtn').disabled = true;
|
|
}
|
|
|
|
function clearLogs() {
|
|
document.getElementById('logContainer').innerHTML = '';
|
|
document.getElementById('transcripts').innerHTML = '';
|
|
chunkCounter = 0;
|
|
totalDataSize = 0;
|
|
recordStartTime = null;
|
|
document.getElementById('chunkCount').textContent = '0';
|
|
document.getElementById('dataSize').textContent = '0 KB';
|
|
document.getElementById('recordTime').textContent = '0초';
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|