Chromecast WebVTT captions on a default receiver












0















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>












share|improve this question





























    0















    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>












    share|improve this question



























      0












      0








      0








      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>












      share|improve this question
















      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>








      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>





      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>






      javascript google-chrome chromecast subtitle webvtt






      share|improve this question















      share|improve this question













      share|improve this question




      share|improve this question








      edited Nov 27 '18 at 22:22







      bart

















      asked Nov 27 '18 at 22:12









      bartbart

      13




      13
























          1 Answer
          1






          active

          oldest

          votes


















          0














          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!






          share|improve this answer
























          • Works for a simple scenario: files from the save server; CORS headers on each source. subtitles are in a separate WebVTT stream. Doesn't do any of the very heavy lifting required to go beyond that.

            – Robin Davies
            Feb 18 at 1:37











          Your Answer






          StackExchange.ifUsing("editor", function () {
          StackExchange.using("externalEditor", function () {
          StackExchange.using("snippets", function () {
          StackExchange.snippets.init();
          });
          });
          }, "code-snippets");

          StackExchange.ready(function() {
          var channelOptions = {
          tags: "".split(" "),
          id: "1"
          };
          initTagRenderer("".split(" "), "".split(" "), channelOptions);

          StackExchange.using("externalEditor", function() {
          // Have to fire editor after snippets, if snippets enabled
          if (StackExchange.settings.snippets.snippetsEnabled) {
          StackExchange.using("snippets", function() {
          createEditor();
          });
          }
          else {
          createEditor();
          }
          });

          function createEditor() {
          StackExchange.prepareEditor({
          heartbeatType: 'answer',
          autoActivateHeartbeat: false,
          convertImagesToLinks: true,
          noModals: true,
          showLowRepImageUploadWarning: true,
          reputationToPostImages: 10,
          bindNavPrevention: true,
          postfix: "",
          imageUploader: {
          brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
          contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
          allowUrls: true
          },
          onDemand: true,
          discardSelector: ".discard-answer"
          ,immediatelyShowMarkdownHelp:true
          });


          }
          });














          draft saved

          draft discarded


















          StackExchange.ready(
          function () {
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53509026%2fchromecast-webvtt-captions-on-a-default-receiver%23new-answer', 'question_page');
          }
          );

          Post as a guest















          Required, but never shown

























          1 Answer
          1






          active

          oldest

          votes








          1 Answer
          1






          active

          oldest

          votes









          active

          oldest

          votes






          active

          oldest

          votes









          0














          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!






          share|improve this answer
























          • Works for a simple scenario: files from the save server; CORS headers on each source. subtitles are in a separate WebVTT stream. Doesn't do any of the very heavy lifting required to go beyond that.

            – Robin Davies
            Feb 18 at 1:37
















          0














          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!






          share|improve this answer
























          • Works for a simple scenario: files from the save server; CORS headers on each source. subtitles are in a separate WebVTT stream. Doesn't do any of the very heavy lifting required to go beyond that.

            – Robin Davies
            Feb 18 at 1:37














          0












          0








          0







          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!






          share|improve this answer













          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!







          share|improve this answer












          share|improve this answer



          share|improve this answer










          answered Feb 5 at 14:08









          bartbart

          13




          13













          • Works for a simple scenario: files from the save server; CORS headers on each source. subtitles are in a separate WebVTT stream. Doesn't do any of the very heavy lifting required to go beyond that.

            – Robin Davies
            Feb 18 at 1:37



















          • Works for a simple scenario: files from the save server; CORS headers on each source. subtitles are in a separate WebVTT stream. Doesn't do any of the very heavy lifting required to go beyond that.

            – Robin Davies
            Feb 18 at 1:37

















          Works for a simple scenario: files from the save server; CORS headers on each source. subtitles are in a separate WebVTT stream. Doesn't do any of the very heavy lifting required to go beyond that.

          – Robin Davies
          Feb 18 at 1:37





          Works for a simple scenario: files from the save server; CORS headers on each source. subtitles are in a separate WebVTT stream. Doesn't do any of the very heavy lifting required to go beyond that.

          – Robin Davies
          Feb 18 at 1:37




















          draft saved

          draft discarded




















































          Thanks for contributing an answer to Stack Overflow!


          • Please be sure to answer the question. Provide details and share your research!

          But avoid



          • Asking for help, clarification, or responding to other answers.

          • Making statements based on opinion; back them up with references or personal experience.


          To learn more, see our tips on writing great answers.




          draft saved


          draft discarded














          StackExchange.ready(
          function () {
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53509026%2fchromecast-webvtt-captions-on-a-default-receiver%23new-answer', 'question_page');
          }
          );

          Post as a guest















          Required, but never shown





















































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown

































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown







          Popular posts from this blog

          A CLEAN and SIMPLE way to add appendices to Table of Contents and bookmarks

          Calculate evaluation metrics using cross_val_predict sklearn

          Insert data from modal to MySQL (multiple modal on website)