forked from mozdevs/MediaRecorder-examples
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
40 lines (37 loc) · 3 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
<!doctype html>
<head>
<title>MediaRecorder examples</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css" type="text/css">
</head>
<body>
<header>
<h1><a href="index.html">MediaRecorder examples</a></h1>
<a href="https://github.com/mozdevs/mediarecorder"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/38ef81f8aca64bb9a64448d0d70f1308ef5341ab/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png"></a>
</header>
<main>
<p>Here is a collection of examples using the <a href="https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder_API">MediaRecorder</a> API.
You can also take a look at <a href="https://mozdevs.github.io/boo/">Boo!</a>,
a fun <em>videobooth</em> that combines all of these techniques together.
</p>
<ul>
<li><a href="display-live-video-and-audio-from-mediadevices-getusermedia.html">Display live video and audio from <code>MediaDevices.getUserMedia</code></a>.</li>
<li><a href="record-live-audio.html">Record live audio</a>.</li>
<li><a href="record-video-and-audio.html">Record live video and audio</a>.</li>
<li><a href="using-live-audio-in-web-audio-context.html">Using live audio in Web Audio context (with a <code>MediaStreamAudioSource</code> node)</a>.</li>
<li><a href="render-video-into-canvas.html">Render a video stream into a <code>canvas</code></a>.</li>
<li><a href="render-and-filter-video-into-canvas.html">Render and filter a video stream into a <code>canvas</code></a>.</li>
<li><a href="get-canvas-stream.html">Get a video stream from a <code>canvas</code> (with <code>canvas.captureStream()</code>)</a>.</li>
<li><a href="record-canvas-to-video.html">Record <code>canvas</code> to video (with <code>canvas.captureStream()</code>)</a>.</li>
<li><a href="add-beep-to-silent-video.html">Add a computer generated 'beep' to a silent live video stream (using Web Audio and manipulating <code>MediaStreamTrack</code> and <code>MediaStream</code>)</a>.</li>
<li><a href="mediastream-constructor.html">Creating new streams with the <code>MediaStream</code> constructor</a>.</li>
<li><a href="media-recorder-mimetypes.html">Use <code>MediaRecorder</code> with different mimetypes</a>.</li>
<li><a href="filter-and-record-live-audio.html">Filter and record live audio</a>.</li>
<li><a href="filter-and-record-live-video.html">Filter and record live video</a>.</li>
<li><a href="looping-mosaic.html">Capture one second videos with audio, and loop the last twenty on the screen</a>.</li>
<li><a href="download-blob.html">Download a file <code>Blob</code></a>.</li>
</ul>
<p>With love,<br>The MediaRecorder fairies</p>
</main>
</body>