Skip to content

Commit

Permalink
[FIX] Some deprecation issues for media recording (#12948)
Browse files Browse the repository at this point in the history 
* Fix some deprecation issues for media recording

* Update condition for video message recording

* Update condition for audio message recording
  • Loading branch information
@tassoevan @rodrigok
tassoevan authored and rodrigok committed Dec 19, 2018
1 parent 6fddd02 commit b182063
Show file tree
Hide file tree
Showing 6 changed files with 99 additions and 84 deletions.
1 change: 1 addition & 0 deletions .eslintrc
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
"alerts" : false,
"Apps" : false,
"Assets" : false,
"AudioRecorder" : false,
"ChatMessage" : false,
"ChatMessages" : false,
"chatMessages" : false,
Expand Down
2 changes: 1 addition & 1 deletion packages/rocketchat-ui-message/client/messageBox.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -282,7 +282,7 @@ Template.messageBox.helpers({
return Template.instance().dataReply.get();
},
isAudioMessageAllowed() {
return (navigator.getUserMedia || navigator.webkitGetUserMedia ||
return (navigator.mediaDevices || navigator.getUserMedia || navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia || navigator.msGetUserMedia) &&
RocketChat.settings.get('FileUpload_Enabled') &&
RocketChat.settings.get('Message_AudioRecorderEnabled') &&
Expand Down
12 changes: 8 additions & 4 deletions packages/rocketchat-ui-message/client/startup/messageBoxActions.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,14 @@ import { t, modal, fileUpload } from 'meteor/rocketchat:ui';
RocketChat.messageBox.actions.add('Create_new', 'Video_message', {
id: 'video-message',
icon: 'video',
condition: () => (navigator.getUserMedia || navigator.webkitGetUserMedia) && RocketChat.settings.get('FileUpload_Enabled') && RocketChat.settings.get('Message_VideoRecorderEnabled') && (!RocketChat.settings.get('FileUpload_MediaTypeWhiteList') || RocketChat.settings.get('FileUpload_MediaTypeWhiteList').match(/video\/webm|video\/\*/i)),
action({ messageBox }) {
return VRecDialog.opened ? VRecDialog.close() : VRecDialog.open(messageBox);
},
condition: () => (navigator.mediaDevices || navigator.getUserMedia || navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia || navigator.msGetUserMedia) &&
window.MediaRecorder &&
RocketChat.settings.get('FileUpload_Enabled') &&
RocketChat.settings.get('Message_VideoRecorderEnabled') &&
(!RocketChat.settings.get('FileUpload_MediaTypeWhiteList') ||
RocketChat.settings.get('FileUpload_MediaTypeWhiteList').match(/video\/webm|video\/\*/i)),
action: ({ messageBox }) => (VRecDialog.opened ? VRecDialog.close() : VRecDialog.open(messageBox)),
});

RocketChat.messageBox.actions.add('Add_files_from', 'Computer', {
Expand Down
50 changes: 26 additions & 24 deletions packages/rocketchat-ui/client/lib/recorderjs/audioRecorder.js
View file
Original file line number Diff line number Diff line change
@@ -1,26 +1,33 @@
/* globals Recorder */
AudioRecorder = new class { //eslint-disable-line
// TODO: embed Recorder class here
// TODO: create the worker for mp3 encoding on-the-fly
AudioRecorder = new (class AudioRecorder {
start(cb) {
window.AudioContext = window.AudioContext || window.webkitAudioContext;
window.audioContext = new (window.AudioContext || window.webkitAudioContext);

navigator.getUserMedia = navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia;

window.URL = window.URL || window.webkitURL;
window.audioContext = new AudioContext;

const ok = (stream) => {
const handleSuccess = (stream) => {
this.startUserMedia(stream);
return (cb != null ? cb.call(this) : undefined);
cb && cb.call(this, true);
};

if ((navigator.getUserMedia == null)) {
return cb(false);
const handleError = (error) => {
console.error(error);
cb && cb.call(this, false);
};

const oldGetUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia ||
navigator.msGetUserMedia;

if (navigator.mediaDevices) {
navigator.mediaDevices.getUserMedia({ audio: true })
.then(handleSuccess, handleError);
return;
} else if (oldGetUserMedia) {
oldGetUserMedia.call(navigator, { audio: true }, handleSuccess, handleError);
return;
}

return navigator.getUserMedia({ audio: true }, ok, (e) => console.log(`No live audio input: ${ e }`));
cb && cb.call(this, false);
}

startUserMedia(stream) {
Expand All @@ -36,19 +43,14 @@ AudioRecorder = new class { //eslint-disable-line
stop(cb) {
this.recorder.stop();

if (cb != null) {
this.getBlob(cb);
}
cb && this.recorder.exportMP3(cb);

this.stream.getAudioTracks()[0].stop();

window.audioContext.close();

delete window.audioContext;
delete this.recorder;
return delete this.stream;
}

getBlob(cb) {
return this.recorder.exportMP3(cb);
delete this.stream;
}
};
});
10 changes: 0 additions & 10 deletions packages/rocketchat-ui/client/lib/recorderjs/recorder.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,16 +78,6 @@
this.node.connect(this.context.destination); //this should not be necessary
};

Recorder.forceDownload = function(blob, filename){
var url = (window.URL || window.webkitURL).createObjectURL(blob);
var link = window.document.createElement('a');
link.href = url;
link.download = filename || 'audio-message.mp3';
var click = document.createEvent("Event");
click.initEvent("click", true, true);
link.dispatchEvent(click);
}

window.Recorder = Recorder;

})(window);
108 changes: 63 additions & 45 deletions packages/rocketchat-ui/client/lib/recorderjs/videoRecorder.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { ReactiveVar } from 'meteor/reactive-var';

VideoRecorder = new class { //eslint-disable-line
VideoRecorder = new (class VideoRecorder {
constructor() {
this.started = false;
this.cameraStarted = new ReactiveVar(false);
Expand All @@ -9,30 +9,39 @@ VideoRecorder = new class { //eslint-disable-line
}

start(videoel, cb) {
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
window.URL = window.URL || window.webkitURL;

this.videoel = videoel;
const ok = (stream) => {

const handleSuccess = (stream) => {
this.startUserMedia(stream);
return (cb != null ? cb.call(this) : undefined);
cb && cb.call(this, true);
};

const handleError = (error) => {
console.error(error);
cb && cb.call(this, false);
};

if (navigator.getUserMedia == null) {
return cb(false);
const oldGetUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia ||
navigator.msGetUserMedia;

if (navigator.mediaDevices) {
navigator.mediaDevices.getUserMedia({ audio: true, video: true })
.then(handleSuccess, handleError);
return;
} else if (oldGetUserMedia) {
oldGetUserMedia.call(navigator, { audio: true, video: true }, handleSuccess, handleError);
return;
}

return navigator.getUserMedia({ audio: true, video: true }, ok, (e) => console.log(`No live video input: ${ e }`));
cb && cb.call(this, false);
}

record() {
this.chunks = [];
if (this.stream == null) {
return;
}
this.mediaRecorder = new MediaRecorder(this.stream);
this.mediaRecorder.stream = this.stream;
this.mediaRecorder.mimeType = 'video/webm';
this.mediaRecorder = new MediaRecorder(this.stream, { type: 'video/webm' });
this.mediaRecorder.ondataavailable = (blobev) => {
this.chunks.push(blobev.data);
if (!this.recordingAvailable.get()) {
Expand All @@ -45,58 +54,67 @@ VideoRecorder = new class { //eslint-disable-line

startUserMedia(stream) {
this.stream = stream;

try {
this.videoel.srcObject = stream;
} catch (_e) {
} catch (error) {
const URL = window.URL || window.webkitURL;
this.videoel.src = URL.createObjectURL(stream);
}
this.videoel.onloadedmetadata = () => this.videoel.play();

this.videoel.onloadedmetadata = () => {
this.videoel && this.videoel.play();
};

this.started = true;
return this.cameraStarted.set(true);
}

stop(cb) {
if (this.started) {
this.stopRecording();

if (this.stream) {
const vtracks = this.stream.getVideoTracks();
for (const vtrack of Array.from(vtracks)) {
vtrack.stop();
}

const atracks = this.stream.getAudioTracks();
for (const atrack of Array.from(atracks)) {
atrack.stop();
}
if (!this.started) {
return;
}

this.stopRecording();

if (this.stream) {
const vtracks = this.stream.getVideoTracks();
for (const vtrack of Array.from(vtracks)) {
vtrack.stop();
}

if (this.videoel) {
this.videoel.pause;
this.videoel.src = '';
const atracks = this.stream.getAudioTracks();
for (const atrack of Array.from(atracks)) {
atrack.stop();
}
}

this.started = false;
this.cameraStarted.set(false);
this.recordingAvailable.set(false);
if (this.videoel) {
this.videoel.pause;
this.videoel.src = '';
}

if (cb && this.chunks) {
const blob = new Blob(this.chunks, { type : 'video/webm' });
cb(blob);
}
this.started = false;
this.cameraStarted.set(false);
this.recordingAvailable.set(false);

delete this.recorder;
delete this.stream;
return delete this.videoel;
if (cb && this.chunks) {
const blob = new Blob(this.chunks, { type: 'video/webm' });
cb(blob);
}

delete this.recorder;
delete this.stream;
delete this.videoel;
}

stopRecording() {
if (this.started && this.recording && this.mediaRecorder) {
this.mediaRecorder.stop();
this.recording.set(false);
return delete this.mediaRecorder;
if (!this.started || !this.recording || !this.mediaRecorder) {
return;
}

this.mediaRecorder.stop();
this.recording.set(false);
delete this.mediaRecorder;
}
};
});

0 comments on commit b182063

Please sign in to comment.