Skip to content

Commit 0be5b89

Browse files
muaz-khanmuaz-khan
committed
1 parent 886e775 commit 0be5b89

File tree

9 files changed

+144
-96
lines changed

9 files changed

+144
-96
lines changed

‎.npmignore

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,11 @@
1-
node_modules
2-
lib-cov
3-
npm-debug.log
1+
# ignore everything
2+
*
3+
4+
# but not these files...
5+
!RecordRTC.js
6+
!RecordRTC.min.js
7+
!index.html
8+
!package.json
9+
!bower.json
10+
!npm-test.js
11+
!README.md

‎README.md

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -163,8 +163,8 @@ bower install recordrtc
163163
You can even link specific [releases](https://github.com/muaz-khan/RecordRTC/releases):
164164

165165
```html
166-
<!-- use 5.4.0 or any other version -->
167-
<script src="https://github.com/muaz-khan/RecordRTC/releases/download/5.4.0/RecordRTC.js"></script>
166+
<!-- use 5.4.1 or any other version -->
167+
<script src="https://github.com/muaz-khan/RecordRTC/releases/download/5.4.1/RecordRTC.js"></script>
168168
```
169169

170170
## How to capture stream?
@@ -574,6 +574,8 @@ var recordVideo = RecordRTC(MediaStream, options);
574574

575575
## `pauseRecording`
576576

577+
> Note: Firefox seems has a bug. It is unable to pause the recording. Seems internal bug because they correctly changes `mediaRecorder.state` from `recording` to `paused` but they are unable to pause internal recorders.
578+
577579
RecordRTC pauses recording buffers/frames.
578580

579581
```javascript

‎RecordRTC.js

Lines changed: 25 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
// Last time updated: 2017-02-10 4:43:51 AM UTC
1+
// Last time updated: 2017-02-13 9:58:18 AM UTC
22

33
// ________________
4-
// RecordRTC v5.4.0
4+
// RecordRTC v5.4.1
55

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

@@ -1743,6 +1743,14 @@ function MediaStreamRecorder(mediaStream, config) {
17431743
}
17441744

17451745
if (!e.data || !e.data.size || e.data.size < 100 || self.blob) {
1746+
// make sure that stopRecording always getting fired
1747+
// even if there is invalid data
1748+
if (self.recordingCallback) {
1749+
self.recordingCallback(new Blob([], {
1750+
type: recorderHints.mimeType || 'video/webm'
1751+
}));
1752+
self.recordingCallback = null;
1753+
}
17461754
return;
17471755
}
17481756

@@ -1755,7 +1763,7 @@ function MediaStreamRecorder(mediaStream, config) {
17551763
* });
17561764
*/
17571765
self.blob = config.getNativeBlob ? e.data : new Blob([e.data], {
1758-
type: config.mimeType || 'video/webm'
1766+
type: recorderHints.mimeType || 'video/webm'
17591767
});
17601768

17611769
if (self.recordingCallback) {
@@ -4053,10 +4061,6 @@ function MultiStreamRecorder(arrayOfMediaStreams, options) {
40534061

40544062
options = options || {
40554063
mimeType: 'video/webm',
4056-
canvas: {
4057-
width: window.screen.width,
4058-
height: window.screen.height
4059-
},
40604064
video: {
40614065
width: 320,
40624066
height: 240
@@ -4067,22 +4071,10 @@ function MultiStreamRecorder(arrayOfMediaStreams, options) {
40674071
options.frameInterval = 10;
40684072
}
40694073

4070-
if (!options.canvas) {
4071-
options.canvas = {};
4072-
}
4073-
40744074
if (!options.video) {
40754075
options.video = {};
40764076
}
40774077

4078-
if (!options.canvas.width) {
4079-
options.canvas.width = window.screen.width;
4080-
}
4081-
4082-
if (!options.canvas.height) {
4083-
options.canvas.height = window.screen.height;
4084-
}
4085-
40864078
if (!options.video.width) {
40874079
options.video.width = 320;
40884080
}
@@ -4117,6 +4109,9 @@ function MultiStreamRecorder(arrayOfMediaStreams, options) {
41174109
mimeType: 'video/webm'
41184110
});
41194111

4112+
canvas.width = videos.length > 1 ? videos[0].width * 2 : videos[0].width;
4113+
canvas.height = videos.length > 2 ? videos[0].height * 2 : videos[0].height;
4114+
41204115
drawVideosToCanvas();
41214116

41224117
mediaRecorder.record();
@@ -4217,62 +4212,56 @@ function MultiStreamRecorder(arrayOfMediaStreams, options) {
42174212
var videosLength = videos.length;
42184213
videos.forEach(function(video, idx) {
42194214
if (videosLength === 1) {
4220-
context.drawImage(video, 0, 0, canvas.width, canvas.height);
4215+
context.drawImage(video, 0, 0, video.width, video.height);
42214216
return;
42224217
}
42234218

42244219
if (videosLength === 2) {
42254220
var x = 0;
42264221
var y = 0;
4227-
var width = parseInt(canvas.width / 2);
4228-
var height = width;
42294222

42304223
if (idx === 1) {
4231-
x = width;
4224+
x = video.width;
42324225
}
42334226

4234-
context.drawImage(video, x, y, width, height);
4227+
context.drawImage(video, x, y, video.width, video.height);
42354228
return;
42364229
}
42374230

42384231
if (videosLength === 3) {
42394232
var x = 0;
42404233
var y = 0;
4241-
var width = parseInt(canvas.width / 2);
4242-
var height = parseInt(canvas.height / 2);
42434234

42444235
if (idx === 1) {
4245-
x = width;
4236+
x = video.width;
42464237
}
42474238

42484239
if (idx === 2) {
4249-
y = height;
4240+
y = video.height;
42504241
}
42514242

4252-
context.drawImage(video, x, y, width, height);
4243+
context.drawImage(video, x, y, video.width, video.height);
42534244
return;
42544245
}
42554246

42564247
if (videosLength === 4) {
42574248
var x = 0;
42584249
var y = 0;
4259-
var width = parseInt(canvas.width / 2);
4260-
var height = parseInt(canvas.height / 2);
42614250

42624251
if (idx === 1) {
4263-
x = width;
4252+
x = video.width;
42644253
}
42654254

42664255
if (idx === 2) {
4267-
y = height;
4256+
y = video.height;
42684257
}
42694258

42704259
if (idx === 3) {
4271-
x = width;
4272-
y = height;
4260+
x = video.width;
4261+
y = video.height;
42734262
}
42744263

4275-
context.drawImage(video, x, y, width, height);
4264+
context.drawImage(video, x, y, video.width, video.height);
42764265
return;
42774266
}
42784267
});
@@ -4283,9 +4272,6 @@ function MultiStreamRecorder(arrayOfMediaStreams, options) {
42834272
var canvas = document.createElement('canvas');
42844273
var context = canvas.getContext('2d');
42854274

4286-
canvas.width = options.canvas.width;
4287-
canvas.height = options.canvas.height;
4288-
42894275
canvas.style = 'opacity:0;position:absolute;z-index:-1;top: -100000000;left:-1000000000;';
42904276

42914277
document.body.appendChild(canvas);

‎RecordRTC.min.js

Lines changed: 4 additions & 4 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.4.0",
3+
"version": "5.4.1",
44
"authors": [
55
{
66
"name": "Muaz Khan",

‎dev/MediaStreamRecorder.js

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -136,6 +136,14 @@ function MediaStreamRecorder(mediaStream, config) {
136136
}
137137

138138
if (!e.data || !e.data.size || e.data.size < 100 || self.blob) {
139+
// make sure that stopRecording always getting fired
140+
// even if there is invalid data
141+
if (self.recordingCallback) {
142+
self.recordingCallback(new Blob([], {
143+
type: recorderHints.mimeType || 'video/webm'
144+
}));
145+
self.recordingCallback = null;
146+
}
139147
return;
140148
}
141149

@@ -148,7 +156,7 @@ function MediaStreamRecorder(mediaStream, config) {
148156
* });
149157
*/
150158
self.blob = config.getNativeBlob ? e.data : new Blob([e.data], {
151-
type: config.mimeType || 'video/webm'
159+
type: recorderHints.mimeType || 'video/webm'
152160
});
153161

154162
if (self.recordingCallback) {

‎dev/MultiStreamRecorder.js

Lines changed: 14 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -34,10 +34,6 @@ function MultiStreamRecorder(arrayOfMediaStreams, options) {
3434

3535
options = options || {
3636
mimeType: 'video/webm',
37-
canvas: {
38-
width: window.screen.width,
39-
height: window.screen.height
40-
},
4137
video: {
4238
width: 320,
4339
height: 240
@@ -48,22 +44,10 @@ function MultiStreamRecorder(arrayOfMediaStreams, options) {
4844
options.frameInterval = 10;
4945
}
5046

51-
if (!options.canvas) {
52-
options.canvas = {};
53-
}
54-
5547
if (!options.video) {
5648
options.video = {};
5749
}
5850

59-
if (!options.canvas.width) {
60-
options.canvas.width = window.screen.width;
61-
}
62-
63-
if (!options.canvas.height) {
64-
options.canvas.height = window.screen.height;
65-
}
66-
6751
if (!options.video.width) {
6852
options.video.width = 320;
6953
}
@@ -98,6 +82,9 @@ function MultiStreamRecorder(arrayOfMediaStreams, options) {
9882
mimeType: 'video/webm'
9983
});
10084

85+
canvas.width = videos.length > 1 ? videos[0].width * 2 : videos[0].width;
86+
canvas.height = videos.length > 2 ? videos[0].height * 2 : videos[0].height;
87+
10188
drawVideosToCanvas();
10289

10390
mediaRecorder.record();
@@ -198,62 +185,56 @@ function MultiStreamRecorder(arrayOfMediaStreams, options) {
198185
var videosLength = videos.length;
199186
videos.forEach(function(video, idx) {
200187
if (videosLength === 1) {
201-
context.drawImage(video, 0, 0, canvas.width, canvas.height);
188+
context.drawImage(video, 0, 0, video.width, video.height);
202189
return;
203190
}
204191

205192
if (videosLength === 2) {
206193
var x = 0;
207194
var y = 0;
208-
var width = parseInt(canvas.width / 2);
209-
var height = width;
210195

211196
if (idx === 1) {
212-
x = width;
197+
x = video.width;
213198
}
214199

215-
context.drawImage(video, x, y, width, height);
200+
context.drawImage(video, x, y, video.width, video.height);
216201
return;
217202
}
218203

219204
if (videosLength === 3) {
220205
var x = 0;
221206
var y = 0;
222-
var width = parseInt(canvas.width / 2);
223-
var height = parseInt(canvas.height / 2);
224207

225208
if (idx === 1) {
226-
x = width;
209+
x = video.width;
227210
}
228211

229212
if (idx === 2) {
230-
y = height;
213+
y = video.height;
231214
}
232215

233-
context.drawImage(video, x, y, width, height);
216+
context.drawImage(video, x, y, video.width, video.height);
234217
return;
235218
}
236219

237220
if (videosLength === 4) {
238221
var x = 0;
239222
var y = 0;
240-
var width = parseInt(canvas.width / 2);
241-
var height = parseInt(canvas.height / 2);
242223

243224
if (idx === 1) {
244-
x = width;
225+
x = video.width;
245226
}
246227

247228
if (idx === 2) {
248-
y = height;
229+
y = video.height;
249230
}
250231

251232
if (idx === 3) {
252-
x = width;
253-
y = height;
233+
x = video.width;
234+
y = video.height;
254235
}
255236

256-
context.drawImage(video, x, y, width, height);
237+
context.drawImage(video, x, y, video.width, video.height);
257238
return;
258239
}
259240
});
@@ -264,9 +245,6 @@ function MultiStreamRecorder(arrayOfMediaStreams, options) {
264245
var canvas = document.createElement('canvas');
265246
var context = canvas.getContext('2d');
266247

267-
canvas.width = options.canvas.width;
268-
canvas.height = options.canvas.height;
269-
270248
canvas.style = 'opacity:0;position:absolute;z-index:-1;top: -100000000;left:-1000000000;';
271249

272250
document.body.appendChild(canvas);

0 commit comments

Comments
 (0)