Overview

This guide explains how to integrate the Chromecast bridge in a web page using plain JavaScript. It covers the essentials which includes:

• Detect if Chromecast is available
• Add a “Cast Video” button dynamically if available
• Start casting a video using the native Chromecast UI

Note: This example only handles detecting the SDK and starting casting.
The native Chromecast controls handle stopping, pausing, forwarding, and other playback controls.
If you require more functionality, refer to the official documentation:
Bolt Bridge Reference – Chromecast

Implementation

1. Ensure the Bridge is available

The code assumes the native bridge is exposed as: parent.pugpigBridgeService.providerAction and parent.pugpigBridgeService.actionProviderNames 

These are used to detect Chromecast availability and send casting commands. In most cases you'll be in an environment that exposes these bridges. 

2. Minimal Chromecast JS

The below JavaScript snippet handles detecting whether the Chromecast SDK is available (using the actionProviderNames bridge) and starting video casting (using the providerAction bridge).
It dynamically adds a Cast button if supported and relies on the native Chromecast controls for stopping, pausing, or forwarding.

For more specifics on the mechanisms of how the bridge works and expected payload see our Bridge Overview.

Create a JavaScript file, e.g., chromecast.js, with the following content:

/* ------------------------------------------------------------
 * STATE
 * ----------------------------------------------------------- */
 
let isAvailable = false
let isActive = false
let initialised = false

/* ------------------------------------------------------------
 * Detect Chromecast availability
 * ----------------------------------------------------------- */
async function detectAvailability() {
  if (!parent.pugpigBridgeService?.actionProviderNames) return

  try {
    const raw = await parent.pugpigBridgeService?.actionProviderNames()
    const providers = JSON.parse(raw || '[]')
    isAvailable = providers.includes('Chromecast')
    console.log('[Chromecast] Available:', isAvailable)
  } catch (e) {
    console.warn('[Chromecast] Failed to detect providers:', e)
  }
}

/* ------------------------------------------------------------
 * Send command to the bridge
 * ----------------------------------------------------------- */
async function sendChromecastCommand(parameters, callbackName) {
  if (!parent.pugpigBridgeService?.providerAction) return null

  try {
    const response = await parent.pugpigBridgeService.providerAction(
      JSON.stringify({
        providerName: 'Chromecast',
        callbackName,
        parameters
      })
    )
    return response ? JSON.parse(response) : null
  } catch (e) {
    console.error('[Chromecast] Failed to send command:', e)
    return null
  }
}

/* ------------------------------------------------------------
 * Start casting callback
 * ----------------------------------------------------------- */
window.chromecastStartCallback = (response) => {
  try {
    const data = typeof response === 'string' ? JSON.parse(response) : response
    isActive = !!data?.success
    console.log('[Chromecast] Casting started:', isActive)
  } catch (e) {
    console.error('[Chromecast] Failed to parse start callback:', e)
  }
}

/* ------------------------------------------------------------
 * Initialise the Chromecast bridge
 * ----------------------------------------------------------- */
async function initChromecast() {
  if (initialised) return
  initialised = true
  await detectAvailability()
}

/* ------------------------------------------------------------
 * Start casting video
 * ----------------------------------------------------------- */
async function startCasting({ videoUrl, title = 'Video', summary = '' }) {
  return sendChromecastCommand({
    command: 'startcasting',
    title,
    subtitle: summary,
    contenttype: 'videos/mp4',
    url: videoUrl
  }, 'chromecastStartCallback')
}

/* ------------------------------------------------------------
 *  Setup a dynamic Cast button
 * ----------------------------------------------------------- */
async function setupCastButton({ videoUrl, title = 'Video', summary = '' }) {
  await initChromecast()

  if (!isAvailable) {
    return console.log('Chromecast not available, no button added')
  }

  const btn = document.createElement('button')
  btn.innerText = 'Cast Video'
  btn.style.cursor = 'pointer'

  btn.addEventListener('click', () => {
    startCasting({ videoUrl, title, summary })
  })

  document.body.appendChild(btn)
}

/* ------------------------------------------------------------
 * Global instance
 * ----------------------------------------------------------- */
window.ChromeCast = {
  init: initChromecast,
  startCasting,
  setupCastButton,
  get isAvailable() { return isAvailable },
  get isActive() { return isActive }
}

3. Setup cast button and initialise bridge

<script src="/your/path/chromecast.js"></script>

<script>
ChromeCast.setupCastButton({
  videoUrl: 'https://example.com/video.mp4',
  title: 'My Movie',
  summary: 'Demo cast'
})
</script>

Behaviour:

• The button is only added if Chromecast is available
• Clicking the button starts casting the video
• Native Chromecast controls handle stopping, pausing, forwarding, and volume