Broadcast Viewer

// 接收所有語言
const eventSource = new EventSource(
  'https://vas-poc.vurbo.ai/broadcast/a3f9/text'
);

// 只接收英文翻譯
const eventSource = new EventSource(
  'https://vas-poc.vurbo.ai/broadcast/a3f9/text?lang=en-US'
);

// 接收英文翻譯並啟用 TTS
const eventSource = new EventSource(
  'https://vas-poc.vurbo.ai/broadcast/a3f9/text?lang=en-US&tts=true'
);

// 密碼保護廣播
const eventSource = new EventSource(
  'https://vas-poc.vurbo.ai/broadcast/a3f9/text?viewer_access_token=xxx'
);

{
  "available_langs": ["en-US", "ja-JP"],
  "tts_languages": ["en-US"],
  "phase": "standby",
  "recognition_mode": "single"
}

{
  "position": 3,
  "estimated_wait": "約 2 分鐘"
}

{
  "message": "已進入直播"
}

{
  "sid": 1,
  "text": "大家好",
  "is_final": true,
  "language": "zh-TW",
  "speaker_id": "Guest-1",
  "speaker_label": "Royx",
  "start_time": "00:05"
}

{
  "sid": 1,
  "language": "en-US",
  "text": "Hello everyone",
  "speaker_id": "Guest-1",
  "speaker_label": "Royx",
  "is_final": true
}

{
  "sid": 1,
  "language": "en-US",
  "transcript": "你好",
  "text": "Hello",
  "audio": "base64...",
  "format": "mp3",
  "duration_ms": 2340,
  "boundaries": [
    {
      "offset_ms": 0,
      "duration_ms": 320,
      "text": "Hello",
      "text_offset": 0,
      "word_length": 5
    }
  ]
}

{
  "message": "直播暫停中"
}

{
  "message": "直播已恢復"
}

{
  "message": "廣播已結束"
}

{
  "message": "已被主講者移除"
}

{
  "speaker_id": "Guest-1",
  "new_label": "Royx",
  "affected_sids": [1, 3, 5]
}

{
  "sid": 3,
  "old_speaker_id": "Guest-1",
  "new_speaker_id": "Guest-2",
  "new_speaker_label": "Amy"
}

{
  "source_speaker_id": "Guest-2",
  "target_speaker_id": "Guest-1",
  "target_speaker_label": "王經理",
  "affected_sids": [3, 5, 7]
}

{
  "max_viewers": 200
}

{
  "message": "演講即將開始...",
  "translations": {
    "en-US": "The presentation is about to begin...",
    "ja-JP": "プレゼンテーションがまもなく始まります..."
  }
}

{
  "phase": "live",
  "message": "廣播已開始"
}

{
  "message": "會議5分鐘後結束",
  "translations": {
    "en-US": "The meeting will end in 5 minutes",
    "ja-JP": "会議は5分後に終了します"
  }
}

{
  "error_code": "broadcast_session_ended",
  "message": "廣播已結束",
  "severity": "error"
}

{
  "error_code": "llm_content_filtered",
  "severity": "warning",
  "message": "LLM 內容被過濾",
  "context": "translation",
  "sid": 5,
  "translation_language": "ja",
  "timestamp": "2026-04-26T10:30:45.123Z"
}

{
  "error_code": "translation_service_unavailable",
  "severity": "error",
  "message": "Translation service unavailable",
  "context": "translation",
  "timestamp": "2026-04-26T10:30:45.123Z",
  "details": {
    "provider": "azure_openai",
    "last_error_code": "llm_provider_error",
    "fail_count": 5
  }
}

: heartbeat

function connectBroadcast(token, lang = null) {
  let url = `https://vas-poc.vurbo.ai/broadcast/${token}/text`;
  if (lang) {
    url += `?lang=${lang}`;
  }

  const eventSource = new EventSource(url);

  eventSource.addEventListener('connected', (e) => {
    const data = JSON.parse(e.data);
    console.log(`階段：${data.phase}，模式：${data.recognition_mode}`);
    console.log(`可用翻譯：${data.available_langs.join(', ')}`);
  });

  eventSource.addEventListener('queued', (e) => {
    const data = JSON.parse(e.data);
    console.log(`排隊中，位置：${data.position}，預估等待：${data.estimated_wait}`);
  });

  eventSource.addEventListener('admitted', (e) => {
    console.log('已進入直播');
  });

  eventSource.addEventListener('origin', (e) => {
    const data = JSON.parse(e.data);
    console.log(`[SID ${data.sid}] ${data.text}`);
  });

  eventSource.addEventListener('translation', (e) => {
    const data = JSON.parse(e.data);
    console.log(`翻譯 (${data.language}): ${data.text}`);
  });

  eventSource.addEventListener('tts_ready', (e) => {
    const data = JSON.parse(e.data);
    // 解碼 Base64 MP3 並播放
    const audioBlob = base64ToBlob(data.audio, 'audio/mp3');
    const audioUrl = URL.createObjectURL(audioBlob);
    const audio = new Audio(audioUrl);
    audio.play();
  });

  eventSource.addEventListener('paused', (e) => {
    const data = JSON.parse(e.data);
    console.log(`直播暫停：${data.message}`);
  });

  eventSource.addEventListener('resumed', (e) => {
    console.log('直播已恢復');
  });

  eventSource.addEventListener('ended', (e) => {
    const data = JSON.parse(e.data);
    console.log(`直播結束：${data.message}`);
    eventSource.close();
  });

  eventSource.addEventListener('kicked', (e) => {
    console.log('您已被移除');
    eventSource.close();
  });

  eventSource.addEventListener('speaker_renamed', (e) => {
    const data = JSON.parse(e.data);
    console.log(`說話者重命名：${data.speaker_id} → ${data.new_label}`);
    // 更新所有受影響句子的顯示標籤
  });

  eventSource.addEventListener('speaker_reassigned', (e) => {
    const data = JSON.parse(e.data);
    console.log(`句子 ${data.sid} 的說話者改為：${data.new_speaker_label}`);
    // 更新該句子的顯示標籤
  });

  eventSource.addEventListener('speakers_merged', (e) => {
    const data = JSON.parse(e.data);
    console.log(`語者合併：${data.source_speaker_id} → ${data.target_speaker_label}`);
    // 更新所有受影響句子的顯示標籤
  });

  eventSource.addEventListener('recording_started', () => {
    console.log('新錄音開始，清除舊字幕');
    // 清除畫面上的舊字幕
  });

  eventSource.addEventListener('max_viewers_changed', (e) => {
    const data = JSON.parse(e.data);
    console.log(`觀眾上限變更為：${data.max_viewers}`);
  });

  eventSource.addEventListener('access_type_changed', () => {
    console.log('存取類型已變更，需重新連線');
    eventSource.close();
    // 重新連線或引導使用者重新驗證
  });

  eventSource.addEventListener('pass_code_changed', () => {
    console.log('密碼已變更，需重新驗證');
    eventSource.close();
    // 引導使用者重新輸入密碼
  });

  eventSource.addEventListener('standby', (e) => {
    const data = JSON.parse(e.data);
    const displayLang = 'en-US'; // 觀眾選擇的語言
    const displayMessage = data.translations?.[displayLang] || data.message;
    console.log(`預備階段：${displayMessage}`);
  });

  eventSource.addEventListener('phase_changed', (e) => {
    const data = JSON.parse(e.data);
    console.log(`階段變更：${data.phase} - ${data.message}`);
    // 移除等待畫面，開始顯示字幕
  });

  eventSource.addEventListener('announcement', (e) => {
    const data = JSON.parse(e.data);
    const displayLang = 'en-US';
    const displayMessage = data.translations?.[displayLang] || data.message;
    console.log(`公告：${displayMessage}`);
  });

  eventSource.addEventListener('error', (e) => {
    if (e.data) {
      const error = JSON.parse(e.data);
      console.error(`錯誤 [${error.error_code}]: ${error.message}`);
    }
    eventSource.close();
  });

  return eventSource;
}

// Base64 轉 Blob 工具函式
function base64ToBlob(base64, mimeType) {
  const byteCharacters = atob(base64);
  const byteNumbers = new Array(byteCharacters.length);
  for (let i = 0; i < byteCharacters.length; i++) {
    byteNumbers[i] = byteCharacters.charCodeAt(i);
  }
  const byteArray = new Uint8Array(byteNumbers);
  return new Blob([byteArray], { type: mimeType });
}