Skip to content

Commit 0c83808

Browse files
IegorKozakovdimaspirit
IegorKozakov
authored and
dimaspirit
committed
Video Recorder
Wrapper for mediaRecorder API
1 parent 6c878c3 commit 0c83808

File tree

11 files changed

+521
-31
lines changed

11 files changed

+521
-31
lines changed

‎.editorconfig‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
[*]
2+
charset = utf-8
3+
end_of_line = lf
4+
insert_final_newline = true
5+
6+
[*.{js}]
7+
indent_style = space
8+
indent_size = 4
9+
10+
[*.{json}]
11+
indent_size = 2

‎.travis.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,5 +8,5 @@ branches:
88

99
before_script: "npm run-script setDependencies"
1010

11-
script: "grunt"
11+
script: "npm run build"
1212
after_success: "jasmine"

‎Recorder.html‎

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Recorder</title>
6+
</head>
7+
<body>
8+
9+
<video id="localVideo"></video>
10+
11+
<div>
12+
<button id="start">Start recording</button>
13+
<button id="pause">Pause recording</button>
14+
<button id="resume">Resume recording</button>
15+
<button id="stop">Stop recording</button>
16+
</div>
17+
18+
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
19+
<script src="quickblox.js"></script>
20+
<script>
21+
/* globals QB*/
22+
'use strict';
23+
24+
var CONFIG = {
25+
debug: true,
26+
webrtc: {
27+
answerTimeInterval: 30,
28+
dialingTimeInterval: 5,
29+
disconnectTimeInterval: 30,
30+
statsReportTimeInterval: 5
31+
}
32+
};
33+
34+
var CREDS = {
35+
'appId': 39854,
36+
'authKey': 'JtensAa9y4AM5Yk',
37+
'authSecret': 'AsDFwwwxpr3LN5w'
38+
};
39+
40+
QB.init(CREDS.appId, CREDS.authKey, CREDS.authSecret, CONFIG.APP_CONFIG);
41+
42+
var calleesIds = [56, 76, 34]; // User's ids
43+
var sessionType = QB.webrtc.CallType.VIDEO; // AUDIO is also possible
44+
45+
46+
var mediaParams = {
47+
audio: true,
48+
video: true,
49+
elemId: 'localVideo'
50+
};
51+
52+
var recorder;
53+
var session;
54+
55+
$('#start').on('click', function() {
56+
session = QB.webrtc.createNewSession(calleesIds, sessionType);
57+
58+
session.getUserMedia(mediaParams, function(err, stream) {
59+
if(err){
60+
console.error('getUserMedia Error', err);
61+
} else {
62+
recorder = new QB.Recorder(stream, {
63+
callbacks: {
64+
onStartRecording: function startRecord() {
65+
console.log('Start recording...');
66+
},
67+
onErrorRecording: function errorRecord(error) {
68+
console.error('Record failed!', error);
69+
},
70+
onStopRecording: function stopRecord(blob) {
71+
console.log('Stop recording', blob);
72+
recorder.download(blob);
73+
},
74+
onPauseRecording: function pauseRecord() {
75+
console.log('Pause recording');
76+
},
77+
onResumeRecording: function resumeRecord() {
78+
console.log('Resume recording');
79+
}
80+
}
81+
});
82+
recorder.start();
83+
}
84+
});
85+
});
86+
87+
$('#pause').on('click', function() {
88+
recorder.pause();
89+
});
90+
91+
$('#resume').on('click', function() {
92+
recorder.resume();
93+
});
94+
95+
$('#stop').on('click', function() {
96+
recorder.stop();
97+
98+
session.stop({});
99+
session = {};
100+
});
101+
</script>
102+
</body>
103+
</html>

‎gulpfile.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,4 +45,4 @@ gulp.task('watch', function () {
4545
gulp.watch(['./src/**/*.js'], ['transform', 'uglify']);
4646
});
4747

48-
gulp.task('default', ['transform', 'uglify', 'connect', 'watch']);
48+
gulp.task('default', ['transform', 'uglify', 'connect', 'watch']);

‎package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,7 @@
4949
"babel-preset-es2015": "^6.16.0",
5050
"babelify": "^7.3.0",
5151
"browserify": "^13.1.0",
52+
"buffer": "^5.0.0",
5253
"cross-env": "^3.1.2",
5354
"ghooks": "^1.3.2",
5455
"gulp": "^3.9.1",
@@ -59,6 +60,7 @@
5960
"jasmine": "^2.4.1",
6061
"jshint": "^2.9.3",
6162
"jshint-stylish": "^2.2.1",
63+
"vinyl-buffer": "^1.0.0",
6264
"vinyl-source-stream": "^1.1.0"
6365
},
6466
"autoupdate": {

‎quickblox.min.js‎

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

‎samples/webrtc/index.html‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -258,6 +258,9 @@ <h4 class="caller__name">
258258
</g>
259259
</svg>
260260
</button>
261+
262+
<button class="caller__frames_acts_btn_record j-record" alt="record video">
263+
</button>
261264
</div>
262265

263266
<div class="caller__frames_fl">

‎samples/webrtc/js/app.js‎

Lines changed: 53 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,25 @@
88
'rington': 'ringtoneSignal'
99
};
1010

11+
var recorder;
12+
var recorderOpts = {
13+
callbacks: {
14+
onStartRecording: function onStartRecord() {
15+
console.log('[QB Recorder] onStartRecording');
16+
$('.j-record').addClass('active');
17+
},
18+
onStopRecording: function(blob) {
19+
console.log('[QB Recorder] onStopRecording');
20+
$('.j-record').removeClass('active');
21+
22+
var down = confirm('Do you want to download video?');
23+
if(down) {
24+
recorder.download(blob, 'QB_WEBrtc_sample' + Date.now());
25+
}
26+
}
27+
}
28+
};
29+
1130
var ui = {
1231
'income_call': '#income_call',
1332
'filterSelect': '.j-filter',
@@ -98,7 +117,6 @@
98117
app.callees = {};
99118
app.calleesAnwered = [];
100119
app.users = [];
101-
app.videoMain = 0;
102120
},
103121
'dashboard': function() {
104122
if(_.isEmpty(app.caller)) {
@@ -475,7 +493,6 @@
475493
$(document).on('click', '.j-callees__callee__video', function() {
476494
var $that = $(this),
477495
userId = +($(this).data('user')),
478-
classesName = [],
479496
activeClass = [];
480497

481498
if( app.currentSession.peerConnections[userId].stream && !_.isEmpty( $that.attr('src')) ) {
@@ -519,7 +536,32 @@
519536
app.currentSession.mute( $btn.data('target') );
520537
}
521538
}
522-
});
539+
});
540+
541+
/** Video recording */
542+
$(document).on('click', '.j-record', function() {
543+
var $btn = $(this),
544+
isActive = $btn.hasClass('active');
545+
546+
if(_.isEmpty(app.currentSession)) {
547+
return false;
548+
} else if(QB.Recorder.isAvailable()) {
549+
if(!isActive){
550+
var connections = app.currentSession.peerConnections,
551+
connection = connections[app.mainVideo],
552+
connectionsCount = Object.keys(connections).length;
553+
554+
if (!connection || connectionsCount !== 1){
555+
return false;
556+
}
557+
console.info('HERE');
558+
recorder = new QB.Recorder(connection.stream, recorderOpts);
559+
recorder.start();
560+
} else {
561+
recorder.stop();
562+
}
563+
}
564+
});
523565

524566
/** LOGOUT */
525567
$(document).on('click', '.j-logout', function() {
@@ -632,6 +674,11 @@
632674
} else {
633675
app.helpers.notifyIfUserLeaveCall(session, session.opponentsIDs[0], 'closed');
634676
}
677+
678+
if(QB.Recorder && QB.Recorder.isAvailable()) {
679+
recorder.stop();
680+
}
681+
635682
};
636683

637684
QB.webrtc.onUserNotAnswerListener = function onUserNotAnswerListener(session, userId) {
@@ -711,6 +758,8 @@
711758
console.groupEnd();
712759

713760
app.helpers.notifyIfUserLeaveCall(session, userId, 'hung up the call', 'Hung Up');
761+
762+
recorder.stop();
714763
};
715764

716765
QB.webrtc.onAcceptCallListener = function onAcceptCallListener(session, userId, extension) {
@@ -743,6 +792,7 @@
743792
console.group('onRemoteStreamListener.');
744793
console.log('userId: ', userId);
745794
console.log('Session: ', session);
795+
console.log('Stream: ', stream);
746796
console.groupEnd();
747797

748798
var state = app.currentSession.connectionStateForUser(userId),

‎samples/webrtc/styles.css‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -528,6 +528,7 @@ b {
528528

529529
.caller__frames_acts_btn {
530530
display: inline-block;
531+
vertical-align: top;
531532
width: 20px;
532533
height: 20px;
533534

@@ -550,6 +551,23 @@ b {
550551
.caller__frames_acts_btn.active .svg_icon {
551552
fill: #41cc44;
552553
}
554+
.caller__frames_acts_btn_record {
555+
display: inline-block;
556+
vertical-align: top;
557+
width: 20px;
558+
height: 20px;
559+
560+
margin: 0 15px 0 0;
561+
562+
border: 3px solid #808080;
563+
background: #808080;
564+
border-radius: 50%;
565+
box-shadow: inset 0px 0 0 3px #fff;
566+
}
567+
.caller__frames_acts_btn_record.active {
568+
background: #cc0000;
569+
border-color: #cc0000;
570+
}
553571

554572
.caller__frames_fl {
555573
margin: 30px 0 10px 0;

0 commit comments

Comments
 (0)