Skip to content

Commit 3a2276e

Browse files
muaz-khanmuaz-khan
committed
Added: [email protected] Fixed & updated MRecordRTC
1 parent 9596ed6 commit 3a2276e

File tree

11 files changed

+158
-75
lines changed

11 files changed

+158
-75
lines changed

‎MRecordRTC/README.md

Lines changed: 20 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,12 @@ recorder.mediaType = {
2323
video: true, // or WhammyRecorder
2424
gif: true // or GifRecorder
2525
};
26+
// mimeType is optional and should be set only in advance cases.
27+
recorder.mimeType = {
28+
audio: 'audio/wav',
29+
video: 'video/webm',
30+
gif: 'image/gif'
31+
};
2632
recorder.startRecording();
2733
recorder.stopRecording(function(url, type) {
2834
document.querySelector(type).src = url;
@@ -81,6 +87,19 @@ recorder.mediaType = {
8187

8288
=
8389

90+
#### `mimeType`
91+
92+
```javascript
93+
// mimeType is optional and should be set only in advance cases.
94+
recorder.mimeType = {
95+
audio: 'audio/wav', // audio/ogg or audio/webm or audio/wav
96+
video: 'video/webm', // video/webm or video/vp8
97+
gif: 'image/gif'
98+
};
99+
```
100+
101+
=
102+
84103
#### `getDataURL`
85104

86105
```javascript
@@ -196,18 +215,6 @@ recorder.video = recorder.canvas = {
196215

197216
=
198217

199-
[RecordRTC](https://www.webrtc-experiment.com/RecordRTC/) is a server-less (entire client-side) JavaScript library can be used to record WebRTC audio/video media streams. It supports cross-browser audio/video recording.
200-
201-
1. [RecordRTC to Node.js](https://github.com/muaz-khan/WebRTC-Experiment/tree/master/RecordRTC/RecordRTC-to-Nodejs)
202-
2. [RecordRTC to PHP](https://github.com/muaz-khan/WebRTC-Experiment/tree/master/RecordRTC/RecordRTC-to-PHP)
203-
3. [RecordRTC to ASP.NET MVC](https://github.com/muaz-khan/WebRTC-Experiment/tree/master/RecordRTC/RecordRTC-to-ASPNETMVC)
204-
4. [RecordRTC & HTML-2-Canvas i.e. Canvas/HTML Recording!](https://github.com/muaz-khan/WebRTC-Experiment/tree/master/RecordRTC/Canvas-Recording)
205-
5. [MRecordRTC i.e. Multi-RecordRTC!](https://github.com/muaz-khan/WebRTC-Experiment/tree/master/RecordRTC/MRecordRTC)
206-
6. [RecordRTC on Ruby!](https://github.com/cbetta/record-rtc-experiment)
207-
7. [RecordRTC over Socket.io](https://github.com/muaz-khan/WebRTC-Experiment/tree/master/RecordRTC/RecordRTC-over-Socketio)
208-
209-
=
210-
211218
## License
212219

213-
[RecordRTC.js](https://github.com/muaz-khan/WebRTC-Experiment/tree/master/RecordRTC) is released under [MIT licence](https://www.webrtc-experiment.com/licence/) . Copyright (c) [Muaz Khan](https://plus.google.com/+MuazKhan).
220+
[RecordRTC.js](https://github.com/muaz-khan/RecordRTC) is released under [MIT licence](https://www.webrtc-experiment.com/licence/) . Copyright (c) [Muaz Khan](https://www.MuazKhan.com/).

‎MRecordRTC/index.html

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -194,7 +194,7 @@ <h2 class="header">
194194

195195
mRecordRTC.addStream(stream);
196196
mRecordRTC.startRecording();
197-
}, function(errro) {
197+
}, function(error) {
198198
alert(JSON.stringify(error));
199199
});
200200
};
@@ -311,6 +311,12 @@ <h2 class="header">
311311
video: true,
312312
gif: true
313313
};
314+
// mimeType is optional and should be set only in advance cases.
315+
recorder.mimeType = {
316+
audio: 'audio/wav',
317+
video: 'video/webm',
318+
gif: 'image/gif'
319+
};
314320
recorder.startRecording();
315321
recorder.stopRecording(function(url, type) {
316322
document.querySelector(type).src = url;

‎README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -91,7 +91,7 @@ E.g.
9191

9292
```html
9393
<!-- use 5.2.6 or any other version -->
94-
<script src="https://github.com/muaz-khan/RecordRTC/releases/download/5.2.9/RecordRTC.js"></script>
94+
<script src="https://github.com/muaz-khan/RecordRTC/releases/download/5.3.0/RecordRTC.js"></script>
9595
```
9696

9797
There are some other NPM packages regarding RecordRTC:

‎RecordRTC.js

Lines changed: 63 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
'use strict';
22

3-
// Last time updated: 2016-02-25 9:01:21 AM UTC
3+
// Last time updated: 2016-02-26 8:45:42 AM UTC
44

55
// Open-Sourced: https://github.com/muaz-khan/RecordRTC
66

@@ -67,10 +67,6 @@ function RecordRTC(mediaStream, config) {
6767
}
6868

6969
function initRecorder(initCallback) {
70-
if (!config.disableLogs) {
71-
console.debug('initializing ' + config.type + ' stream recorder.');
72-
}
73-
7470
if (initCallback) {
7571
config.initCallback = function() {
7672
initCallback();
@@ -82,6 +78,10 @@ function RecordRTC(mediaStream, config) {
8278

8379
mediaRecorder = new Recorder(mediaStream, config);
8480
mediaRecorder.record();
81+
82+
if (!config.disableLogs) {
83+
console.debug('Initialized recorderType:', mediaRecorder.constructor.name, 'for output-type:', config.type);
84+
}
8585
}
8686

8787
function stopRecording(callback) {
@@ -759,8 +759,8 @@ function GetRecorderType(mediaStream, config) {
759759
recorder = config.recorderType;
760760
}
761761

762-
if (!config.disableLogs && isChrome && recorder === MediaStreamRecorder) {
763-
console.debug('Using MediaRecorder API in chrome!');
762+
if (!config.disableLogs && !!recorder && !!recorder.name) {
763+
console.debug('Using recorderType:', recorder.name || recorder.constructor.name);
764764
}
765765

766766
return recorder;
@@ -780,9 +780,15 @@ function GetRecorderType(mediaStream, config) {
780780
* var recorder = new MRecordRTC();
781781
* recorder.addStream(MediaStream);
782782
* recorder.mediaType = {
783-
* audio: true,
784-
* video: true,
785-
* gif: true
783+
* audio: true, // or StereoAudioRecorder or MediaStreamRecorder
784+
* video: true, // or WhammyRecorder or MediaStreamRecorder
785+
* gif: true // or GifRecorder
786+
* };
787+
* // mimeType is optional and should be set only in advance cases.
788+
* recorder.mimeType = {
789+
* audio: 'audio/wav',
790+
* video: 'video/webm',
791+
* gif: 'image/gif'
786792
* };
787793
* recorder.startRecording();
788794
* @see For further information:
@@ -833,6 +839,11 @@ function MRecordRTC(mediaStream) {
833839
this.startRecording = function() {
834840
var mediaType = this.mediaType;
835841
var recorderType;
842+
var mimeType = this.mimeType || {
843+
audio: null,
844+
video: null,
845+
gif: null
846+
};
836847

837848
if (typeof mediaType.audio !== 'function' && isMediaRecorderCompatible() && mediaStream && mediaStream.getAudioTracks && mediaStream.getAudioTracks().length && mediaStream.getVideoTracks().length) {
838849
// Firefox is supporting both audio/video in single blob
@@ -850,7 +861,8 @@ function MRecordRTC(mediaStream) {
850861
sampleRate: this.sampleRate,
851862
numberOfAudioChannels: this.numberOfAudioChannels || 2,
852863
disableLogs: this.disableLogs,
853-
recorderType: recorderType
864+
recorderType: recorderType,
865+
mimeType: mimeType.audio
854866
});
855867
if (!mediaType.video) {
856868
this.audioRecorder.startRecording();
@@ -862,13 +874,33 @@ function MRecordRTC(mediaStream) {
862874
if (typeof mediaType.video === 'function') {
863875
recorderType = mediaType.video;
864876
}
865-
this.videoRecorder = new RecordRTC(mediaStream, {
877+
878+
var newStream = mediaStream;
879+
880+
if (isMediaRecorderCompatible() && !!mediaType.audio && typeof mediaType.audio === 'function') {
881+
var videoTrack = mediaStream.getVideoTracks()[0];
882+
883+
if (!!navigator.mozGetUserMedia) {
884+
newStream = new MediaStream();
885+
newStream.addTrack(videoTrack);
886+
887+
if (recorderType && recorderType === WhammyRecorder) {
888+
// Firefox is NOT supporting webp-encoding yet
889+
recorderType = MediaStreamRecorder;
890+
}
891+
} else {
892+
newStream = new MediaStream([videoTrack]);
893+
}
894+
}
895+
896+
this.videoRecorder = new RecordRTC(newStream, {
866897
type: 'video',
867898
video: this.video,
868899
canvas: this.canvas,
869900
frameInterval: this.frameInterval || 10,
870901
disableLogs: this.disableLogs,
871-
recorderType: recorderType
902+
recorderType: recorderType,
903+
mimeType: mimeType.video
872904
});
873905
if (!mediaType.audio) {
874906
this.videoRecorder.startRecording();
@@ -896,7 +928,8 @@ function MRecordRTC(mediaStream) {
896928
frameRate: this.frameRate || 200,
897929
quality: this.quality || 10,
898930
disableLogs: this.disableLogs,
899-
recorderType: recorderType
931+
recorderType: recorderType,
932+
mimeType: mimeType.gif
900933
});
901934
this.gifRecorder.startRecording();
902935
}
@@ -1428,22 +1461,21 @@ function MediaStreamRecorder(mediaStream, config) {
14281461
mimeType: 'video/webm'
14291462
};
14301463

1431-
// if user chosen only audio option; and he tried to pass MediaStream with
1432-
// both audio and video tracks;
1433-
// using a dirty workaround to generate audio-only stream so that we can get audio/ogg output.
1434-
if (!!navigator.mozGetUserMedia && config.type && config.type === 'audio') {
1435-
if (mediaStream.getVideoTracks && mediaStream.getVideoTracks().length) {
1436-
var context = new AudioContext();
1437-
var mediaStreamSource = context.createMediaStreamSource(mediaStream);
1438-
1439-
var destination = context.createMediaStreamDestination();
1440-
mediaStreamSource.connect(destination);
1441-
1442-
mediaStream = destination.stream;
1464+
if (config.type === 'audio') {
1465+
if (mediaStream.getVideoTracks().length && mediaStream.getAudioTracks().length) {
1466+
var stream;
1467+
if (!!navigator.mozGetUserMedia) {
1468+
stream = new MediaStream();
1469+
stream.addTrack(mediaStream.getAudioTracks()[0]);
1470+
} else {
1471+
// webkitMediaStream
1472+
stream = new MediaStream(mediaStream.getAudioTracks());
1473+
}
1474+
mediaStream = stream;
14431475
}
14441476

14451477
if (!config.mimeType || config.mimeType.indexOf('audio') === -1) {
1446-
config.mimeType = 'audio/ogg';
1478+
config.mimeType = isChrome ? 'audio/webm' : 'audio/ogg';
14471479
}
14481480
}
14491481

@@ -1530,7 +1562,6 @@ function MediaStreamRecorder(mediaStream, config) {
15301562
if (mediaRecorder.state !== 'inactive' && mediaRecorder.state !== 'stopped') {
15311563
mediaRecorder.stop();
15321564
}
1533-
// self.record(0);
15341565
};
15351566

15361567
// void start(optional long mTimeSlice)
@@ -1663,7 +1694,11 @@ function MediaStreamRecorder(mediaStream, config) {
16631694
this.resume = function() {
16641695
if (this.dontFireOnDataAvailableEvent) {
16651696
this.dontFireOnDataAvailableEvent = false;
1697+
1698+
var disableLogs = config.disableLogs;
1699+
config.disableLogs = true;
16661700
this.record();
1701+
config.disableLogs = disableLogs;
16671702
return;
16681703
}
16691704

‎RecordRTC.min.js

Lines changed: 3 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎bower.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "recordrtc",
3-
"version": "5.2.9",
3+
"version": "5.3.0",
44
"authors": [
55
{
66
"name": "Muaz Khan",

‎dev/GetRecorderType.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -57,8 +57,8 @@ function GetRecorderType(mediaStream, config) {
5757
recorder = config.recorderType;
5858
}
5959

60-
if (!config.disableLogs && isChrome && recorder === MediaStreamRecorder) {
61-
console.debug('Using MediaRecorder API in chrome!');
60+
if (!config.disableLogs && !!recorder && !!recorder.name) {
61+
console.debug('Using recorderType:', recorder.name || recorder.constructor.name);
6262
}
6363

6464
return recorder;

‎dev/MRecordRTC.js

Lines changed: 40 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,15 @@
1212
* var recorder = new MRecordRTC();
1313
* recorder.addStream(MediaStream);
1414
* recorder.mediaType = {
15-
* audio: true,
16-
* video: true,
17-
* gif: true
15+
* audio: true, // or StereoAudioRecorder or MediaStreamRecorder
16+
* video: true, // or WhammyRecorder or MediaStreamRecorder
17+
* gif: true // or GifRecorder
18+
* };
19+
* // mimeType is optional and should be set only in advance cases.
20+
* recorder.mimeType = {
21+
* audio: 'audio/wav',
22+
* video: 'video/webm',
23+
* gif: 'image/gif'
1824
* };
1925
* recorder.startRecording();
2026
* @see For further information:
@@ -65,6 +71,11 @@ function MRecordRTC(mediaStream) {
6571
this.startRecording = function() {
6672
var mediaType = this.mediaType;
6773
var recorderType;
74+
var mimeType = this.mimeType || {
75+
audio: null,
76+
video: null,
77+
gif: null
78+
};
6879

6980
if (typeof mediaType.audio !== 'function' && isMediaRecorderCompatible() && mediaStream && mediaStream.getAudioTracks && mediaStream.getAudioTracks().length && mediaStream.getVideoTracks().length) {
7081
// Firefox is supporting both audio/video in single blob
@@ -82,7 +93,8 @@ function MRecordRTC(mediaStream) {
8293
sampleRate: this.sampleRate,
8394
numberOfAudioChannels: this.numberOfAudioChannels || 2,
8495
disableLogs: this.disableLogs,
85-
recorderType: recorderType
96+
recorderType: recorderType,
97+
mimeType: mimeType.audio
8698
});
8799
if (!mediaType.video) {
88100
this.audioRecorder.startRecording();
@@ -94,13 +106,33 @@ function MRecordRTC(mediaStream) {
94106
if (typeof mediaType.video === 'function') {
95107
recorderType = mediaType.video;
96108
}
97-
this.videoRecorder = new RecordRTC(mediaStream, {
109+
110+
var newStream = mediaStream;
111+
112+
if (isMediaRecorderCompatible() && !!mediaType.audio && typeof mediaType.audio === 'function') {
113+
var videoTrack = mediaStream.getVideoTracks()[0];
114+
115+
if (!!navigator.mozGetUserMedia) {
116+
newStream = new MediaStream();
117+
newStream.addTrack(videoTrack);
118+
119+
if (recorderType && recorderType === WhammyRecorder) {
120+
// Firefox is NOT supporting webp-encoding yet
121+
recorderType = MediaStreamRecorder;
122+
}
123+
} else {
124+
newStream = new MediaStream([videoTrack]);
125+
}
126+
}
127+
128+
this.videoRecorder = new RecordRTC(newStream, {
98129
type: 'video',
99130
video: this.video,
100131
canvas: this.canvas,
101132
frameInterval: this.frameInterval || 10,
102133
disableLogs: this.disableLogs,
103-
recorderType: recorderType
134+
recorderType: recorderType,
135+
mimeType: mimeType.video
104136
});
105137
if (!mediaType.audio) {
106138
this.videoRecorder.startRecording();
@@ -128,7 +160,8 @@ function MRecordRTC(mediaStream) {
128160
frameRate: this.frameRate || 200,
129161
quality: this.quality || 10,
130162
disableLogs: this.disableLogs,
131-
recorderType: recorderType
163+
recorderType: recorderType,
164+
mimeType: mimeType.gif
132165
});
133166
this.gifRecorder.startRecording();
134167
}

0 commit comments

Comments
 (0)