Skip to content

Instantly share code, notes, and snippets.

@guerrerocarlos

guerrerocarlos/chromecast_with_subtitles.html

Created January 21, 2017 12:45
Show Gist options
  • Save guerrerocarlos/3aca64069853d8d24a83b481246f23ca to your computer and use it in GitHub Desktop.
Save guerrerocarlos/3aca64069853d8d24a83b481246f23ca to your computer and use it in GitHub Desktop.
Download ZIP
The chromecast documentation for Chrome is terrible, so to save other's some time, here is the straigt-forward way to stream something quickly and with subtitles
Raw
chromecast_with_subtitles.html
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript" src="https://www.gstatic.com/cv/js/sender/v1/cast_sender.js"></script>
</head>
<body>
Hello World</br>
<a onclick="castNow()" href="#">Cast!</a></br>
<a onclick="loadNow()" href="#">LOAD!</a>
<!--<script src="/assets/js/cast.js"></script>-->
<script>
var cast = {}
var castNow = function() {
console.log('casting!')
var sessionRequest = new chrome.cast.SessionRequest(chrome.cast.media.DEFAULT_MEDIA_RECEIVER_APP_ID);
chrome.cast.requestSession(function onRequestSessionSuccess(session) {
console.log('Session success', session)
cast.session = session
}, function onLaunchError(er) {
console.log('onLaunchError', er)
}, sessionRequest);
setTimeout(function() {
var sessionRequest = new chrome.cast.SessionRequest(chrome.cast.media.DEFAULT_MEDIA_RECEIVER_APP_ID);
chrome.cast.requestSession(function onRequestSessionSuccess(session) {
console.log('Session success', session)
cast.session = session
}, function onLaunchError(er) {
console.log('onLaunchError', er)
}, sessionRequest);
}, 1000)
}
var loadNow = function() {
var englishSubtitle = new chrome.cast.media.Track(1, // track ID
chrome.cast.media.TrackType.TEXT);
englishSubtitle.trackContentId = 'https://carlosguerrero.com/captions_styled.vtt';
englishSubtitle.trackContentType = 'text/vtt';
englishSubtitle.subtype = chrome.cast.media.TextTrackType.SUBTITLES;
englishSubtitle.name = 'English Subtitles';
englishSubtitle.language = 'en-US';
englishSubtitle.customData = null;
console.log('LoadNow, session:', cast.session)
var mediaInfo = new chrome.cast.media.MediaInfo('http://commondatastorage.googleapis.com/gtv-videos-bucket/big_buck_bunny_1080p.mp4', 'video/mp4');
mediaInfo.tracks = [englishSubtitle]
mediaInfo.activeTrackIds = [1]
request = new chrome.cast.media.LoadRequest(mediaInfo);
cast.session.loadMedia(request,
onMediaDiscovered.bind(this, 'loadMedia'),
function(er) {
console.log('onMediaError', er)
});
function onMediaDiscovered(how, media) {
console.log('got media!', media)
cast.currentMedia = media;
var activeTrackIds = [1];
var tracksInfoRequest = new chrome.cast.media.EditTracksInfoRequest(activeTrackIds);
media.editTracksInfo(tracksInfoRequest, function succCB(){console.log('success changing trackIDs!')}, function errorCallback(){
console.log('Error CB!')
});
}
}
initializeCastApi = function() {
console.log('initializing cast api')
var sessionRequest = new chrome.cast.SessionRequest(chrome.cast.media.DEFAULT_MEDIA_RECEIVER_APP_ID);
var apiConfig = new chrome.cast.ApiConfig(sessionRequest,
function(session) {
console.log('got session', session)
cast.session = session
},
function receiverListener(e) {
if (e === chrome.cast.ReceiverAvailability.AVAILABLE) {
console.log('receiver is available :)')
}
})
chrome.cast.initialize(apiConfig, function() {
console.log('got initSuccess')
},
function(gotError) {
console.log('gotError', gotError)
});
};
window.onload = function() {
window['__onGCastApiAvailable'] = function(loaded, errorInfo) {
console.log('in __onGCastApiAvailable, loaded:', loaded)
if (loaded) {
initializeCastApi()
}
};
}
</script>
</body>
@anthonylaurienti
Copy link

Hey there I had a question. So i just recently took on a project that someone else was working on and I noticed they used all the generic was to set up the sender and receiver applications. However since the release of chrome 71.0.3578.80 the application or sender application where people click to cast is no longer working. I am having the issue where the session isn't even being initialized using this:
if (!chrome.cast || !chrome.cast.isAvailable) {
setTimeout(initializeCastApi, 1000);
}

function initializeCastApi() {
var sessionRequest = new chrome.cast.SessionRequest(applicationID);
var apiConfig = new chrome.cast.ApiConfig(sessionRequest,
sessionListener,
receiverListener);
chrome.cast.initialize(apiConfig, onInitSuccess, onError);
};
The error I am getting is sessionRequest can't be initialized from unknown.
would you have any insights on why this is happening. I noticed you used a very similar method here but it just will not work with my website.

Did you ever find a solution to this? I'm running into this problem right now.

@boltgolt
Copy link

boltgolt commented Dec 6, 2019

@mulberryboy i ran into this issue as well, switching to HTTPS did the trick

@yacinbm
Copy link

yacinbm commented Oct 12, 2020

Oh my god, thank you so much! The device initialization procedure is so confusing in their documentation, especially since they pulled all of the examples from GitHub except for the default media receiver.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment