├── LICENSE
├── README.md
├── receiver.html
└── sender.html


/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2015 Sterling DeMille <sterlingdemille@gmail.com>
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of
 6 | this software and associated documentation files (the "Software"), to deal in
 7 | the Software without restriction, including without limitation the rights to
 8 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
 9 | the Software, and to permit persons to whom the Software is furnished to do so,
10 | subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
17 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
18 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
19 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
20 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # URL Cast Receiver
 2 | 
 3 | **Custom chromecast receiver to display webpages without tab casting**
 4 | 
 5 | Try it with the [sender demo](https://demille.github.io/url-cast-receiver).
 6 | 
 7 | ## Usage
 8 | 
 9 | You can use a hosted version now (use **5CB45E5A** for your appId),
10 | or you can clone / customize this repo and host your own.
11 | 
12 | URLs are sent to the receiver by sending messages on the `urn:x-cast:com.url.cast` namespace.
13 | 
14 | There are two ways to cast a URL to the reciever, each with pros and cons:
15 | 
16 | **Method 1:** Loading the URL in an iframe
17 | - Pros: Reciever stays intact after loading page
18 | - Cons: `X-Frame-Options: SAMEORIGIN` errors
19 | 
20 | ```js
21 | // iframe method
22 | var namespace = 'urn:x-cast:com.url.cast';
23 | var msg = {
24 |     "type": "iframe",
25 |     "url": "http://example.com"
26 | }
27 | 
28 | session.sendMessage(namespace, msg, onSuccess, onErr);
29 | // reciever is still alive
30 | ```
31 | 
32 | **Method 2:** Changing the window location on the chromecast
33 | - Pros: Can load any URL, no iframe origin issues
34 | - Cons: Reciever gets overridden with page load, so you can no longer communicate with it without stopping the cast and restarting.
35 | 
36 | ```js
37 | // iframe method
38 | var namespace = 'urn:x-cast:com.url.cast';
39 | var msg = {
40 |     "type": "loc",
41 |     "url": "http://example.com"
42 | }
43 | 
44 | session.sendMessage(namespace, msg, onSuccess, onErr);
45 | // receiver is now basically dead to you
46 | ```
47 | 
48 | ## Notes
49 | 
50 | - The chromecast renders webpages at a viewport size of 1280x720 instead of 1080x1920 like you might expect, so be prepared for that.
51 | 
52 | - The default background color on the chromecast is black, so pages loaded with method 2 (the window location) might have a surprise black background.  If you use the iframe method, the receiver sets the body to white.
53 | 
54 | ## License
55 | 
56 | The MIT License (MIT)
57 | 
58 | Copyright (c) 2015 Sterling DeMille &lt;sterlingdemille@gmail.com&gt;
59 | 
60 | Permission is hereby granted, free of charge, to any person obtaining a copy of
61 | this software and associated documentation files (the "Software"), to deal in
62 | the Software without restriction, including without limitation the rights to
63 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
64 | the Software, and to permit persons to whom the Software is furnished to do so,
65 | subject to the following conditions:
66 | 
67 | The above copyright notice and this permission notice shall be included in all
68 | copies or substantial portions of the Software.
69 | 
70 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
71 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
72 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
73 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
74 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
75 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.


--------------------------------------------------------------------------------
/receiver.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>URL Cast Receiver</title>
 5 | 
 6 |     <style type='text/css'>
 7 |       html, body {width: 100%; height: 100%; padding: 0; margin: 0;}
 8 |       body {overflow:hidden; background: #FFF;}
 9 |       #iframe {width: 100%; height: 100%;}
10 |     </style>
11 |   </head>
12 | 
13 |   <body>
14 |     <iframe src='' frameborder='0' scrolling='no' marginheight='0' marginwidth='0' seamless='seamless' id='iframe'></iframe>
15 | 
16 |     <script type='text/javascript' src='//www.gstatic.com/cast/sdk/libs/receiver/2.0.0/cast_receiver.js'></script>
17 | 
18 |     <script type='text/javascript'>
19 |       window.onload = function() {
20 |         window.castReceiverManager = cast.receiver.CastReceiverManager.getInstance();
21 | 
22 |         castReceiverManager.onReady = function(event) {
23 |           window.castReceiverManager.setApplicationState('URL Cast ready...');
24 |         };
25 | 
26 |         // messages on a custom namespace
27 |         var ns = 'urn:x-cast:com.url.cast';
28 |         window.messageBus = window.castReceiverManager.getCastMessageBus(ns);
29 | 
30 |         window.messageBus.onMessage = function(e) {
31 |           var msg = JSON.parse(e.data);
32 | 
33 |           window.messageBus.send(e.senderId, 'ok');
34 | 
35 |           if (msg.type === 'iframe') updateFrame(msg.url);
36 |           if (msg.type === 'loc') updateLocation(msg.url);
37 |         };
38 | 
39 |         // initialize CastReceiverManager
40 |         window.castReceiverManager.start({statusText: 'URL Cast starting...'});
41 |       };
42 | 
43 |       // Update the iframe src
44 |       // warning: watch out for X-Frame-Options -> DENY
45 |       function updateFrame(url) {
46 |         window.castReceiverManager.setApplicationState('Now Playing: ' + url);
47 |         document.getElementById('iframe').src = url;
48 |       }
49 | 
50 |       // Set the window location to the URL
51 |       // warning: this reciever dies essentially, because you navigated away
52 |       function updateLocation(url) {
53 |         window.castReceiverManager.setApplicationState('Now Playing: ' + url);
54 |         window.location.href = url;
55 |       }
56 |     </script>
57 |   </body>
58 | </html>


--------------------------------------------------------------------------------
/sender.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <head>
  4 |   <title>URL Cast Demo</title>
  5 | 
  6 |   <style type="text/css">
  7 |     html, body {height:100%; width: 100%; margin: 0; padding: 0; border: 0;}
  8 | 
  9 |     body {
 10 |       font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 11 |       font-size: 14px;
 12 |       line-height: 1.42857143;
 13 |       color: #333;
 14 |       background-color: #FFF;
 15 |     }
 16 | 
 17 |     #wrapper {
 18 |       width: 770px;
 19 |       position: relative;
 20 |       top: 20%;
 21 |       transform: translateY(-20%);
 22 |       margin: auto;
 23 |     }
 24 | 
 25 |     h1 {margin: 0; font-size: 36px;}
 26 | 
 27 |     input, select, button {
 28 |       border: 2px solid #CCC;
 29 |       border-radius: 5px;
 30 |       font-size: 25px;
 31 |       font-weight: bold;
 32 |       padding: 10px 15px;
 33 |       background: #FFF;
 34 |     }
 35 | 
 36 |     input:focus, select:focus, button:focus {outline: none;}
 37 |     input:focus, select:focus, button:active {
 38 |       outline: none;
 39 |       border-color: #8ecaed;
 40 |       box-shadow: 0 0 5px #8ecaed;
 41 |     }
 42 | 
 43 |     select {
 44 |       padding: 10px 38px 10px 15px;
 45 |       background: url('./br_down.png') no-repeat right #fff;
 46 |       -webkit-appearance: none;
 47 |       background-position-x: 120px;
 48 |       -webkit-appearance: none;
 49 |       -moz-appearance: none;
 50 |     }
 51 | 
 52 |     input[disabled], select[disabled], button[disabled] {
 53 |       background: #FAFAFA;
 54 |       cursor: not-allowed;
 55 |     }
 56 | 
 57 |     select[disabled] {
 58 |       background: url('./br_down.png') no-repeat right #FAFAFA;
 59 |       -webkit-appearance: none;
 60 |       background-position-x: 120px;
 61 |       -webkit-appearance: none;
 62 |       -moz-appearance: none;
 63 |     }
 64 | 
 65 |     .complete, .complete a {text-decoration: line-through; color: #ccc;}
 66 |     .notready {color: #ccc;}
 67 | 
 68 |     #notifications {position: fixed; bottom: 0; right: 0;}
 69 |     .notification {
 70 |       background: #222;
 71 |       color: #FFF;
 72 |       padding: 13px 20px;
 73 |       margin: 10px;
 74 |       border-radius: 2px;
 75 |     }
 76 | 
 77 |     .error {
 78 |       background: #e64a4a;
 79 |       color: #FFF;
 80 |       padding: 13px 20px;
 81 |       margin: 10px;
 82 |       border-radius: 2px;
 83 |     }
 84 |   </style>
 85 | </head>
 86 | 
 87 | <body>
 88 |   <div id="wrapper">
 89 |     <h1>URL Cast Receiver</h1>
 90 | 
 91 |     <p id="step1">Step 1:</p>
 92 |     <button id="requestSession">Start cast session</button>
 93 | 
 94 |     <p id="step2" class="notready">Step 2: Send url</p>
 95 | 
 96 |     <input id="url" class="border" type="text" placeholder="e.g. http://example.com" size="30" value="https://www.windytv.com/" disabled/>
 97 |     <select id="type" disabled>
 98 |       <option value="iframe">iframe</option>
 99 |       <option value="loc">location</option>
100 |     </select>
101 |     <button id="send" disabled>send</button>
102 | 
103 |     <h3>Details</h3>
104 |     <p>
105 |       There are two methods for casting, with pros and cons:
106 | 
107 |       <ol>
108 |         <li>Load an iframe (You will have trouble loading a url with x-frame-options: same origin.)</li>
109 |         <li>Change the window location (You will lose control when you load the url over the receiver.)</li>
110 |       </ol>
111 | 
112 |       Also, notice the chromecast viewport is 1280x720 and the default background is black before the receiver loads.
113 |     </p>
114 | 
115 |     <p><a href="#">&laquo; GitHub</a></p>
116 |   </div>
117 | 
118 |   <div id="notifications"></div>
119 | 
120 |   <script type="text/javascript" src="https://www.gstatic.com/cv/js/sender/v1/cast_sender.js"></script>
121 |   <script type="text/javascript">
122 | 
123 |     // click handlers
124 |     document.getElementById('requestSession').onclick = function() {
125 |       chrome.cast.requestSession(sessionListener, onErr);
126 |     };
127 | 
128 |     document.getElementById('send').onclick = function() {
129 |       var url = document.getElementById('url').value
130 |         , type = document.getElementById('type').value;
131 | 
132 |       if (!url || !type) return;
133 | 
134 |       sendMessage({type: type, url: url});
135 |     };
136 | 
137 |     var applicationID = '5CB45E5A'
138 |       , namespace = 'urn:x-cast:com.url.cast'
139 |       , receiverDead = false
140 |       , session = null;
141 | 
142 |     // initialize
143 |     window.__onGCastApiAvailable = function(loaded) {
144 |       if (loaded) initializeCastApi();
145 |     };
146 | 
147 |     function initializeCastApi() {
148 |       var sessionRequest = new chrome.cast.SessionRequest(applicationID);
149 | 
150 |       var apiConfig = new chrome.cast.ApiConfig(
151 |         sessionRequest,
152 |         sessionListener,
153 |         receiverListener
154 |       );
155 | 
156 |       chrome.cast.initialize(
157 |         apiConfig,
158 |         onSuccess.bind(this, 'initialized ok'),
159 |         onErr
160 |       );
161 |     }
162 | 
163 |     function onErr(err) {
164 |       console.log('Err: ' + JSON.stringify(err));
165 |       showError(err);
166 |     }
167 | 
168 |     function onSuccess(msg) {
169 |       console.log('Sucess: ' + msg);
170 |     }
171 | 
172 |     function sessionListener(newSession) {
173 |       console.log('New session ID:' + newSession.sessionId);
174 |       session = newSession;
175 |       session.addUpdateListener(sessionUpdateListener);
176 |       session.addMessageListener(namespace, receiveMessage);
177 | 
178 |       enableInputs();
179 |     }
180 | 
181 |     function receiverListener(e) {
182 |       (e === 'available')
183 |         ? console.log('receiver found')
184 |         : console.log('no receivers found');
185 |     }
186 | 
187 |     function sessionUpdateListener(isAlive) {
188 |       if (!isAlive) {
189 |         session = null;
190 |         disableInputs();
191 |       }
192 |       console.log('Session is alive?: ', isAlive);
193 |     }
194 | 
195 |     function receiveMessage(namespace, msg) {
196 |       // namespace = 'urn:x-cast:com.url.cast'
197 |       // it only ever says 'ok' - just confirming when a url has been received
198 |       console.log('Receiver said: ' + msg);
199 |     }
200 | 
201 |     function sendMessage(msg) {
202 |       if (receiverDead || !session) return;
203 | 
204 |       // send msg
205 |       session.sendMessage(
206 |         namespace,
207 |         msg,
208 |         function() {
209 |           console.log('Message sent: ', msg);
210 |           notify('Message sent: ' + JSON.stringify(msg));
211 |         },
212 |         onErr
213 |       );
214 | 
215 |       if (msg.type === 'loc') {
216 |         receiverDead = true;
217 |         disableInputs();
218 |         notify('Receiver will now be unresponsive');
219 |       }
220 |     }
221 | 
222 |     function notify(msg) {
223 |       var el = document.getElementById('notifications')
224 |         , notice = document.createElement('div');
225 | 
226 |       notice.className = 'notification';
227 |       notice.innerHTML = msg;
228 | 
229 |       el.appendChild(notice);
230 | 
231 |       // notice self destruct timer
232 |       setTimeout(function() {
233 |         el.removeChild(notice);
234 |       }, 5000);
235 |     }
236 | 
237 |     function showError(err) {
238 |       var el = document.getElementById('notifications')
239 |         , notice = document.createElement('div');
240 | 
241 |       notice.className = 'error';
242 |       notice.innerHTML = 'Got error!: ' + JSON.stringify(err);
243 | 
244 |       el.appendChild(notice);
245 | 
246 |       // notice self destruct timer
247 |       setTimeout(function() {
248 |         el.removeChild(notice);
249 |       }, 5000);
250 |     }
251 | 
252 |     function enableInputs() {
253 |       document.getElementById('url').disabled = false;
254 |       document.getElementById('type').disabled = false;
255 |       document.getElementById('send').disabled = false;
256 | 
257 |       document.getElementById('step1').classList.add('complete');
258 |       document.getElementById('step2').classList.remove('notready');
259 |       document.getElementById('url').focus();
260 |     }
261 | 
262 |     function disableInputs() {
263 |       document.getElementById('url').disabled = true;
264 |       document.getElementById('type').disabled = true;
265 |       document.getElementById('send').disabled = true;
266 | 
267 |       document.getElementById('step1').classList.remove('complete');
268 |       document.getElementById('step2').classList.add('notready');
269 |     }
270 | 
271 |   </script>
272 | </body>
273 | </html>


--------------------------------------------------------------------------------