tal
tal copied to clipboard
bbc
tal application not working in XBOX1.
I have created an application using tal framework, its perfectly working in my local machine as well as universal windows application in windows 10 machine. I have published it to windows store. When I try to open it using xbox1 it doesn't seems to work. Page is coming not navigations are not working.
Do I need to change any configuration settings ? Can someone help me to resolve this issue.
Hi Arunprasanth,
are you using the correct device config on your wrapper for xb1? https://github.com/bbc/tal/blob/master/config/devices/microsoft-xboxone-default.json
With that config there should be no problem to navigate through the app on xb1
@datLicht Thanks for your response.
Previously I was using default webkit configuration. Now I have changed it to uwp, I have tried with xboxone as well as xbox-one configurations but that gives me an error while loading application.
@datLicht Hi ,
var device_brand = antie.normaliseKeyNames(req.query.brand || "microsoft");
var device_model = antie.normaliseKeyNames(req.query.model || "xbox-one");
This is th code I am using. When ever I try to run the app using the above brand and mode it gives me the following error.
But application working fine with below configuration.
var device_brand = antie.normaliseKeyNames(req.query.brand || "microsoft");
var device_model = antie.normaliseKeyNames(req.query.model || "uwp");
It seems you are missing the error.mutache in your views folder. That is what this error message is telling. But we need to figure out why the server wants to serve this error file.
Are those xbox configs in place? If they are, is the syntax correct in there?
maybe try it with this config:
{
"pageStrategy": "uwp",
"deviceName": "XBOX One",
"modules": {
"base": "antie/devices/browserdevice",
"modifiers": [
"antie/devices/anim/css3",
"antie/devices/mediaplayer/html5",
"antie/devices/mediaplayer/live/restartable",
"antie/devices/exit/closewindow",
"antie/devices/data/nativejson",
"antie/devices/logging/onscreen",
"antie/devices/logging/xhr",
"antie/devices/logging/jstestdriver",
"antie/devices/storage/cookie"
]
},
"logging": {
"level": "none"
},
"displayQuality": "high",
"streaming": {
"video": {
"mediaURIFormat": "%href%",
"supported": [
{
"protocols": ["http"],
"encodings": ["h264"],
"transferFormat": ["hls"],
"maximumVideoLines": 1080
}
]
},
"audio": {
"mediaURIFormat": "%href%",
"supported": [
{
"protocols": ["http"],
"encodings": ["aac"],
"maximumBitRate": 192
}
]
}
},
"input": {
"map": {
"203": "UP",
"204": "DOWN",
"205": "LEFT",
"206": "RIGHT",
"207": "INFO",
"211": "UP",
"212": "DOWN",
"214": "LEFT",
"213": "RIGHT",
"195": "ENTER",
"196": "BACK",
"197": "PLAY_PAUSE",
"198": "SEARCH",
"202": "FAST_FWD",
"201": "REWIND",
"200": "PREV",
"199": "NEXT"
}
},
"accessibility": {
"captions": {
"supported": ["application/ttaf+xml"]
}
},
"layouts": [
{
"width": 1920,
"height": 1080,
"module": "%application%/appui/layouts/1080p",
"classes": ["browserdevice1080p"]
}
],
"networking": {
"supportsJSONP": true,
"supportsCORS": true
},
"capabilities": [],
"statLabels": {
"deviceType": "console",
"serviceType": "retail"
}
}
This is the config we use for xbox one, it seems the default config is even missing the input mappings. Just give it a try ;)
Hi @datLicht My xbox-one configuration looks like below
{
"pageStrategy": "html5",
"modules": {
"base": "antie/devices/browserdevice",
"modifiers": [
"antie/devices/anim/styletopleft",
"antie/devices/mediaplayer/html5untyped",
"antie/devices/mediaplayer/live/restartable",
"antie/devices/data/nativejson",
"antie/devices/logging/onscreen",
"antie/devices/logging/xhr",
"antie/devices/logging/jstestdriver",
"xboxone/devices/storage/xboxpls" ]
},
"logging": {
"level": "none"
},
"displayQuality": "high",
"streaming": {
"video": {
"mediaURIFormat": "%href%",
"supported": [
{
"protocols": [
"http"
],
"encodings": [
"h264"
],
"transferFormat": [
"hls"
],
"maximumVideoLines": 1080
}
]
},
"audio": {
"mediaURIFormat": "%href%",
"supported": [
{
"protocols": [
"http"
],
"encodings": [
"aac"
],
"maximumBitRate": 192
}
]
}
},
"input": {
"map": {}
},
"accessibility": {
"captions": {
"supported": [
"application\/ttaf+xml"
]
}
},
"layouts": [
{
"width": 1920,
"height": 1080,
"module": "%application%/appui/layouts/1080p",
"classes": ["browserdevice1080p"]
}
],
"networking": {
"supportsJSONP": false,
"supportsCORS": true
}
}
I am getting this configuration only when I install node modules.
Now what I did is like copy pasted the input mapping from uwp and pasted in xbox-one and it works, and it looks like the code shared by you. But I am confused about why the original source code looks different in tal/config from node modules ?
You are still using another strategy, please consider to use uwp strategy, since this is the best one for universal windows platform. The original config isn‘t complete for xbox one. You are able to use your own set of config files, it is just a little change in your server and you would be able to serve the configs you need, and even adjust it to your needs. There are so many different tv models out there that the list could be endless. Our strategy for configs is to copy the default ones and adjust them to our needs. I think you‘ll never use all default configs in one project.
@datLicht Hi, Still no luck, application is not working in xbox even after i changed the page strategy. Please have a look on my index.html below and let me know if I missed anything there
<html>
<head>
<script>
var antie = {
framework: {
deviceConfiguration: {
"pageStrategy": "uwp",
"deviceName": "XBOX One",
"modules": {
"base": "antie/devices/browserdevice",
"modifiers": [
"antie/devices/anim/css3",
"antie/devices/mediaplayer/html5",
"antie/devices/mediaplayer/live/restartable",
"antie/devices/exit/closewindow",
"antie/devices/data/nativejson",
"antie/devices/logging/onscreen",
"antie/devices/logging/xhr",
"antie/devices/logging/jstestdriver",
"antie/devices/storage/cookie"
]
},
"logging": {
"level": "none"
},
"displayQuality": "high",
"streaming": {
"video": {
"mediaURIFormat": "%href%",
"supported": [
{
"protocols": [
"http"
],
"encodings": [
"h264"
],
"transferFormat": [
"hls"
],
"maximumVideoLines": 1080
}
]
},
"audio": {
"mediaURIFormat": "%href%",
"supported": [
{
"protocols": [
"http"
],
"encodings": [
"aac"
],
"maximumBitRate": 192
}
]
}
},
"input": {
"map": {
"203": "UP",
"204": "DOWN",
"205": "LEFT",
"206": "RIGHT",
"207": "INFO",
"211": "UP",
"212": "DOWN",
"214": "LEFT",
"213": "RIGHT",
"195": "ENTER",
"196": "BACK",
"197": "PLAY_PAUSE",
"198": "SEARCH",
"202": "FAST_FWD",
"201": "REWIND",
"200": "PREV",
"199": "NEXT"
}
},
"accessibility": {
"captions": {
"supported": [
"application\/ttaf+xml"
]
}
},
"layouts": [
{
"width": 1920,
"height": 1080,
"module": "application/appui/layouts/1080p",
"classes": ["browserdevice1080p"]
}
],
"networking": {
"supportsJSONP": false,
"supportsCORS": true
},
"capabilities": [],
"statLabels": {
"deviceType": "console",
"serviceType": "retail"
}
}
}
};
</script>
<script type='text/javascript' data-main="static/script/main.js" src='tal/static/script/lib/require.js'></script>
<link rel='stylesheet' href='static/style/base.css' />
</head>
<body>
<div id='static-loading-screen'>
</div>
<div id="app" class="display-none"></div>
</body>
</html>
Application is opening in Xbox but none of the navigation are working, just look like an image.
I have installed the same application from app store in my computer and connected a joystick using usb and then it is working fine. But when i downloaded it in xbox and trying to navigate using joystick it is not working. Could you please help me on this ?
Hi @Arunprasanth,
Can you run something like http://keycode.info on your device to check that the keycodes match your configuration?
If the app is loading but key input is not, then that suggests a key mapping configuration problem.
@rosswilson Hi, Thanks for your response , but unfortunate I cannot activate developer mode in my xbox since the dev mode activation app is crashing while i am trying install it. So keycode testing will not be possible in my case. I have uploaded beta version of my application in windows store and downloaded it in xbox , that way only I am testing it.
You might be able to just visit the http://keycode.info in the Edge browser on the device, since the same browser engine is used for the web app wrapper.
@rosswilson Thanks for the response , but still I am unclear about how to open the given website in the xbox device. I have installed edge browser in XBOX device and tryed to open the given website but nothing is happening.
Finally it starts working in our xbox. We have added the below code into index.html file
if (Windows) {
// Only for Xbox One. TODO: Find better way to include this.
var viewManagement = Windows.UI.ViewManagement,
boundsMode = viewManagement.ApplicationViewBoundsMode.useCoreWindow,
appView = viewManagement.ApplicationView.getForCurrentView();
appView.setDesiredBoundsMode(boundsMode);
navigator.gamepadInputEmulation = 'keyboard';
viewManagement.ApplicationViewScaling.trySetDisableLayoutScaling(true);
appView.preferredLaunchWindowingMode = 1;
appView.preferredLaunchViewSize = {
width: 1920,
height: 1080
};
Application.RequiresPointerMode=WhenRequested
}
We have deprecated this project and there are no plans for active development going forward. Glad you manged to get it working!
Please see the deprecation notice.
