Broadcast Viewer SSE

// Receive all languages
const eventSource = new EventSource(
  'https://vas-poc.vurbo.ai/broadcast/a3f9/text'
);

// Receive only English translations
const eventSource = new EventSource(
  'https://vas-poc.vurbo.ai/broadcast/a3f9/text?lang=en-US'
);

// Receive English translations and enable TTS
const eventSource = new EventSource(
  'https://vas-poc.vurbo.ai/broadcast/a3f9/text?lang=en-US&tts=true'
);

// Password-protected broadcast
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": "Hello everyone",
  "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": "Kicked by host"
}

{
  "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": "Manager Wang",
  "affected_sids": [3, 5, 7]
}

{
  "max_viewers": 200
}

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

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

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

{
  "error_code": "broadcast_session_ended",
  "message": "Broadcast session ended",
  "severity": "error"
}

{
  "error_code": "llm_content_filtered",
  "severity": "warning",
  "message": "Content filtered",
  "context": "translation",
  "sid": 5,
  "translation_language": "ja-JP",
  "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": "llm_service",
    "last_error_code": "llm_provider_error",
    "fail_count": 5
  }
}

{
  "message": "主辦暫時離線，重連中"
}

{
  "message": "主辦已重新連線",
  "resumed": true
}

: 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(`Phase: ${data.phase}, Mode: ${data.recognition_mode}`);
    console.log(`Available translations: ${data.available_langs.join(', ')}`);
  });

  eventSource.addEventListener('queued', (e) => {
    const data = JSON.parse(e.data);
    console.log(`In queue, position: ${data.position}, estimated wait: ${data.estimated_wait}`);
  });

  eventSource.addEventListener('admitted', (e) => {
    console.log('Entered the live stream');
  });

  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(`Translation (${data.language}): ${data.text}`);
  });

  eventSource.addEventListener('tts_ready', (e) => {
    const data = JSON.parse(e.data);
    // Decode the Base64 MP3 and play it
    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(`Live stream paused: ${data.message}`);
  });

  eventSource.addEventListener('resumed', (e) => {
    console.log('Live stream has resumed');
  });

  eventSource.addEventListener('ended', (e) => {
    const data = JSON.parse(e.data);
    console.log(`Live stream ended: ${data.message}`);
    eventSource.close();
  });

  eventSource.addEventListener('kicked', (e) => {
    const data = JSON.parse(e.data);
    console.log(`Left the live stream: ${data.message}`);
    eventSource.close();
    // Access-type and passcode changes also land here; guide the user to re-verify before reconnecting
  });

  eventSource.addEventListener('speaker_renamed', (e) => {
    const data = JSON.parse(e.data);
    console.log(`Speaker renamed: ${data.speaker_id} → ${data.new_label}`);
    // Update the display labels of all affected sentences
  });

  eventSource.addEventListener('speaker_reassigned', (e) => {
    const data = JSON.parse(e.data);
    console.log(`Speaker of sentence ${data.sid} changed to: ${data.new_speaker_label}`);
    // Update the display label of that sentence
  });

  eventSource.addEventListener('speakers_merged', (e) => {
    const data = JSON.parse(e.data);
    console.log(`Speakers merged: ${data.source_speaker_id} → ${data.target_speaker_label}`);
    // Update the display labels of all affected sentences
  });

  eventSource.addEventListener('recording_started', () => {
    console.log('New recording started, clearing old subtitles');
    // Clear the old subtitles on screen
  });

  eventSource.addEventListener('max_viewers_changed', (e) => {
    const data = JSON.parse(e.data);
    console.log(`Viewer limit changed to: ${data.max_viewers}`);
  });

  eventSource.addEventListener('host_disconnected', (e) => {
    const data = JSON.parse(e.data);
    console.log(`Host offline: ${data.message}`);
    // Show a "host is reconnecting" notice; do not close the connection
  });

  eventSource.addEventListener('host_reconnected', (e) => {
    const data = JSON.parse(e.data);
    console.log(`Host is back: ${data.message} (playback resumed: ${data.resumed})`);
  });

  eventSource.addEventListener('standby', (e) => {
    const data = JSON.parse(e.data);
    const displayLang = 'en-US'; // The language selected by the viewer
    const displayMessage = data.translations?.[displayLang] || data.message;
    console.log(`Standby phase: ${displayMessage}`);
  });

  eventSource.addEventListener('phase_changed', (e) => {
    const data = JSON.parse(e.data);
    console.log(`Phase change: ${data.phase} - ${data.message}`);
    // Remove the waiting screen and start displaying subtitles
  });

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

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

  return eventSource;
}

// Base64-to-Blob utility function
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 });
}