-
Notifications
You must be signed in to change notification settings - Fork 51
/
Copy pathindex.html
63 lines (62 loc) · 3.93 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
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<base target="_blank">
<title>Media Recorder API Demo - addpipe.com</title>
<link rel="stylesheet" href="css/main.css" />
</head>
<body>
<div>
<h1>Media Recorder API Demo</h1>
<p><small>Made by the <a href="https://addpipe.com">Pipe Recording Platform</a></small></p>
<p>The demo below uses the <strong>MediaStream Recording API</strong> and <strong>getUserMedia()</strong> to record a 1280x720 video file. For more info check out our article: <a title="Media Recorder API in Action on Chrome and Firefox" target="_blank" href="https://blog.addpipe.com/mediarecorder-api/">Media Recorder API in Action on Chrome and Firefox</a>.</h2>
<div>
<video id="live" controls autoplay playsinline muted></video> <video id="playback" controls autoplay></video><br>
<div id="controls">
<button id="rec" onclick="onBtnRecordClicked()">Record</button>
<button id="pauseRes" onclick="onPauseResumeClicked()" disabled>Pause</button>
<button id="stop" onclick="onBtnStopClicked()" disabled>Stop</button>
<button id="stateButton" onclick="onStateClicked()">trace state</button>
</div>
</div>
<a id="downloadLink" download="mediarecorder.webm" name="mediarecorder.webm" href></a>
<p id="data"></p>
<script src="js/adapter-latest.js"></script>
<script src="js/main.js"></script>
</div>
<h2>Works on:</h2>
<ul><li>Firefox 30 and up</li><li>Chrome 47,48 (video only, enable <em>experimental Web Platform features</em> at <a href="chrome://flags/#enable-experimental-web-platform-features">chrome://flags</a>)</li><li>Chrome 49+</li><li>Safari 14.0.2+ on macOS</li><li>Safari on iOS 14.3+</li></ul>
<span style="color:red">Issues:</span>
<ul><li>Pause does not stop audio recording on Chrome 49,50</li></ul>
<h2>Containers & codecs:</h2>
<table style="width:100%" class="table table-striped">
<thead>
<tr>
<th> </th><th>Chrome 47 & 48</th><th>Chrome 49+</th><th>Chrome 52+</th><th>Firefox 30+</th><th>Safari 14.0.2+ on macOS</th><th>Safari on iOS 14.3+</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>Container</strong></td><td>webm</td><td>webm</td><td>webm</td><td>webm</td><td>mp4</td><td>mp4</td>
</tr>
<tr>
<td><strong>Video</strong></td><td>VP8</td><td>VP8/VP9</td><td>VP8/VP9/H264</td><td>VP8</td><td>H264</td><td>H264</td>
</tr>
<tr>
<td><strong>Audio</strong></td><td>none</td><td>Opus @ 48kHz</td><td>Opus @ 48kHz</td><td>Vorbis @ 44.1 kHz</td><td>Stereo AAC @ 48kHz</td><td>Stereo AAC @ 44.1kHz or 48kHz</td>
</tr>
</tbody>
</table>
<h2>Links:</h2>
<ul>
<li>Article associated with this demo: <a title="Media Recorder API in Action on Chrome and Firefox" target="_blank" href="https://blog.addpipe.com/mediarecorder-api/">Media Recorder API in Action on Chrome and Firefox</a></li>
<li>Code for this demo on GitHub: <a target="_blank" href="https://github.com/addpipe/Media-Recorder-API-Demo">https://github.com/addpipe/Media-Recorder-API-Demo</a></li>
<li>W3C Draft: <a target="_blank" href="http://w3c.github.io/mediacapture-record/MediaRecorder.html">http://w3c.github.io/mediacapture-record/MediaRecorder.html</a></li>
<li><a title="Media Recorder API is Now Supported by 65% of all Desktop Internet Users" target="_blank" href="https://blog.addpipe.com/media-recorder-api-is-now-supported-by-65-of-all-desktop-internet-users/">Media Recorder API at 65% penetration thanks to Chrome</a></li>
<li><a title="MediaStream Recorder API Now Available in Safari Technology Preview 73" href="https://blog.addpipe.com/safari-technology-preview-73-adds-limited-mediastream-recorder-api-support/">MediaStream Recorder API Now Available in Safari Technology Preview 73</a></li>
<li><a href="https://blog.addpipe.com/recording-audio-in-the-browser-using-pure-html5-and-minimal-javascript/">Recording audio in the browser using pure HTML5 and minimal JavaScript</a></li>
</ul>
</body>
</html>