Search code examples
javascriptgoogle-chromechromecastsubtitlewebvtt

Chromecast WebVTT captions on a default receiver

So I am trying to setup closed captions for chromecast using the default chrome sender app, according to the docs this should be possible, as seen here. I can't figure out why my code does not work. It is almost identical to the provided sample code.
The snipper probably does not work because it's too sandboxed, see it here in a normal html page: Click!
One first should connect their chromecast using the top button, and then click on "load video".

My code: 

var suburl = 'https://cors-anywhere.herokuapp.com/brenopolanski.com/html5-video-webvtt-example/MIB2-subtitles-pt-BR.vtt';
var mediaurl = 'https://cors-anywhere.herokuapp.com/www.w3schools.com/html/mov_bbb.mp4';
var mediaInfo;
window['__onGCastApiAvailable'] = function(isAvailable) {
  if (isAvailable) {
    initializeCastApi();
  }
};
initializeCastApi = function() {
  cast.framework.CastContext.getInstance().setOptions({
    receiverApplicationId:
      chrome.cast.media.DEFAULT_MEDIA_RECEIVER_APP_ID
  });
  var englishSubtitle = new chrome.cast.media.Track(1, // track ID
  chrome.cast.media.TrackType.TEXT);
  englishSubtitle.trackContentId = suburl;
  englishSubtitle.trackContentType = 'text/vtt';
  englishSubtitle.subtype = chrome.cast.media.TextTrackType.SUBTITLES;
  englishSubtitle.name = 'English Subtitles';
  englishSubtitle.language = 'en-US';
  englishSubtitle.customData = null;

  mediaInfo = new chrome.cast.media.MediaInfo(mediaurl);
  var textTrackStyle = new chrome.cast.media.TextTrackStyle();
  textTrackStyle.foregroundColor = '#80FF0000';

  mediaInfo.contentType = 'video/mp4';
  mediaInfo.metadata = new chrome.cast.media.GenericMediaMetadata();
  mediaInfo.customData = null;
  mediaInfo.streamType = chrome.cast.media.StreamType.BUFFERED;
  mediaInfo.textTrackStyle = textTrackStyle
  mediaInfo.duration = null;
  mediaInfo.tracks = [englishSubtitle];
  mediaInfo.activeTrackIds = [1];
};

function loadVideo() {
  var castSession = cast.framework.CastContext.getInstance().getCurrentSession();
  var request = new chrome.cast.media.LoadRequest(mediaInfo);
  castSession.loadMedia(request).then(
  function() { console.log('Load succeed'); },
  function(errorCode) { console.log('Error code: ' + errorCode); });
}
.cast-button, .load-button {
  max-width: 50px;
  max-height: 50px;
}
<!DOCTYPE html>
<html>
<head>
<title>Sample chromcast</title>
</head>
<body>
<div class="cast-button">
  <google-cast-launcher></google-cast-launcher>
</div>
<button class="load-button" onclick="loadVideo()"> Load video </button>

<script src="https://www.gstatic.com/cv/js/sender/v1/cast_sender.js?loadCastFramework=1"></script>
</body>
</html>

Solution

  • After a lot of searching around I still cannot pinpoint the exact issue. I however stumbled on this amazing wrapper for the ChromeCast SDK which supports subtitles: https://github.com/Fenny/ChromecastJS/

    Including this demo: https://fenny.github.io/ChromecastJS/demo/index.html

    Hope this can help someone else!