'use strict'; // Last time updated: 2020-05-17 5:04:38 PM UTC // ________________ // RecordRTC v5.6.1 // Open-Sourced: https://github.com/muaz-khan/RecordRTC // -------------------------------------------------- // Muaz Khan - www.MuazKhan.com // MIT License - www.WebRTC-Experiment.com/licence // -------------------------------------------------- // ____________ // RecordRTC.js /** * {@link https://github.com/muaz-khan/RecordRTC|RecordRTC} is a WebRTC JavaScript library for audio/video as well as screen activity recording. It supports Chrome, Firefox, Opera, Android, and Microsoft Edge. Platforms: Linux, Mac and Windows. * @summary Record audio, video or screen inside the browser. * @license {@link https://github.com/muaz-khan/RecordRTC/blob/master/LICENSE|MIT} * @author {@link https://MuazKhan.com|Muaz Khan} * @typedef RecordRTC * @class * @example * var recorder = RecordRTC(mediaStream or [arrayOfMediaStream], { * type: 'video', // audio or video or gif or canvas * recorderType: MediaStreamRecorder || CanvasRecorder || StereoAudioRecorder || Etc * }); * recorder.startRecording(); * @see For further information: * @see {@link https://github.com/muaz-khan/RecordRTC|RecordRTC Source Code} * @param {MediaStream} mediaStream - Single media-stream object, array of media-streams, html-canvas-element, etc. * @param {object} config - {type:"video", recorderType: MediaStreamRecorder, disableLogs: true, numberOfAudioChannels: 1, bufferSize: 0, sampleRate: 0, desiredSampRate: 16000, video: HTMLVideoElement, etc.} */ function RecordRTC(mediaStream, config) { if (!mediaStream) { throw 'First parameter is required.'; } config = config || { type: 'video' }; config = new RecordRTCConfiguration(mediaStream, config); // a reference to user's recordRTC object var self = this; function startRecording(config2) { if (!config.disableLogs) { console.log('RecordRTC version: ', self.version); } if (!!config2) { // allow users to set options using startRecording method // config2 is similar to main "config" object (second parameter over RecordRTC constructor) config = new RecordRTCConfiguration(mediaStream, config2); } if (!config.disableLogs) { console.log('started recording ' + config.type + ' stream.'); } if (mediaRecorder) { mediaRecorder.clearRecordedData(); mediaRecorder.record(); setState('recording'); if (self.recordingDuration) { handleRecordingDuration(); } return self; } initRecorder(function() { if (self.recordingDuration) { handleRecordingDuration(); } }); return self; } function initRecorder(initCallback) { if (initCallback) { config.initCallback = function() { initCallback(); initCallback = config.initCallback = null; // recorder.initRecorder should be call-backed once. }; } var Recorder = new GetRecorderType(mediaStream, config); mediaRecorder = new Recorder(mediaStream, config); mediaRecorder.record(); setState('recording'); if (!config.disableLogs) { console.log('Initialized recorderType:', mediaRecorder.constructor.name, 'for output-type:', config.type); } } function stopRecording(callback) { callback = callback || function() {}; if (!mediaRecorder) { warningLog(); return; } if (self.state === 'paused') { self.resumeRecording(); setTimeout(function() { stopRecording(callback); }, 1); return; } if (self.state !== 'recording' && !config.disableLogs) { console.warn('Recording state should be: "recording", however current state is: ', self.state); } if (!config.disableLogs) { console.log('Stopped recording ' + config.type + ' stream.'); } if (config.type !== 'gif') { mediaRecorder.stop(_callback); } else { mediaRecorder.stop(); _callback(); } setState('stopped'); function _callback(__blob) { if (!mediaRecorder) { if (typeof callback.call === 'function') { callback.call(self, ''); } else { callback(''); } return; } Object.keys(mediaRecorder).forEach(function(key) { if (typeof mediaRecorder[key] === 'function') { return; } self[key] = mediaRecorder[key]; }); var blob = mediaRecorder.blob; if (!blob) { if (__blob) { mediaRecorder.blob = blob = __blob; } else { throw 'Recording failed.'; } } if (blob && !config.disableLogs) { console.log(blob.type, '->', bytesToSize(blob.size)); } if (callback) { var url; try { url = URL.createObjectURL(blob); } catch (e) {} if (typeof callback.call === 'function') { callback.call(self, url); } else { callback(url); } } if (!config.autoWriteToDisk) { return; } getDataURL(function(dataURL) { var parameter = {}; parameter[config.type + 'Blob'] = dataURL; DiskStorage.Store(parameter); }); } } function pauseRecording() { if (!mediaRecorder) { warningLog(); return; } if (self.state !== 'recording') { if (!config.disableLogs) { console.warn('Unable to pause the recording. Recording state: ', self.state); } return; } setState('paused'); mediaRecorder.pause(); if (!config.disableLogs) { console.log('Paused recording.'); } } function resumeRecording() { if (!mediaRecorder) { warningLog(); return; } if (self.state !== 'paused') { if (!config.disableLogs) { console.warn('Unable to resume the recording. Recording state: ', self.state); } return; } setState('recording'); // not all libs have this method yet mediaRecorder.resume(); if (!config.disableLogs) { console.log('Resumed recording.'); } } function readFile(_blob) { postMessage(new FileReaderSync().readAsDataURL(_blob)); } function getDataURL(callback, _mediaRecorder) { if (!callback) { throw 'Pass a callback function over getDataURL.'; } var blob = _mediaRecorder ? _mediaRecorder.blob : (mediaRecorder || {}).blob; if (!blob) { if (!config.disableLogs) { console.warn('Blob encoder did not finish its job yet.'); } setTimeout(function() { getDataURL(callback, _mediaRecorder); }, 1000); return; } if (typeof Worker !== 'undefined' && !navigator.mozGetUserMedia) { var webWorker = processInWebWorker(readFile); webWorker.onmessage = function(event) { callback(event.data); }; webWorker.postMessage(blob); } else { var reader = new FileReader(); reader.readAsDataURL(blob); reader.onload = function(event) { callback(event.target.result); }; } function processInWebWorker(_function) { try { var blob = URL.createObjectURL(new Blob([_function.toString(), 'this.onmessage = function (eee) {' + _function.name + '(eee.data);}' ], { type: 'application/javascript' })); var worker = new Worker(blob); URL.revokeObjectURL(blob); return worker; } catch (e) {} } } function handleRecordingDuration(counter) { counter = counter || 0; if (self.state === 'paused') { setTimeout(function() { handleRecordingDuration(counter); }, 1000); return; } if (self.state === 'stopped') { return; } if (counter >= self.recordingDuration) { stopRecording(self.onRecordingStopped); return; } counter += 1000; // 1-second setTimeout(function() { handleRecordingDuration(counter); }, 1000); } function setState(state) { if (!self) { return; } self.state = state; if (typeof self.onStateChanged.call === 'function') { self.onStateChanged.call(self, state); } else { self.onStateChanged(state); } } var WARNING = 'It seems that recorder is destroyed or "startRecording" is not invoked for ' + config.type + ' recorder.'; function warningLog() { if (config.disableLogs === true) { return; } console.warn(WARNING); } var mediaRecorder; var returnObject = { /** * This method starts the recording. * @method * @memberof RecordRTC * @instance * @example * var recorder = RecordRTC(mediaStream, { * type: 'video' * }); * recorder.startRecording(); */ startRecording: startRecording, /** * This method stops the recording. It is strongly recommended to get "blob" or "URI" inside the callback to make sure all recorders finished their job. * @param {function} callback - Callback to get the recorded blob. * @method * @memberof RecordRTC * @instance * @example * recorder.stopRecording(function() { * // use either "this" or "recorder" object; both are identical * video.src = this.toURL(); * var blob = this.getBlob(); * }); */ stopRecording: stopRecording, /** * This method pauses the recording. You can resume recording using "resumeRecording" method. * @method * @memberof RecordRTC * @instance * @todo Firefox is unable to pause the recording. Fix it. * @example * recorder.pauseRecording(); // pause the recording * recorder.resumeRecording(); // resume again */ pauseRecording: pauseRecording, /** * This method resumes the recording. * @method * @memberof RecordRTC * @instance * @example * recorder.pauseRecording(); // first of all, pause the recording * recorder.resumeRecording(); // now resume it */ resumeRecording: resumeRecording, /** * This method initializes the recording. * @method * @memberof RecordRTC * @instance * @todo This method should be deprecated. * @example * recorder.initRecorder(); */ initRecorder: initRecorder, /** * Ask RecordRTC to auto-stop the recording after 5 minutes. * @method * @memberof RecordRTC * @instance * @example * var fiveMinutes = 5 * 1000 * 60; * recorder.setRecordingDuration(fiveMinutes, function() { * var blob = this.getBlob(); * video.src = this.toURL(); * }); * * // or otherwise * recorder.setRecordingDuration(fiveMinutes).onRecordingStopped(function() { * var blob = this.getBlob(); * video.src = this.toURL(); * }); */ setRecordingDuration: function(recordingDuration, callback) { if (typeof recordingDuration === 'undefined') { throw 'recordingDuration is required.'; } if (typeof recordingDuration !== 'number') { throw 'recordingDuration must be a number.'; } self.recordingDuration = recordingDuration; self.onRecordingStopped = callback || function() {}; return { onRecordingStopped: function(callback) { self.onRecordingStopped = callback; } }; }, /** * This method can be used to clear/reset all the recorded data. * @method * @memberof RecordRTC * @instance * @todo Figure out the difference between "reset" and "clearRecordedData" methods. * @example * recorder.clearRecordedData(); */ clearRecordedData: function() { if (!mediaRecorder) { warningLog(); return; } mediaRecorder.clearRecordedData(); if (!config.disableLogs) { console.log('Cleared old recorded data.'); } }, /** * Get the recorded blob. Use this method inside the "stopRecording" callback. * @method * @memberof RecordRTC * @instance * @example * recorder.stopRecording(function() { * var blob = this.getBlob(); * * var file = new File([blob], 'filename.webm', { * type: 'video/webm' * }); * * var formData = new FormData(); * formData.append('file', file); // upload "File" object rather than a "Blob" * uploadToServer(formData); * }); * @returns {Blob} Returns recorded data as "Blob" object. */ getBlob: function() { if (!mediaRecorder) { warningLog(); return; } return mediaRecorder.blob; }, /** * Get data-URI instead of Blob. * @param {function} callback - Callback to get the Data-URI. * @method * @memberof RecordRTC * @instance * @example * recorder.stopRecording(function() { * recorder.getDataURL(function(dataURI) { * video.src = dataURI; * }); * }); */ getDataURL: getDataURL, /** * Get virtual/temporary URL. Usage of this URL is limited to current tab. * @method * @memberof RecordRTC * @instance * @example * recorder.stopRecording(function() { * video.src = this.toURL(); * }); * @returns {String} Returns a virtual/temporary URL for the recorded "Blob". */ toURL: function() { if (!mediaRecorder) { warningLog(); return; } return URL.createObjectURL(mediaRecorder.blob); }, /** * Get internal recording object (i.e. internal module) e.g. MutliStreamRecorder, MediaStreamRecorder, StereoAudioRecorder or WhammyRecorder etc. * @method * @memberof RecordRTC * @instance * @example * var internalRecorder = recorder.getInternalRecorder(); * if(internalRecorder instanceof MultiStreamRecorder) { * internalRecorder.addStreams([newAudioStream]); * internalRecorder.resetVideoStreams([screenStream]); * } * @returns {Object} Returns internal recording object. */ getInternalRecorder: function() { return mediaRecorder; }, /** * Invoke save-as dialog to save the recorded blob into your disk. * @param {string} fileName - Set your own file name. * @method * @memberof RecordRTC * @instance * @example * recorder.stopRecording(function() { * this.save('file-name'); * * // or manually: * invokeSaveAsDialog(this.getBlob(), 'filename.webm'); * }); */ save: function(fileName) { if (!mediaRecorder) { warningLog(); return; } invokeSaveAsDialog(mediaRecorder.blob, fileName); }, /** * This method gets a blob from indexed-DB storage. * @param {function} callback - Callback to get the recorded blob. * @method * @memberof RecordRTC * @instance * @example * recorder.getFromDisk(function(dataURL) { * video.src = dataURL; * }); */ getFromDisk: function(callback) { if (!mediaRecorder) { warningLog(); return; } RecordRTC.getFromDisk(config.type, callback); }, /** * This method appends an array of webp images to the recorded video-blob. It takes an "array" object. * @type {Array.} * @param {Array} arrayOfWebPImages - Array of webp images. * @method * @memberof RecordRTC * @instance * @todo This method should be deprecated. * @example * var arrayOfWebPImages = []; * arrayOfWebPImages.push({ * duration: index, * image: 'data:image/webp;base64,...' * }); * recorder.setAdvertisementArray(arrayOfWebPImages); */ setAdvertisementArray: function(arrayOfWebPImages) { config.advertisement = []; var length = arrayOfWebPImages.length; for (var i = 0; i < length; i++) { config.advertisement.push({ duration: i, image: arrayOfWebPImages[i] }); } }, /** * It is equivalent to "recorder.getBlob()" method. Usage of "getBlob" is recommended, though. * @property {Blob} blob - Recorded Blob can be accessed using this property. * @memberof RecordRTC * @instance * @readonly * @example * recorder.stopRecording(function() { * var blob = this.blob; * * // below one is recommended * var blob = this.getBlob(); * }); */ blob: null, /** * This works only with {recorderType:StereoAudioRecorder}. Use this property on "stopRecording" to verify the encoder's sample-rates. * @property {number} bufferSize - Buffer-size used to encode the WAV container * @memberof RecordRTC * @instance * @readonly * @example * recorder.stopRecording(function() { * alert('Recorder used this buffer-size: ' + this.bufferSize); * }); */ bufferSize: 0, /** * This works only with {recorderType:StereoAudioRecorder}. Use this property on "stopRecording" to verify the encoder's sample-rates. * @property {number} sampleRate - Sample-rates used to encode the WAV container * @memberof RecordRTC * @instance * @readonly * @example * recorder.stopRecording(function() { * alert('Recorder used these sample-rates: ' + this.sampleRate); * }); */ sampleRate: 0, /** * {recorderType:StereoAudioRecorder} returns ArrayBuffer object. * @property {ArrayBuffer} buffer - Audio ArrayBuffer, supported only in Chrome. * @memberof RecordRTC * @instance * @readonly * @example * recorder.stopRecording(function() { * var arrayBuffer = this.buffer; * alert(arrayBuffer.byteLength); * }); */ buffer: null, /** * This method resets the recorder. So that you can reuse single recorder instance many times. * @method * @memberof RecordRTC * @instance * @example * recorder.reset(); * recorder.startRecording(); */ reset: function() { if (self.state === 'recording' && !config.disableLogs) { console.warn('Stop an active recorder.'); } if (mediaRecorder && typeof mediaRecorder.clearRecordedData === 'function') { mediaRecorder.clearRecordedData(); } mediaRecorder = null; setState('inactive'); self.blob = null; }, /** * This method is called whenever recorder's state changes. Use this as an "event". * @property {String} state - A recorder's state can be: recording, paused, stopped or inactive. * @method * @memberof RecordRTC * @instance * @example * recorder.onStateChanged = function(state) { * console.log('Recorder state: ', state); * }; */ onStateChanged: function(state) { if (!config.disableLogs) { console.log('Recorder state changed:', state); } }, /** * A recorder can have inactive, recording, paused or stopped states. * @property {String} state - A recorder's state can be: recording, paused, stopped or inactive. * @memberof RecordRTC * @static * @readonly * @example * // this looper function will keep you updated about the recorder's states. * (function looper() { * document.querySelector('h1').innerHTML = 'Recorder\'s state is: ' + recorder.state; * if(recorder.state === 'stopped') return; // ignore+stop * setTimeout(looper, 1000); // update after every 3-seconds * })(); * recorder.startRecording(); */ state: 'inactive', /** * Get recorder's readonly state. * @method * @memberof RecordRTC * @example * var state = recorder.getState(); * @returns {String} Returns recording state. */ getState: function() { return self.state; }, /** * Destroy RecordRTC instance. Clear all recorders and objects. * @method * @memberof RecordRTC * @example * recorder.destroy(); */ destroy: function() { var disableLogsCache = config.disableLogs; config = { disableLogs: true }; self.reset(); setState('destroyed'); returnObject = self = null; if (Storage.AudioContextConstructor) { Storage.AudioContextConstructor.close(); Storage.AudioContextConstructor = null; } config.disableLogs = disableLogsCache; if (!config.disableLogs) { console.log('RecordRTC is destroyed.'); } }, /** * RecordRTC version number * @property {String} version - Release version number. * @memberof RecordRTC * @static * @readonly * @example * alert(recorder.version); */ version: '5.6.1' }; if (!this) { self = returnObject; return returnObject; } // if someone wants to use RecordRTC with the "new" keyword. for (var prop in returnObject) { this[prop] = returnObject[prop]; } self = this; return returnObject; } RecordRTC.version = '5.6.1'; if (typeof module !== 'undefined' /* && !!module.exports*/ ) { module.exports = RecordRTC; } if (typeof define === 'function' && define.amd) { define('RecordRTC', [], function() { return RecordRTC; }); } RecordRTC.getFromDisk = function(type, callback) { if (!callback) { throw 'callback is mandatory.'; } console.log('Getting recorded ' + (type === 'all' ? 'blobs' : type + ' blob ') + ' from disk!'); DiskStorage.Fetch(function(dataURL, _type) { if (type !== 'all' && _type === type + 'Blob' && callback) { callback(dataURL); } if (type === 'all' && callback) { callback(dataURL, _type.replace('Blob', '')); } }); }; /** * This method can be used to store recorded blobs into IndexedDB storage. * @param {object} options - {audio: Blob, video: Blob, gif: Blob} * @method * @memberof RecordRTC * @example * RecordRTC.writeToDisk({ * audio: audioBlob, * video: videoBlob, * gif : gifBlob * }); */ RecordRTC.writeToDisk = function(options) { console.log('Writing recorded blob(s) to disk!'); options = options || {}; if (options.audio && options.video && options.gif) { options.audio.getDataURL(function(audioDataURL) { options.video.getDataURL(function(videoDataURL) { options.gif.getDataURL(function(gifDataURL) { DiskStorage.Store({ audioBlob: audioDataURL, videoBlob: videoDataURL, gifBlob: gifDataURL }); }); }); }); } else if (options.audio && options.video) { options.audio.getDataURL(function(audioDataURL) { options.video.getDataURL(function(videoDataURL) { DiskStorage.Store({ audioBlob: audioDataURL, videoBlob: videoDataURL }); }); }); } else if (options.audio && options.gif) { options.audio.getDataURL(function(audioDataURL) { options.gif.getDataURL(function(gifDataURL) { DiskStorage.Store({ audioBlob: audioDataURL, gifBlob: gifDataURL }); }); }); } else if (options.video && options.gif) { options.video.getDataURL(function(videoDataURL) { options.gif.getDataURL(function(gifDataURL) { DiskStorage.Store({ videoBlob: videoDataURL, gifBlob: gifDataURL }); }); }); } else if (options.audio) { options.audio.getDataURL(function(audioDataURL) { DiskStorage.Store({ audioBlob: audioDataURL }); }); } else if (options.video) { options.video.getDataURL(function(videoDataURL) { DiskStorage.Store({ videoBlob: videoDataURL }); }); } else if (options.gif) { options.gif.getDataURL(function(gifDataURL) { DiskStorage.Store({ gifBlob: gifDataURL }); }); } }; // __________________________ // RecordRTC-Configuration.js /** * {@link RecordRTCConfiguration} is an inner/private helper for {@link RecordRTC}. * @summary It configures the 2nd parameter passed over {@link RecordRTC} and returns a valid "config" object. * @license {@link https://github.com/muaz-khan/RecordRTC/blob/master/LICENSE|MIT} * @author {@link https://MuazKhan.com|Muaz Khan} * @typedef RecordRTCConfiguration * @class * @example * var options = RecordRTCConfiguration(mediaStream, options); * @see {@link https://github.com/muaz-khan/RecordRTC|RecordRTC Source Code} * @param {MediaStream} mediaStream - MediaStream object fetched using getUserMedia API or generated using captureStreamUntilEnded or WebAudio API. * @param {object} config - {type:"video", disableLogs: true, numberOfAudioChannels: 1, bufferSize: 0, sampleRate: 0, video: HTMLVideoElement, getNativeBlob:true, etc.} */ function RecordRTCConfiguration(mediaStream, config) { if (!config.recorderType && !config.type) { if (!!config.audio && !!config.video) { config.type = 'video'; } else if (!!config.audio && !config.video) { config.type = 'audio'; } } if (config.recorderType && !config.type) { if (config.recorderType === WhammyRecorder || config.recorderType === CanvasRecorder || (typeof WebAssemblyRecorder !== 'undefined' && config.recorderType === WebAssemblyRecorder)) { config.type = 'video'; } else if (config.recorderType === GifRecorder) { config.type = 'gif'; } else if (config.recorderType === StereoAudioRecorder) { config.type = 'audio'; } else if (config.recorderType === MediaStreamRecorder) { if (getTracks(mediaStream, 'audio').length && getTracks(mediaStream, 'video').length) { config.type = 'video'; } else if (!getTracks(mediaStream, 'audio').length && getTracks(mediaStream, 'video').length) { config.type = 'video'; } else if (getTracks(mediaStream, 'audio').length && !getTracks(mediaStream, 'video').length) { config.type = 'audio'; } else { // config.type = 'UnKnown'; } } } if (typeof MediaStreamRecorder !== 'undefined' && typeof MediaRecorder !== 'undefined' && 'requestData' in MediaRecorder.prototype) { if (!config.mimeType) { config.mimeType = 'video/webm'; } if (!config.type) { config.type = config.mimeType.split('/')[0]; } if (!config.bitsPerSecond) { // config.bitsPerSecond = 128000; } } // consider default type=audio if (!config.type) { if (config.mimeType) { config.type = config.mimeType.split('/')[0]; } if (!config.type) { config.type = 'audio'; } } return config; } // __________________ // GetRecorderType.js /** * {@link GetRecorderType} is an inner/private helper for {@link RecordRTC}. * @summary It returns best recorder-type available for your browser. * @license {@link https://github.com/muaz-khan/RecordRTC/blob/master/LICENSE|MIT} * @author {@link https://MuazKhan.com|Muaz Khan} * @typedef GetRecorderType * @class * @example * var RecorderType = GetRecorderType(options); * var recorder = new RecorderType(options); * @see {@link https://github.com/muaz-khan/RecordRTC|RecordRTC Source Code} * @param {MediaStream} mediaStream - MediaStream object fetched using getUserMedia API or generated using captureStreamUntilEnded or WebAudio API. * @param {object} config - {type:"video", disableLogs: true, numberOfAudioChannels: 1, bufferSize: 0, sampleRate: 0, video: HTMLVideoElement, etc.} */ function GetRecorderType(mediaStream, config) { var recorder; // StereoAudioRecorder can work with all three: Edge, Firefox and Chrome // todo: detect if it is Edge, then auto use: StereoAudioRecorder if (isChrome || isEdge || isOpera) { // Media Stream Recording API has not been implemented in chrome yet; // That's why using WebAudio API to record stereo audio in WAV format recorder = StereoAudioRecorder; } if (typeof MediaRecorder !== 'undefined' && 'requestData' in MediaRecorder.prototype && !isChrome) { recorder = MediaStreamRecorder; } // video recorder (in WebM format) if (config.type === 'video' && (isChrome || isOpera)) { recorder = WhammyRecorder; if (typeof WebAssemblyRecorder !== 'undefined' && typeof ReadableStream !== 'undefined') { recorder = WebAssemblyRecorder; } } // video recorder (in Gif format) if (config.type === 'gif') { recorder = GifRecorder; } // html2canvas recording! if (config.type === 'canvas') { recorder = CanvasRecorder; } if (isMediaRecorderCompatible() && recorder !== CanvasRecorder && recorder !== GifRecorder && typeof MediaRecorder !== 'undefined' && 'requestData' in MediaRecorder.prototype) { if (getTracks(mediaStream, 'video').length || getTracks(mediaStream, 'audio').length) { // audio-only recording if (config.type === 'audio') { if (typeof MediaRecorder.isTypeSupported === 'function' && MediaRecorder.isTypeSupported('audio/webm')) { recorder = MediaStreamRecorder; } // else recorder = StereoAudioRecorder; } else { // video or screen tracks if (typeof MediaRecorder.isTypeSupported === 'function' && MediaRecorder.isTypeSupported('video/webm')) { recorder = MediaStreamRecorder; } } } } if (mediaStream instanceof Array && mediaStream.length) { recorder = MultiStreamRecorder; } if (config.recorderType) { recorder = config.recorderType; } if (!config.disableLogs && !!recorder && !!recorder.name) { console.log('Using recorderType:', recorder.name || recorder.constructor.name); } if (!recorder && isSafari) { recorder = MediaStreamRecorder; } return recorder; } // _____________ // MRecordRTC.js /** * MRecordRTC runs on top of {@link RecordRTC} to bring multiple recordings in a single place, by providing simple API. * @summary MRecordRTC stands for "Multiple-RecordRTC". * @license {@link https://github.com/muaz-khan/RecordRTC/blob/master/LICENSE|MIT} * @author {@link https://MuazKhan.com|Muaz Khan} * @typedef MRecordRTC * @class * @example * var recorder = new MRecordRTC(); * recorder.addStream(MediaStream); * recorder.mediaType = { * audio: true, // or StereoAudioRecorder or MediaStreamRecorder * video: true, // or WhammyRecorder or MediaStreamRecorder or WebAssemblyRecorder or CanvasRecorder * gif: true // or GifRecorder * }; * // mimeType is optional and should be set only in advance cases. * recorder.mimeType = { * audio: 'audio/wav', * video: 'video/webm', * gif: 'image/gif' * }; * recorder.startRecording(); * @see For further information: * @see {@link https://github.com/muaz-khan/RecordRTC/tree/master/MRecordRTC|MRecordRTC Source Code} * @param {MediaStream} mediaStream - MediaStream object fetched using getUserMedia API or generated using captureStreamUntilEnded or WebAudio API. * @requires {@link RecordRTC} */ function MRecordRTC(mediaStream) { /** * This method attaches MediaStream object to {@link MRecordRTC}. * @param {MediaStream} mediaStream - A MediaStream object, either fetched using getUserMedia API, or generated using captureStreamUntilEnded or WebAudio API. * @method * @memberof MRecordRTC * @example * recorder.addStream(MediaStream); */ this.addStream = function(_mediaStream) { if (_mediaStream) { mediaStream = _mediaStream; } }; /** * This property can be used to set the recording type e.g. audio, or video, or gif, or canvas. * @property {object} mediaType - {audio: true, video: true, gif: true} * @memberof MRecordRTC * @example * var recorder = new MRecordRTC(); * recorder.mediaType = { * audio: true, // TRUE or StereoAudioRecorder or MediaStreamRecorder * video: true, // TRUE or WhammyRecorder or MediaStreamRecorder or WebAssemblyRecorder or CanvasRecorder * gif : true // TRUE or GifRecorder * }; */ this.mediaType = { audio: true, video: true }; /** * This method starts recording. * @method * @memberof MRecordRTC * @example * recorder.startRecording(); */ this.startRecording = function() { var mediaType = this.mediaType; var recorderType; var mimeType = this.mimeType || { audio: null, video: null, gif: null }; if (typeof mediaType.audio !== 'function' && isMediaRecorderCompatible() && !getTracks(mediaStream, 'audio').length) { mediaType.audio = false; } if (typeof mediaType.video !== 'function' && isMediaRecorderCompatible() && !getTracks(mediaStream, 'video').length) { mediaType.video = false; } if (typeof mediaType.gif !== 'function' && isMediaRecorderCompatible() && !getTracks(mediaStream, 'video').length) { mediaType.gif = false; } if (!mediaType.audio && !mediaType.video && !mediaType.gif) { throw 'MediaStream must have either audio or video tracks.'; } if (!!mediaType.audio) { recorderType = null; if (typeof mediaType.audio === 'function') { recorderType = mediaType.audio; } this.audioRecorder = new RecordRTC(mediaStream, { type: 'audio', bufferSize: this.bufferSize, sampleRate: this.sampleRate, numberOfAudioChannels: this.numberOfAudioChannels || 2, disableLogs: this.disableLogs, recorderType: recorderType, mimeType: mimeType.audio, timeSlice: this.timeSlice, onTimeStamp: this.onTimeStamp }); if (!mediaType.video) { this.audioRecorder.startRecording(); } } if (!!mediaType.video) { recorderType = null; if (typeof mediaType.video === 'function') { recorderType = mediaType.video; } var newStream = mediaStream; if (isMediaRecorderCompatible() && !!mediaType.audio && typeof mediaType.audio === 'function') { var videoTrack = getTracks(mediaStream, 'video')[0]; if (isFirefox) { newStream = new MediaStream(); newStream.addTrack(videoTrack); if (recorderType && recorderType === WhammyRecorder) { // Firefox does NOT supports webp-encoding yet // But Firefox do supports WebAssemblyRecorder recorderType = MediaStreamRecorder; } } else { newStream = new MediaStream(); newStream.addTrack(videoTrack); } } this.videoRecorder = new RecordRTC(newStream, { type: 'video', video: this.video, canvas: this.canvas, frameInterval: this.frameInterval || 10, disableLogs: this.disableLogs, recorderType: recorderType, mimeType: mimeType.video, timeSlice: this.timeSlice, onTimeStamp: this.onTimeStamp, workerPath: this.workerPath, webAssemblyPath: this.webAssemblyPath, frameRate: this.frameRate, // used by WebAssemblyRecorder; values: usually 30; accepts any. bitrate: this.bitrate // used by WebAssemblyRecorder; values: 0 to 1000+ }); if (!mediaType.audio) { this.videoRecorder.startRecording(); } } if (!!mediaType.audio && !!mediaType.video) { var self = this; var isSingleRecorder = isMediaRecorderCompatible() === true; if (mediaType.audio instanceof StereoAudioRecorder && !!mediaType.video) { isSingleRecorder = false; } else if (mediaType.audio !== true && mediaType.video !== true && mediaType.audio !== mediaType.video) { isSingleRecorder = false; } if (isSingleRecorder === true) { self.audioRecorder = null; self.videoRecorder.startRecording(); } else { self.videoRecorder.initRecorder(function() { self.audioRecorder.initRecorder(function() { // Both recorders are ready to record things accurately self.videoRecorder.startRecording(); self.audioRecorder.startRecording(); }); }); } } if (!!mediaType.gif) { recorderType = null; if (typeof mediaType.gif === 'function') { recorderType = mediaType.gif; } this.gifRecorder = new RecordRTC(mediaStream, { type: 'gif', frameRate: this.frameRate || 200, quality: this.quality || 10, disableLogs: this.disableLogs, recorderType: recorderType, mimeType: mimeType.gif }); this.gifRecorder.startRecording(); } }; /** * This method stops recording. * @param {function} callback - Callback function is invoked when all encoders finished their jobs. * @method * @memberof MRecordRTC * @example * recorder.stopRecording(function(recording){ * var audioBlob = recording.audio; * var videoBlob = recording.video; * var gifBlob = recording.gif; * }); */ this.stopRecording = function(callback) { callback = callback || function() {}; if (this.audioRecorder) { this.audioRecorder.stopRecording(function(blobURL) { callback(blobURL, 'audio'); }); } if (this.videoRecorder) { this.videoRecorder.stopRecording(function(blobURL) { callback(blobURL, 'video'); }); } if (this.gifRecorder) { this.gifRecorder.stopRecording(function(blobURL) { callback(blobURL, 'gif'); }); } }; /** * This method pauses recording. * @method * @memberof MRecordRTC * @example * recorder.pauseRecording(); */ this.pauseRecording = function() { if (this.audioRecorder) { this.audioRecorder.pauseRecording(); } if (this.videoRecorder) { this.videoRecorder.pauseRecording(); } if (this.gifRecorder) { this.gifRecorder.pauseRecording(); } }; /** * This method resumes recording. * @method * @memberof MRecordRTC * @example * recorder.resumeRecording(); */ this.resumeRecording = function() { if (this.audioRecorder) { this.audioRecorder.resumeRecording(); } if (this.videoRecorder) { this.videoRecorder.resumeRecording(); } if (this.gifRecorder) { this.gifRecorder.resumeRecording(); } }; /** * This method can be used to manually get all recorded blobs. * @param {function} callback - All recorded blobs are passed back to the "callback" function. * @method * @memberof MRecordRTC * @example * recorder.getBlob(function(recording){ * var audioBlob = recording.audio; * var videoBlob = recording.video; * var gifBlob = recording.gif; * }); * // or * var audioBlob = recorder.getBlob().audio; * var videoBlob = recorder.getBlob().video; */ this.getBlob = function(callback) { var output = {}; if (this.audioRecorder) { output.audio = this.audioRecorder.getBlob(); } if (this.videoRecorder) { output.video = this.videoRecorder.getBlob(); } if (this.gifRecorder) { output.gif = this.gifRecorder.getBlob(); } if (callback) { callback(output); } return output; }; /** * Destroy all recorder instances. * @method * @memberof MRecordRTC * @example * recorder.destroy(); */ this.destroy = function() { if (this.audioRecorder) { this.audioRecorder.destroy(); this.audioRecorder = null; } if (this.videoRecorder) { this.videoRecorder.destroy(); this.videoRecorder = null; } if (this.gifRecorder) { this.gifRecorder.destroy(); this.gifRecorder = null; } }; /** * This method can be used to manually get all recorded blobs' DataURLs. * @param {function} callback - All recorded blobs' DataURLs are passed back to the "callback" function. * @method * @memberof MRecordRTC * @example * recorder.getDataURL(function(recording){ * var audioDataURL = recording.audio; * var videoDataURL = recording.video; * var gifDataURL = recording.gif; * }); */ this.getDataURL = function(callback) { this.getBlob(function(blob) { if (blob.audio && blob.video) { getDataURL(blob.audio, function(_audioDataURL) { getDataURL(blob.video, function(_videoDataURL) { callback({ audio: _audioDataURL, video: _videoDataURL }); }); }); } else if (blob.audio) { getDataURL(blob.audio, function(_audioDataURL) { callback({ audio: _audioDataURL }); }); } else if (blob.video) { getDataURL(blob.video, function(_videoDataURL) { callback({ video: _videoDataURL }); }); } }); function getDataURL(blob, callback00) { if (typeof Worker !== 'undefined') { var webWorker = processInWebWorker(function readFile(_blob) { postMessage(new FileReaderSync().readAsDataURL(_blob)); }); webWorker.onmessage = function(event) { callback00(event.data); }; webWorker.postMessage(blob); } else { var reader = new FileReader(); reader.readAsDataURL(blob); reader.onload = function(event) { callback00(event.target.result); }; } } function processInWebWorker(_function) { var blob = URL.createObjectURL(new Blob([_function.toString(), 'this.onmessage = function (eee) {' + _function.name + '(eee.data);}' ], { type: 'application/javascript' })); var worker = new Worker(blob); var url; if (typeof URL !== 'undefined') { url = URL; } else if (typeof webkitURL !== 'undefined') { url = webkitURL; } else { throw 'Neither URL nor webkitURL detected.'; } url.revokeObjectURL(blob); return worker; } }; /** * This method can be used to ask {@link MRecordRTC} to write all recorded blobs into IndexedDB storage. * @method * @memberof MRecordRTC * @example * recorder.writeToDisk(); */ this.writeToDisk = function() { RecordRTC.writeToDisk({ audio: this.audioRecorder, video: this.videoRecorder, gif: this.gifRecorder }); }; /** * This method can be used to invoke a save-as dialog for all recorded blobs. * @param {object} args - {audio: 'audio-name', video: 'video-name', gif: 'gif-name'} * @method * @memberof MRecordRTC * @example * recorder.save({ * audio: 'audio-file-name', * video: 'video-file-name', * gif : 'gif-file-name' * }); */ this.save = function(args) { args = args || { audio: true, video: true, gif: true }; if (!!args.audio && this.audioRecorder) { this.audioRecorder.save(typeof args.audio === 'string' ? args.audio : ''); } if (!!args.video && this.videoRecorder) { this.videoRecorder.save(typeof args.video === 'string' ? args.video : ''); } if (!!args.gif && this.gifRecorder) { this.gifRecorder.save(typeof args.gif === 'string' ? args.gif : ''); } }; } /** * This method can be used to get all recorded blobs from IndexedDB storage. * @param {string} type - 'all' or 'audio' or 'video' or 'gif' * @param {function} callback - Callback function to get all stored blobs. * @method * @memberof MRecordRTC * @example * MRecordRTC.getFromDisk('all', function(dataURL, type){ * if(type === 'audio') { } * if(type === 'video') { } * if(type === 'gif') { } * }); */ MRecordRTC.getFromDisk = RecordRTC.getFromDisk; /** * This method can be used to store recorded blobs into IndexedDB storage. * @param {object} options - {audio: Blob, video: Blob, gif: Blob} * @method * @memberof MRecordRTC * @example * MRecordRTC.writeToDisk({ * audio: audioBlob, * video: videoBlob, * gif : gifBlob * }); */ MRecordRTC.writeToDisk = RecordRTC.writeToDisk; if (typeof RecordRTC !== 'undefined') { RecordRTC.MRecordRTC = MRecordRTC; } var browserFakeUserAgent = 'Fake/5.0 (FakeOS) AppleWebKit/123 (KHTML, like Gecko) Fake/12.3.4567.89 Fake/123.45'; (function(that) { if (!that) { return; } if (typeof window !== 'undefined') { return; } if (typeof global === 'undefined') { return; } global.navigator = { userAgent: browserFakeUserAgent, getUserMedia: function() {} }; if (!global.console) { global.console = {}; } if (typeof global.console.log === 'undefined' || typeof global.console.error === 'undefined') { global.console.error = global.console.log = global.console.log || function() { console.log(arguments); }; } if (typeof document === 'undefined') { /*global document:true */ that.document = { documentElement: { appendChild: function() { return ''; } } }; document.createElement = document.captureStream = document.mozCaptureStream = function() { var obj = { getContext: function() { return obj; }, play: function() {}, pause: function() {}, drawImage: function() {}, toDataURL: function() { return ''; }, style: {} }; return obj; }; that.HTMLVideoElement = function() {}; } if (typeof location === 'undefined') { /*global location:true */ that.location = { protocol: 'file:', href: '', hash: '' }; } if (typeof screen === 'undefined') { /*global screen:true */ that.screen = { width: 0, height: 0 }; } if (typeof URL === 'undefined') { /*global screen:true */ that.URL = { createObjectURL: function() { return ''; }, revokeObjectURL: function() { return ''; } }; } /*global window:true */ that.window = global; })(typeof global !== 'undefined' ? global : null); // _____________________________ // Cross-Browser-Declarations.js // animation-frame used in WebM recording /*jshint -W079 */ var requestAnimationFrame = window.requestAnimationFrame; if (typeof requestAnimationFrame === 'undefined') { if (typeof webkitRequestAnimationFrame !== 'undefined') { /*global requestAnimationFrame:true */ requestAnimationFrame = webkitRequestAnimationFrame; } else if (typeof mozRequestAnimationFrame !== 'undefined') { /*global requestAnimationFrame:true */ requestAnimationFrame = mozRequestAnimationFrame; } else if (typeof msRequestAnimationFrame !== 'undefined') { /*global requestAnimationFrame:true */ requestAnimationFrame = msRequestAnimationFrame; } else if (typeof requestAnimationFrame === 'undefined') { // via: https://gist.github.com/paulirish/1579671 var lastTime = 0; /*global requestAnimationFrame:true */ requestAnimationFrame = function(callback, element) { var currTime = new Date().getTime(); var timeToCall = Math.max(0, 16 - (currTime - lastTime)); var id = setTimeout(function() { callback(currTime + timeToCall); }, timeToCall); lastTime = currTime + timeToCall; return id; }; } } /*jshint -W079 */ var cancelAnimationFrame = window.cancelAnimationFrame; if (typeof cancelAnimationFrame === 'undefined') { if (typeof webkitCancelAnimationFrame !== 'undefined') { /*global cancelAnimationFrame:true */ cancelAnimationFrame = webkitCancelAnimationFrame; } else if (typeof mozCancelAnimationFrame !== 'undefined') { /*global cancelAnimationFrame:true */ cancelAnimationFrame = mozCancelAnimationFrame; } else if (typeof msCancelAnimationFrame !== 'undefined') { /*global cancelAnimationFrame:true */ cancelAnimationFrame = msCancelAnimationFrame; } else if (typeof cancelAnimationFrame === 'undefined') { /*global cancelAnimationFrame:true */ cancelAnimationFrame = function(id) { clearTimeout(id); }; } } // WebAudio API representer var AudioContext = window.AudioContext; if (typeof AudioContext === 'undefined') { if (typeof webkitAudioContext !== 'undefined') { /*global AudioContext:true */ AudioContext = webkitAudioContext; } if (typeof mozAudioContext !== 'undefined') { /*global AudioContext:true */ AudioContext = mozAudioContext; } } /*jshint -W079 */ var URL = window.URL; if (typeof URL === 'undefined' && typeof webkitURL !== 'undefined') { /*global URL:true */ URL = webkitURL; } if (typeof navigator !== 'undefined' && typeof navigator.getUserMedia === 'undefined') { // maybe window.navigator? if (typeof navigator.webkitGetUserMedia !== 'undefined') { navigator.getUserMedia = navigator.webkitGetUserMedia; } if (typeof navigator.mozGetUserMedia !== 'undefined') { navigator.getUserMedia = navigator.mozGetUserMedia; } } var isEdge = navigator.userAgent.indexOf('Edge') !== -1 && (!!navigator.msSaveBlob || !!navigator.msSaveOrOpenBlob); var isOpera = !!window.opera || navigator.userAgent.indexOf('OPR/') !== -1; var isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1 && ('netscape' in window) && / rv:/.test(navigator.userAgent); var isChrome = (!isOpera && !isEdge && !!navigator.webkitGetUserMedia) || isElectron() || navigator.userAgent.toLowerCase().indexOf('chrome/') !== -1; var isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent); if (isSafari && !isChrome && navigator.userAgent.indexOf('CriOS') !== -1) { isSafari = false; isChrome = true; } var MediaStream = window.MediaStream; if (typeof MediaStream === 'undefined' && typeof webkitMediaStream !== 'undefined') { MediaStream = webkitMediaStream; } /*global MediaStream:true */ if (typeof MediaStream !== 'undefined') { // override "stop" method for all browsers if (typeof MediaStream.prototype.stop === 'undefined') { MediaStream.prototype.stop = function() { this.getTracks().forEach(function(track) { track.stop(); }); }; } } // below function via: http://goo.gl/B3ae8c /** * Return human-readable file size. * @param {number} bytes - Pass bytes and get formatted string. * @returns {string} - formatted string * @example * bytesToSize(1024*1024*5) === '5 GB' * @see {@link https://github.com/muaz-khan/RecordRTC|RecordRTC Source Code} */ function bytesToSize(bytes) { var k = 1000; var sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB']; if (bytes === 0) { return '0 Bytes'; } var i = parseInt(Math.floor(Math.log(bytes) / Math.log(k)), 10); return (bytes / Math.pow(k, i)).toPrecision(3) + ' ' + sizes[i]; } /** * @param {Blob} file - File or Blob object. This parameter is required. * @param {string} fileName - Optional file name e.g. "Recorded-Video.webm" * @example * invokeSaveAsDialog(blob or file, [optional] fileName); * @see {@link https://github.com/muaz-khan/RecordRTC|RecordRTC Source Code} */ function invokeSaveAsDialog(file, fileName) { if (!file) { throw 'Blob object is required.'; } if (!file.type) { try { file.type = 'video/webm'; } catch (e) {} } var fileExtension = (file.type || 'video/webm').split('/')[1]; if (fileName && fileName.indexOf('.') !== -1) { var splitted = fileName.split('.'); fileName = splitted[0]; fileExtension = splitted[1]; } var fileFullName = (fileName || (Math.round(Math.random() * 9999999999) + 888888888)) + '.' + fileExtension; if (typeof navigator.msSaveOrOpenBlob !== 'undefined') { return navigator.msSaveOrOpenBlob(file, fileFullName); } else if (typeof navigator.msSaveBlob !== 'undefined') { return navigator.msSaveBlob(file, fileFullName); } var hyperlink = document.createElement('a'); hyperlink.href = URL.createObjectURL(file); hyperlink.download = fileFullName; hyperlink.style = 'display:none;opacity:0;color:transparent;'; (document.body || document.documentElement).appendChild(hyperlink); if (typeof hyperlink.click === 'function') { hyperlink.click(); } else { hyperlink.target = '_blank'; hyperlink.dispatchEvent(new MouseEvent('click', { view: window, bubbles: true, cancelable: true })); } URL.revokeObjectURL(hyperlink.href); } /** * from: https://github.com/cheton/is-electron/blob/master/index.js **/ function isElectron() { // Renderer process if (typeof window !== 'undefined' && typeof window.process === 'object' && window.process.type === 'renderer') { return true; } // Main process if (typeof process !== 'undefined' && typeof process.versions === 'object' && !!process.versions.electron) { return true; } // Detect the user agent when the `nodeIntegration` option is set to true if (typeof navigator === 'object' && typeof navigator.userAgent === 'string' && navigator.userAgent.indexOf('Electron') >= 0) { return true; } return false; } function getTracks(stream, kind) { if (!stream || !stream.getTracks) { return []; } return stream.getTracks().filter(function(t) { return t.kind === (kind || 'audio'); }); } function setSrcObject(stream, element) { if ('srcObject' in element) { element.srcObject = stream; } else if ('mozSrcObject' in element) { element.mozSrcObject = stream; } else { element.srcObject = stream; } } /** * @param {Blob} file - File or Blob object. * @param {function} callback - Callback function. * @example * getSeekableBlob(blob or file, callback); * @see {@link https://github.com/muaz-khan/RecordRTC|RecordRTC Source Code} */ function getSeekableBlob(inputBlob, callback) { // EBML.js copyrights goes to: https://github.com/legokichi/ts-ebml if (typeof EBML === 'undefined') { throw new Error('Please link: https://www.webrtc-experiment.com/EBML.js'); } var reader = new EBML.Reader(); var decoder = new EBML.Decoder(); var tools = EBML.tools; var fileReader = new FileReader(); fileReader.onload = function(e) { var ebmlElms = decoder.decode(this.result); ebmlElms.forEach(function(element) { reader.read(element); }); reader.stop(); var refinedMetadataBuf = tools.makeMetadataSeekable(reader.metadatas, reader.duration, reader.cues); var body = this.result.slice(reader.metadataSize); var newBlob = new Blob([refinedMetadataBuf, body], { type: 'video/webm' }); callback(newBlob); }; fileReader.readAsArrayBuffer(inputBlob); } if (typeof RecordRTC !== 'undefined') { RecordRTC.invokeSaveAsDialog = invokeSaveAsDialog; RecordRTC.getTracks = getTracks; RecordRTC.getSeekableBlob = getSeekableBlob; RecordRTC.bytesToSize = bytesToSize; RecordRTC.isElectron = isElectron; } // __________ (used to handle stuff like http://goo.gl/xmE5eg) issue #129 // Storage.js /** * Storage is a standalone object used by {@link RecordRTC} to store reusable objects e.g. "new AudioContext". * @license {@link https://github.com/muaz-khan/RecordRTC/blob/master/LICENSE|MIT} * @author {@link https://MuazKhan.com|Muaz Khan} * @example * Storage.AudioContext === webkitAudioContext * @property {webkitAudioContext} AudioContext - Keeps a reference to AudioContext object. * @see {@link https://github.com/muaz-khan/RecordRTC|RecordRTC Source Code} */ var Storage = {}; if (typeof AudioContext !== 'undefined') { Storage.AudioContext = AudioContext; } else if (typeof webkitAudioContext !== 'undefined') { Storage.AudioContext = webkitAudioContext; } if (typeof RecordRTC !== 'undefined') { RecordRTC.Storage = Storage; } function isMediaRecorderCompatible() { if (isFirefox || isSafari || isEdge) { return true; } var nVer = navigator.appVersion; var nAgt = navigator.userAgent; var fullVersion = '' + parseFloat(navigator.appVersion); var majorVersion = parseInt(navigator.appVersion, 10); var nameOffset, verOffset, ix; if (isChrome || isOpera) { verOffset = nAgt.indexOf('Chrome'); fullVersion = nAgt.substring(verOffset + 7); } // trim the fullVersion string at semicolon/space if present if ((ix = fullVersion.indexOf(';')) !== -1) { fullVersion = fullVersion.substring(0, ix); } if ((ix = fullVersion.indexOf(' ')) !== -1) { fullVersion = fullVersion.substring(0, ix); } majorVersion = parseInt('' + fullVersion, 10); if (isNaN(majorVersion)) { fullVersion = '' + parseFloat(navigator.appVersion); majorVersion = parseInt(navigator.appVersion, 10); } return majorVersion >= 49; } // ______________________ // MediaStreamRecorder.js /** * MediaStreamRecorder is an abstraction layer for {@link https://w3c.github.io/mediacapture-record/MediaRecorder.html|MediaRecorder API}. It is used by {@link RecordRTC} to record MediaStream(s) in both Chrome and Firefox. * @summary Runs top over {@link https://w3c.github.io/mediacapture-record/MediaRecorder.html|MediaRecorder API}. * @license {@link https://github.com/muaz-khan/RecordRTC/blob/master/LICENSE|MIT} * @author {@link https://github.com/muaz-khan|Muaz Khan} * @typedef MediaStreamRecorder * @class * @example * var config = { * mimeType: 'video/webm', // vp8, vp9, h264, mkv, opus/vorbis * audioBitsPerSecond : 256 * 8 * 1024, * videoBitsPerSecond : 256 * 8 * 1024, * bitsPerSecond: 256 * 8 * 1024, // if this is provided, skip above two * checkForInactiveTracks: true, * timeSlice: 1000, // concatenate intervals based blobs * ondataavailable: function() {} // get intervals based blobs * } * var recorder = new MediaStreamRecorder(mediaStream, config); * recorder.record(); * recorder.stop(function(blob) { * video.src = URL.createObjectURL(blob); * * // or * var blob = recorder.blob; * }); * @see {@link https://github.com/muaz-khan/RecordRTC|RecordRTC Source Code} * @param {MediaStream} mediaStream - MediaStream object fetched using getUserMedia API or generated using captureStreamUntilEnded or WebAudio API. * @param {object} config - {disableLogs:true, initCallback: function, mimeType: "video/webm", timeSlice: 1000} * @throws Will throw an error if first argument "MediaStream" is missing. Also throws error if "MediaRecorder API" are not supported by the browser. */ function MediaStreamRecorder(mediaStream, config) { var self = this; if (typeof mediaStream === 'undefined') { throw 'First argument "MediaStream" is required.'; } if (typeof MediaRecorder === 'undefined') { throw 'Your browser does not support the Media Recorder API. Please try other modules e.g. WhammyRecorder or StereoAudioRecorder.'; } config = config || { // bitsPerSecond: 256 * 8 * 1024, mimeType: 'video/webm' }; if (config.type === 'audio') { if (getTracks(mediaStream, 'video').length && getTracks(mediaStream, 'audio').length) { var stream; if (!!navigator.mozGetUserMedia) { stream = new MediaStream(); stream.addTrack(getTracks(mediaStream, 'audio')[0]); } else { // webkitMediaStream stream = new MediaStream(getTracks(mediaStream, 'audio')); } mediaStream = stream; } if (!config.mimeType || config.mimeType.toString().toLowerCase().indexOf('audio') === -1) { config.mimeType = isChrome ? 'audio/webm' : 'audio/ogg'; } if (config.mimeType && config.mimeType.toString().toLowerCase() !== 'audio/ogg' && !!navigator.mozGetUserMedia) { // forcing better codecs on Firefox (via #166) config.mimeType = 'audio/ogg'; } } var arrayOfBlobs = []; /** * This method returns array of blobs. Use only with "timeSlice". Its useful to preview recording anytime, without using the "stop" method. * @method * @memberof MediaStreamRecorder * @example * var arrayOfBlobs = recorder.getArrayOfBlobs(); * @returns {Array} Returns array of recorded blobs. */ this.getArrayOfBlobs = function() { return arrayOfBlobs; }; /** * This method records MediaStream. * @method * @memberof MediaStreamRecorder * @example * recorder.record(); */ this.record = function() { // set defaults self.blob = null; self.clearRecordedData(); self.timestamps = []; allStates = []; arrayOfBlobs = []; var recorderHints = config; if (!config.disableLogs) { console.log('Passing following config over MediaRecorder API.', recorderHints); } if (mediaRecorder) { // mandatory to make sure Firefox doesn't fails to record streams 3-4 times without reloading the page. mediaRecorder = null; } if (isChrome && !isMediaRecorderCompatible()) { // to support video-only recording on stable recorderHints = 'video/vp8'; } if (typeof MediaRecorder.isTypeSupported === 'function' && recorderHints.mimeType) { if (!MediaRecorder.isTypeSupported(recorderHints.mimeType)) { if (!config.disableLogs) { console.warn('MediaRecorder API seems unable to record mimeType:', recorderHints.mimeType); } recorderHints.mimeType = config.type === 'audio' ? 'audio/webm' : 'video/webm'; } } // using MediaRecorder API here try { mediaRecorder = new MediaRecorder(mediaStream, recorderHints); // reset config.mimeType = recorderHints.mimeType; } catch (e) { // chrome-based fallback mediaRecorder = new MediaRecorder(mediaStream); } // old hack? if (recorderHints.mimeType && !MediaRecorder.isTypeSupported && 'canRecordMimeType' in mediaRecorder && mediaRecorder.canRecordMimeType(recorderHints.mimeType) === false) { if (!config.disableLogs) { console.warn('MediaRecorder API seems unable to record mimeType:', recorderHints.mimeType); } } // Dispatching OnDataAvailable Handler mediaRecorder.ondataavailable = function(e) { if (e.data) { allStates.push('ondataavailable: ' + bytesToSize(e.data.size)); } if (typeof config.timeSlice === 'number') { if (e.data && e.data.size && e.data.size > 100) { arrayOfBlobs.push(e.data); updateTimeStamp(); if (typeof config.ondataavailable === 'function') { // intervals based blobs var blob = config.getNativeBlob ? e.data : new Blob([e.data], { type: getMimeType(recorderHints) }); config.ondataavailable(blob); } } return; } if (!e.data || !e.data.size || e.data.size < 100 || self.blob) { // make sure that stopRecording always getting fired // even if there is invalid data if (self.recordingCallback) { self.recordingCallback(new Blob([], { type: getMimeType(recorderHints) })); self.recordingCallback = null; } return; } self.blob = config.getNativeBlob ? e.data : new Blob([e.data], { type: getMimeType(recorderHints) }); if (self.recordingCallback) { self.recordingCallback(self.blob); self.recordingCallback = null; } }; mediaRecorder.onstart = function() { allStates.push('started'); }; mediaRecorder.onpause = function() { allStates.push('paused'); }; mediaRecorder.onresume = function() { allStates.push('resumed'); }; mediaRecorder.onstop = function() { allStates.push('stopped'); }; mediaRecorder.onerror = function(error) { if (!error) { return; } if (!error.name) { error.name = 'UnknownError'; } allStates.push('error: ' + error); if (!config.disableLogs) { // via: https://w3c.github.io/mediacapture-record/MediaRecorder.html#exception-summary if (error.name.toString().toLowerCase().indexOf('invalidstate') !== -1) { console.error('The MediaRecorder is not in a state in which the proposed operation is allowed to be executed.', error); } else if (error.name.toString().toLowerCase().indexOf('notsupported') !== -1) { console.error('MIME type (', recorderHints.mimeType, ') is not supported.', error); } else if (error.name.toString().toLowerCase().indexOf('security') !== -1) { console.error('MediaRecorder security error', error); } // older code below else if (error.name === 'OutOfMemory') { console.error('The UA has exhaused the available memory. User agents SHOULD provide as much additional information as possible in the message attribute.', error); } else if (error.name === 'IllegalStreamModification') { console.error('A modification to the stream has occurred that makes it impossible to continue recording. An example would be the addition of a Track while recording is occurring. User agents SHOULD provide as much additional information as possible in the message attribute.', error); } else if (error.name === 'OtherRecordingError') { console.error('Used for an fatal error other than those listed above. User agents SHOULD provide as much additional information as possible in the message attribute.', error); } else if (error.name === 'GenericError') { console.error('The UA cannot provide the codec or recording option that has been requested.', error); } else { console.error('MediaRecorder Error', error); } } (function(looper) { if (!self.manuallyStopped && mediaRecorder && mediaRecorder.state === 'inactive') { delete config.timeslice; // 10 minutes, enough? mediaRecorder.start(10 * 60 * 1000); return; } setTimeout(looper, 1000); })(); if (mediaRecorder.state !== 'inactive' && mediaRecorder.state !== 'stopped') { mediaRecorder.stop(); } }; if (typeof config.timeSlice === 'number') { updateTimeStamp(); mediaRecorder.start(config.timeSlice); } else { // default is 60 minutes; enough? // use config => {timeSlice: 1000} otherwise mediaRecorder.start(3.6e+6); } if (config.initCallback) { config.initCallback(); // old code } }; /** * @property {Array} timestamps - Array of time stamps * @memberof MediaStreamRecorder * @example * console.log(recorder.timestamps); */ this.timestamps = []; function updateTimeStamp() { self.timestamps.push(new Date().getTime()); if (typeof config.onTimeStamp === 'function') { config.onTimeStamp(self.timestamps[self.timestamps.length - 1], self.timestamps); } } function getMimeType(secondObject) { if (mediaRecorder && mediaRecorder.mimeType) { return mediaRecorder.mimeType; } return secondObject.mimeType || 'video/webm'; } /** * This method stops recording MediaStream. * @param {function} callback - Callback function, that is used to pass recorded blob back to the callee. * @method * @memberof MediaStreamRecorder * @example * recorder.stop(function(blob) { * video.src = URL.createObjectURL(blob); * }); */ this.stop = function(callback) { callback = callback || function() {}; self.manuallyStopped = true; // used inside the mediaRecorder.onerror if (!mediaRecorder) { return; } this.recordingCallback = callback; if (mediaRecorder.state === 'recording') { mediaRecorder.stop(); } if (typeof config.timeSlice === 'number') { setTimeout(function() { self.blob = new Blob(arrayOfBlobs, { type: getMimeType(config) }); self.recordingCallback(self.blob); }, 100); } }; /** * This method pauses the recording process. * @method * @memberof MediaStreamRecorder * @example * recorder.pause(); */ this.pause = function() { if (!mediaRecorder) { return; } if (mediaRecorder.state === 'recording') { mediaRecorder.pause(); } }; /** * This method resumes the recording process. * @method * @memberof MediaStreamRecorder * @example * recorder.resume(); */ this.resume = function() { if (!mediaRecorder) { return; } if (mediaRecorder.state === 'paused') { mediaRecorder.resume(); } }; /** * This method resets currently recorded data. * @method * @memberof MediaStreamRecorder * @example * recorder.clearRecordedData(); */ this.clearRecordedData = function() { if (mediaRecorder && mediaRecorder.state === 'recording') { self.stop(clearRecordedDataCB); } clearRecordedDataCB(); }; function clearRecordedDataCB() { arrayOfBlobs = []; mediaRecorder = null; self.timestamps = []; } // Reference to "MediaRecorder" object var mediaRecorder; /** * Access to native MediaRecorder API * @method * @memberof MediaStreamRecorder * @instance * @example * var internal = recorder.getInternalRecorder(); * internal.ondataavailable = function() {}; // override * internal.stream, internal.onpause, internal.onstop, etc. * @returns {Object} Returns internal recording object. */ this.getInternalRecorder = function() { return mediaRecorder; }; function isMediaStreamActive() { if ('active' in mediaStream) { if (!mediaStream.active) { return false; } } else if ('ended' in mediaStream) { // old hack if (mediaStream.ended) { return false; } } return true; } /** * @property {Blob} blob - Recorded data as "Blob" object. * @memberof MediaStreamRecorder * @example * recorder.stop(function() { * var blob = recorder.blob; * }); */ this.blob = null; /** * Get MediaRecorder readonly state. * @method * @memberof MediaStreamRecorder * @example * var state = recorder.getState(); * @returns {String} Returns recording state. */ this.getState = function() { if (!mediaRecorder) { return 'inactive'; } return mediaRecorder.state || 'inactive'; }; // list of all recording states var allStates = []; /** * Get MediaRecorder all recording states. * @method * @memberof MediaStreamRecorder * @example * var state = recorder.getAllStates(); * @returns {Array} Returns all recording states */ this.getAllStates = function() { return allStates; }; // if any Track within the MediaStream is muted or not enabled at any time, // the browser will only record black frames // or silence since that is the content produced by the Track // so we need to stopRecording as soon as any single track ends. if (typeof config.checkForInactiveTracks === 'undefined') { config.checkForInactiveTracks = false; // disable to minimize CPU usage } var self = this; // this method checks if media stream is stopped // or if any track is ended. (function looper() { if (!mediaRecorder || config.checkForInactiveTracks === false) { return; } if (isMediaStreamActive() === false) { if (!config.disableLogs) { console.log('MediaStream seems stopped.'); } self.stop(); return; } setTimeout(looper, 1000); // check every second })(); // for debugging this.name = 'MediaStreamRecorder'; this.toString = function() { return this.name; }; } if (typeof RecordRTC !== 'undefined') { RecordRTC.MediaStreamRecorder = MediaStreamRecorder; } // source code from: http://typedarray.org/wp-content/projects/WebAudioRecorder/script.js // https://github.com/mattdiamond/Recorderjs#license-mit // ______________________ // StereoAudioRecorder.js /** * StereoAudioRecorder is a standalone class used by {@link RecordRTC} to bring "stereo" audio-recording in chrome. * @summary JavaScript standalone object for stereo audio recording. * @license {@link https://github.com/muaz-khan/RecordRTC/blob/master/LICENSE|MIT} * @author {@link https://MuazKhan.com|Muaz Khan} * @typedef StereoAudioRecorder * @class * @example * var recorder = new StereoAudioRecorder(MediaStream, { * sampleRate: 44100, * bufferSize: 4096 * }); * recorder.record(); * recorder.stop(function(blob) { * video.src = URL.createObjectURL(blob); * }); * @see {@link https://github.com/muaz-khan/RecordRTC|RecordRTC Source Code} * @param {MediaStream} mediaStream - MediaStream object fetched using getUserMedia API or generated using captureStreamUntilEnded or WebAudio API. * @param {object} config - {sampleRate: 44100, bufferSize: 4096, numberOfAudioChannels: 1, etc.} */ function StereoAudioRecorder(mediaStream, config) { if (!getTracks(mediaStream, 'audio').length) { throw 'Your stream has no audio tracks.'; } config = config || {}; var self = this; // variables var leftchannel = []; var rightchannel = []; var recording = false; var recordingLength = 0; var jsAudioNode; var numberOfAudioChannels = 2; /** * Set sample rates such as 8K or 16K. Reference: http://stackoverflow.com/a/28977136/552182 * @property {number} desiredSampRate - Desired Bits per sample * 1000 * @memberof StereoAudioRecorder * @instance * @example * var recorder = StereoAudioRecorder(mediaStream, { * desiredSampRate: 16 * 1000 // bits-per-sample * 1000 * }); */ var desiredSampRate = config.desiredSampRate; // backward compatibility if (config.leftChannel === true) { numberOfAudioChannels = 1; } if (config.numberOfAudioChannels === 1) { numberOfAudioChannels = 1; } if (!numberOfAudioChannels || numberOfAudioChannels < 1) { numberOfAudioChannels = 2; } if (!config.disableLogs) { console.log('StereoAudioRecorder is set to record number of channels: ' + numberOfAudioChannels); } // if any Track within the MediaStream is muted or not enabled at any time, // the browser will only record black frames // or silence since that is the content produced by the Track // so we need to stopRecording as soon as any single track ends. if (typeof config.checkForInactiveTracks === 'undefined') { config.checkForInactiveTracks = true; } function isMediaStreamActive() { if (config.checkForInactiveTracks === false) { // always return "true" return true; } if ('active' in mediaStream) { if (!mediaStream.active) { return false; } } else if ('ended' in mediaStream) { // old hack if (mediaStream.ended) { return false; } } return true; } /** * This method records MediaStream. * @method * @memberof StereoAudioRecorder * @example * recorder.record(); */ this.record = function() { if (isMediaStreamActive() === false) { throw 'Please make sure MediaStream is active.'; } resetVariables(); isAudioProcessStarted = isPaused = false; recording = true; if (typeof config.timeSlice !== 'undefined') { looper(); } }; function mergeLeftRightBuffers(config, callback) { function mergeAudioBuffers(config, cb) { var numberOfAudioChannels = config.numberOfAudioChannels; // todo: "slice(0)" --- is it causes loop? Should be removed? var leftBuffers = config.leftBuffers.slice(0); var rightBuffers = config.rightBuffers.slice(0); var sampleRate = config.sampleRate; var internalInterleavedLength = config.internalInterleavedLength; var desiredSampRate = config.desiredSampRate; if (numberOfAudioChannels === 2) { leftBuffers = mergeBuffers(leftBuffers, internalInterleavedLength); rightBuffers = mergeBuffers(rightBuffers, internalInterleavedLength); if (desiredSampRate) { leftBuffers = interpolateArray(leftBuffers, desiredSampRate, sampleRate); rightBuffers = interpolateArray(rightBuffers, desiredSampRate, sampleRate); } } if (numberOfAudioChannels === 1) { leftBuffers = mergeBuffers(leftBuffers, internalInterleavedLength); if (desiredSampRate) { leftBuffers = interpolateArray(leftBuffers, desiredSampRate, sampleRate); } } // set sample rate as desired sample rate if (desiredSampRate) { sampleRate = desiredSampRate; } // for changing the sampling rate, reference: // http://stackoverflow.com/a/28977136/552182 function interpolateArray(data, newSampleRate, oldSampleRate) { var fitCount = Math.round(data.length * (newSampleRate / oldSampleRate)); var newData = []; var springFactor = Number((data.length - 1) / (fitCount - 1)); newData[0] = data[0]; for (var i = 1; i < fitCount - 1; i++) { var tmp = i * springFactor; var before = Number(Math.floor(tmp)).toFixed(); var after = Number(Math.ceil(tmp)).toFixed(); var atPoint = tmp - before; newData[i] = linearInterpolate(data[before], data[after], atPoint); } newData[fitCount - 1] = data[data.length - 1]; return newData; } function linearInterpolate(before, after, atPoint) { return before + (after - before) * atPoint; } function mergeBuffers(channelBuffer, rLength) { var result = new Float64Array(rLength); var offset = 0; var lng = channelBuffer.length; for (var i = 0; i < lng; i++) { var buffer = channelBuffer[i]; result.set(buffer, offset); offset += buffer.length; } return result; } function interleave(leftChannel, rightChannel) { var length = leftChannel.length + rightChannel.length; var result = new Float64Array(length); var inputIndex = 0; for (var index = 0; index < length;) { result[index++] = leftChannel[inputIndex]; result[index++] = rightChannel[inputIndex]; inputIndex++; } return result; } function writeUTFBytes(view, offset, string) { var lng = string.length; for (var i = 0; i < lng; i++) { view.setUint8(offset + i, string.charCodeAt(i)); } } // interleave both channels together var interleaved; if (numberOfAudioChannels === 2) { interleaved = interleave(leftBuffers, rightBuffers); } if (numberOfAudioChannels === 1) { interleaved = leftBuffers; } var interleavedLength = interleaved.length; // create wav file var resultingBufferLength = 44 + interleavedLength * 2; var buffer = new ArrayBuffer(resultingBufferLength); var view = new DataView(buffer); // RIFF chunk descriptor/identifier writeUTFBytes(view, 0, 'RIFF'); // RIFF chunk length // changed "44" to "36" via #401 view.setUint32(4, 36 + interleavedLength * 2, true); // RIFF type writeUTFBytes(view, 8, 'WAVE'); // format chunk identifier // FMT sub-chunk writeUTFBytes(view, 12, 'fmt '); // format chunk length view.setUint32(16, 16, true); // sample format (raw) view.setUint16(20, 1, true); // stereo (2 channels) view.setUint16(22, numberOfAudioChannels, true); // sample rate view.setUint32(24, sampleRate, true); // byte rate (sample rate * block align) view.setUint32(28, sampleRate * 2, true); // block align (channel count * bytes per sample) view.setUint16(32, numberOfAudioChannels * 2, true); // bits per sample view.setUint16(34, 16, true); // data sub-chunk // data chunk identifier writeUTFBytes(view, 36, 'data'); // data chunk length view.setUint32(40, interleavedLength * 2, true); // write the PCM samples var lng = interleavedLength; var index = 44; var volume = 1; for (var i = 0; i < lng; i++) { view.setInt16(index, interleaved[i] * (0x7FFF * volume), true); index += 2; } if (cb) { return cb({ buffer: buffer, view: view }); } postMessage({ buffer: buffer, view: view }); } if (config.noWorker) { mergeAudioBuffers(config, function(data) { callback(data.buffer, data.view); }); return; } var webWorker = processInWebWorker(mergeAudioBuffers); webWorker.onmessage = function(event) { callback(event.data.buffer, event.data.view); // release memory URL.revokeObjectURL(webWorker.workerURL); // kill webworker (or Chrome will kill your page after ~25 calls) webWorker.terminate(); }; webWorker.postMessage(config); } function processInWebWorker(_function) { var workerURL = URL.createObjectURL(new Blob([_function.toString(), ';this.onmessage = function (eee) {' + _function.name + '(eee.data);}' ], { type: 'application/javascript' })); var worker = new Worker(workerURL); worker.workerURL = workerURL; return worker; } /** * This method stops recording MediaStream. * @param {function} callback - Callback function, that is used to pass recorded blob back to the callee. * @method * @memberof StereoAudioRecorder * @example * recorder.stop(function(blob) { * video.src = URL.createObjectURL(blob); * }); */ this.stop = function(callback) { callback = callback || function() {}; // stop recording recording = false; mergeLeftRightBuffers({ desiredSampRate: desiredSampRate, sampleRate: sampleRate, numberOfAudioChannels: numberOfAudioChannels, internalInterleavedLength: recordingLength, leftBuffers: leftchannel, rightBuffers: numberOfAudioChannels === 1 ? [] : rightchannel, noWorker: config.noWorker }, function(buffer, view) { /** * @property {Blob} blob - The recorded blob object. * @memberof StereoAudioRecorder * @example * recorder.stop(function(){ * var blob = recorder.blob; * }); */ self.blob = new Blob([view], { type: 'audio/wav' }); /** * @property {ArrayBuffer} buffer - The recorded buffer object. * @memberof StereoAudioRecorder * @example * recorder.stop(function(){ * var buffer = recorder.buffer; * }); */ self.buffer = new ArrayBuffer(view.buffer.byteLength); /** * @property {DataView} view - The recorded data-view object. * @memberof StereoAudioRecorder * @example * recorder.stop(function(){ * var view = recorder.view; * }); */ self.view = view; self.sampleRate = desiredSampRate || sampleRate; self.bufferSize = bufferSize; // recorded audio length self.length = recordingLength; isAudioProcessStarted = false; if (callback) { callback(self.blob); } }); }; if (typeof RecordRTC.Storage === 'undefined') { RecordRTC.Storage = { AudioContextConstructor: null, AudioContext: window.AudioContext || window.webkitAudioContext }; } if (!RecordRTC.Storage.AudioContextConstructor || RecordRTC.Storage.AudioContextConstructor.state === 'closed') { RecordRTC.Storage.AudioContextConstructor = new RecordRTC.Storage.AudioContext(); } var context = RecordRTC.Storage.AudioContextConstructor; // creates an audio node from the microphone incoming stream var audioInput = context.createMediaStreamSource(mediaStream); var legalBufferValues = [0, 256, 512, 1024, 2048, 4096, 8192, 16384]; /** * From the spec: This value controls how frequently the audioprocess event is * dispatched and how many sample-frames need to be processed each call. * Lower values for buffer size will result in a lower (better) latency. * Higher values will be necessary to avoid audio breakup and glitches * The size of the buffer (in sample-frames) which needs to * be processed each time onprocessaudio is called. * Legal values are (256, 512, 1024, 2048, 4096, 8192, 16384). * @property {number} bufferSize - Buffer-size for how frequently the audioprocess event is dispatched. * @memberof StereoAudioRecorder * @example * recorder = new StereoAudioRecorder(mediaStream, { * bufferSize: 4096 * }); */ // "0" means, let chrome decide the most accurate buffer-size for current platform. var bufferSize = typeof config.bufferSize === 'undefined' ? 4096 : config.bufferSize; if (legalBufferValues.indexOf(bufferSize) === -1) { if (!config.disableLogs) { console.log('Legal values for buffer-size are ' + JSON.stringify(legalBufferValues, null, '\t')); } } if (context.createJavaScriptNode) { jsAudioNode = context.createJavaScriptNode(bufferSize, numberOfAudioChannels, numberOfAudioChannels); } else if (context.createScriptProcessor) { jsAudioNode = context.createScriptProcessor(bufferSize, numberOfAudioChannels, numberOfAudioChannels); } else { throw 'WebAudio API has no support on this browser.'; } // connect the stream to the script processor audioInput.connect(jsAudioNode); if (!config.bufferSize) { bufferSize = jsAudioNode.bufferSize; // device buffer-size } /** * The sample rate (in sample-frames per second) at which the * AudioContext handles audio. It is assumed that all AudioNodes * in the context run at this rate. In making this assumption, * sample-rate converters or "varispeed" processors are not supported * in real-time processing. * The sampleRate parameter describes the sample-rate of the * linear PCM audio data in the buffer in sample-frames per second. * An implementation must support sample-rates in at least * the range 22050 to 96000. * @property {number} sampleRate - Buffer-size for how frequently the audioprocess event is dispatched. * @memberof StereoAudioRecorder * @example * recorder = new StereoAudioRecorder(mediaStream, { * sampleRate: 44100 * }); */ var sampleRate = typeof config.sampleRate !== 'undefined' ? config.sampleRate : context.sampleRate || 44100; if (sampleRate < 22050 || sampleRate > 96000) { // Ref: http://stackoverflow.com/a/26303918/552182 if (!config.disableLogs) { console.log('sample-rate must be under range 22050 and 96000.'); } } if (!config.disableLogs) { if (config.desiredSampRate) { console.log('Desired sample-rate: ' + config.desiredSampRate); } } var isPaused = false; /** * This method pauses the recording process. * @method * @memberof StereoAudioRecorder * @example * recorder.pause(); */ this.pause = function() { isPaused = true; }; /** * This method resumes the recording process. * @method * @memberof StereoAudioRecorder * @example * recorder.resume(); */ this.resume = function() { if (isMediaStreamActive() === false) { throw 'Please make sure MediaStream is active.'; } if (!recording) { if (!config.disableLogs) { console.log('Seems recording has been restarted.'); } this.record(); return; } isPaused = false; }; /** * This method resets currently recorded data. * @method * @memberof StereoAudioRecorder * @example * recorder.clearRecordedData(); */ this.clearRecordedData = function() { config.checkForInactiveTracks = false; if (recording) { this.stop(clearRecordedDataCB); } clearRecordedDataCB(); }; function resetVariables() { leftchannel = []; rightchannel = []; recordingLength = 0; isAudioProcessStarted = false; recording = false; isPaused = false; context = null; self.leftchannel = leftchannel; self.rightchannel = rightchannel; self.numberOfAudioChannels = numberOfAudioChannels; self.desiredSampRate = desiredSampRate; self.sampleRate = sampleRate; self.recordingLength = recordingLength; intervalsBasedBuffers = { left: [], right: [], recordingLength: 0 }; } function clearRecordedDataCB() { if (jsAudioNode) { jsAudioNode.onaudioprocess = null; jsAudioNode.disconnect(); jsAudioNode = null; } if (audioInput) { audioInput.disconnect(); audioInput = null; } resetVariables(); } // for debugging this.name = 'StereoAudioRecorder'; this.toString = function() { return this.name; }; var isAudioProcessStarted = false; function onAudioProcessDataAvailable(e) { if (isPaused) { return; } if (isMediaStreamActive() === false) { if (!config.disableLogs) { console.log('MediaStream seems stopped.'); } jsAudioNode.disconnect(); recording = false; } if (!recording) { if (audioInput) { audioInput.disconnect(); audioInput = null; } return; } /** * This method is called on "onaudioprocess" event's first invocation. * @method {function} onAudioProcessStarted * @memberof StereoAudioRecorder * @example * recorder.onAudioProcessStarted: function() { }; */ if (!isAudioProcessStarted) { isAudioProcessStarted = true; if (config.onAudioProcessStarted) { config.onAudioProcessStarted(); } if (config.initCallback) { config.initCallback(); } } var left = e.inputBuffer.getChannelData(0); // we clone the samples var chLeft = new Float32Array(left); leftchannel.push(chLeft); if (numberOfAudioChannels === 2) { var right = e.inputBuffer.getChannelData(1); var chRight = new Float32Array(right); rightchannel.push(chRight); } recordingLength += bufferSize; // export raw PCM self.recordingLength = recordingLength; if (typeof config.timeSlice !== 'undefined') { intervalsBasedBuffers.recordingLength += bufferSize; intervalsBasedBuffers.left.push(chLeft); if (numberOfAudioChannels === 2) { intervalsBasedBuffers.right.push(chRight); } } } jsAudioNode.onaudioprocess = onAudioProcessDataAvailable; // to prevent self audio to be connected with speakers if (context.createMediaStreamDestination) { jsAudioNode.connect(context.createMediaStreamDestination()); } else { jsAudioNode.connect(context.destination); } // export raw PCM this.leftchannel = leftchannel; this.rightchannel = rightchannel; this.numberOfAudioChannels = numberOfAudioChannels; this.desiredSampRate = desiredSampRate; this.sampleRate = sampleRate; self.recordingLength = recordingLength; // helper for intervals based blobs var intervalsBasedBuffers = { left: [], right: [], recordingLength: 0 }; // this looper is used to support intervals based blobs (via timeSlice+ondataavailable) function looper() { if (!recording || typeof config.ondataavailable !== 'function' || typeof config.timeSlice === 'undefined') { return; } if (intervalsBasedBuffers.left.length) { mergeLeftRightBuffers({ desiredSampRate: desiredSampRate, sampleRate: sampleRate, numberOfAudioChannels: numberOfAudioChannels, internalInterleavedLength: intervalsBasedBuffers.recordingLength, leftBuffers: intervalsBasedBuffers.left, rightBuffers: numberOfAudioChannels === 1 ? [] : intervalsBasedBuffers.right }, function(buffer, view) { var blob = new Blob([view], { type: 'audio/wav' }); config.ondataavailable(blob); setTimeout(looper, config.timeSlice); }); intervalsBasedBuffers = { left: [], right: [], recordingLength: 0 }; } else { setTimeout(looper, config.timeSlice); } } } if (typeof RecordRTC !== 'undefined') { RecordRTC.StereoAudioRecorder = StereoAudioRecorder; } // _________________ // CanvasRecorder.js /** * CanvasRecorder is a standalone class used by {@link RecordRTC} to bring HTML5-Canvas recording into video WebM. It uses HTML2Canvas library and runs top over {@link Whammy}. * @summary HTML2Canvas recording into video WebM. * @license {@link https://github.com/muaz-khan/RecordRTC/blob/master/LICENSE|MIT} * @author {@link https://MuazKhan.com|Muaz Khan} * @typedef CanvasRecorder * @class * @example * var recorder = new CanvasRecorder(htmlElement, { disableLogs: true, useWhammyRecorder: true }); * recorder.record(); * recorder.stop(function(blob) { * video.src = URL.createObjectURL(blob); * }); * @see {@link https://github.com/muaz-khan/RecordRTC|RecordRTC Source Code} * @param {HTMLElement} htmlElement - querySelector/getElementById/getElementsByTagName[0]/etc. * @param {object} config - {disableLogs:true, initCallback: function} */ function CanvasRecorder(htmlElement, config) { if (typeof html2canvas === 'undefined') { throw 'Please link: https://www.webrtc-experiment.com/screenshot.js'; } config = config || {}; if (!config.frameInterval) { config.frameInterval = 10; } // via DetectRTC.js var isCanvasSupportsStreamCapturing = false; ['captureStream', 'mozCaptureStream', 'webkitCaptureStream'].forEach(function(item) { if (item in document.createElement('canvas')) { isCanvasSupportsStreamCapturing = true; } }); var _isChrome = (!!window.webkitRTCPeerConnection || !!window.webkitGetUserMedia) && !!window.chrome; var chromeVersion = 50; var matchArray = navigator.userAgent.match(/Chrom(e|ium)\/([0-9]+)\./); if (_isChrome && matchArray && matchArray[2]) { chromeVersion = parseInt(matchArray[2], 10); } if (_isChrome && chromeVersion < 52) { isCanvasSupportsStreamCapturing = false; } if (config.useWhammyRecorder) { isCanvasSupportsStreamCapturing = false; } var globalCanvas, mediaStreamRecorder; if (isCanvasSupportsStreamCapturing) { if (!config.disableLogs) { console.log('Your browser supports both MediRecorder API and canvas.captureStream!'); } if (htmlElement instanceof HTMLCanvasElement) { globalCanvas = htmlElement; } else if (htmlElement instanceof CanvasRenderingContext2D) { globalCanvas = htmlElement.canvas; } else { throw 'Please pass either HTMLCanvasElement or CanvasRenderingContext2D.'; } } else if (!!navigator.mozGetUserMedia) { if (!config.disableLogs) { console.error('Canvas recording is NOT supported in Firefox.'); } } var isRecording; /** * This method records Canvas. * @method * @memberof CanvasRecorder * @example * recorder.record(); */ this.record = function() { isRecording = true; if (isCanvasSupportsStreamCapturing && !config.useWhammyRecorder) { // CanvasCaptureMediaStream var canvasMediaStream; if ('captureStream' in globalCanvas) { canvasMediaStream = globalCanvas.captureStream(25); // 25 FPS } else if ('mozCaptureStream' in globalCanvas) { canvasMediaStream = globalCanvas.mozCaptureStream(25); } else if ('webkitCaptureStream' in globalCanvas) { canvasMediaStream = globalCanvas.webkitCaptureStream(25); } try { var mdStream = new MediaStream(); mdStream.addTrack(getTracks(canvasMediaStream, 'video')[0]); canvasMediaStream = mdStream; } catch (e) {} if (!canvasMediaStream) { throw 'captureStream API are NOT available.'; } // Note: Jan 18, 2016 status is that, // Firefox MediaRecorder API can't record CanvasCaptureMediaStream object. mediaStreamRecorder = new MediaStreamRecorder(canvasMediaStream, { mimeType: config.mimeType || 'video/webm' }); mediaStreamRecorder.record(); } else { whammy.frames = []; lastTime = new Date().getTime(); drawCanvasFrame(); } if (config.initCallback) { config.initCallback(); } }; this.getWebPImages = function(callback) { if (htmlElement.nodeName.toLowerCase() !== 'canvas') { callback(); return; } var framesLength = whammy.frames.length; whammy.frames.forEach(function(frame, idx) { var framesRemaining = framesLength - idx; if (!config.disableLogs) { console.log(framesRemaining + '/' + framesLength + ' frames remaining'); } if (config.onEncodingCallback) { config.onEncodingCallback(framesRemaining, framesLength); } var webp = frame.image.toDataURL('image/webp', 1); whammy.frames[idx].image = webp; }); if (!config.disableLogs) { console.log('Generating WebM'); } callback(); }; /** * This method stops recording Canvas. * @param {function} callback - Callback function, that is used to pass recorded blob back to the callee. * @method * @memberof CanvasRecorder * @example * recorder.stop(function(blob) { * video.src = URL.createObjectURL(blob); * }); */ this.stop = function(callback) { isRecording = false; var that = this; if (isCanvasSupportsStreamCapturing && mediaStreamRecorder) { mediaStreamRecorder.stop(callback); return; } this.getWebPImages(function() { /** * @property {Blob} blob - Recorded frames in video/webm blob. * @memberof CanvasRecorder * @example * recorder.stop(function() { * var blob = recorder.blob; * }); */ whammy.compile(function(blob) { if (!config.disableLogs) { console.log('Recording finished!'); } that.blob = blob; if (that.blob.forEach) { that.blob = new Blob([], { type: 'video/webm' }); } if (callback) { callback(that.blob); } whammy.frames = []; }); }); }; var isPausedRecording = false; /** * This method pauses the recording process. * @method * @memberof CanvasRecorder * @example * recorder.pause(); */ this.pause = function() { isPausedRecording = true; if (mediaStreamRecorder instanceof MediaStreamRecorder) { mediaStreamRecorder.pause(); return; } }; /** * This method resumes the recording process. * @method * @memberof CanvasRecorder * @example * recorder.resume(); */ this.resume = function() { isPausedRecording = false; if (mediaStreamRecorder instanceof MediaStreamRecorder) { mediaStreamRecorder.resume(); return; } if (!isRecording) { this.record(); } }; /** * This method resets currently recorded data. * @method * @memberof CanvasRecorder * @example * recorder.clearRecordedData(); */ this.clearRecordedData = function() { if (isRecording) { this.stop(clearRecordedDataCB); } clearRecordedDataCB(); }; function clearRecordedDataCB() { whammy.frames = []; isRecording = false; isPausedRecording = false; } // for debugging this.name = 'CanvasRecorder'; this.toString = function() { return this.name; }; function cloneCanvas() { //create a new canvas var newCanvas = document.createElement('canvas'); var context = newCanvas.getContext('2d'); //set dimensions newCanvas.width = htmlElement.width; newCanvas.height = htmlElement.height; //apply the old canvas to the new one context.drawImage(htmlElement, 0, 0); //return the new canvas return newCanvas; } function drawCanvasFrame() { if (isPausedRecording) { lastTime = new Date().getTime(); return setTimeout(drawCanvasFrame, 500); } if (htmlElement.nodeName.toLowerCase() === 'canvas') { var duration = new Date().getTime() - lastTime; // via #206, by Jack i.e. @Seymourr lastTime = new Date().getTime(); whammy.frames.push({ image: cloneCanvas(), duration: duration }); if (isRecording) { setTimeout(drawCanvasFrame, config.frameInterval); } return; } html2canvas(htmlElement, { grabMouse: typeof config.showMousePointer === 'undefined' || config.showMousePointer, onrendered: function(canvas) { var duration = new Date().getTime() - lastTime; if (!duration) { return setTimeout(drawCanvasFrame, config.frameInterval); } // via #206, by Jack i.e. @Seymourr lastTime = new Date().getTime(); whammy.frames.push({ image: canvas.toDataURL('image/webp', 1), duration: duration }); if (isRecording) { setTimeout(drawCanvasFrame, config.frameInterval); } } }); } var lastTime = new Date().getTime(); var whammy = new Whammy.Video(100); } if (typeof RecordRTC !== 'undefined') { RecordRTC.CanvasRecorder = CanvasRecorder; } // _________________ // WhammyRecorder.js /** * WhammyRecorder is a standalone class used by {@link RecordRTC} to bring video recording in Chrome. It runs top over {@link Whammy}. * @summary Video recording feature in Chrome. * @license {@link https://github.com/muaz-khan/RecordRTC/blob/master/LICENSE|MIT} * @author {@link https://MuazKhan.com|Muaz Khan} * @typedef WhammyRecorder * @class * @example * var recorder = new WhammyRecorder(mediaStream); * recorder.record(); * recorder.stop(function(blob) { * video.src = URL.createObjectURL(blob); * }); * @see {@link https://github.com/muaz-khan/RecordRTC|RecordRTC Source Code} * @param {MediaStream} mediaStream - MediaStream object fetched using getUserMedia API or generated using captureStreamUntilEnded or WebAudio API. * @param {object} config - {disableLogs: true, initCallback: function, video: HTMLVideoElement, etc.} */ function WhammyRecorder(mediaStream, config) { config = config || {}; if (!config.frameInterval) { config.frameInterval = 10; } if (!config.disableLogs) { console.log('Using frames-interval:', config.frameInterval); } /** * This method records video. * @method * @memberof WhammyRecorder * @example * recorder.record(); */ this.record = function() { if (!config.width) { config.width = 320; } if (!config.height) { config.height = 240; } if (!config.video) { config.video = { width: config.width, height: config.height }; } if (!config.canvas) { config.canvas = { width: config.width, height: config.height }; } canvas.width = config.canvas.width || 320; canvas.height = config.canvas.height || 240; context = canvas.getContext('2d'); // setting defaults if (config.video && config.video instanceof HTMLVideoElement) { video = config.video.cloneNode(); if (config.initCallback) { config.initCallback(); } } else { video = document.createElement('video'); setSrcObject(mediaStream, video); video.onloadedmetadata = function() { // "onloadedmetadata" may NOT work in FF? if (config.initCallback) { config.initCallback(); } }; video.width = config.video.width; video.height = config.video.height; } video.muted = true; video.play(); lastTime = new Date().getTime(); whammy = new Whammy.Video(); if (!config.disableLogs) { console.log('canvas resolutions', canvas.width, '*', canvas.height); console.log('video width/height', video.width || canvas.width, '*', video.height || canvas.height); } drawFrames(config.frameInterval); }; /** * Draw and push frames to Whammy * @param {integer} frameInterval - set minimum interval (in milliseconds) between each time we push a frame to Whammy */ function drawFrames(frameInterval) { frameInterval = typeof frameInterval !== 'undefined' ? frameInterval : 10; var duration = new Date().getTime() - lastTime; if (!duration) { return setTimeout(drawFrames, frameInterval, frameInterval); } if (isPausedRecording) { lastTime = new Date().getTime(); return setTimeout(drawFrames, 100); } // via #206, by Jack i.e. @Seymourr lastTime = new Date().getTime(); if (video.paused) { // via: https://github.com/muaz-khan/WebRTC-Experiment/pull/316 // Tweak for Android Chrome video.play(); } context.drawImage(video, 0, 0, canvas.width, canvas.height); whammy.frames.push({ duration: duration, image: canvas.toDataURL('image/webp') }); if (!isStopDrawing) { setTimeout(drawFrames, frameInterval, frameInterval); } } function asyncLoop(o) { var i = -1, length = o.length; (function loop() { i++; if (i === length) { o.callback(); return; } // "setTimeout" added by Jim McLeod setTimeout(function() { o.functionToLoop(loop, i); }, 1); })(); } /** * remove black frames from the beginning to the specified frame * @param {Array} _frames - array of frames to be checked * @param {number} _framesToCheck - number of frame until check will be executed (-1 - will drop all frames until frame not matched will be found) * @param {number} _pixTolerance - 0 - very strict (only black pixel color) ; 1 - all * @param {number} _frameTolerance - 0 - very strict (only black frame color) ; 1 - all * @returns {Array} - array of frames */ // pull#293 by @volodalexey function dropBlackFrames(_frames, _framesToCheck, _pixTolerance, _frameTolerance, callback) { var localCanvas = document.createElement('canvas'); localCanvas.width = canvas.width; localCanvas.height = canvas.height; var context2d = localCanvas.getContext('2d'); var resultFrames = []; var checkUntilNotBlack = _framesToCheck === -1; var endCheckFrame = (_framesToCheck && _framesToCheck > 0 && _framesToCheck <= _frames.length) ? _framesToCheck : _frames.length; var sampleColor = { r: 0, g: 0, b: 0 }; var maxColorDifference = Math.sqrt( Math.pow(255, 2) + Math.pow(255, 2) + Math.pow(255, 2) ); var pixTolerance = _pixTolerance && _pixTolerance >= 0 && _pixTolerance <= 1 ? _pixTolerance : 0; var frameTolerance = _frameTolerance && _frameTolerance >= 0 && _frameTolerance <= 1 ? _frameTolerance : 0; var doNotCheckNext = false; asyncLoop({ length: endCheckFrame, functionToLoop: function(loop, f) { var matchPixCount, endPixCheck, maxPixCount; var finishImage = function() { if (!doNotCheckNext && maxPixCount - matchPixCount <= maxPixCount * frameTolerance) { // console.log('removed black frame : ' + f + ' ; frame duration ' + _frames[f].duration); } else { // console.log('frame is passed : ' + f); if (checkUntilNotBlack) { doNotCheckNext = true; } resultFrames.push(_frames[f]); } loop(); }; if (!doNotCheckNext) { var image = new Image(); image.onload = function() { context2d.drawImage(image, 0, 0, canvas.width, canvas.height); var imageData = context2d.getImageData(0, 0, canvas.width, canvas.height); matchPixCount = 0; endPixCheck = imageData.data.length; maxPixCount = imageData.data.length / 4; for (var pix = 0; pix < endPixCheck; pix += 4) { var currentColor = { r: imageData.data[pix], g: imageData.data[pix + 1], b: imageData.data[pix + 2] }; var colorDifference = Math.sqrt( Math.pow(currentColor.r - sampleColor.r, 2) + Math.pow(currentColor.g - sampleColor.g, 2) + Math.pow(currentColor.b - sampleColor.b, 2) ); // difference in color it is difference in color vectors (r1,g1,b1) <=> (r2,g2,b2) if (colorDifference <= maxColorDifference * pixTolerance) { matchPixCount++; } } finishImage(); }; image.src = _frames[f].image; } else { finishImage(); } }, callback: function() { resultFrames = resultFrames.concat(_frames.slice(endCheckFrame)); if (resultFrames.length <= 0) { // at least one last frame should be available for next manipulation // if total duration of all frames will be < 1000 than ffmpeg doesn't work well... resultFrames.push(_frames[_frames.length - 1]); } callback(resultFrames); } }); } var isStopDrawing = false; /** * This method stops recording video. * @param {function} callback - Callback function, that is used to pass recorded blob back to the callee. * @method * @memberof WhammyRecorder * @example * recorder.stop(function(blob) { * video.src = URL.createObjectURL(blob); * }); */ this.stop = function(callback) { callback = callback || function() {}; isStopDrawing = true; var _this = this; // analyse of all frames takes some time! setTimeout(function() { // e.g. dropBlackFrames(frames, 10, 1, 1) - will cut all 10 frames // e.g. dropBlackFrames(frames, 10, 0.5, 0.5) - will analyse 10 frames // e.g. dropBlackFrames(frames, 10) === dropBlackFrames(frames, 10, 0, 0) - will analyse 10 frames with strict black color dropBlackFrames(whammy.frames, -1, null, null, function(frames) { whammy.frames = frames; // to display advertisement images! if (config.advertisement && config.advertisement.length) { whammy.frames = config.advertisement.concat(whammy.frames); } /** * @property {Blob} blob - Recorded frames in video/webm blob. * @memberof WhammyRecorder * @example * recorder.stop(function() { * var blob = recorder.blob; * }); */ whammy.compile(function(blob) { _this.blob = blob; if (_this.blob.forEach) { _this.blob = new Blob([], { type: 'video/webm' }); } if (callback) { callback(_this.blob); } }); }); }, 10); }; var isPausedRecording = false; /** * This method pauses the recording process. * @method * @memberof WhammyRecorder * @example * recorder.pause(); */ this.pause = function() { isPausedRecording = true; }; /** * This method resumes the recording process. * @method * @memberof WhammyRecorder * @example * recorder.resume(); */ this.resume = function() { isPausedRecording = false; if (isStopDrawing) { this.record(); } }; /** * This method resets currently recorded data. * @method * @memberof WhammyRecorder * @example * recorder.clearRecordedData(); */ this.clearRecordedData = function() { if (!isStopDrawing) { this.stop(clearRecordedDataCB); } clearRecordedDataCB(); }; function clearRecordedDataCB() { whammy.frames = []; isStopDrawing = true; isPausedRecording = false; } // for debugging this.name = 'WhammyRecorder'; this.toString = function() { return this.name; }; var canvas = document.createElement('canvas'); var context = canvas.getContext('2d'); var video; var lastTime; var whammy; } if (typeof RecordRTC !== 'undefined') { RecordRTC.WhammyRecorder = WhammyRecorder; } // https://github.com/antimatter15/whammy/blob/master/LICENSE // _________ // Whammy.js // todo: Firefox now supports webp for webm containers! // their MediaRecorder implementation works well! // should we provide an option to record via Whammy.js or MediaRecorder API is a better solution? /** * Whammy is a standalone class used by {@link RecordRTC} to bring video recording in Chrome. It is written by {@link https://github.com/antimatter15|antimatter15} * @summary A real time javascript webm encoder based on a canvas hack. * @license {@link https://github.com/muaz-khan/RecordRTC/blob/master/LICENSE|MIT} * @author {@link https://MuazKhan.com|Muaz Khan} * @typedef Whammy * @class * @example * var recorder = new Whammy().Video(15); * recorder.add(context || canvas || dataURL); * var output = recorder.compile(); * @see {@link https://github.com/muaz-khan/RecordRTC|RecordRTC Source Code} */ var Whammy = (function() { // a more abstract-ish API function WhammyVideo(duration) { this.frames = []; this.duration = duration || 1; this.quality = 0.8; } /** * Pass Canvas or Context or image/webp(string) to {@link Whammy} encoder. * @method * @memberof Whammy * @example * recorder = new Whammy().Video(0.8, 100); * recorder.add(canvas || context || 'image/webp'); * @param {string} frame - Canvas || Context || image/webp * @param {number} duration - Stick a duration (in milliseconds) */ WhammyVideo.prototype.add = function(frame, duration) { if ('canvas' in frame) { //CanvasRenderingContext2D frame = frame.canvas; } if ('toDataURL' in frame) { frame = frame.toDataURL('image/webp', this.quality); } if (!(/^data:image\/webp;base64,/ig).test(frame)) { throw 'Input must be formatted properly as a base64 encoded DataURI of type image/webp'; } this.frames.push({ image: frame, duration: duration || this.duration }); }; function processInWebWorker(_function) { var blob = URL.createObjectURL(new Blob([_function.toString(), 'this.onmessage = function (eee) {' + _function.name + '(eee.data);}' ], { type: 'application/javascript' })); var worker = new Worker(blob); URL.revokeObjectURL(blob); return worker; } function whammyInWebWorker(frames) { function ArrayToWebM(frames) { var info = checkFrames(frames); if (!info) { return []; } var clusterMaxDuration = 30000; var EBML = [{ 'id': 0x1a45dfa3, // EBML 'data': [{ 'data': 1, 'id': 0x4286 // EBMLVersion }, { 'data': 1, 'id': 0x42f7 // EBMLReadVersion }, { 'data': 4, 'id': 0x42f2 // EBMLMaxIDLength }, { 'data': 8, 'id': 0x42f3 // EBMLMaxSizeLength }, { 'data': 'webm', 'id': 0x4282 // DocType }, { 'data': 2, 'id': 0x4287 // DocTypeVersion }, { 'data': 2, 'id': 0x4285 // DocTypeReadVersion }] }, { 'id': 0x18538067, // Segment 'data': [{ 'id': 0x1549a966, // Info 'data': [{ 'data': 1e6, //do things in millisecs (num of nanosecs for duration scale) 'id': 0x2ad7b1 // TimecodeScale }, { 'data': 'whammy', 'id': 0x4d80 // MuxingApp }, { 'data': 'whammy', 'id': 0x5741 // WritingApp }, { 'data': doubleToString(info.duration), 'id': 0x4489 // Duration }] }, { 'id': 0x1654ae6b, // Tracks 'data': [{ 'id': 0xae, // TrackEntry 'data': [{ 'data': 1, 'id': 0xd7 // TrackNumber }, { 'data': 1, 'id': 0x73c5 // TrackUID }, { 'data': 0, 'id': 0x9c // FlagLacing }, { 'data': 'und', 'id': 0x22b59c // Language }, { 'data': 'V_VP8', 'id': 0x86 // CodecID }, { 'data': 'VP8', 'id': 0x258688 // CodecName }, { 'data': 1, 'id': 0x83 // TrackType }, { 'id': 0xe0, // Video 'data': [{ 'data': info.width, 'id': 0xb0 // PixelWidth }, { 'data': info.height, 'id': 0xba // PixelHeight }] }] }] }] }]; //Generate clusters (max duration) var frameNumber = 0; var clusterTimecode = 0; while (frameNumber < frames.length) { var clusterFrames = []; var clusterDuration = 0; do { clusterFrames.push(frames[frameNumber]); clusterDuration += frames[frameNumber].duration; frameNumber++; } while (frameNumber < frames.length && clusterDuration < clusterMaxDuration); var clusterCounter = 0; var cluster = { 'id': 0x1f43b675, // Cluster 'data': getClusterData(clusterTimecode, clusterCounter, clusterFrames) }; //Add cluster to segment EBML[1].data.push(cluster); clusterTimecode += clusterDuration; } return generateEBML(EBML); } function getClusterData(clusterTimecode, clusterCounter, clusterFrames) { return [{ 'data': clusterTimecode, 'id': 0xe7 // Timecode }].concat(clusterFrames.map(function(webp) { var block = makeSimpleBlock({ discardable: 0, frame: webp.data.slice(4), invisible: 0, keyframe: 1, lacing: 0, trackNum: 1, timecode: Math.round(clusterCounter) }); clusterCounter += webp.duration; return { data: block, id: 0xa3 }; })); } // sums the lengths of all the frames and gets the duration function checkFrames(frames) { if (!frames[0]) { postMessage({ error: 'Something went wrong. Maybe WebP format is not supported in the current browser.' }); return; } var width = frames[0].width, height = frames[0].height, duration = frames[0].duration; for (var i = 1; i < frames.length; i++) { duration += frames[i].duration; } return { duration: duration, width: width, height: height }; } function numToBuffer(num) { var parts = []; while (num > 0) { parts.push(num & 0xff); num = num >> 8; } return new Uint8Array(parts.reverse()); } function strToBuffer(str) { return new Uint8Array(str.split('').map(function(e) { return e.charCodeAt(0); })); } function bitsToBuffer(bits) { var data = []; var pad = (bits.length % 8) ? (new Array(1 + 8 - (bits.length % 8))).join('0') : ''; bits = pad + bits; for (var i = 0; i < bits.length; i += 8) { data.push(parseInt(bits.substr(i, 8), 2)); } return new Uint8Array(data); } function generateEBML(json) { var ebml = []; for (var i = 0; i < json.length; i++) { var data = json[i].data; if (typeof data === 'object') { data = generateEBML(data); } if (typeof data === 'number') { data = bitsToBuffer(data.toString(2)); } if (typeof data === 'string') { data = strToBuffer(data); } var len = data.size || data.byteLength || data.length; var zeroes = Math.ceil(Math.ceil(Math.log(len) / Math.log(2)) / 8); var sizeToString = len.toString(2); var padded = (new Array((zeroes * 7 + 7 + 1) - sizeToString.length)).join('0') + sizeToString; var size = (new Array(zeroes)).join('0') + '1' + padded; ebml.push(numToBuffer(json[i].id)); ebml.push(bitsToBuffer(size)); ebml.push(data); } return new Blob(ebml, { type: 'video/webm' }); } function toBinStrOld(bits) { var data = ''; var pad = (bits.length % 8) ? (new Array(1 + 8 - (bits.length % 8))).join('0') : ''; bits = pad + bits; for (var i = 0; i < bits.length; i += 8) { data += String.fromCharCode(parseInt(bits.substr(i, 8), 2)); } return data; } function makeSimpleBlock(data) { var flags = 0; if (data.keyframe) { flags |= 128; } if (data.invisible) { flags |= 8; } if (data.lacing) { flags |= (data.lacing << 1); } if (data.discardable) { flags |= 1; } if (data.trackNum > 127) { throw 'TrackNumber > 127 not supported'; } var out = [data.trackNum | 0x80, data.timecode >> 8, data.timecode & 0xff, flags].map(function(e) { return String.fromCharCode(e); }).join('') + data.frame; return out; } function parseWebP(riff) { var VP8 = riff.RIFF[0].WEBP[0]; var frameStart = VP8.indexOf('\x9d\x01\x2a'); // A VP8 keyframe starts with the 0x9d012a header for (var i = 0, c = []; i < 4; i++) { c[i] = VP8.charCodeAt(frameStart + 3 + i); } var width, height, tmp; //the code below is literally copied verbatim from the bitstream spec tmp = (c[1] << 8) | c[0]; width = tmp & 0x3FFF; tmp = (c[3] << 8) | c[2]; height = tmp & 0x3FFF; return { width: width, height: height, data: VP8, riff: riff }; } function getStrLength(string, offset) { return parseInt(string.substr(offset + 4, 4).split('').map(function(i) { var unpadded = i.charCodeAt(0).toString(2); return (new Array(8 - unpadded.length + 1)).join('0') + unpadded; }).join(''), 2); } function parseRIFF(string) { var offset = 0; var chunks = {}; while (offset < string.length) { var id = string.substr(offset, 4); var len = getStrLength(string, offset); var data = string.substr(offset + 4 + 4, len); offset += 4 + 4 + len; chunks[id] = chunks[id] || []; if (id === 'RIFF' || id === 'LIST') { chunks[id].push(parseRIFF(data)); } else { chunks[id].push(data); } } return chunks; } function doubleToString(num) { return [].slice.call( new Uint8Array((new Float64Array([num])).buffer), 0).map(function(e) { return String.fromCharCode(e); }).reverse().join(''); } var webm = new ArrayToWebM(frames.map(function(frame) { var webp = parseWebP(parseRIFF(atob(frame.image.slice(23)))); webp.duration = frame.duration; return webp; })); postMessage(webm); } /** * Encodes frames in WebM container. It uses WebWorkinvoke to invoke 'ArrayToWebM' method. * @param {function} callback - Callback function, that is used to pass recorded blob back to the callee. * @method * @memberof Whammy * @example * recorder = new Whammy().Video(0.8, 100); * recorder.compile(function(blob) { * // blob.size - blob.type * }); */ WhammyVideo.prototype.compile = function(callback) { var webWorker = processInWebWorker(whammyInWebWorker); webWorker.onmessage = function(event) { if (event.data.error) { console.error(event.data.error); return; } callback(event.data); }; webWorker.postMessage(this.frames); }; return { /** * A more abstract-ish API. * @method * @memberof Whammy * @example * recorder = new Whammy().Video(0.8, 100); * @param {?number} speed - 0.8 * @param {?number} quality - 100 */ Video: WhammyVideo }; })(); if (typeof RecordRTC !== 'undefined') { RecordRTC.Whammy = Whammy; } // ______________ (indexed-db) // DiskStorage.js /** * DiskStorage is a standalone object used by {@link RecordRTC} to store recorded blobs in IndexedDB storage. * @summary Writing blobs into IndexedDB. * @license {@link https://github.com/muaz-khan/RecordRTC/blob/master/LICENSE|MIT} * @author {@link https://MuazKhan.com|Muaz Khan} * @example * DiskStorage.Store({ * audioBlob: yourAudioBlob, * videoBlob: yourVideoBlob, * gifBlob : yourGifBlob * }); * DiskStorage.Fetch(function(dataURL, type) { * if(type === 'audioBlob') { } * if(type === 'videoBlob') { } * if(type === 'gifBlob') { } * }); * // DiskStorage.dataStoreName = 'recordRTC'; * // DiskStorage.onError = function(error) { }; * @property {function} init - This method must be called once to initialize IndexedDB ObjectStore. Though, it is auto-used internally. * @property {function} Fetch - This method fetches stored blobs from IndexedDB. * @property {function} Store - This method stores blobs in IndexedDB. * @property {function} onError - This function is invoked for any known/unknown error. * @property {string} dataStoreName - Name of the ObjectStore created in IndexedDB storage. * @see {@link https://github.com/muaz-khan/RecordRTC|RecordRTC Source Code} */ var DiskStorage = { /** * This method must be called once to initialize IndexedDB ObjectStore. Though, it is auto-used internally. * @method * @memberof DiskStorage * @internal * @example * DiskStorage.init(); */ init: function() { var self = this; if (typeof indexedDB === 'undefined' || typeof indexedDB.open === 'undefined') { console.error('IndexedDB API are not available in this browser.'); return; } var dbVersion = 1; var dbName = this.dbName || location.href.replace(/\/|:|#|%|\.|\[|\]/g, ''), db; var request = indexedDB.open(dbName, dbVersion); function createObjectStore(dataBase) { dataBase.createObjectStore(self.dataStoreName); } function putInDB() { var transaction = db.transaction([self.dataStoreName], 'readwrite'); if (self.videoBlob) { transaction.objectStore(self.dataStoreName).put(self.videoBlob, 'videoBlob'); } if (self.gifBlob) { transaction.objectStore(self.dataStoreName).put(self.gifBlob, 'gifBlob'); } if (self.audioBlob) { transaction.objectStore(self.dataStoreName).put(self.audioBlob, 'audioBlob'); } function getFromStore(portionName) { transaction.objectStore(self.dataStoreName).get(portionName).onsuccess = function(event) { if (self.callback) { self.callback(event.target.result, portionName); } }; } getFromStore('audioBlob'); getFromStore('videoBlob'); getFromStore('gifBlob'); } request.onerror = self.onError; request.onsuccess = function() { db = request.result; db.onerror = self.onError; if (db.setVersion) { if (db.version !== dbVersion) { var setVersion = db.setVersion(dbVersion); setVersion.onsuccess = function() { createObjectStore(db); putInDB(); }; } else { putInDB(); } } else { putInDB(); } }; request.onupgradeneeded = function(event) { createObjectStore(event.target.result); }; }, /** * This method fetches stored blobs from IndexedDB. * @method * @memberof DiskStorage * @internal * @example * DiskStorage.Fetch(function(dataURL, type) { * if(type === 'audioBlob') { } * if(type === 'videoBlob') { } * if(type === 'gifBlob') { } * }); */ Fetch: function(callback) { this.callback = callback; this.init(); return this; }, /** * This method stores blobs in IndexedDB. * @method * @memberof DiskStorage * @internal * @example * DiskStorage.Store({ * audioBlob: yourAudioBlob, * videoBlob: yourVideoBlob, * gifBlob : yourGifBlob * }); */ Store: function(config) { this.audioBlob = config.audioBlob; this.videoBlob = config.videoBlob; this.gifBlob = config.gifBlob; this.init(); return this; }, /** * This function is invoked for any known/unknown error. * @method * @memberof DiskStorage * @internal * @example * DiskStorage.onError = function(error){ * alerot( JSON.stringify(error) ); * }; */ onError: function(error) { console.error(JSON.stringify(error, null, '\t')); }, /** * @property {string} dataStoreName - Name of the ObjectStore created in IndexedDB storage. * @memberof DiskStorage * @internal * @example * DiskStorage.dataStoreName = 'recordRTC'; */ dataStoreName: 'recordRTC', dbName: null }; if (typeof RecordRTC !== 'undefined') { RecordRTC.DiskStorage = DiskStorage; } // ______________ // GifRecorder.js /** * GifRecorder is standalone calss used by {@link RecordRTC} to record video or canvas into animated gif. * @license {@link https://github.com/muaz-khan/RecordRTC/blob/master/LICENSE|MIT} * @author {@link https://MuazKhan.com|Muaz Khan} * @typedef GifRecorder * @class * @example * var recorder = new GifRecorder(mediaStream || canvas || context, { onGifPreview: function, onGifRecordingStarted: function, width: 1280, height: 720, frameRate: 200, quality: 10 }); * recorder.record(); * recorder.stop(function(blob) { * img.src = URL.createObjectURL(blob); * }); * @see {@link https://github.com/muaz-khan/RecordRTC|RecordRTC Source Code} * @param {MediaStream} mediaStream - MediaStream object or HTMLCanvasElement or CanvasRenderingContext2D. * @param {object} config - {disableLogs:true, initCallback: function, width: 320, height: 240, frameRate: 200, quality: 10} */ function GifRecorder(mediaStream, config) { if (typeof GIFEncoder === 'undefined') { var script = document.createElement('script'); script.src = 'https://www.webrtc-experiment.com/gif-recorder.js'; (document.body || document.documentElement).appendChild(script); } config = config || {}; var isHTMLObject = mediaStream instanceof CanvasRenderingContext2D || mediaStream instanceof HTMLCanvasElement; /** * This method records MediaStream. * @method * @memberof GifRecorder * @example * recorder.record(); */ this.record = function() { if (typeof GIFEncoder === 'undefined') { setTimeout(self.record, 1000); return; } if (!isLoadedMetaData) { setTimeout(self.record, 1000); return; } if (!isHTMLObject) { if (!config.width) { config.width = video.offsetWidth || 320; } if (!config.height) { config.height = video.offsetHeight || 240; } if (!config.video) { config.video = { width: config.width, height: config.height }; } if (!config.canvas) { config.canvas = { width: config.width, height: config.height }; } canvas.width = config.canvas.width || 320; canvas.height = config.canvas.height || 240; video.width = config.video.width || 320; video.height = config.video.height || 240; } // external library to record as GIF images gifEncoder = new GIFEncoder(); // void setRepeat(int iter) // Sets the number of times the set of GIF frames should be played. // Default is 1; 0 means play indefinitely. gifEncoder.setRepeat(0); // void setFrameRate(Number fps) // Sets frame rate in frames per second. // Equivalent to setDelay(1000/fps). // Using "setDelay" instead of "setFrameRate" gifEncoder.setDelay(config.frameRate || 200); // void setQuality(int quality) // Sets quality of color quantization (conversion of images to the // maximum 256 colors allowed by the GIF specification). // Lower values (minimum = 1) produce better colors, // but slow processing significantly. 10 is the default, // and produces good color mapping at reasonable speeds. // Values greater than 20 do not yield significant improvements in speed. gifEncoder.setQuality(config.quality || 10); // Boolean start() // This writes the GIF Header and returns false if it fails. gifEncoder.start(); if (typeof config.onGifRecordingStarted === 'function') { config.onGifRecordingStarted(); } startTime = Date.now(); function drawVideoFrame(time) { if (self.clearedRecordedData === true) { return; } if (isPausedRecording) { return setTimeout(function() { drawVideoFrame(time); }, 100); } lastAnimationFrame = requestAnimationFrame(drawVideoFrame); if (typeof lastFrameTime === undefined) { lastFrameTime = time; } // ~10 fps if (time - lastFrameTime < 90) { return; } if (!isHTMLObject && video.paused) { // via: https://github.com/muaz-khan/WebRTC-Experiment/pull/316 // Tweak for Android Chrome video.play(); } if (!isHTMLObject) { context.drawImage(video, 0, 0, canvas.width, canvas.height); } if (config.onGifPreview) { config.onGifPreview(canvas.toDataURL('image/png')); } gifEncoder.addFrame(context); lastFrameTime = time; } lastAnimationFrame = requestAnimationFrame(drawVideoFrame); if (config.initCallback) { config.initCallback(); } }; /** * This method stops recording MediaStream. * @param {function} callback - Callback function, that is used to pass recorded blob back to the callee. * @method * @memberof GifRecorder * @example * recorder.stop(function(blob) { * img.src = URL.createObjectURL(blob); * }); */ this.stop = function(callback) { callback = callback || function() {}; if (lastAnimationFrame) { cancelAnimationFrame(lastAnimationFrame); } endTime = Date.now(); /** * @property {Blob} blob - The recorded blob object. * @memberof GifRecorder * @example * recorder.stop(function(){ * var blob = recorder.blob; * }); */ this.blob = new Blob([new Uint8Array(gifEncoder.stream().bin)], { type: 'image/gif' }); callback(this.blob); // bug: find a way to clear old recorded blobs gifEncoder.stream().bin = []; }; var isPausedRecording = false; /** * This method pauses the recording process. * @method * @memberof GifRecorder * @example * recorder.pause(); */ this.pause = function() { isPausedRecording = true; }; /** * This method resumes the recording process. * @method * @memberof GifRecorder * @example * recorder.resume(); */ this.resume = function() { isPausedRecording = false; }; /** * This method resets currently recorded data. * @method * @memberof GifRecorder * @example * recorder.clearRecordedData(); */ this.clearRecordedData = function() { self.clearedRecordedData = true; clearRecordedDataCB(); }; function clearRecordedDataCB() { if (gifEncoder) { gifEncoder.stream().bin = []; } } // for debugging this.name = 'GifRecorder'; this.toString = function() { return this.name; }; var canvas = document.createElement('canvas'); var context = canvas.getContext('2d'); if (isHTMLObject) { if (mediaStream instanceof CanvasRenderingContext2D) { context = mediaStream; canvas = context.canvas; } else if (mediaStream instanceof HTMLCanvasElement) { context = mediaStream.getContext('2d'); canvas = mediaStream; } } var isLoadedMetaData = true; if (!isHTMLObject) { var video = document.createElement('video'); video.muted = true; video.autoplay = true; video.playsInline = true; isLoadedMetaData = false; video.onloadedmetadata = function() { isLoadedMetaData = true; }; setSrcObject(mediaStream, video); video.play(); } var lastAnimationFrame = null; var startTime, endTime, lastFrameTime; var gifEncoder; var self = this; } if (typeof RecordRTC !== 'undefined') { RecordRTC.GifRecorder = GifRecorder; } // Last time updated: 2019-06-21 4:09:42 AM UTC // ________________________ // MultiStreamsMixer v1.2.2 // Open-Sourced: https://github.com/muaz-khan/MultiStreamsMixer // -------------------------------------------------- // Muaz Khan - www.MuazKhan.com // MIT License - www.WebRTC-Experiment.com/licence // -------------------------------------------------- function MultiStreamsMixer(arrayOfMediaStreams, elementClass) { var browserFakeUserAgent = 'Fake/5.0 (FakeOS) AppleWebKit/123 (KHTML, like Gecko) Fake/12.3.4567.89 Fake/123.45'; (function(that) { if (typeof RecordRTC !== 'undefined') { return; } if (!that) { return; } if (typeof window !== 'undefined') { return; } if (typeof global === 'undefined') { return; } global.navigator = { userAgent: browserFakeUserAgent, getUserMedia: function() {} }; if (!global.console) { global.console = {}; } if (typeof global.console.log === 'undefined' || typeof global.console.error === 'undefined') { global.console.error = global.console.log = global.console.log || function() { console.log(arguments); }; } if (typeof document === 'undefined') { /*global document:true */ that.document = { documentElement: { appendChild: function() { return ''; } } }; document.createElement = document.captureStream = document.mozCaptureStream = function() { var obj = { getContext: function() { return obj; }, play: function() {}, pause: function() {}, drawImage: function() {}, toDataURL: function() { return ''; }, style: {} }; return obj; }; that.HTMLVideoElement = function() {}; } if (typeof location === 'undefined') { /*global location:true */ that.location = { protocol: 'file:', href: '', hash: '' }; } if (typeof screen === 'undefined') { /*global screen:true */ that.screen = { width: 0, height: 0 }; } if (typeof URL === 'undefined') { /*global screen:true */ that.URL = { createObjectURL: function() { return ''; }, revokeObjectURL: function() { return ''; } }; } /*global window:true */ that.window = global; })(typeof global !== 'undefined' ? global : null); // requires: chrome://flags/#enable-experimental-web-platform-features elementClass = elementClass || 'multi-streams-mixer'; var videos = []; var isStopDrawingFrames = false; var canvas = document.createElement('canvas'); var context = canvas.getContext('2d'); canvas.style.opacity = 0; canvas.style.position = 'absolute'; canvas.style.zIndex = -1; canvas.style.top = '-1000em'; canvas.style.left = '-1000em'; canvas.className = elementClass; (document.body || document.documentElement).appendChild(canvas); this.disableLogs = false; this.frameInterval = 10; this.width = 360; this.height = 240; // use gain node to prevent echo this.useGainNode = true; var self = this; // _____________________________ // Cross-Browser-Declarations.js // WebAudio API representer var AudioContext = window.AudioContext; if (typeof AudioContext === 'undefined') { if (typeof webkitAudioContext !== 'undefined') { /*global AudioContext:true */ AudioContext = webkitAudioContext; } if (typeof mozAudioContext !== 'undefined') { /*global AudioContext:true */ AudioContext = mozAudioContext; } } /*jshint -W079 */ var URL = window.URL; if (typeof URL === 'undefined' && typeof webkitURL !== 'undefined') { /*global URL:true */ URL = webkitURL; } if (typeof navigator !== 'undefined' && typeof navigator.getUserMedia === 'undefined') { // maybe window.navigator? if (typeof navigator.webkitGetUserMedia !== 'undefined') { navigator.getUserMedia = navigator.webkitGetUserMedia; } if (typeof navigator.mozGetUserMedia !== 'undefined') { navigator.getUserMedia = navigator.mozGetUserMedia; } } var MediaStream = window.MediaStream; if (typeof MediaStream === 'undefined' && typeof webkitMediaStream !== 'undefined') { MediaStream = webkitMediaStream; } /*global MediaStream:true */ if (typeof MediaStream !== 'undefined') { // override "stop" method for all browsers if (typeof MediaStream.prototype.stop === 'undefined') { MediaStream.prototype.stop = function() { this.getTracks().forEach(function(track) { track.stop(); }); }; } } var Storage = {}; if (typeof AudioContext !== 'undefined') { Storage.AudioContext = AudioContext; } else if (typeof webkitAudioContext !== 'undefined') { Storage.AudioContext = webkitAudioContext; } function setSrcObject(stream, element) { if ('srcObject' in element) { element.srcObject = stream; } else if ('mozSrcObject' in element) { element.mozSrcObject = stream; } else { element.srcObject = stream; } } this.startDrawingFrames = function() { drawVideosToCanvas(); }; function drawVideosToCanvas() { if (isStopDrawingFrames) { return; } var videosLength = videos.length; var fullcanvas = false; var remaining = []; videos.forEach(function(video) { if (!video.stream) { video.stream = {}; } if (video.stream.fullcanvas) { fullcanvas = video; } else { // todo: video.stream.active or video.stream.live to fix blank frames issues? remaining.push(video); } }); if (fullcanvas) { canvas.width = fullcanvas.stream.width; canvas.height = fullcanvas.stream.height; } else if (remaining.length) { canvas.width = videosLength > 1 ? remaining[0].width * 2 : remaining[0].width; var height = 1; if (videosLength === 3 || videosLength === 4) { height = 2; } if (videosLength === 5 || videosLength === 6) { height = 3; } if (videosLength === 7 || videosLength === 8) { height = 4; } if (videosLength === 9 || videosLength === 10) { height = 5; } canvas.height = remaining[0].height * height; } else { canvas.width = self.width || 360; canvas.height = self.height || 240; } if (fullcanvas && fullcanvas instanceof HTMLVideoElement) { drawImage(fullcanvas); } remaining.forEach(function(video, idx) { drawImage(video, idx); }); setTimeout(drawVideosToCanvas, self.frameInterval); } function drawImage(video, idx) { if (isStopDrawingFrames) { return; } var x = 0; var y = 0; var width = video.width; var height = video.height; if (idx === 1) { x = video.width; } if (idx === 2) { y = video.height; } if (idx === 3) { x = video.width; y = video.height; } if (idx === 4) { y = video.height * 2; } if (idx === 5) { x = video.width; y = video.height * 2; } if (idx === 6) { y = video.height * 3; } if (idx === 7) { x = video.width; y = video.height * 3; } if (typeof video.stream.left !== 'undefined') { x = video.stream.left; } if (typeof video.stream.top !== 'undefined') { y = video.stream.top; } if (typeof video.stream.width !== 'undefined') { width = video.stream.width; } if (typeof video.stream.height !== 'undefined') { height = video.stream.height; } context.drawImage(video, x, y, width, height); if (typeof video.stream.onRender === 'function') { video.stream.onRender(context, x, y, width, height, idx); } } function getMixedStream() { isStopDrawingFrames = false; var mixedVideoStream = getMixedVideoStream(); var mixedAudioStream = getMixedAudioStream(); if (mixedAudioStream) { mixedAudioStream.getTracks().filter(function(t) { return t.kind === 'audio'; }).forEach(function(track) { mixedVideoStream.addTrack(track); }); } var fullcanvas; arrayOfMediaStreams.forEach(function(stream) { if (stream.fullcanvas) { fullcanvas = true; } }); // mixedVideoStream.prototype.appendStreams = appendStreams; // mixedVideoStream.prototype.resetVideoStreams = resetVideoStreams; // mixedVideoStream.prototype.clearRecordedData = clearRecordedData; return mixedVideoStream; } function getMixedVideoStream() { resetVideoStreams(); var capturedStream; if ('captureStream' in canvas) { capturedStream = canvas.captureStream(); } else if ('mozCaptureStream' in canvas) { capturedStream = canvas.mozCaptureStream(); } else if (!self.disableLogs) { console.error('Upgrade to latest Chrome or otherwise enable this flag: chrome://flags/#enable-experimental-web-platform-features'); } var videoStream = new MediaStream(); capturedStream.getTracks().filter(function(t) { return t.kind === 'video'; }).forEach(function(track) { videoStream.addTrack(track); }); canvas.stream = videoStream; return videoStream; } function getMixedAudioStream() { // via: @pehrsons if (!Storage.AudioContextConstructor) { Storage.AudioContextConstructor = new Storage.AudioContext(); } self.audioContext = Storage.AudioContextConstructor; self.audioSources = []; if (self.useGainNode === true) { self.gainNode = self.audioContext.createGain(); self.gainNode.connect(self.audioContext.destination); self.gainNode.gain.value = 0; // don't hear self } var audioTracksLength = 0; arrayOfMediaStreams.forEach(function(stream) { if (!stream.getTracks().filter(function(t) { return t.kind === 'audio'; }).length) { return; } audioTracksLength++; var audioSource = self.audioContext.createMediaStreamSource(stream); if (self.useGainNode === true) { audioSource.connect(self.gainNode); } self.audioSources.push(audioSource); }); if (!audioTracksLength) { // because "self.audioContext" is not initialized // that's why we've to ignore rest of the code return; } self.audioDestination = self.audioContext.createMediaStreamDestination(); self.audioSources.forEach(function(audioSource) { audioSource.connect(self.audioDestination); }); return self.audioDestination.stream; } function getVideo(stream) { var video = document.createElement('video'); setSrcObject(stream, video); video.className = elementClass; video.muted = true; video.volume = 0; video.width = stream.width || self.width || 360; video.height = stream.height || self.height || 240; video.play(); return video; } this.appendStreams = function(streams) { if (!streams) { throw 'First parameter is required.'; } if (!(streams instanceof Array)) { streams = [streams]; } streams.forEach(function(stream) { var newStream = new MediaStream(); if (stream.getTracks().filter(function(t) { return t.kind === 'video'; }).length) { var video = getVideo(stream); video.stream = stream; videos.push(video); newStream.addTrack(stream.getTracks().filter(function(t) { return t.kind === 'video'; })[0]); } if (stream.getTracks().filter(function(t) { return t.kind === 'audio'; }).length) { var audioSource = self.audioContext.createMediaStreamSource(stream); self.audioDestination = self.audioContext.createMediaStreamDestination(); audioSource.connect(self.audioDestination); newStream.addTrack(self.audioDestination.stream.getTracks().filter(function(t) { return t.kind === 'audio'; })[0]); } arrayOfMediaStreams.push(newStream); }); }; this.releaseStreams = function() { videos = []; isStopDrawingFrames = true; if (self.gainNode) { self.gainNode.disconnect(); self.gainNode = null; } if (self.audioSources.length) { self.audioSources.forEach(function(source) { source.disconnect(); }); self.audioSources = []; } if (self.audioDestination) { self.audioDestination.disconnect(); self.audioDestination = null; } if (self.audioContext) { self.audioContext.close(); } self.audioContext = null; context.clearRect(0, 0, canvas.width, canvas.height); if (canvas.stream) { canvas.stream.stop(); canvas.stream = null; } }; this.resetVideoStreams = function(streams) { if (streams && !(streams instanceof Array)) { streams = [streams]; } resetVideoStreams(streams); }; function resetVideoStreams(streams) { videos = []; streams = streams || arrayOfMediaStreams; // via: @adrian-ber streams.forEach(function(stream) { if (!stream.getTracks().filter(function(t) { return t.kind === 'video'; }).length) { return; } var video = getVideo(stream); video.stream = stream; videos.push(video); }); } // for debugging this.name = 'MultiStreamsMixer'; this.toString = function() { return this.name; }; this.getMixedStream = getMixedStream; } if (typeof RecordRTC === 'undefined') { if (typeof module !== 'undefined' /* && !!module.exports*/ ) { module.exports = MultiStreamsMixer; } if (typeof define === 'function' && define.amd) { define('MultiStreamsMixer', [], function() { return MultiStreamsMixer; }); } } // ______________________ // MultiStreamRecorder.js /* * Video conference recording, using captureStream API along with WebAudio and Canvas2D API. */ /** * MultiStreamRecorder can record multiple videos in single container. * @summary Multi-videos recorder. * @license {@link https://github.com/muaz-khan/RecordRTC/blob/master/LICENSE|MIT} * @author {@link https://MuazKhan.com|Muaz Khan} * @typedef MultiStreamRecorder * @class * @example * var options = { * mimeType: 'video/webm' * } * var recorder = new MultiStreamRecorder(ArrayOfMediaStreams, options); * recorder.record(); * recorder.stop(function(blob) { * video.src = URL.createObjectURL(blob); * * // or * var blob = recorder.blob; * }); * @see {@link https://github.com/muaz-khan/RecordRTC|RecordRTC Source Code} * @param {MediaStreams} mediaStreams - Array of MediaStreams. * @param {object} config - {disableLogs:true, frameInterval: 1, mimeType: "video/webm"} */ function MultiStreamRecorder(arrayOfMediaStreams, options) { arrayOfMediaStreams = arrayOfMediaStreams || []; var self = this; var mixer; var mediaRecorder; options = options || { elementClass: 'multi-streams-mixer', mimeType: 'video/webm', video: { width: 360, height: 240 } }; if (!options.frameInterval) { options.frameInterval = 10; } if (!options.video) { options.video = {}; } if (!options.video.width) { options.video.width = 360; } if (!options.video.height) { options.video.height = 240; } /** * This method records all MediaStreams. * @method * @memberof MultiStreamRecorder * @example * recorder.record(); */ this.record = function() { // github/muaz-khan/MultiStreamsMixer mixer = new MultiStreamsMixer(arrayOfMediaStreams, options.elementClass || 'multi-streams-mixer'); if (getAllVideoTracks().length) { mixer.frameInterval = options.frameInterval || 10; mixer.width = options.video.width || 360; mixer.height = options.video.height || 240; mixer.startDrawingFrames(); } if (options.previewStream && typeof options.previewStream === 'function') { options.previewStream(mixer.getMixedStream()); } // record using MediaRecorder API mediaRecorder = new MediaStreamRecorder(mixer.getMixedStream(), options); mediaRecorder.record(); }; function getAllVideoTracks() { var tracks = []; arrayOfMediaStreams.forEach(function(stream) { getTracks(stream, 'video').forEach(function(track) { tracks.push(track); }); }); return tracks; } /** * This method stops recording MediaStream. * @param {function} callback - Callback function, that is used to pass recorded blob back to the callee. * @method * @memberof MultiStreamRecorder * @example * recorder.stop(function(blob) { * video.src = URL.createObjectURL(blob); * }); */ this.stop = function(callback) { if (!mediaRecorder) { return; } mediaRecorder.stop(function(blob) { self.blob = blob; callback(blob); self.clearRecordedData(); }); }; /** * This method pauses the recording process. * @method * @memberof MultiStreamRecorder * @example * recorder.pause(); */ this.pause = function() { if (mediaRecorder) { mediaRecorder.pause(); } }; /** * This method resumes the recording process. * @method * @memberof MultiStreamRecorder * @example * recorder.resume(); */ this.resume = function() { if (mediaRecorder) { mediaRecorder.resume(); } }; /** * This method resets currently recorded data. * @method * @memberof MultiStreamRecorder * @example * recorder.clearRecordedData(); */ this.clearRecordedData = function() { if (mediaRecorder) { mediaRecorder.clearRecordedData(); mediaRecorder = null; } if (mixer) { mixer.releaseStreams(); mixer = null; } }; /** * Add extra media-streams to existing recordings. * @method * @memberof MultiStreamRecorder * @param {MediaStreams} mediaStreams - Array of MediaStreams * @example * recorder.addStreams([newAudioStream, newVideoStream]); */ this.addStreams = function(streams) { if (!streams) { throw 'First parameter is required.'; } if (!(streams instanceof Array)) { streams = [streams]; } arrayOfMediaStreams.concat(streams); if (!mediaRecorder || !mixer) { return; } mixer.appendStreams(streams); if (options.previewStream && typeof options.previewStream === 'function') { options.previewStream(mixer.getMixedStream()); } }; /** * Reset videos during live recording. Replace old videos e.g. replace cameras with full-screen. * @method * @memberof MultiStreamRecorder * @param {MediaStreams} mediaStreams - Array of MediaStreams * @example * recorder.resetVideoStreams([newVideo1, newVideo2]); */ this.resetVideoStreams = function(streams) { if (!mixer) { return; } if (streams && !(streams instanceof Array)) { streams = [streams]; } mixer.resetVideoStreams(streams); }; /** * Returns MultiStreamsMixer * @method * @memberof MultiStreamRecorder * @example * let mixer = recorder.getMixer(); * mixer.appendStreams([newStream]); */ this.getMixer = function() { return mixer; }; // for debugging this.name = 'MultiStreamRecorder'; this.toString = function() { return this.name; }; } if (typeof RecordRTC !== 'undefined') { RecordRTC.MultiStreamRecorder = MultiStreamRecorder; } // _____________________ // RecordRTC.promises.js /** * RecordRTCPromisesHandler adds promises support in {@link RecordRTC}. Try a {@link https://github.com/muaz-khan/RecordRTC/blob/master/simple-demos/RecordRTCPromisesHandler.html|demo here} * @summary Promises for {@link RecordRTC} * @license {@link https://github.com/muaz-khan/RecordRTC/blob/master/LICENSE|MIT} * @author {@link https://MuazKhan.com|Muaz Khan} * @typedef RecordRTCPromisesHandler * @class * @example * var recorder = new RecordRTCPromisesHandler(mediaStream, options); * recorder.startRecording() * .then(successCB) * .catch(errorCB); * // Note: You can access all RecordRTC API using "recorder.recordRTC" e.g. * recorder.recordRTC.onStateChanged = function(state) {}; * recorder.recordRTC.setRecordingDuration(5000); * @see {@link https://github.com/muaz-khan/RecordRTC|RecordRTC Source Code} * @param {MediaStream} mediaStream - Single media-stream object, array of media-streams, html-canvas-element, etc. * @param {object} config - {type:"video", recorderType: MediaStreamRecorder, disableLogs: true, numberOfAudioChannels: 1, bufferSize: 0, sampleRate: 0, video: HTMLVideoElement, etc.} * @throws Will throw an error if "new" keyword is not used to initiate "RecordRTCPromisesHandler". Also throws error if first argument "MediaStream" is missing. * @requires {@link RecordRTC} */ function RecordRTCPromisesHandler(mediaStream, options) { if (!this) { throw 'Use "new RecordRTCPromisesHandler()"'; } if (typeof mediaStream === 'undefined') { throw 'First argument "MediaStream" is required.'; } var self = this; /** * @property {Blob} blob - Access/reach the native {@link RecordRTC} object. * @memberof RecordRTCPromisesHandler * @example * let internal = recorder.recordRTC.getInternalRecorder(); * alert(internal instanceof MediaStreamRecorder); * recorder.recordRTC.onStateChanged = function(state) {}; */ self.recordRTC = new RecordRTC(mediaStream, options); /** * This method records MediaStream. * @method * @memberof RecordRTCPromisesHandler * @example * recorder.startRecording() * .then(successCB) * .catch(errorCB); */ this.startRecording = function() { return new Promise(function(resolve, reject) { try { self.recordRTC.startRecording(); resolve(); } catch (e) { reject(e); } }); }; /** * This method stops the recording. * @method * @memberof RecordRTCPromisesHandler * @example * recorder.stopRecording().then(function() { * var blob = recorder.getBlob(); * }).catch(errorCB); */ this.stopRecording = function() { return new Promise(function(resolve, reject) { try { self.recordRTC.stopRecording(function(url) { self.blob = self.recordRTC.getBlob(); if (!self.blob || !self.blob.size) { reject('Empty blob.', self.blob); return; } resolve(url); }); } catch (e) { reject(e); } }); }; /** * This method pauses the recording. You can resume recording using "resumeRecording" method. * @method * @memberof RecordRTCPromisesHandler * @example * recorder.pauseRecording() * .then(successCB) * .catch(errorCB); */ this.pauseRecording = function() { return new Promise(function(resolve, reject) { try { self.recordRTC.pauseRecording(); resolve(); } catch (e) { reject(e); } }); }; /** * This method resumes the recording. * @method * @memberof RecordRTCPromisesHandler * @example * recorder.resumeRecording() * .then(successCB) * .catch(errorCB); */ this.resumeRecording = function() { return new Promise(function(resolve, reject) { try { self.recordRTC.resumeRecording(); resolve(); } catch (e) { reject(e); } }); }; /** * This method returns data-url for the recorded blob. * @method * @memberof RecordRTCPromisesHandler * @example * recorder.stopRecording().then(function() { * recorder.getDataURL().then(function(dataURL) { * window.open(dataURL); * }).catch(errorCB);; * }).catch(errorCB); */ this.getDataURL = function(callback) { return new Promise(function(resolve, reject) { try { self.recordRTC.getDataURL(function(dataURL) { resolve(dataURL); }); } catch (e) { reject(e); } }); }; /** * This method returns the recorded blob. * @method * @memberof RecordRTCPromisesHandler * @example * recorder.stopRecording().then(function() { * recorder.getBlob().then(function(blob) {}) * }).catch(errorCB); */ this.getBlob = function() { return new Promise(function(resolve, reject) { try { resolve(self.recordRTC.getBlob()); } catch (e) { reject(e); } }); }; /** * This method returns the internal recording object. * @method * @memberof RecordRTCPromisesHandler * @example * let internalRecorder = await recorder.getInternalRecorder(); * if(internalRecorder instanceof MultiStreamRecorder) { * internalRecorder.addStreams([newAudioStream]); * internalRecorder.resetVideoStreams([screenStream]); * } * @returns {Object} */ this.getInternalRecorder = function() { return new Promise(function(resolve, reject) { try { resolve(self.recordRTC.getInternalRecorder()); } catch (e) { reject(e); } }); }; /** * This method resets the recorder. So that you can reuse single recorder instance many times. * @method * @memberof RecordRTCPromisesHandler * @example * await recorder.reset(); * recorder.startRecording(); // record again */ this.reset = function() { return new Promise(function(resolve, reject) { try { resolve(self.recordRTC.reset()); } catch (e) { reject(e); } }); }; /** * Destroy RecordRTC instance. Clear all recorders and objects. * @method * @memberof RecordRTCPromisesHandler * @example * recorder.destroy().then(successCB).catch(errorCB); */ this.destroy = function() { return new Promise(function(resolve, reject) { try { resolve(self.recordRTC.destroy()); } catch (e) { reject(e); } }); }; /** * Get recorder's readonly state. * @method * @memberof RecordRTCPromisesHandler * @example * let state = await recorder.getState(); * // or * recorder.getState().then(state => { console.log(state); }) * @returns {String} Returns recording state. */ this.getState = function() { return new Promise(function(resolve, reject) { try { resolve(self.recordRTC.getState()); } catch (e) { reject(e); } }); }; /** * @property {Blob} blob - Recorded data as "Blob" object. * @memberof RecordRTCPromisesHandler * @example * await recorder.stopRecording(); * let blob = recorder.getBlob(); // or "recorder.recordRTC.blob" * invokeSaveAsDialog(blob); */ this.blob = null; /** * RecordRTC version number * @property {String} version - Release version number. * @memberof RecordRTCPromisesHandler * @static * @readonly * @example * alert(recorder.version); */ this.version = '5.6.1'; } if (typeof RecordRTC !== 'undefined') { RecordRTC.RecordRTCPromisesHandler = RecordRTCPromisesHandler; } // ______________________ // WebAssemblyRecorder.js /** * WebAssemblyRecorder lets you create webm videos in JavaScript via WebAssembly. The library consumes raw RGBA32 buffers (4 bytes per pixel) and turns them into a webm video with the given framerate and quality. This makes it compatible out-of-the-box with ImageData from a CANVAS. With realtime mode you can also use webm-wasm for streaming webm videos. * @summary Video recording feature in Chrome, Firefox and maybe Edge. * @license {@link https://github.com/muaz-khan/RecordRTC/blob/master/LICENSE|MIT} * @author {@link https://MuazKhan.com|Muaz Khan} * @typedef WebAssemblyRecorder * @class * @example * var recorder = new WebAssemblyRecorder(mediaStream); * recorder.record(); * recorder.stop(function(blob) { * video.src = URL.createObjectURL(blob); * }); * @see {@link https://github.com/muaz-khan/RecordRTC|RecordRTC Source Code} * @param {MediaStream} mediaStream - MediaStream object fetched using getUserMedia API or generated using captureStreamUntilEnded or WebAudio API. * @param {object} config - {webAssemblyPath:'webm-wasm.wasm',workerPath: 'webm-worker.js', frameRate: 30, width: 1920, height: 1080, bitrate: 1024, realtime: true} */ function WebAssemblyRecorder(stream, config) { // based on: github.com/GoogleChromeLabs/webm-wasm if (typeof ReadableStream === 'undefined' || typeof WritableStream === 'undefined') { // because it fixes readable/writable streams issues console.error('Following polyfill is strongly recommended: https://unpkg.com/@mattiasbuelens/web-streams-polyfill/dist/polyfill.min.js'); } config = config || {}; config.width = config.width || 640; config.height = config.height || 480; config.frameRate = config.frameRate || 30; config.bitrate = config.bitrate || 1200; config.realtime = config.realtime || true; function createBufferURL(buffer, type) { return URL.createObjectURL(new Blob([buffer], { type: type || '' })); } var finished; function cameraStream() { return new ReadableStream({ start: function(controller) { var cvs = document.createElement('canvas'); var video = document.createElement('video'); var first = true; video.srcObject = stream; video.muted = true; video.height = config.height; video.width = config.width; video.volume = 0; video.onplaying = function() { cvs.width = config.width; cvs.height = config.height; var ctx = cvs.getContext('2d'); var frameTimeout = 1000 / config.frameRate; var cameraTimer = setInterval(function f() { if (finished) { clearInterval(cameraTimer); controller.close(); } if (first) { first = false; if (config.onVideoProcessStarted) { config.onVideoProcessStarted(); } } ctx.drawImage(video, 0, 0); if (controller._controlledReadableStream.state !== 'closed') { try { controller.enqueue( ctx.getImageData(0, 0, config.width, config.height) ); } catch (e) {} } }, frameTimeout); }; video.play(); } }); } var worker; function startRecording(stream, buffer) { if (!config.workerPath && !buffer) { finished = false; // is it safe to use @latest ? fetch( 'https://unpkg.com/webm-wasm@latest/dist/webm-worker.js' ).then(function(r) { r.arrayBuffer().then(function(buffer) { startRecording(stream, buffer); }); }); return; } if (!config.workerPath && buffer instanceof ArrayBuffer) { var blob = new Blob([buffer], { type: 'text/javascript' }); config.workerPath = URL.createObjectURL(blob); } if (!config.workerPath) { console.error('workerPath parameter is missing.'); } worker = new Worker(config.workerPath); worker.postMessage(config.webAssemblyPath || 'https://unpkg.com/webm-wasm@latest/dist/webm-wasm.wasm'); worker.addEventListener('message', function(event) { if (event.data === 'READY') { worker.postMessage({ width: config.width, height: config.height, bitrate: config.bitrate || 1200, timebaseDen: config.frameRate || 30, realtime: config.realtime }); cameraStream().pipeTo(new WritableStream({ write: function(image) { if (finished) { console.error('Got image, but recorder is finished!'); return; } worker.postMessage(image.data.buffer, [image.data.buffer]); } })); } else if (!!event.data) { if (!isPaused) { arrayOfBuffers.push(event.data); } } }); } /** * This method records video. * @method * @memberof WebAssemblyRecorder * @example * recorder.record(); */ this.record = function() { arrayOfBuffers = []; isPaused = false; this.blob = null; startRecording(stream); if (typeof config.initCallback === 'function') { config.initCallback(); } }; var isPaused; /** * This method pauses the recording process. * @method * @memberof WebAssemblyRecorder * @example * recorder.pause(); */ this.pause = function() { isPaused = true; }; /** * This method resumes the recording process. * @method * @memberof WebAssemblyRecorder * @example * recorder.resume(); */ this.resume = function() { isPaused = false; }; function terminate(callback) { if (!worker) { if (callback) { callback(); } return; } // Wait for null event data to indicate that the encoding is complete worker.addEventListener('message', function(event) { if (event.data === null) { worker.terminate(); worker = null; if (callback) { callback(); } } }); worker.postMessage(null); } var arrayOfBuffers = []; /** * This method stops recording video. * @param {function} callback - Callback function, that is used to pass recorded blob back to the callee. * @method * @memberof WebAssemblyRecorder * @example * recorder.stop(function(blob) { * video.src = URL.createObjectURL(blob); * }); */ this.stop = function(callback) { finished = true; var recorder = this; terminate(function() { recorder.blob = new Blob(arrayOfBuffers, { type: 'video/webm' }); callback(recorder.blob); }); }; // for debugging this.name = 'WebAssemblyRecorder'; this.toString = function() { return this.name; }; /** * This method resets currently recorded data. * @method * @memberof WebAssemblyRecorder * @example * recorder.clearRecordedData(); */ this.clearRecordedData = function() { arrayOfBuffers = []; isPaused = false; this.blob = null; // todo: if recording-ON then STOP it first }; /** * @property {Blob} blob - The recorded blob object. * @memberof WebAssemblyRecorder * @example * recorder.stop(function(){ * var blob = recorder.blob; * }); */ this.blob = null; } if (typeof RecordRTC !== 'undefined') { RecordRTC.WebAssemblyRecorder = WebAssemblyRecorder; }