Castjs provides simple events and functions to communicate with chromecast devices from the browser.
This library works in chrome, opera, brave and vivaldi, see it in action and check out the online demo.
Include the cast.min.js from cdnjs:
<script src="https://cdnjs.cloudflare.com/ajax/libs/castjs/4.1.2/cast.min.js"></script>Casting a media source to your chromecast device.
<button id="cast">Cast</button>
<script src="https://castjs.io/cast.min.js"></script>
<script>
// Create new Castjs instance
const cjs = new Castjs();
// Wait for user interaction
document.getElementById('cast').addEventListener('click', function() {
// Check if casting is available
if (cjs.available) {
// Initiate new cast session
cjs.cast('https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/Sintel.mp4');
}
});
</script>Almost any Chromium based browser supports cast framework out of the box.
Vivaldi
// Default instance
const cc = new Castjs();
// Custom receiver or joinpolicy
const cc = 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- 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