-
Notifications
You must be signed in to change notification settings - Fork 2
Expand file tree
/
Copy pathindex.html
More file actions
215 lines (159 loc) · 11 KB
/
index.html
File metadata and controls
215 lines (159 loc) · 11 KB
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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML Media Capture Syntax Examples - addpipe.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- We're using https://highlightjs.org/ to syntax highlight or HTML code -->
<link rel="stylesheet" href="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.18.0/build/styles/atom-one-dark.min.css">
<script src="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.18.0/build/highlight.min.js"></script>
<style>
body {
line-height: 1.5;
font-family: sans-serif;
word-wrap: break-word;
overflow-wrap: break-word;
color:black;
margin:2em;
}
h1 {
text-decoration: underline red;
text-decoration-thickness: 3px;
text-underline-offset: 6px;
font-size: 220%;
font-weight: bold;
}
h2 {
font-weight: bold;
color: #005A9C;
font-size: 140%;
text-transform: uppercase;
}
p {
margin: 1em 0;
}
pre {
padding: 0px;
border:0px;
border-radius: 0px;
}
red {
color: red;
}
</style>
</head>
<body>
<form action="server.cgi" method="post" enctype="multipart/form-data">
<h1>HTML Media Capture Examples</h1>
<p><small>Made by the <a href="https://addpipe.com" target="_blank">Pipe Video Recording Platform</a></small></p>
<p>These examples are based on the latest <strong>HTML Media Capture</strong> spec, a <em>W3C Recommendation</em> spec from 01 February 2018 (<a href="https://www.w3.org/TR/2018/REC-html-media-capture-20180201/" target="_blank">link</a>).</p>
<p>As opposed to earlier versions of the spec, the <code>capture</code> attribute is now an <em>enumerated attribute</em> (list of strings) instead of a boolean. The change allows the developer to specify the <strong>preferrerd</strong> facing mode (user or environment) when recording straight from the hardware (camera, microphone, etc.).</p>
<hr>
<h2>Video recording: single file</h2>
<p><strong>Example 1:</strong> The simplest way to use HTML Media Capture for capturing video is to use the following line. It should allow the user to both select a video from the library AND record a new video on the spot.</p>
<pre><code class="html"><input type="file" accept="video/*" ></code></pre>
<p class="example"><input type="file" accept="video/*" ></p>
<p><strong>Example 2:</strong> If you add the <code>capture</code> attribute (as boolean) the camera app should pop up instantly without letting the user select an existing file from the library.</h3>
<pre><code class="html"><input type="file" accept="video/*" capture></code></pre>
<p class="example"><input type="file" accept="video/*" capture></p>
<p><strong>Example 3 & 4:</strong> Per the <a href="https://www.w3.org/TR/2018/REC-html-media-capture-20180201/" target="_blank">newer versions of the spec</a> you can indicate your <strong>preferred</strong> facing mode for the camera: front (user) or back (environment). Use the 2 examples below to test support for these new values on your browser, OS or device.</h3>
<pre><code class="html"><input type="file" accept="video/*" capture="user" ></code></pre>
<p class="example"><input type="file" accept="video/*" capture="user"></p>
<pre><code class="html"><input type="file" accept="video/*" capture="environment" ></code></pre>
<p class="example"><input type="file" accept="video/*" capture="environment"></p>
<!--
<h3><code>capture</code> as string (camcorder is preferred)</h3>
<p><code><input type="file" accept="video/*" capture="camcorder"></code></p>
<p><input type="file" accept="video/*" capture="camcorder"></p>
<h3><code>capture</code> as string (filesystem is preferred)</h3>
<p><code><input type="file" accept="video/*" capture="filesystem"></code></p>
<p><input type="file" accept="video/*" capture="filesystem"></p>
<h3><code>capture</code> part of accept (camcorder is preferred)</h3>
<p><code><input type="file" accept="video/*;capture=camcorder"></code></p>
<p><input type="file" accept="video/*;capture=camcorder"></p>
-->
<hr>
<h2>Video recoring: multiple files</h2>
<p><strong>Example 5:</strong> By using the <code>multiple</code> attribute, users will be allowed to select multiple videos from their library. This works on Safari on iOS which is the device I've tested on multiple times. Make sure you omit the <code>capture</code> attribute here, otherwise the option to choose existing files from the library might not be presented.</p>
<pre><code class="html"><input type="file" accept="video/*" multiple></code></pre>
<p><input type="file" accept="video/*" multiple></p>
<!--
<h3><code>capture</code> as boolean (camera app should pop up)</h3>
<p><code><input type="file" accept="video/*" multiple capture></code></p>
<p><input type="file" accept="video/*" multiple capture></p>
<h3><code>capture</code> as string (camcorder is preferred)</h3>
<p><code><input type="file" accept="video/*" multiple capture="camcorder"></code></p>
<p><input type="file" accept="video/*" multiple capture="camcorder"></p>
<h3><code>capture</code> as string (filesystem is preferred)</h3>
<p><code><input type="file" accept="video/*" multiple capture="filesystem"></code></p>
<p><input type="file" accept="video/*" multiple capture="filesystem"></p>
<h3><code>capture</code> part of accept (camcorder is preferred)</h3>
<p><code><input type="file" accept="video/*;capture=camcorder" multiple></code></p>
<p><input type="file" accept="video/*;capture=camcorder" multiple></p>
-->
<hr>
<h2>Audio recording: single file</h2>
<p><strong>Example 6:</strong> Asking for an audio recording instead of a video recording is as simple as changing the value of the <code>accept</code> attribute to <code>audio/*</code>. Audio only recording does not work on iOS (tested up to 13.3) and one some Android devices.</p>
<pre><code class="html"><input type="file" accept="audio/*" ></code></pre>
<p><input type="file" accept="audio/*" ></p>
<p> <strong>Example 7:</strong> Adding the <code>capture</code> attribute here should force a new audio recording instead of allowing the user to select an existing one from the library. <red>This crashed Safari on all versions of iOS 13 (tested up to 13.3) (<a href="https://bugs.webkit.org/show_bug.cgi?id=202039" target="_blank">reported bug</a>).</red></p>
<pre><code class="html"><input type="file" accept="audio/*" capture></code></pre>
<p><input type="file" accept="audio/*" capture></p>
<!--
<h3><code>capture</code> as string (mic is preferred)</h3>
<p><code><input type="file" accept="audio/*" capture="microphone"></code></p>
<p><input type="file" accept="audio/*" capture="microphone"></p>
<h3><code>capture</code> as string (filesystem is preferred)</h3>
<p><code><input type="file" accept="audio/*" capture="filesystem"></code></p>
<p><input type="file" accept="audio/*" capture="filesystem"></p>
<h3><code>capture</code> part of accept (mic is preferred)</h3>
<p><code><input type="file" accept="audio/*;capture=microphone"></code></p>
<p><input type="file" accept="audio/*;capture=microphone"></p>
-->
<hr>
<h2>Photo: single file</h2>
<p><strong>Example 8:</strong> This code allows the user to select a photo from his or her library OR take a new one using the camera app</p>
<pre><code class="html"><input type="file" accept="image/*" ></code></pre>
<p><input type="file" accept="image/*" ></p>
<p><strong>Example 9:</strong> By adding the <code>capture</code> attribute users will be prompted to capture a photo on the spot using the camera app</p>
<pre><code class="html"><input type="file" accept="image/*" capture></code></pre>
<p><input type="file" accept="image/*" capture></p>
<p><strong>Example 10 & 11:</strong> Per the <a href="https://www.w3.org/TR/2018/REC-html-media-capture-20180201/" target="_blank">newer versions of the spec</a> you can indicate your <strong>preferred</strong> facing mode for the camera: front (user) or back (environment). Use the 2 examples below to test support for these new values on your browser, OS or device.</h3>
<pre><code class="html"><input type="file" accept="video/*" capture="user" ></code></pre>
<p class="example"><input type="file" accept="video/*" capture="user"></p>
<pre><code class="html"><input type="file" accept="video/*" capture="environment" ></code></pre>
<p class="example"><input type="file" accept="video/*" capture="environment"></p>
<!--
<h3><code>capture</code> as string (camera is preferred)</h3>
<p><code><input type="file" accept="image/*" capture="camera"></code></p>
<p><input type="file" accept="image/*" capture="camera"></p>
<h3><code>capture</code> as string (filesystem is preferred)</h3>
<p><code><input type="file" accept="image/*" capture="filesystem"></code></p>
<p><input type="file" accept="image/*" capture="filesystem"></p>
<h3><code>capture</code> part of accept (camera is preferred)</h3>
<p><code><input type="file" accept="image/*;capture=camera"></code></p>
<p><input type="file" accept="image/*;capture=camera"></p>
-->
<hr>
<h2>Photo or video: single file</h2>
<p><strong>Example 12:</strong> The code below should allow the user to select or capture a video OR a photo</p>
<pre><code class="html"><input type="file" accept="image/*,video/*" ></code></pre>
<p><input type="file" accept="image/*,video/*" ></p>
<p><strong>Example 13:</strong> The code below should allow the user to only capture a new video OR a photo</p>
<pre><code class="html"><input type="file" accept="image/*,video/*" capture></code></pre>
<p><input type="file" accept="image/*,video/*" capture></p>
<!--
<h3><code>capture</code> as string (camera is preferred)</h3>
<p><code><input type="file" accept="image/*,video/*" capture="camera"></code></p>
<p><input type="file" accept="image/*,video/*" capture="camera"></p>
-->
</form>
<hr>
<p>Original article for this blog post: <a href="https://blog.addpipe.com/correct-syntax-html-media-capture/" target="_blank">https://blog.addpipe.com/correct-syntax-html-media-capture/</a></p>
<p>Code for this page on GitHub: <a href="https://github.com/addpipe/HTML-Media-Capture-Correct-Syntax" target="_blank">https://github.com/addpipe/HTML-Media-Capture-Correct-Syntax</a></p>
<!-- Let's trigger that syntax highlighting -->
<script>hljs.initHighlightingOnLoad();</script>
</body>
</html>