I'm using chromecast SDK 3.0 and want to create custom receiver. It works good with video and audio, but has problems with images casting.
in html file:
<body style="margin: 0">
<img id="androidImage" src="" />
...
in js file:
sampleplayer.CastPlayer.prototype.loadImage_ = function(info) {
this.log_('loadImage_');
var url = info.message.media.contentId;
document.getElementById("androidImage").src=url;
this.setState_(sampleplayer.State.PLAYING, true);
};
With such implementation image appears on one second and disappears with replacing to background image. Also image is displayed with incorrect fit size. To style scale type I've used such code:
<style>
img#androidImage {
height:100%;
width:100%;
}
</style>
Does somebody have some input? Thanks!
Image handling is different from Video and Audio, in the sense that there is no "playing" state. Since images are handled by an html image tag, there are no events associated with them (in case of video/audio, the Media element produces a number of events hat the Cast SDK taps into). So do not try to set the state for your images on the receiver side. You have an option of using the Default/Style receivers that handle images in the most basic way. If you want to write a custom receiver, you can simply use a custom namespace to send the image url to your receiver and on the receiver side, grab the url and populate an image tag (similar to what you're attempting); there is no need to bother with other aspects of the receiver SDK that is around other types of media. One last thing: you won't be able to do much with images if you're planing to add slideshow functionality, fancy transitions, etc; you can show images one by one, fading out one and fading in the next (to produce a more pleasing transition).