ChromeCast

JavaScript SDK

ChromeCast

Chromecast is a thumb-sized media streaming device that plugs into the HDMI port on your TV. Set it up with a simple mobile app, then send your favourite online shows, movies, music and more to your TV using your smartphone, tablet or laptop.

Image Types

• BMP
• GIF
• JPEG
• PNG
• WEBP

Video Streaming

• MP4
• WEBM
• MPEG-DASH
• SmoothStreaming
• HTTP Live Streaming (HLS)

Audio Decoding

• HE-AAC
• LC-AAC
• CELT/Opus
• MP3
• Vorbis

Application Types

Sender Applications

• Android
• iOS
• Chrome

Receiver Applications

• Default
• Styled Media Receiver
• Custom Media Receiver

Chrome Sender Apps

• Install the Chrome browser
• Install the ChromeCast extension

Add Cast Sender Script

<script type="text/javascript"
    src="https://www.gstatic.com/cv/js/sender/v1/cast_sender.js"></script>

Call API Initialization

window['__onGCastApiAvailable'] = function(loaded, errorInfo) {
  if (loaded) {
    initializeCastApi();
  } else {
    console.log(errorInfo);
  }
}

Initialize the API

initializeCastApi = function() {
  var sessionRequest = new chrome.cast.SessionRequest(
    chrome.cast.media.DEFAULT_MEDIA_RECEIVER_APP_ID);
  var apiConfig = new chrome.cast.ApiConfig(sessionRequest,
    sessionListener,
    receiverListener);
  chrome.cast.initialize(apiConfig, onInitSuccess, onError);
};

Device Selection

receiverListener = function (e) {
  if( e === chrome.cast.ReceiverAvailability.AVAILABLE) {
    console.log("Woohoo!");
  } else {
    console.log("Doh!");
  }
}

Start App and Save Session

startApp = function () {
  console.log("starting app...");
  chrome.cast.requestSession(onRequestSessionSuccess, onLaunchError);
}

onRequestSessionSuccess = function (e) {
      session = e;
}

Load Media

var mediaInfo = new chrome.cast.media.MediaInfo(currentMediaURL);
var request = new chrome.cast.media.LoadRequest(mediaInfo);
session.loadMedia(request,
   onMediaDiscovered.bind(this, 'loadMedia'),
   onMediaError);

function onMediaDiscovered(how, media) {
   currentMedia = media;
}

Media Playback

• PLAY/RESUME: currentMedia.play(null, success, error);
• PAUSE: currentMedia.pause(null, success, error);
• STOP: currentMedia.stop(null, success, error);
• SEEK: currentMedia.seek(null, success, error);

Stop App

stopApp = function () {
  session.stop(onSuccess, onError);
}

Demo

Receiver Applications

Part 2 Coming Soon!

THE END

by Simon MacDonald / simonmacdonald.com