-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
259 lines (227 loc) · 11.6 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
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Watch your browser</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<link rel="stylesheet" href="style.css">
</head>
<body>
<a href="https://github.com/cemrich/watch-your-browser"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png" alt="Fork me on GitHub"></a>
<h1>Watch your browser</h1>
<h2>What can be done with HTML(5) and Javascript</h2>
<p>Get an idea of what's possible with current and future HTML(5) and JavasScript specifications.</p>
<p>You may try any feature that has a green border. But be aware: A lot of these features are not yet fully implemented, may behave differently on different browsers or not work at all.</p>
<p>If you have ideas of how to improve this collection, please feel free to open an issue or create a pull request on github.</p>
<p>Of course this is no complete feature list. For more lists of what can be done with HTML, CSS and JavaScrip please visit the following roundups:</p>
<ul>
<li><a href="https://whatwebcando.today/">Native features in HTML5</a></li>
<li><a href="http://www.creativebloq.com/html5/developer-s-guide-html5-apis-1122923">The developer’s guide to the HTML5 APIs</a></li>
<li><a href="http://platform.html5.org/">The Web platform: Browser technologies</a></li>
<li><a href="http://html5demos.com/">HTML5 Demos and Examples</a></li>
<li><a href="http://robertnyman.com/html5/">HTML5 - Information and samples for HTML5 and related APIs</a></li>
</ul>
<ul class="features">
<li id="notifications">
<h3>Notifications</h3>
<a class="icon spec" href="http://www.w3.org/TR/notifications/"></a>
<a class="icon caniuse" href="http://caniuse.com/#feat=notifications"></a>
<p>After your approval some browsers might show you notifications above your task bar.</p>
<button class='try'>Try</button>
</li>
<li id="vibration">
<h3>Vibration</h3>
<a class="icon spec" href="http://www.w3.org/TR/vibration/"></a>
<a class="icon caniuse" href="http://caniuse.com/#feat=vibration"></a>
<p>Yes, your phone might vibrate. Desktop browser might provide the API, but - surprise - won't vibrate.</p>
<button class='try'>Try</button>
</li>
<li id="battery">
<h3>Battery</h3>
<a class="icon spec" href="http://www.w3.org/TR/battery-status/"></a>
<a class="icon caniuse" href="http://caniuse.com/#feat=battery-status"></a>
<p>Firefox and Chrome can detect your battery status. Try to plug your device in and out to see the changes.</p>
<div class="indicator">
<div class="inner">no support</div>
</div>
<p class="time">
Time until fully charged: <span class="chargedTime">n/a</span><br>
Time until discharged: <span class="dischargedTime">n/a</span>
</p>
</li>
<li id="speech-recognition">
<h3>Speech-Recognition</h3>
<a class="icon spec" href="https://dvcs.w3.org/hg/speech-api/raw-file/tip/speechapi.html"></a>
<a class="icon caniuse" href="http://caniuse.com/#feat=speech-recognition"></a>
<p>Chrome can do speech recognition inside the browser after the user has allowed to use the microphone.</p>
<button class='try'>Try</button>
<p class="result"></p>
</li>
<li id="speech-synthesis">
<h3>Speech-Synthesis</h3>
<a class="icon spec" href="https://dvcs.w3.org/hg/speech-api/raw-file/tip/speechapi.html"></a>
<a class="icon caniuse" href="http://caniuse.com/#feat=speech-synthesis"></a>
<p>Few browser are able to synthesize text to speech and read it out to you.</p>
<input type="text" value="Hello, how are you?">
<button class='try'>Try</button>
</li>
<li id="rotation">
<h3>Rotation</h3>
<a class="icon spec" href="http://www.w3.org/TR/orientation-event/"></a>
<a class="icon caniuse" href="http://caniuse.com/#feat=deviceorientation"></a>
<p>Some mobile devices can provide rotation data in all three axes through the browser. However, browser may handle the angles differently.</p>
<button class='start'>Start</button>
<button class='stop'>Stop</button>
<p class="result">-</p>
<div class="indicator"></div>
</li>
<li id="acceleration">
<h3>Acceleration</h3>
<a class="icon spec" href="http://www.w3.org/TR/orientation-event/"></a>
<a class="icon caniuse" href="http://caniuse.com/#feat=deviceorientation"></a>
<p>Measure your device acceleration in three axes. There even exist libraries to detect motion gestures like shaking by analysing this data.</p>
<button class='start'>Start</button>
<button class='stop'>Stop</button>
<br>
<canvas width="300" height="120"></canvas>
</li>
<li id="compass">
<h3>Compass</h3>
<a class="icon spec" href="http://www.w3.org/TR/orientation-event/"></a>
<a class="icon caniuse" href="http://caniuse.com/#feat=deviceorientation"></a>
<p>Some mobile devices can provide rotation data through the browser. Put your device flat on a table and press start to see the compass in action. Some browsers may invert the rotation angles - this example uses angles like specified in the <a href="http://www.w3.org/TR/orientation-event/">W3C Specification</a>.</p>
<button class='start'>Start</button>
<button class='stop'>Stop</button>
<p class="result">-</p>
<div class="compass"></div>
</li>
<li id="fullscreen">
<h3>Fullscreen</h3>
<a class="icon spec" href="https://dvcs.w3.org/hg/fullscreen/raw-file/tip/Overview.html"></a>
<a class="icon caniuse" href="http://caniuse.com/#feat=fullscreen"></a>
<p>Display any HTML element in fullscreen mode.</p>
<button class='try'>Try</button>
</li>
<li id="sound-analysis">
<h3>Sound Analysis</h3>
<a class="icon spec" href="http://www.w3.org/TR/mediacapture-streams/"></a>
<a class="icon spec" href="http://www.w3.org/TR/webaudio/"></a>
<a class="icon caniuse" href="http://caniuse.com/#feat=stream"></a>
<a class="icon caniuse" href="http://caniuse.com/#feat=audio-api"></a>
<p>Analyse frequencies and the waveform of microphone input or sound files.</p>
<canvas width="500" height="100"></canvas>
<br>
<button class='start'>Start</button>
<button class='stop'>Stop</button>
</li>
<li id="video-analysis">
<h3>Video-Analysis</h3>
<a class="icon spec" href="http://www.w3.org/TR/mediacapture-streams/"></a>
<a class="icon caniuse" href="http://caniuse.com/#feat=audio-api"></a>
<p>Use the webcam of your device and analyse its images. The border around the video indicates the average color of the video.</p>
<canvas></canvas>
<video autoplay></video>
<br>
<button class='start'>Start</button>
<button class='stop'>Stop</button>
</li>
<li id="midi">
<h3>Midi</h3>
<a class="icon spec" href="http://webaudio.github.io/web-midi-api/"></a>
<a class="icon caniuse" href="http://caniuse.com/#feat=midi"></a>
<p>Play sound using the <a href="http://webaudio.github.io/web-midi-api/">Web MIDI API</a> (W3C Draft).</p>
<button class='try'>Try</button>
</li>
<li id="sound-generation">
<h3>Sound-Generation</h3>
<a class="icon spec" href="http://www.w3.org/TR/webaudio/"></a>
<a class="icon caniuse" href="http://caniuse.com/#feat=audio-api"></a>
<p>With the WebAudio API you can create all sorts of sound effects on the fly, using oscillators, many filters and a lot more.</p>
<label>waveform: </label>
<select class="waveshape">
<option value="sine" selected="selected">Sine</option>
<option value="triangle">Triangle</option>
<option value="sawtooth">Sawtooth</option>
<option value="square">Square</option>
</select>
<p>
<label>volume: <span id="volume">0.5</span></label>
<input class="volume" type="range" min="0" max="1" value="0.5" step="0.01" />
</p>
<p>
<label>frequency: <span id="frequency">300</span></label>
<input class="frequency" type="range" min="0" max="1000" value="300" step="5" />
</p>
<button class='start'>Start</button>
<button class='stop'>Stop</button>
</li>
<li id="geolocation">
<h3>Geolocation</h3>
<a class="icon spec" href="http://dev.w3.org/geo/api/spec-source.html"></a>
<a class="icon caniuse" href="http://caniuse.com/#feat=geolocation"></a>
<p>Let your browser tell you where you are an where you're heading.</p>
<button class='try'>Try</button>
<p class="result"></p>
</li>
<li id="pointer-lock">
<h3>Pointer Lock</h3>
<a class="icon spec" href="http://www.w3.org/TR/pointerlock/"></a>
<a class="icon caniuse" href="http://caniuse.com/#feat=pointerlock"></a>
<p>This API can capture your mouse pointer like used in many video games. Press ESC to exit the capture mode.</p>
<div class="panorama"></div>
<small>image from <a href="https://de.wikipedia.org/wiki/Datei:360%C2%B0_Panorama_Zitterklapfen.jpg">Wikipedia</a> by <a href="https://commons.wikimedia.org/wiki/User:B%C3%B6hringer">böhringer friedrich</a></small>
<button class='try'>Try</button>
</li>
<li id="drag-and-drop">
<h3>Drag & Drop</h3>
<a class="icon spec" href="http://www.w3.org/TR/2010/WD-html5-20101019/dnd.html"></a>
<a class="icon caniuse" href="http://caniuse.com/#feat=dragndrop"></a>
<p>Drag things into this field. You can drag & drop files, text or html items. Different browsers may display different attributes and mime-types.</p>
<ul class="output"></ul>
</li>
<li id="offline-detection">
<h3>Offline Detection</h3>
<a class="icon spec" href="http://dev.w3.org/html5/spec-preview/offline.html#browser-state"></a>
<a class="icon caniuse" href="http://caniuse.com/#feat=online-status"></a>
<p>Detects if your device is connected to the internet. Some browsers may respont to their "work offline" menu items only.</p>
<div class="indicator"></div>
</li>
<li id="screen-orientation">
<h3>Screen Orientation</h3>
<a class="icon spec" href="https://w3c.github.io/screen-orientation/"></a>
<a class="icon caniuse" href="http://caniuse.com/#feat=screen-orientation"></a>
<p>Get information about the screen orientation (portrait/landscape) of your device. You can even lock the orientation (may need fullscreen access).</p>
<button class='start'>Lock to landscape</button>
<button class='stop'>Unlock</button>
<p class="result"></p>
</li>
<li id="ambient-light">
<h3>Ambient Light</h3>
<a class="icon spec" href="http://www.w3.org/TR/ambient-light/"></a>
<a class="icon caniuse" href="http://caniuse.com/#feat=ambient-light"></a>
<p>Use your device's light sensor to get information about the ambient light level.</p>
<button class='start'>Start</button>
<button class='stop'>Stop</button>
<p class="result"></p>
</li>
<li id="network-info">
<h3>Network Info</h3>
<a class="icon spec" href="https://wicg.github.io/netinfo/"></a>
<a class="icon caniuse" href="http://caniuse.com/#feat=netinfo"></a>
<p>Get realtime information about your type of network connection.</p>
<p class="result"></p>
</li>
<li id="share">
<h3>Share</h3>
<a class="icon spec" href="https://www.w3.org/TR/web-share/"></a>
<a class="icon caniuse" href="https://caniuse.com/web-share"></a>
<p>Share links and files with other apps on your operating system.</p>
<button class='try'>Share Text</button>
<p class="result"></p>
</li>
</ul>
</body>
<script data-main="js/index.js" src="js/lib/require.js"></script>
</html>