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 hidden or 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> |
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
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.