Google Cast

Vindral 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://embed.vindral.com?channelId=vindral_demo1_ci_099ee1fa-80f3-455e-aa23-3d184e93e04f"
  frameborder="0"
  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"

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"

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, CastSender } from "@vindrl/web-sdk"

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"

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.