Getting actual width of Chromecast receiver UI

Question

I have a second generation Chromecast connected to a monitor. I'm receiving 1080p60 from the Chromecast.

The Cast documentation states in several places that the UI is at the resolution of 720p:

While Chromecast displays the receiver page on a 720p graphics plane, other Cast platforms including Android TV may display the page up to 1080p.

And, this note on media formats:

Images have a display size limitation of 720p (1280x720). Images should be optimized to 1280x720 or less to avoid scaling down on the receiver device.

Indeed, if you open a debugging console on a receiver application, you can see that window.innerWidth is 1280, and window.innerHeight is 720.

This led me to believe that video was hardware decoded to its own layer, directly to the video output, and the browser-based UI was rendered at a lower resolution and overlaid on top of it. But then, I saw the <video> element in the DOM itself and wondered how this could work. For a moment, I thought it might be controlling some background hardware player, but this video can be manipulated with CSS, so that didn't make any sense.

I added a 1920x1080 test image to the web UI and did a capture.

I'm not sure if this will come across on Stack Overflow's image view, but the test image was perfect. I could see every line, meaning the image was in fact displayed at 1920x1080.

So, it seems the documentation doesn't tell the whole story. The UI is in fact rendered at the output resolution... 1920x1080 in my case. But it uses a virtual pixel size of 1280x720. I would rather access the full resolution, so I added the appropriate viewport meta tag, like I would for mobile:

<meta name="viewport" content="width=device-width, initial-scale=1" />

Unfortunately, this has no effect! The viewport is still 1280x720, even though it is rendering at higher resolutions in reality.

Is there any way around this?

Answer 1

Had to get the receiver resolution, figured out that cast.framework.CastReceiverContext.getInstance().canDisplayType actually takes the current output resolution into account.

Here is my quick ugly hack to get the current display resolution of the video output.

(() => {
var x = 0, y = 1, i = cast.framework.CastReceiverContext.getInstance();
while(i.canDisplayType("video/mp4", "", ++x, y));
x--;
while(i.canDisplayType("video/mp4", "", x,++y));
y--;
return {width: x, height: y};
})()

This can obviously be made prettier with either predefined resolutions or just some binary searching.

Feel free to post a nicer solution. :)