Skip to main content

Google Cast

Vindral Web SDK supports Google Cast (a.k.a. Chromecast) devices, making it easy to build globally scalable, in-sync, second-screen experiences.

There are several ways Vindral Cast can be initiated, the most straightforward being via our hosted Embed Player or the Player SDK. A stand-alone version of the Vindral Cast Sender is also available.

Examples​

Example using embed player​

Embed player enables the Cast button by default. It will be visible if the browser has support.

<iframe
  src="https://player.vindral.com?core.channelId=vindral_demo1_ci_099ee1fa-80f3-455e-aa23-3d184e93e04f"
  frameborder="0"
  allow="autoplay; fullscreen"
  allowfullscreen
></iframe>

Example using Vindral Player SDK​

The bundled Player enables the Cast button by default. It will be visible if the browser has support.

import { Player } from "@vindral/web-sdk/legacy"

const root = document.querySelector("#root")

const player = new Player({
  url: "https://lb.cdn.vindral.com",
  channelId: "vindral_demo1_ci_099ee1fa-80f3-455e-aa23-3d184e93e04f",
})

// listeners should be attached to both core and castSender
player.core.on("metadata", (meta) => console.log("metadata", meta))
player.core.on("server wallclock time", (wallclockTime) => console.log("server wallclock time", wallclockTime))
player.castSender.on("metadata", (meta) => console.log("metadata", meta))
player.castSender.on("server wallclock time", (wallclockTime) => console.log("server wallclock time", wallclockTime))

// Listeners for fail/resume/connected/disconnected are handled by Player.
// For a more custom setup, use the stand-alone version

// Will connect, start the stream and try to play
player.core.play()

// Attaches the player view to the DOM
player.attach(root)
// you'll see the button in the controls pane of the player if there's support

Example using stand-alone Cast SDK​

import { CastSender } from "@vindral/web-sdk/cast-sender"

const castSender = new CastSender({
  // Vindral options here
  options: {
    url: "https://lb.cdn.vindral.com",
    channelId: "vindral_demo1_ci_099ee1fa-80f3-455e-aa23-3d184e93e04f",
  },
})
castSender.on("connected", () => console.log("connected"))
castSender.on("resumed", () => console.log("resumed"))
castSender.on("disconnected", () => console.log("disconnected"))
castSender.on("failed", () => console.log("failed"))
castSender.on("metadata", (meta) => console.log("metadata", meta))
castSender.on("server wallclock time", (wallclockTime) => console.log("server wallclock time", wallclockTime))
castSender
  .init()
  .then(() => {
    // either create the cast button, that will trigger the native/browser cast receiver picker dialogue
    const castButton = document.createElement("google-cast-launcher")
    document.body.appendChild(castButton)
    // or call start manually, it will also open the dialogue
    castSender.start()
  })
  .catch((err) => {
    // not able to init cast
  })

// when volume should be set
// castSender.volume = 0.5

// when active channel should be switched, just as with regular Vindral instance
// channelGroupId is needed for channelId to be switched (channels can only be switched within a group)
// castSender.channelId = "demo2"

// when sender/session should be closed
// castSender.unload()

Example using Cast SDK together with Vindral Core​

import { Vindral } from "@vindral/web-sdk"
import { CastSender } from "@vindral/web-sdk/cast-sender"

const options = {
  url: "https://lb.cdn.vindral.com",
  channelId: "vindral_demo1_ci_099ee1fa-80f3-455e-aa23-3d184e93e04f",
}
let instance
const createVindralInstance = () => {
  instance = new Vindral(options)
  // setup, add listeners, connect
  // ...
}
const stopVindralInstance = () => {
  if (instance) {
    instance.unload()
  }
  instance = undefined
}

const castSender = new CastSender(options)
castSender.on("connected", () => stopVindralInstance())
castSender.on("resumed", () => stopVindralInstance())
castSender.on("disconnected", () => createVindralInstance())
// create button or connect manually

Example using JWT authentication​

import { CastSender } from "@vindral/web-sdk/cast-sender"

const castSender = new CastSender({
  authenticationToken: "initial token",
  url: "https://lb.cdn.vindral.com",
  channelId: "vindral_demo1_ci_099ee1fa-80f3-455e-aa23-3d184e93e04f",
})

// ... set listeners and init

// whenever necessary, update authToken
setTimeout(() => {
  castSender.updateAuthenticationToken("new token")
}, 60000)

Custom Cast Receiver​

It is possible to build a custom Cast Receiver as well. This is out of scope for this guide. Read more about custom web receiver and cast web sender.

Browser support​

For more information about which platforms Google Cast web sender is available on, see this site.

As of writing:

The Web Sender SDK is supported on Cast-supported web browsers on Mac, Windows, Linux, ChromeOS, and Android devices.

Note: The iOS Chrome browser does not support Casting.