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>
javascript google-chrome chromecast subtitle webvtt
add a comment |
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>
javascript google-chrome chromecast subtitle webvtt
add a comment |
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>
javascript google-chrome chromecast subtitle webvtt
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
javascript google-chrome chromecast subtitle webvtt
edited Nov 27 '18 at 22:22
bart
asked Nov 27 '18 at 22:12
bartbart
13
13
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
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!
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
add a comment |
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
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
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!
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
add a comment |
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!
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
add a comment |
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!
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!
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
add a comment |
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
add a comment |
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.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
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