Chromecast Library for the Browser

Chromecast Library for the browser

@jdion/cast is a lightweight and intuitive API designed to simplify communication with Chromecast devices directly from your web browser.

Sintel (2010)

Third Open Movie by Blender Foundation

Animation

Short

Fantasy

00:00:0000:00:00

npm i @jdion/cast

Examples (opens in a new tab) · GitHub Repository (opens in a new tab)

Getting Started

To initiate a cast session, simply call the startCast method from the player object of the Cast class instance:

import { Cast } from "@jdion/cast"
 
(async () => {
  const { player } = new Cast()
 
  await player.startCast('https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4')
})()

React

React hooks for @jdion/cast. This library adds some convenience methods when working with React & makes it a little easier to passing around the cast instance.

npm i @jdion/cast @jdion/cast-react

Initiating

Create a Cast instance from @jdion/cast

import { Cast } from "@jdion/cast"
 
const cast = = new Cast()

Adding the Cast Provider

Import the CastProvider component from the @jdion/cast-react package. Pass your initialized Cast instance to the instance prop of CastProvider.

import { CastProvider } from "@jdion/cast-react"
 
const cast = = new Cast()
 
const App = () => {
  <CastProvider instance={cast}>
    {children}
  </CastProvider>
}

Initiating Casting

Import the useCast hook from the @jdion/cast-react package:

import { useCast } from "@jdion/cast-react"
 
const MyComponent = () => {
  const { player } = useCast()
 
  return null;
}

Start Casting

To start casting, use the startCast method from the player object:

import { useCast } from "@jdion/cast-react"
 
const MyComponent = () => {
  const { player } = useCast()
 
  const startCast = async () => {
    await player.startCast('https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4')
  }
 
 return (
   <button onClick={startCast}>Cast</button>
 )
}

Done 🎉

You should now have the capability to cast your media. For more complex use cases, please explore the examples (opens in a new tab) folder. If you're interested in enhancing the documentation, feel free to contribute.