Javascript library (<10kb) for the complex chromecast SDK
Castjs provides simple events and functions to communicate with chromecast devices from the browser.
This library works in chrome, opera, brave, firefox and vivaldi, see it in action and check out the online demo.
Do you want to support my work, feel free to donate a ☕ Hot Beverage
# Getting Started
Include the `cast.min.js` from [cdnjs](https://cdnjs.com/libraries/castjs):
```html
```
# Casting Media
Casting a media source to your chromecast device. Make sure you enable [CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS) `Header set Access-Control-Allow-Origin "*"` on your media resources.
```html
```
# Supported Browsers
Almost any [Chromium]() based browser supports cast framework out of the box.
Vivaldi Brave
# API Documentation:
```javascript
// Default instance
const cjs = new Castjs();
// Custom receiver or joinpolicy
const cjs = new Castjs({
receiver : 'CC1AD845', // default
joinpolicy: 'tab_and_origin_scoped', // default
// joinpolicy: 'custom_controller_scoped',
// joinpolicy: 'origin_scoped',
// joinpolicy: 'page_scoped',
});
// Castjs Events
cjs.on('available', () => {}); // Casting is available
cjs.on('connect', () => {}); // Connected with device
cjs.on('disconnect', () => {}); // Disconnected with device
cjs.on('statechange', () => {}); // Device state
cjs.on('timeupdate', () => {}); // Current time changed
cjs.on('volumechange', () => {}); // Volume changed
cjs.on('mute', () => {}); // Muted state changed
cjs.on('unmute', () => {}); // Muted state changed
cjs.on('playing', () => {}); // Media is playing
cjs.on('pause', () => {}); // Media is paused
cjs.on('end', () => {}); // Media ended
cjs.on('buffering', () => {}); // Media is buffering / seeking
cjs.on('event', (e) => {}); // Catch all events except 'error'
cjs.on('error', (e) => {}); // Catch any errors
// Castjs functions
cjs.cast(source, [metadata]); // Create session with media
cjs.volume(0.7); // Change volume
cjs.play(); // Play media
cjs.pause(); // Pause media
cjs.mute(); // Mutes media
cjs.unmute(); // Unmutes media
cjs.subtitle(2); // Change active subtitle index
cjs.seek(15); // Seek 15 seconds
cjs.seek(15.9, true); // Seek 15.9% percentage
cjs.disconnect(); // Disconnect session
// Castjs properties
cjs.version // Castjs Version
cjs.receiver // Receiver ID
cjs.available // Casting is available
cjs.connected // Connected with cast device
cjs.device // Cast device name
cjs.src // Media source
cjs.title // Media title
cjs.description // Media description
cjs.poster // Media poster image
cjs.subtitles // Media subtitles
cjs.volumeLevel // Volume level
cjs.muted // If muted
cjs.paused // If paused
cjs.time // Time in seconds
cjs.timePretty // Time formatted in time hh:mm:ss
cjs.duration // Duration in seconds
cjs.durationPretty // Duration formatted in hh:mm:ss
cjs.progress // Progress in percentage 0 - 100
cjs.state // State of cast device
```
# FAQ
**Question:** Can I cast local resources?
**Answer:** It was possible in the past from the browser by using service workers. But we had to remove it from our library because Google dropped support, see https://github.com/fenny/chromecast-service-worker-crash
**Question:** Do I need to enable CORS for all hosts?
**Answer:** Yes and no. Chromecast is using an User-Agent that contains the word `CrKey` -> `Mozilla/5.0 (X11; Linux armv7l) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4430.225 Safari/537.36 CrKey/1.56.500000 DeviceType/Chromecast` so you could allow agents containing `CrKey` or `Chromecast` but this is not officialy documented.
# TODO
```
- Add local media and stream support after google fixes service worker crash
- Add name space messaging support for custom receivers
- Maybe add video element support: new Castjs($('#video'))
// Suggestions? Let me know!
```
Do you want to support my work, feel free to donate a ☕ Hot Beverage