Created
January 7, 2018 10:22
-
-
Save jcable/45c65a72074763a9ec30ddb1ff217517 to your computer and use it in GitHub Desktop.
Sample Google Cast CAF Receiver demonstrating cloud queues
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <script type="text/javascript" | |
| src="//www.gstatic.com/cast/sdk/libs/caf_receiver/v3/cast_receiver_framework.js"> | |
| </script> | |
| </head> | |
| <body> | |
| <cast-media-player id="player"></cast-media-player> | |
| <script> | |
| const context = cast.framework.CastReceiverContext.getInstance(); | |
| const player = context.getPlayerManager(); | |
| player.setMessageInterceptor( | |
| cast.framework.messages.MessageType.LOAD, | |
| request => { | |
| console.log(request.media.contentId); | |
| return request; | |
| } | |
| ); | |
| player.setMessageInterceptor( | |
| cast.framework.messages.MessageType.QUEUE_LOAD, | |
| request => { | |
| console.log('queue load', request.items); | |
| return request; | |
| } | |
| ); | |
| player.setMessageInterceptor( | |
| cast.framework.messages.MessageType.MEDIA_STATUS, | |
| status => { | |
| status.customData = {}; | |
| return status; | |
| } | |
| ); | |
| const YourServer = { | |
| getPrevMedias: function(id) { | |
| console.log('getPrevMedias', id?id:'no input'); | |
| return []; | |
| }, | |
| getNextMedias: function(id) { | |
| console.log('getNextMedias', id?id:'no input'); | |
| return []; | |
| }, | |
| trackUsage: function(id) { | |
| console.log('trackUsage', id?id:'no input'); | |
| } | |
| }; | |
| const DemoQueue = class extends cast.framework.QueueBase { | |
| constructor() { | |
| super(); | |
| YourServer.onSomeEvent = this.updateEntireQueue_; | |
| } | |
| /** | |
| * Initializes the queue. | |
| * @param {!cast.framework.messages.LoadRequestData} requestData | |
| * @return {!cast.framework.messages.QueueData} | |
| * or non-null Promise containing nullable cast.framework.messages.QueueData | |
| */ | |
| initialize(requestData) { | |
| console.log('initialize', requestData); | |
| if(requestData.media.contentId !== 'queue') { | |
| return null; // enable default behaviour | |
| } | |
| // Put the first set of items into the queue | |
| var it = this.nextItems(); | |
| console.log('initialize', it); | |
| return it.then( | |
| items => { | |
| console.log('got items in initialize', items); | |
| const queueData = requestData.queueData || new cast.framework.messages.QueueData(); | |
| queueData.name = 'Your Playlist'; | |
| queueData.description = 'Your Playlist Description'; | |
| queueData.items = items; | |
| return queueData; | |
| }); | |
| } | |
| /** | |
| * Picks a set of items from remote server after the reference item id and | |
| * return as the next items to be inserted into the queue. When | |
| * referenceItemId is omitted, items are simply appended to the end of the | |
| * queue. | |
| * @param {number} referenceItemId | |
| * @return {!Array<cast.framework.messages.QueueItem>} | |
| * returns (nullable Array of non-null cast.framework.messages.QueueItem | |
| * or non-null Promise containing nullable Array of non-null cast.framework.messages.QueueItem) | |
| * | |
| * a sample queue.json might look like: | |
| * | |
| * [ | |
| * { "itemId": 1, "url": "http://yt-dash-mse-test.commondatastorage.googleapis.com/media/car-20120827-manifest.mpd" }, | |
| * { "itemId": 2, "url": "http://yt-dash-mse-test.commondatastorage.googleapis.com/media/motion-20120802-manifest.mpd" }, | |
| * { "itemId": 3, "url": "http://yt-dash-mse-test.commondatastorage.googleapis.com/media/oops-20120802-manifest.mpd" } | |
| * ] | |
| * | |
| */ | |
| nextItems(referenceItemId) { | |
| // Assume your media has a itemId and the media url | |
| var self = this; | |
| return fetch('queue.json').then(function(response) { | |
| return response.json(); | |
| }).then(function(data) { | |
| return self.constructQueueList_(data); | |
| }); | |
| } | |
| /** | |
| * Picks a set of items from remote server before the reference item id and | |
| * return as the items to be inserted into the queue. When | |
| * referenceItemId is omitted, items are simply appended to beginning of the | |
| * queue. | |
| * @param {number} referenceItemId | |
| * @return {!Array<cast.framework.messages.QueueItem>} | |
| * returns (nullable Array of non-null cast.framework.messages.QueueItem | |
| * or non-null Promise containing nullable Array of non-null cast.framework.messages.QueueItem) | |
| */ | |
| prevItems(referenceItemId) { | |
| return this.constructQueueList_(YourServer.getPrevMedias(referenceItemId)); | |
| } | |
| /** | |
| * Constructs a list of QueueItems based on the media information containing | |
| * the item id and the media url. | |
| * @param {number} referenceItemId | |
| * @return {!Array<cast.framework.QueueItem>} | |
| */ | |
| constructQueueList_(medias) { | |
| const items = []; | |
| console.log(medias); | |
| for (var i=0; i<medias.length; i++) { | |
| var media = medias[i]; | |
| console.log(media); | |
| const item = new cast.framework.messages.QueueItem(media.itemId); | |
| item.media = new cast.framework.messages.MediaInformation(); | |
| item.media.contentId = media.url; | |
| item.preloadTime = 5; | |
| items.push(item); | |
| } | |
| console.log('items', items); | |
| return items; | |
| } | |
| /** | |
| * Logs the currently playing item. | |
| * @param {number} itemId The unique id for the item. | |
| * @export | |
| */ | |
| onCurrentItemIdChanged(itemId) { | |
| console.log('We are now playing video ' + itemId); | |
| YourServer.trackUsage(itemId); | |
| } | |
| }; | |
| context.start({queue: new DemoQueue()}); | |
| </script> | |
| </body> | |
| </html> |
how i can run that code??
You can not run the code yourself - it requires a chromecast stick. Google fetches the HTML and executes it....
You need to create a cast app and point to your server - then send a video from a cast client:
https://cast.google.com/publish/
You can add your chromecast id to the developer console to test without publishing it.
HI ~ thx the example ~ it help me so much ~
And I have a question. when the initialize method run nextItems for fetch queue items and than throw error. how can i handle it in initialize ???
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Hi,
How can I execute this? I tried to load the "Basic receiver app" (https://developers.google.com/cast/docs/caf_receiver_basic) copying it to a .html file and opening it in Chrome, but it do nothing. The same happend when I load it in a local network machine (using python simplehttpserver) : a white web (nothing displayed).
I copy your code, but the same happens: white page.
When I copy the sample code to webs that can run HTML (it display in a frame the code that you put in other) it changes and show a "loading" circle, so is more that open my "index.html" file with the code.
Can you tell me how can I run the sample code or your code? I only want to start having a simple receiver that display a video sent via chromecast integration in other apps. I expected that the original example will launch a "wating" page/player that will start playing something (in a HTML5 player) send via chromecast buttons.