├── .gitignore
├── LICENSE
├── README.md
├── add-beep-to-silent-video.html
├── add-beep-to-silent-video.js
├── display-live-video-and-audio-from-mediadevices-getusermedia.html
├── display-live-video-and-audio-from-mediadevices-getusermedia.js
├── download-blob.html
├── download-blob.js
├── filter-and-record-live-audio.html
├── filter-and-record-live-audio.js
├── filter-and-record-live-video.html
├── filter-and-record-live-video.js
├── get-canvas-stream.html
├── get-canvas-stream.js
├── index.html
├── looping-mosaic.html
├── looping-mosaic.js
├── media-recorder-mimetypes.html
├── media-recorder-mimetypes.js
├── mediastream-constructor.html
├── mediastream-constructor.js
├── record-canvas-to-video.html
├── record-canvas-to-video.js
├── record-live-audio.html
├── record-live-audio.js
├── record-video-and-audio.html
├── record-video-and-audio.js
├── render-and-filter-video-into-canvas.html
├── render-and-filter-video-into-canvas.js
├── render-video-into-canvas.html
├── render-video-into-canvas.js
├── styles.css
├── using-live-audio-in-web-audio-context.html
└── using-live-audio-in-web-audio-context.js
/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 |
5 | # Runtime data
6 | pids
7 | *.pid
8 | *.seed
9 |
10 | # Directory for instrumented libs generated by jscoverage/JSCover
11 | lib-cov
12 |
13 | # Coverage directory used by tools like istanbul
14 | coverage
15 |
16 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
17 | .grunt
18 |
19 | # node-waf configuration
20 | .lock-wscript
21 |
22 | # Compiled binary addons (http://nodejs.org/api/addons.html)
23 | build/Release
24 |
25 | # Dependency directory
26 | # https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git
27 | node_modules
28 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | Mozilla Public License, version 2.0
2 |
3 | 1. Definitions
4 |
5 | 1.1. "Contributor"
6 |
7 | means each individual or legal entity that creates, contributes to the
8 | creation of, or owns Covered Software.
9 |
10 | 1.2. "Contributor Version"
11 |
12 | means the combination of the Contributions of others (if any) used by a
13 | Contributor and that particular Contributor's Contribution.
14 |
15 | 1.3. "Contribution"
16 |
17 | means Covered Software of a particular Contributor.
18 |
19 | 1.4. "Covered Software"
20 |
21 | means Source Code Form to which the initial Contributor has attached the
22 | notice in Exhibit A, the Executable Form of such Source Code Form, and
23 | Modifications of such Source Code Form, in each case including portions
24 | thereof.
25 |
26 | 1.5. "Incompatible With Secondary Licenses"
27 | means
28 |
29 | a. that the initial Contributor has attached the notice described in
30 | Exhibit B to the Covered Software; or
31 |
32 | b. that the Covered Software was made available under the terms of
33 | version 1.1 or earlier of the License, but not also under the terms of
34 | a Secondary License.
35 |
36 | 1.6. "Executable Form"
37 |
38 | means any form of the work other than Source Code Form.
39 |
40 | 1.7. "Larger Work"
41 |
42 | means a work that combines Covered Software with other material, in a
43 | separate file or files, that is not Covered Software.
44 |
45 | 1.8. "License"
46 |
47 | means this document.
48 |
49 | 1.9. "Licensable"
50 |
51 | means having the right to grant, to the maximum extent possible, whether
52 | at the time of the initial grant or subsequently, any and all of the
53 | rights conveyed by this License.
54 |
55 | 1.10. "Modifications"
56 |
57 | means any of the following:
58 |
59 | a. any file in Source Code Form that results from an addition to,
60 | deletion from, or modification of the contents of Covered Software; or
61 |
62 | b. any new file in Source Code Form that contains any Covered Software.
63 |
64 | 1.11. "Patent Claims" of a Contributor
65 |
66 | means any patent claim(s), including without limitation, method,
67 | process, and apparatus claims, in any patent Licensable by such
68 | Contributor that would be infringed, but for the grant of the License,
69 | by the making, using, selling, offering for sale, having made, import,
70 | or transfer of either its Contributions or its Contributor Version.
71 |
72 | 1.12. "Secondary License"
73 |
74 | means either the GNU General Public License, Version 2.0, the GNU Lesser
75 | General Public License, Version 2.1, the GNU Affero General Public
76 | License, Version 3.0, or any later versions of those licenses.
77 |
78 | 1.13. "Source Code Form"
79 |
80 | means the form of the work preferred for making modifications.
81 |
82 | 1.14. "You" (or "Your")
83 |
84 | means an individual or a legal entity exercising rights under this
85 | License. For legal entities, "You" includes any entity that controls, is
86 | controlled by, or is under common control with You. For purposes of this
87 | definition, "control" means (a) the power, direct or indirect, to cause
88 | the direction or management of such entity, whether by contract or
89 | otherwise, or (b) ownership of more than fifty percent (50%) of the
90 | outstanding shares or beneficial ownership of such entity.
91 |
92 |
93 | 2. License Grants and Conditions
94 |
95 | 2.1. Grants
96 |
97 | Each Contributor hereby grants You a world-wide, royalty-free,
98 | non-exclusive license:
99 |
100 | a. under intellectual property rights (other than patent or trademark)
101 | Licensable by such Contributor to use, reproduce, make available,
102 | modify, display, perform, distribute, and otherwise exploit its
103 | Contributions, either on an unmodified basis, with Modifications, or
104 | as part of a Larger Work; and
105 |
106 | b. under Patent Claims of such Contributor to make, use, sell, offer for
107 | sale, have made, import, and otherwise transfer either its
108 | Contributions or its Contributor Version.
109 |
110 | 2.2. Effective Date
111 |
112 | The licenses granted in Section 2.1 with respect to any Contribution
113 | become effective for each Contribution on the date the Contributor first
114 | distributes such Contribution.
115 |
116 | 2.3. Limitations on Grant Scope
117 |
118 | The licenses granted in this Section 2 are the only rights granted under
119 | this License. No additional rights or licenses will be implied from the
120 | distribution or licensing of Covered Software under this License.
121 | Notwithstanding Section 2.1(b) above, no patent license is granted by a
122 | Contributor:
123 |
124 | a. for any code that a Contributor has removed from Covered Software; or
125 |
126 | b. for infringements caused by: (i) Your and any other third party's
127 | modifications of Covered Software, or (ii) the combination of its
128 | Contributions with other software (except as part of its Contributor
129 | Version); or
130 |
131 | c. under Patent Claims infringed by Covered Software in the absence of
132 | its Contributions.
133 |
134 | This License does not grant any rights in the trademarks, service marks,
135 | or logos of any Contributor (except as may be necessary to comply with
136 | the notice requirements in Section 3.4).
137 |
138 | 2.4. Subsequent Licenses
139 |
140 | No Contributor makes additional grants as a result of Your choice to
141 | distribute the Covered Software under a subsequent version of this
142 | License (see Section 10.2) or under the terms of a Secondary License (if
143 | permitted under the terms of Section 3.3).
144 |
145 | 2.5. Representation
146 |
147 | Each Contributor represents that the Contributor believes its
148 | Contributions are its original creation(s) or it has sufficient rights to
149 | grant the rights to its Contributions conveyed by this License.
150 |
151 | 2.6. Fair Use
152 |
153 | This License is not intended to limit any rights You have under
154 | applicable copyright doctrines of fair use, fair dealing, or other
155 | equivalents.
156 |
157 | 2.7. Conditions
158 |
159 | Sections 3.1, 3.2, 3.3, and 3.4 are conditions of the licenses granted in
160 | Section 2.1.
161 |
162 |
163 | 3. Responsibilities
164 |
165 | 3.1. Distribution of Source Form
166 |
167 | All distribution of Covered Software in Source Code Form, including any
168 | Modifications that You create or to which You contribute, must be under
169 | the terms of this License. You must inform recipients that the Source
170 | Code Form of the Covered Software is governed by the terms of this
171 | License, and how they can obtain a copy of this License. You may not
172 | attempt to alter or restrict the recipients' rights in the Source Code
173 | Form.
174 |
175 | 3.2. Distribution of Executable Form
176 |
177 | If You distribute Covered Software in Executable Form then:
178 |
179 | a. such Covered Software must also be made available in Source Code Form,
180 | as described in Section 3.1, and You must inform recipients of the
181 | Executable Form how they can obtain a copy of such Source Code Form by
182 | reasonable means in a timely manner, at a charge no more than the cost
183 | of distribution to the recipient; and
184 |
185 | b. You may distribute such Executable Form under the terms of this
186 | License, or sublicense it under different terms, provided that the
187 | license for the Executable Form does not attempt to limit or alter the
188 | recipients' rights in the Source Code Form under this License.
189 |
190 | 3.3. Distribution of a Larger Work
191 |
192 | You may create and distribute a Larger Work under terms of Your choice,
193 | provided that You also comply with the requirements of this License for
194 | the Covered Software. If the Larger Work is a combination of Covered
195 | Software with a work governed by one or more Secondary Licenses, and the
196 | Covered Software is not Incompatible With Secondary Licenses, this
197 | License permits You to additionally distribute such Covered Software
198 | under the terms of such Secondary License(s), so that the recipient of
199 | the Larger Work may, at their option, further distribute the Covered
200 | Software under the terms of either this License or such Secondary
201 | License(s).
202 |
203 | 3.4. Notices
204 |
205 | You may not remove or alter the substance of any license notices
206 | (including copyright notices, patent notices, disclaimers of warranty, or
207 | limitations of liability) contained within the Source Code Form of the
208 | Covered Software, except that You may alter any license notices to the
209 | extent required to remedy known factual inaccuracies.
210 |
211 | 3.5. Application of Additional Terms
212 |
213 | You may choose to offer, and to charge a fee for, warranty, support,
214 | indemnity or liability obligations to one or more recipients of Covered
215 | Software. However, You may do so only on Your own behalf, and not on
216 | behalf of any Contributor. You must make it absolutely clear that any
217 | such warranty, support, indemnity, or liability obligation is offered by
218 | You alone, and You hereby agree to indemnify every Contributor for any
219 | liability incurred by such Contributor as a result of warranty, support,
220 | indemnity or liability terms You offer. You may include additional
221 | disclaimers of warranty and limitations of liability specific to any
222 | jurisdiction.
223 |
224 | 4. Inability to Comply Due to Statute or Regulation
225 |
226 | If it is impossible for You to comply with any of the terms of this License
227 | with respect to some or all of the Covered Software due to statute,
228 | judicial order, or regulation then You must: (a) comply with the terms of
229 | this License to the maximum extent possible; and (b) describe the
230 | limitations and the code they affect. Such description must be placed in a
231 | text file included with all distributions of the Covered Software under
232 | this License. Except to the extent prohibited by statute or regulation,
233 | such description must be sufficiently detailed for a recipient of ordinary
234 | skill to be able to understand it.
235 |
236 | 5. Termination
237 |
238 | 5.1. The rights granted under this License will terminate automatically if You
239 | fail to comply with any of its terms. However, if You become compliant,
240 | then the rights granted under this License from a particular Contributor
241 | are reinstated (a) provisionally, unless and until such Contributor
242 | explicitly and finally terminates Your grants, and (b) on an ongoing
243 | basis, if such Contributor fails to notify You of the non-compliance by
244 | some reasonable means prior to 60 days after You have come back into
245 | compliance. Moreover, Your grants from a particular Contributor are
246 | reinstated on an ongoing basis if such Contributor notifies You of the
247 | non-compliance by some reasonable means, this is the first time You have
248 | received notice of non-compliance with this License from such
249 | Contributor, and You become compliant prior to 30 days after Your receipt
250 | of the notice.
251 |
252 | 5.2. If You initiate litigation against any entity by asserting a patent
253 | infringement claim (excluding declaratory judgment actions,
254 | counter-claims, and cross-claims) alleging that a Contributor Version
255 | directly or indirectly infringes any patent, then the rights granted to
256 | You by any and all Contributors for the Covered Software under Section
257 | 2.1 of this License shall terminate.
258 |
259 | 5.3. In the event of termination under Sections 5.1 or 5.2 above, all end user
260 | license agreements (excluding distributors and resellers) which have been
261 | validly granted by You or Your distributors under this License prior to
262 | termination shall survive termination.
263 |
264 | 6. Disclaimer of Warranty
265 |
266 | Covered Software is provided under this License on an "as is" basis,
267 | without warranty of any kind, either expressed, implied, or statutory,
268 | including, without limitation, warranties that the Covered Software is free
269 | of defects, merchantable, fit for a particular purpose or non-infringing.
270 | The entire risk as to the quality and performance of the Covered Software
271 | is with You. Should any Covered Software prove defective in any respect,
272 | You (not any Contributor) assume the cost of any necessary servicing,
273 | repair, or correction. This disclaimer of warranty constitutes an essential
274 | part of this License. No use of any Covered Software is authorized under
275 | this License except under this disclaimer.
276 |
277 | 7. Limitation of Liability
278 |
279 | Under no circumstances and under no legal theory, whether tort (including
280 | negligence), contract, or otherwise, shall any Contributor, or anyone who
281 | distributes Covered Software as permitted above, be liable to You for any
282 | direct, indirect, special, incidental, or consequential damages of any
283 | character including, without limitation, damages for lost profits, loss of
284 | goodwill, work stoppage, computer failure or malfunction, or any and all
285 | other commercial damages or losses, even if such party shall have been
286 | informed of the possibility of such damages. This limitation of liability
287 | shall not apply to liability for death or personal injury resulting from
288 | such party's negligence to the extent applicable law prohibits such
289 | limitation. Some jurisdictions do not allow the exclusion or limitation of
290 | incidental or consequential damages, so this exclusion and limitation may
291 | not apply to You.
292 |
293 | 8. Litigation
294 |
295 | Any litigation relating to this License may be brought only in the courts
296 | of a jurisdiction where the defendant maintains its principal place of
297 | business and such litigation shall be governed by laws of that
298 | jurisdiction, without reference to its conflict-of-law provisions. Nothing
299 | in this Section shall prevent a party's ability to bring cross-claims or
300 | counter-claims.
301 |
302 | 9. Miscellaneous
303 |
304 | This License represents the complete agreement concerning the subject
305 | matter hereof. If any provision of this License is held to be
306 | unenforceable, such provision shall be reformed only to the extent
307 | necessary to make it enforceable. Any law or regulation which provides that
308 | the language of a contract shall be construed against the drafter shall not
309 | be used to construe this License against a Contributor.
310 |
311 |
312 | 10. Versions of the License
313 |
314 | 10.1. New Versions
315 |
316 | Mozilla Foundation is the license steward. Except as provided in Section
317 | 10.3, no one other than the license steward has the right to modify or
318 | publish new versions of this License. Each version will be given a
319 | distinguishing version number.
320 |
321 | 10.2. Effect of New Versions
322 |
323 | You may distribute the Covered Software under the terms of the version
324 | of the License under which You originally received the Covered Software,
325 | or under the terms of any subsequent version published by the license
326 | steward.
327 |
328 | 10.3. Modified Versions
329 |
330 | If you create software not governed by this License, and you want to
331 | create a new license for such software, you may create and use a
332 | modified version of this License if you rename the license and remove
333 | any references to the name of the license steward (except to note that
334 | such modified license differs from this License).
335 |
336 | 10.4. Distributing Source Code Form that is Incompatible With Secondary
337 | Licenses If You choose to distribute Source Code Form that is
338 | Incompatible With Secondary Licenses under the terms of this version of
339 | the License, the notice described in Exhibit B of this License must be
340 | attached.
341 |
342 | Exhibit A - Source Code Form License Notice
343 |
344 | This Source Code Form is subject to the
345 | terms of the Mozilla Public License, v.
346 | 2.0. If a copy of the MPL was not
347 | distributed with this file, You can
348 | obtain one at
349 | http://mozilla.org/MPL/2.0/.
350 |
351 | If it is not possible or desirable to put the notice in a particular file,
352 | then You may include the notice in a location (such as a LICENSE file in a
353 | relevant directory) where a recipient would be likely to look for such a
354 | notice.
355 |
356 | You may add additional accurate notices of copyright ownership.
357 |
358 | Exhibit B - "Incompatible With Secondary Licenses" Notice
359 |
360 | This Source Code Form is "Incompatible
361 | With Secondary Licenses", as defined by
362 | the Mozilla Public License, v. 2.0.
363 |
364 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # MediaRecorder
2 |
3 | This is a collection of [MediaRecorder](https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder_API) examples.
4 |
5 | You can take a look at the [examples online](http://mozdevs.github.io/MediaRecorder-examples).
6 |
7 | ## Requirements
8 |
9 | ### Hardware requirements
10 |
11 | - A working webcam
12 | - Speakers or audio output
13 |
14 | ### Software requirements
15 |
16 | - **Firefox 45**. This is a Firefox technical demo. So it might not work on your browser, if it doesn't implement what we're demoing. At the time of writing (January 2016), you need to download either [Firefox Developer Edition](https://www.mozilla.org/firefox/developer/) or [Firefox Nightly](https://nightly.mozilla.org).
17 | - Support for `canvas.captureStream` (this lets us get a video stream out of a canvas tag)
18 | - Support for `MediaRecorder` (this lets us encode a video file natively in the browser, without using additional JS libraries)
19 |
20 | Note: `MediaRecorder` is an upcoming API part of the [W3C MediaCapture](https://w3c.github.io/mediacapture-record/MediaRecorder.html) standard. `canvas.captureStream` is based on [another part of the same W3C standard](https://w3c.github.io/mediacapture-fromelement/#widl-HTMLCanvasElement-captureStream-CanvasCaptureMediaStream-double-frameRate). There's nothing proprietary or exclusive to Firefox here, other than the fact that other browsers do not implement these features yet. Once they do, these examples will work in them too!
21 |
22 | ## How to run the examples
23 |
24 | Just [download](https://github.com/mozdevs/MediaRecorder-examples/archive/gh-pages.zip) this repository and open `index.html` in your browser (see requirements above). It can't be easier!
25 |
--------------------------------------------------------------------------------
/add-beep-to-silent-video.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | MediaRecorder examples - Add computer generated beep to silent live video stream
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
Add computer generated 'beep' to silent live video stream (using Web Audio and manipulating MediaStreamTrack and MediaStream).
14 |
15 |
16 |
17 |
18 |
--------------------------------------------------------------------------------
/add-beep-to-silent-video.js:
--------------------------------------------------------------------------------
1 | // This example uses MediaDevices.getUserMedia to add a computer generated
2 | // 'beep' to a silent live video stream,
3 | // An audio stream is generated using Web Audio, the audio track is
4 | // taken out of that stream and added to the original stream
5 | // A video element will display both the live video and the 'beep'
6 | // generated with an oscillator within the Web Audio context
7 | //
8 | // The relevant functions in use are:
9 | //
10 | // navigator.mediaDevices.getUserMedia -> to get live video stream from webcam
11 | // AudioContext.createMediaStreamDestination -> to create a stream with audio out of a Web AudioContext
12 | // Stream.getAudioTracks -> to get only the audio tracks from a stream
13 | // Stream.addTrack -> to add a track to an existing stream
14 | // AudioContext.createOscillator -> create node that generates a beep
15 | // AudioContext.createMediaStreamDestination -> create node that exposes stream property
16 | // URL.createObjectURL -> to create a URL for the stream, which we can use as src for the video
17 |
18 |
19 | window.onload = function () {
20 |
21 | // request video stream from the user's webcam
22 | navigator.mediaDevices.getUserMedia({
23 | video: true
24 | })
25 | .then(function (stream) {
26 | var video = document.createElement('video');
27 | video.controls = true;
28 | var main = document.querySelector('main');
29 | main.appendChild(video);
30 |
31 | var audioContext = new AudioContext();
32 | var oscillator = audioContext.createOscillator();
33 | oscillator.frequency.value = 110;
34 | var streamAudioDestination = audioContext.createMediaStreamDestination();
35 | oscillator.connect(streamAudioDestination);
36 | oscillator.start();
37 |
38 | // add audio track from audiocontext with beep
39 | var audioStream = streamAudioDestination.stream;
40 | var audioTracks = audioStream.getAudioTracks();
41 | var firstAudioTrack = audioTracks[0];
42 | stream.addTrack(firstAudioTrack);
43 |
44 | video.src = URL.createObjectURL(stream);
45 | video.play();
46 |
47 | });
48 |
49 | };
50 |
51 |
--------------------------------------------------------------------------------
/display-live-video-and-audio-from-mediadevices-getusermedia.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | MediaRecorder examples - Display live video and audio from mediaDevices.getUserMedia
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
Display live video and audio from MediaDevices.getUserMedia
14 |
15 |
16 |
17 |
18 |
--------------------------------------------------------------------------------
/display-live-video-and-audio-from-mediadevices-getusermedia.js:
--------------------------------------------------------------------------------
1 | // This example uses MediaDevices.getUserMedia to get an audio and video stream,
2 | // and then displays it in a video element
3 | //
4 | // The relevant functions in use are:
5 | //
6 | // navigator.mediaDevices.getUserMedia -> to get live audio + video stream from webcam
7 | // URL.createObjectURL -> to create a URL for the stream, which we can use as src for the video
8 |
9 | window.onload = function () {
10 |
11 | // request video and audio stream from the user's webcam
12 | navigator.mediaDevices.getUserMedia({
13 | audio: true,
14 | video: true
15 | })
16 | .then(function (stream) {
17 | var video = document.createElement('video');
18 | var main = document.querySelector('main');
19 | main.appendChild(video);
20 | video.src = URL.createObjectURL(stream);
21 | video.play();
22 | });
23 |
24 | };
25 |
26 |
--------------------------------------------------------------------------------
/download-blob.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | MediaRecorder examples - Download a file blob
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
16 |
17 |
18 |
19 |
--------------------------------------------------------------------------------
/filter-and-record-live-audio.js:
--------------------------------------------------------------------------------
1 | // This example uses MediaRecorder to record a filtered audio stream and use the
2 | // resulting blob as a source for an audio element.
3 | //
4 | // The relevant functions in use are:
5 | //
6 | // navigator.mediaDevices.getUserMedia -> to get audio stream from mic
7 | // AudioContext (constructor) and the various types of nodes to manipulate sound
8 | // MediaRecorder (constructor) -> create a MediaRecorder with a stream
9 | // MediaRecorder.ondataavailable -> event to listen to when a record is ready
10 | // MediaRecorder.start -> start recording
11 | // MediaRecorder.stop -> stop recording (this will generate a blob of data)
12 | // URL.createObjectURL -> to create a URL from a blob, which we can use as src
13 |
14 | var recordButton, stopButton, recorder;
15 |
16 | window.onload = function () {
17 | recordButton = document.getElementById('record');
18 | stopButton = document.getElementById('stop');
19 |
20 | // get audio stream from user's mic
21 | navigator.mediaDevices.getUserMedia({
22 | audio: true
23 | })
24 | .then(function (stream) {
25 | recordButton.disabled = false;
26 | recordButton.addEventListener('click', startRecording);
27 | stopButton.addEventListener('click', stopRecording);
28 |
29 | // Create a Web Audio based pipeline to modify the input sound in real time
30 | var audioContext = new AudioContext();
31 | var now = audioContext.currentTime;
32 |
33 |
34 | // We'll build a pipeline like this
35 | // stream -> MediaStreamSource -> filter -> outputNode
36 | // where the frequency of the filter changes automatically with an oscillator + gain
37 | var inputNode = audioContext.createMediaStreamSource(stream);
38 | var filter = audioContext.createBiquadFilter();
39 | filter.frequency.setValueAtTime(1000, now);
40 | filter.type = 'highpass';
41 | filter.Q.value = 40;
42 | var oscillator = audioContext.createOscillator();
43 | oscillator.frequency.setValueAtTime(0.5, now);
44 | oscillator.start();
45 | var gain = audioContext.createGain();
46 | gain.gain.setValueAtTime(1000, now);
47 | oscillator.connect(gain);
48 | gain.connect(filter.frequency);
49 |
50 | var outputNode = audioContext.createMediaStreamDestination();
51 | inputNode.connect(filter);
52 | filter.connect(outputNode);
53 |
54 | // create a new MediaRecorder and pipe the filtered audio stream to it
55 | recorder = new MediaRecorder(outputNode.stream);
56 |
57 | // listen to dataavailable, which gets triggered whenever we have
58 | // an audio blob available
59 | recorder.addEventListener('dataavailable', function (evt) {
60 | updateAudio(evt.data);
61 | });
62 |
63 | // Work around for bug https://bugzilla.mozilla.org/show_bug.cgi?id=934512
64 | window.dontGCThis = stream;
65 |
66 | });
67 | };
68 |
69 | function startRecording() {
70 | // enable/disable buttons
71 | recordButton.disabled = true;
72 | stopButton.disabled = false;
73 |
74 | // make the MediaRecorder start recording
75 | recorder.start();
76 | }
77 |
78 | function stopRecording() {
79 | // enable/disable buttons
80 | recordButton.disabled = false;
81 | stopButton.disabled = true;
82 |
83 | // make MediaRecorder stop recording
84 | // eventually this will trigger the dataavailable event
85 | recorder.stop();
86 | }
87 |
88 | function updateAudio(blob) {
89 | var audio = document.getElementById('audio');
90 | // use the blob from the MediaRecorder as source for the audio tag
91 | audio.src = URL.createObjectURL(blob);
92 | audio.play();
93 | }
94 |
--------------------------------------------------------------------------------
/filter-and-record-live-video.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | MediaRecorder examples - Use MediaRecorder to record an altered video
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
25 |
26 |
27 |
--------------------------------------------------------------------------------
/filter-and-record-live-video.js:
--------------------------------------------------------------------------------
1 | // This example records an altered video stream with MediaRecorder, and uses
2 | // the resulting blob as the source of a video tag.
3 | // The altered video stream is generated by getting the user's camera video,
4 | // render it to a canvas and apply a filter to it there.
5 | //
6 | // The relevant functions used are:
7 | //
8 | // navigator.mediaDevices.getUserMedia -> to get a video stream from the webcam
9 | // requestAnimationFrame -> to create a render loop (better than setTimeout)
10 | // CanvasRenderingContext2D.drawImage -> to draw the video stream
11 | // CanvasRenderingContext2D.getImageData -> to read the canvas pixels
12 | // CanvasRenderingContext2D.putImageData -> to write the canvas pixels
13 | // CanvasRenderingContext2D.captureStream -> get a video stream from a canvas
14 | // MediaRecorder (contructor) -> create a MediaRecorder with a stream
15 | // MediaRecorder.ondataavailable -> event to listen to when a record is ready
16 | // MediaRecorder.start -> start recording
17 | // MediaRecorder.stop -> stop recording (this will generate a blob of data)
18 | // URL.createObjectURL -> to create a URL from a blob, which we can use as src
19 |
20 | var recordButton, stopButton, recorder, recordingLabel;
21 |
22 | window.onload = function () {
23 | recordButton = document.getElementById('record');
24 | stopButton = document.getElementById('stop');
25 | recordingLabel = document.getElementById('recording');
26 |
27 | recordButton.addEventListener('click', startRecording);
28 | stopButton.addEventListener('click', stopRecording);
29 |
30 | // get video stream from user's webcam
31 | navigator.mediaDevices.getUserMedia({
32 | video: true
33 | })
34 | .then(function (stream) {
35 | recordButton.disabled = false;
36 |
37 |
38 | // We need to create a video element and pipe the stream into it so we
39 | // can know when we have data in the stream, and its width/height
40 | // (and adjust the canvas element accordingly).
41 | // Note that this video doesn't need to be attached to the DOM for this
42 | // to work.
43 | var video = document.createElement('video');
44 | video.src = URL.createObjectURL(stream);
45 | video.addEventListener('loadedmetadata', function () {
46 | initCanvas(video);
47 | });
48 | // we need to play the video to trigger the loadedmetadata event
49 | video.play();
50 | });
51 | };
52 |
53 | function initCanvas(video) {
54 | var width = video.videoWidth;
55 | var height = video.videoHeight;
56 |
57 | // NOTE: In order to make the example simpler, we have opted to use a 2D
58 | // context. In a real application, you should use WebGL to render the
59 | // video and shaders to make filters, since it will be much faster.
60 | // You can see an example of this in Boo! https://github.com/mozdevs/boo
61 | var canvas = document.getElementById('canvas');
62 | canvas.width = width;
63 | canvas.height = height;
64 |
65 | // use requestAnimationFrame to render the video as often as possible
66 | var ctx = canvas.getContext('2d');
67 | var draw = function () {
68 | // create a renderAnimationFrame loop
69 | requestAnimationFrame(draw);
70 | // draw the video data into the canvas
71 | ctx.drawImage(video, 0, 0, width, height);
72 | // apply a custom filter to the image
73 | applyFilter(ctx, width, height);
74 | };
75 |
76 | draw();
77 | initRecorderWithCanvas(canvas);
78 | }
79 |
80 | function applyFilter(ctx, width, height) {
81 | // read pixels
82 | var imageData = ctx.getImageData(0, 0, width, height);
83 | var data = imageData.data; // data is an array of pixels in RGBA
84 |
85 | // modify pixels
86 | for (var i = 0; i < data.length; i+=4) {
87 | var average = (data[i] + data[i + 1] + data[i + 2]) / 3;
88 | data[i] = average >= 128 ? 255 : 0; // red
89 | data[i + 1] = average >= 128 ? 255 : 0; // green
90 | data[i + 2] = average >= 128 ? 255 : 0; // blue
91 | // note: i+3 is the alpha channel, we are skipping that one
92 | }
93 |
94 | // render pixels back
95 | ctx.putImageData(imageData, 0, 0);
96 | }
97 |
98 | function initRecorderWithCanvas(canvas) {
99 | // create a new MediaRecorder and pipe the canvas stream to it
100 | var stream = canvas.captureStream(24); // build a 24 fps stream
101 | recorder = new MediaRecorder(stream);
102 | // listen to dataavailable, which gets triggered whenever we have
103 | // an audio blob available
104 | recorder.addEventListener('dataavailable', function (evt) {
105 | updateVideo(evt.data);
106 | });
107 | }
108 |
109 | function startRecording() {
110 | recordButton.disabled = true;
111 | stopButton.disabled = false;
112 | recordingLabel.style = 'display:inline';
113 |
114 | recorder.start();
115 | }
116 |
117 | function stopRecording() {
118 | recordButton.disabled = false;
119 | stopButton.disabled = true;
120 | recordingLabel.style = 'display:none';
121 |
122 | // eventually this will trigger the dataavailable event
123 | recorder.stop();
124 | }
125 |
126 | function updateVideo(blob) {
127 | var video = document.getElementById('video');
128 | // use the blob from MediaRecorder as source for the video tag
129 | video.src = URL.createObjectURL(blob);
130 | video.controls = true;
131 | video.play();
132 | }
133 |
--------------------------------------------------------------------------------
/get-canvas-stream.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | MediaRecorder examples - Get a video stream from canvas
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
Get a video stream from a canvas element - the video displays what happens on the canvas
14 |
15 |
16 |
17 |
18 |
This is a canvas element
19 |
20 |
21 |
22 |
This is a video element
23 |
24 |
25 |
26 |
--------------------------------------------------------------------------------
/get-canvas-stream.js:
--------------------------------------------------------------------------------
1 | // This example gets a video stream from a canvas and renders it in a video
2 | // element.
3 | //
4 | // The relevant functions in use are:
5 | //
6 | // requestAnimationFrame -> to create a render loop (better than setTimeout)
7 | // canvas.captureStream -> to get a stream from a canvas
8 | // URL.createObjectURL -> to create a URL from a stream so we can use it as src
9 |
10 | window.onload = function () {
11 | var canvas = document.getElementById('canvas');
12 | var video = document.getElementById('video');
13 |
14 | var width = canvas.width;
15 | var height = canvas.height;
16 | video.width = width;
17 | video.height = height;
18 |
19 | // we need to get the context first before trying to get a canvas stream
20 | var ctx = canvas.getContext('2d');
21 |
22 | // pipe a canvas stream into a video element
23 | pipeCanvasIntoVideo(canvas, video);
24 |
25 | // This will render a rectangle that will fade from black to bright red and
26 | // then cycle back
27 | var red = 0;
28 | var inc = 1;
29 | var draw = function () {
30 | requestAnimationFrame(draw); // create a render loop
31 |
32 | // cycle between 0..255 and reverse
33 | red += inc * 2;
34 | if (red < 0) {
35 | red = 0;
36 | inc = 1;
37 | }
38 | else if (red > 255) {
39 | red = 255;
40 | inc = -1;
41 | }
42 |
43 | // draw a red rectangle covering the full canvas
44 | ctx.fillStyle = 'rgb(' + red + ', 0, 0)';
45 | ctx.fillRect(0, 0, width, height);
46 | };
47 |
48 | draw();
49 | };
50 |
51 | function pipeCanvasIntoVideo(canvas, video) {
52 | var stream = canvas.captureStream(15); // build a 15 fps stream
53 | video.src = URL.createObjectURL(stream);
54 | video.play();
55 | }
56 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | MediaRecorder examples
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
Here is a collection of examples using the MediaRecorder API.
16 | You can also take a look at Boo!,
17 | a fun videobooth that combines all of these techniques together.
18 |
Creating new streams with the MediaStream constructor
14 |
15 |
16 |
17 |
18 |
--------------------------------------------------------------------------------
/mediastream-constructor.js:
--------------------------------------------------------------------------------
1 | // This example uses MediaDevices.getUserMedia to get an audio and video stream,
2 | // then we create a new stream using the MediaStream constructor, extract the tracks
3 | // from the original stream, add them to the new stream we created and finally display
4 | // it in a video element
5 | //
6 | // The relevant functions in use are:
7 | //
8 | // navigator.mediaDevices.getUserMedia -> to get live audio + video stream from webcam
9 | // MediaStream.getTracks(), MediaStream.addTrack() -> to get and add tracks from/to a stream
10 | // MediaStream() constructor -> to create a new stream
11 | // URL.createObjectURL -> to create a URL for the stream, which we can use as src for the video
12 |
13 |
14 | window.onload = function () {
15 |
16 | // request video and audio stream from the user's webcam
17 | navigator.mediaDevices.getUserMedia({
18 | audio: true,
19 | video: true
20 | })
21 | .then(function (stream) {
22 | var video = document.createElement('video');
23 | var main = document.querySelector('main');
24 | main.appendChild(video);
25 |
26 | // Create a new stream
27 | var newStream = new MediaStream();
28 |
29 | // If we display this stream right now, it will have nothing to show
30 | // We need to add some tracks, which we'll take from the initial stream
31 | var tracks = stream.getTracks();
32 | tracks.forEach(function(t) {
33 | newStream.addTrack(t);
34 | });
35 |
36 | // Finally we create a URL to display this newStream we created
37 | video.src = URL.createObjectURL(newStream);
38 | video.play();
39 | });
40 |
41 | };
42 |
43 |
44 |
--------------------------------------------------------------------------------
/record-canvas-to-video.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | MediaRecorder examples - Record canvas to video
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
This example renders white noise in a canvas for three seconds and records the output in a video clip, using canvas.captureStream and MediaRecorder
15 |
16 |
17 |
18 |
19 |
This is a canvas element
20 |
21 |
22 |
23 |
This is a video element
24 |
25 |
26 |
27 |
--------------------------------------------------------------------------------
/record-canvas-to-video.js:
--------------------------------------------------------------------------------
1 | // This example gets a video stream from a canvas on which we will draw
2 | // black and white noise, and captures it to a video
3 | //
4 | // The relevant functions in use are:
5 | //
6 | // requestAnimationFrame -> to create a render loop (better than setTimeout)
7 | // canvas.captureStream -> to get a stream from a canvas
8 | // context.getImageData -> to get access to the canvas pixels
9 | // URL.createObjectURL -> to create a URL from a stream so we can use it as src
10 |
11 | window.onload = function () {
12 | var video = document.getElementById('video');
13 | var canvas = document.getElementById('canvas');
14 | var width = canvas.width;
15 | var height = canvas.height;
16 | var capturing = false;
17 |
18 | video.width = width;
19 | video.height = height;
20 |
21 | // We need the 2D context to individually manipulate pixel data
22 | var ctx = canvas.getContext('2d');
23 |
24 | // Start with a black background
25 | ctx.fillStyle = '#000';
26 | ctx.fillRect(0, 0, width, height);
27 |
28 | // Since we're continuously accessing and overwriting the pixels
29 | // object, we'll request it once and reuse it across calls to draw()
30 | // for best performance (we don't need to create ImageData objects
31 | // on every frame)
32 | var pixels = ctx.getImageData(0, 0, width, height);
33 | var data = pixels.data;
34 | var numPixels = data.length;
35 |
36 | var stream = canvas.captureStream(15);
37 | var recorder = new MediaRecorder(stream);
38 |
39 | recorder.addEventListener('dataavailable', finishCapturing);
40 |
41 | startCapturing();
42 | recorder.start();
43 |
44 | setTimeout(function() {
45 | recorder.stop();
46 | }, 2000);
47 |
48 |
49 | function startCapturing() {
50 | capturing = true;
51 | draw();
52 | }
53 |
54 |
55 | function finishCapturing(e) {
56 | capturing = false;
57 | var videoData = [ e.data ];
58 | var blob = new Blob(videoData, { 'type': 'video/webm' });
59 | var videoURL = URL.createObjectURL(blob);
60 | video.src = videoURL;
61 | video.play();
62 | }
63 |
64 |
65 | function draw() {
66 | // We don't want to render again if we're not capturing
67 | if(capturing) {
68 | requestAnimationFrame(draw);
69 | }
70 | drawWhiteNoise();
71 | }
72 |
73 |
74 | function drawWhiteNoise() {
75 | var offset = 0;
76 |
77 | for(var i = 0; i < numPixels; i++) {
78 | var grey = Math.round(Math.random() * 255);
79 |
80 | // The data array has pixel values in RGBA order
81 | // (Red, Green, Blue and Alpha for transparency)
82 | // We will make R, G and B have the same value ('grey'),
83 | // then skip the Alpha value by increasing the offset,
84 | // as we're happy with the opaque value we set when painting
85 | // the background black at the beginning
86 | data[offset++] = grey;
87 | data[offset++] = grey;
88 | data[offset++] = grey;
89 | offset++; // skip the alpha component
90 | }
91 |
92 | // And tell the context to draw the updated pixels in the canvas
93 | ctx.putImageData(pixels, 0, 0);
94 | }
95 |
96 | };
97 |
98 |
--------------------------------------------------------------------------------
/record-live-audio.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | MediaRecorder examples - Record live audio
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
15 |
16 |
17 |
18 |
19 |
20 |
--------------------------------------------------------------------------------
/render-and-filter-video-into-canvas.js:
--------------------------------------------------------------------------------
1 | // This example renders a video stream from the user's webcam into a canvas
2 | // element, and then applies a filter to it.
3 | //
4 | // The relevant functions used are:
5 | //
6 | // navigator.mediaDevices.getUserMedia -> to get a video stream from the webcam
7 | // requestAnimationFrame -> to create a render loop (better than setTimeout)
8 | // CanvasRenderingContext2D.drawImage -> to draw the video stream
9 | // CanvasRenderingContext2D.getImageData -> to read the canvas pixels
10 | // CanvasRenderingContext2D.putImageData -> to write the canvas pixels
11 |
12 | var cutOff = 128;
13 |
14 | window.onload = function () {
15 | // get video stream from user's webcam
16 | navigator.mediaDevices.getUserMedia({
17 | video: true
18 | })
19 | .then(function (stream) {
20 | // We'll use an input element to modify the cutOff variable
21 | // (used as parameter for the image filter we apply later)
22 | var cutOffInput = document.getElementById('cutoff');
23 | cutOffInput.addEventListener('input', function(e) {
24 | cutOff = Math.round(cutOffInput.value);
25 | });
26 |
27 | // We need to create a video element and pipe the stream into it so we
28 | // can know when we have data in the stream, and its width/height.
29 | // Note that this video doesn't need to be attached to the DOM for this
30 | // to work.
31 | var video = document.createElement('video');
32 | video.src = URL.createObjectURL(stream);
33 | video.addEventListener('loadedmetadata', function () {
34 | initCanvas(video);
35 | });
36 | // we need to play the video to trigger the loadedmetadata event
37 | video.play();
38 | });
39 | };
40 |
41 | function initCanvas(video) {
42 | var width = video.videoWidth;
43 | var height = video.videoHeight;
44 |
45 | // NOTE: In order to make the example simpler, we have opted to use a 2D
46 | // context. In a real application, you should use WebGL shaders to
47 | // manipulate pixels, since it will be way faster.
48 | // You can see an example of this in Boo! https://github.com/mozdevs/boo
49 | var canvas = document.getElementById('video');
50 | canvas.width = width;
51 | canvas.height = height;
52 |
53 | // use requestAnimationFrame to render the video as often as possible
54 | var context = canvas.getContext('2d');
55 | var draw = function () {
56 | // schedule next call to this function
57 | requestAnimationFrame(draw);
58 |
59 | // draw video data into the canvas
60 | context.drawImage(video, 0, 0, width, height);
61 |
62 | // apply an image filter to the context
63 | applyFilter(context, width, height);
64 | };
65 |
66 | // Start the animation loop
67 | requestAnimationFrame(draw);
68 | }
69 |
70 | function applyFilter(context, width, height) {
71 | // read pixels
72 | var imageData = context.getImageData(0, 0, width, height);
73 | var data = imageData.data; // data is an array of pixels in RGBA
74 |
75 | // modify pixels applying a simple effect
76 | for (var i = 0; i < data.length; i+=4) {
77 | data[i] = data[i] >= cutOff ? 255 : 0; // red
78 | data[i + 1] = data[i + 1] >= cutOff ? 255 : 0; // green
79 | data[i + 2] = data[i + 2] >= cutOff ? 255 : 0; // blue
80 | // note: i+3 is the alpha channel, we are skipping that one
81 | }
82 |
83 | // render pixels back
84 | context.putImageData(imageData, 0, 0);
85 | }
86 |
--------------------------------------------------------------------------------
/render-video-into-canvas.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | MediaRecorder examples - Render and filter a video stream into a canvas
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
Using live audio in Web Audio context (with a MediaStreamSourceNode node)
14 |
You should hear the microphone sound through the speakers, if permission to access the microphone has been granted.
15 |
16 |
17 |
18 |
19 |
--------------------------------------------------------------------------------
/using-live-audio-in-web-audio-context.js:
--------------------------------------------------------------------------------
1 | // This example uses MediaDevices.getUserMedia to get a live audio stream,
2 | // and then bring it into a Web Audio context using a MediaStreamSourceNode
3 | //
4 | // The relevant functions in use are:
5 | //
6 | // navigator.mediaDevices.getUserMedia -> to get live audio stream from webcam
7 | // AudioContext.createMediaStreamSource -> to create a node that takes a MediaStream
8 | // as input and works as source of sound inside the audio graph
9 |
10 | window.onload = function () {
11 |
12 | // request audio stream from the user's webcam
13 | navigator.mediaDevices.getUserMedia({
14 | audio: true
15 | })
16 | .then(function (stream) {
17 | var audioContext = new AudioContext();
18 | var mediaStreamNode = audioContext.createMediaStreamSource(stream);
19 | mediaStreamNode.connect(audioContext.destination);
20 |
21 | // This is a temporary workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=934512
22 | // where the stream is collected too soon by the Garbage Collector
23 | window.doNotCollectThis = stream;
24 | });
25 |
26 | };
27 |
28 |
--------------------------------------------------------------------------------
14 |