-
Notifications
You must be signed in to change notification settings - Fork 3
/
index.html
221 lines (187 loc) · 11.7 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
<html>
<head>
<meta charset="utf8" />
<title>HTML Slidy remote</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/pure-min.css" />
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="styles.css" />
<!--
Note the order of the scripts is relevant:
- the Cast API must be downloaded before the shim
- slidy.js must be downloaded before slidy-remote
-->
<script type="text/javascript" src="https://www.gstatic.com/cv/js/sender/v1/cast_sender.js"></script>
<script type="text/javascript">navigator.presentationLogLevel = 'log';</script>
<script type="text/javascript" src="presentation-api-shim.js"></script>
<script type="text/javascript" src="http://www.w3.org/Talks/Tools/Slidy2/scripts/slidy.js"></script>
<script type="text/javascript" src="slidy-remote.js"></script>
<script type="text/javascript" src="sender.js"></script>
</head>
<body>
<header>
<h1>HTML Slidy remote</h1>
<p>A Presentation API demo</p>
</header>
<div id="form">
<aside>
<p>This page is a <em>proof-of-concept</em> demo for the <a href="http://webscreens.github.io/presentation-api/">Presentation API</a> which is being developed by the <a href="http://www.w3.org/community/webscreens/">Second Screen Presentation Community Group</a> in W3C.</p>
</aside>
<div class="form">
<form class="pure-form pure-form-stacked">
<label for="url">URL of the Slidy presentation to project:</label>
<input id="url" name="url" type="text" value="https://tidoust.github.io/slidyremote/slideshow/" list="talks" class="pure-input-1"/>
<datalist id="talks">
<option value="https://tidoust.github.io/slidyremote/slideshow/" />
<option value="https://www.w3.org/Talks/Tools/Slidy2/" />
<option value="http://www.w3.org/2011/Talks/1122-mwabp-epita-fd/" />
<option value="http://www.w3.org/2009/Talks/03-mobileinternet/" />
</datalist>
<input type="submit" value="Open slide show" class="pure-button pure-button-primary" />
</form>
<section id="error" class="error" hidden>
<p></p>
<button class="pure-button pure-button-primary">Dismiss error message</button>
</section>
<p>Instructions:</p>
<ol>
<li><strong>Enter the URL of a slide show</strong> made with <a href="http://www.w3.org/Talks/Tools/Slidy2/Overview.html">HTML Slidy</a> above.
<br/>The slide show origin must be one of <code>http(s)://www.w3.org</code> or <code>https://tidoust.github.io</code>.</li>
<li><strong>Hit "<em>Open slide show</em>"</strong>
<br/>The slide show will open on a second screen if available or in a separate window otherwise.
<br/>Ensure this page is allowed to open pop-up windows!</li>
<li><strong>Use the Slidy remote on this page</strong> to control the running slide show.
<br/>Key presses and gestures are supported as well</li>
</ol>
</div>
<aside class="warning">
<p><strong>Support for actual second screens only works in Google Chrome under certain conditions</strong>, see <a href="#implementation">Implementation details</a>.
<br/>The demo falls back to opening the slide show in a pop-up window when it cannot find second screens.
<br/>Your browser may block the pop-up window by default.</p>
<p>The code also uses a couple of advanced JavaScript features (e.g. <code>Promise</code>, <code>Object.keys</code>, <code>URL</code>) that are not yet supported on all Web browsers.</p>
<p id="nochrome" hidden>You seem not to be using Google Chrome in particular, so note the demo will be somewhat limited in your case!</p>
</aside>
<section id="implementation">
<h2>Implementation details</h2>
<p>The <a href="http://github.com/tidoust/slidyremote">source code</a> is available on GitHub under a <a href="http://www.w3.org/Consortium/Legal/2002/copyright-software-20021231">W3C Software license</a>.</p>
<h3>Presentation API shim</h3>
<p>Under the hoods, the demo uses a <a href="presentation-api-shim.js">JavaScript shim</a> of the Presentation API that supports:</p>
<dl>
<dt>Google Cast devices</dt>
<dd>Support for Google Cast devices requires Google Chrome with the <a href="https://chrome.google.com/webstore/detail/google-cast/boadgeojelhgndaghljhdicfkmllpafd?hl=en">Google Cast extension</a></dd>
<dt>Second screens attached through a video port</dt>
<dd>Support for these second screens requires that you run this page in <a href="http://webscreens.github.io/demo/#binaries">a modified version of Chromium</a> specifically prepared to demo the Presentation API.</dd>
<dd>Supported attachment methods include regular video ports (HDMI, VGA) as well as wireless equivalent (e.g. Miracast, WiDi).</dd>
<dd>If there are more than one second screen available, the demo selects the first one.</dd>
<dt>Separate window</dt>
<dd>This is used as a fallback when the shim cannot find available second screens</dd>
<dd>Note that your Web browser is likely going to block this attempt to open a pop-up window by default! It should offer a way to authorize it though.</dd>
</dl>
<h3>How the demo works</h3>
<p>When the user requests to present the given slide show, this page calls <code>navigator.presentation.requestSession</code> to open the appropriate HTML Slidy receiver application on a second screen. The call returns a <code>PresentationSession</code> object. The page then uses that object to have the HTML Slidy receiver application open the requested slide show and to send Slidy commands afterwards.</p>
<p>The HTML Slidy receiver application is an empty page that listens to messages it receives from <code>navigator.presentation.onmessage</code>. When it receives the appropriate message, it loads the requested slide show in a child <code>iframe</code> that takes up 100% of the viewport and controls the Slidy instance of the slide show within that iframe in reaction to further presentation messages it receives.</p>
<p>Due to usual security restrictions, the origins of the HTML Slidy receiver application and of the slide show <strong>must</strong> match. The receiver application would not be able to control the slide show otherwise. This page only knows of two HTML Slidy receiver applications:</p>
<ul>
<li>The receiver that ships with this page, bound to <code>https://tidoust.github.io</code></li>
<li>A receiver that runs on the W3C Web site, bound to <code>https://www.w3.org</code></li>
</ul>
<p>You may extend the code to support receiver applications on other domain names. Both HTML Slidy receiver applications have been registered with Google and may run on any Chromecast device.</li>
<h3>Why use an iframe on the receiving side?</h3>
<p>Since the <code>iframe</code> triggers the same origin constraint, it would be tempting to drop it altogether. It could be done in theory provided HTML Slidy is updated to listen to <code>navigator.presentation.onmessage</code> events.</p>
<p>In practice, this would require slide shows to use that updated (and likely unstable) version of HTML Slidy, which is probably not a good idea for <em>actual</em> slide shows. Also note that there is no way to run arbitrary receiver applications with Google Cast devices for the time being: any receiver application must first be registered with Google. Having to register all existing slide shows would be somewhat tedious.</p>
<h3>Slidy commands</h3>
<p>Slidy commands can be sent to the second screen using the Slidy remote that this page will display once the presentation session has started. Key presses and gestures are also supported.</p>
<p>There are a few known restrictions at this stage:</p>
<ul>
<li>no way to scroll the current slide on the second screen</li>
<li>no way to interact with the table of contents</li>
<li>no way to interact with contents on the slide show (e.g. video controls)</li>
</ul>
<h3>Contact</h3>
<p>For feedback on the demo or on the Presentation API itself, use the <a href="mailto:public-webscreens@w3.org">public-webscreens@w3.org</a> mailing-list (with <a href="http://lists.w3.org/Archives/Public/public-webscreens">public archive</a>) or get in touch with <a href="mailto:fd@w3.org">Francois Daoust</a> if you do not wish your comment to appear in public.</p>
<p>Feel free to use <a href="http://github.com/tidoust/slidyremote/issues">GitHub issue tracker</a> to report bugs and feature requests.</p>
<h3>Acknowledgements</h3>
<p>This work was done with support from the European Commission under grant agreement no: 610404 (<a href="http://www.mediascapeproject.eu/">MediaScape</a>).</p>
</section>
</div>
<div id="remote" hidden>
<div class="remote">
<div class="pure-g">
<div class="pure-u-2-3"></div>
<div class="pure-u-1-3">
<button class="pure-button off" id="remote-off">
<i class="fa fa-power-off"></i>
<span>Close</span>
</button>
</div>
</div>
<hr />
<div class="pure-g">
<div class="pure-u-1-2">
<button class="pure-button pure-button-primary" id="remote-previous">
<i class="fa fa-backward"></i>
<span>Previous</span>
</button>
</div>
<div class="pure-u-1-2">
<button class="pure-button pure-button-primary" id="remote-next">
<i class="fa fa-forward"></i>
<span>Next</span>
</button>
</div>
</div>
<hr />
<div class="pure-g">
<div class="pure-u-1-2">
<button class="pure-button" id="remote-first">
<i class="fa fa-fast-backward"></i>
<span>First</span>
</button>
</div>
<div class="pure-u-1-2">
<button class="pure-button" id="remote-last">
<i class="fa fa-fast-forward"></i>
<span>Last</span>
</button>
</div>
</div>
<hr />
<div class="pure-g">
<div class="pure-u-1-2">
<button class="pure-button" id="remote-smaller">
<i class="fa fa-minus"></i>
<span>Smaller</span>
</button>
</div>
<div class="pure-u-1-2">
<button class="pure-button" id="remote-bigger">
<i class="fa fa-plus"></i>
<span>Bigger</span>
</button>
</div>
</div>
<hr />
<div class="pure-g">
<div class="pure-u-1-3">
<button class="pure-button secondary" id="remote-toc">
<span>Toggle</span>
TOC
</button>
</div>
<div class="pure-u-1-3">
<button class="pure-button secondary" id="remote-footer">
<span>Toggle</span>
footer
</button>
</div>
<div class="pure-u-1-3">
<button class="pure-button secondary" id="remote-all">
All slides
</button>
</div>
</div>
</div>
<p>Note you may also enter commands through the keyboard or use gestures on touch-enabled screens.</p>
</div>
</body>
</html>