RecordRTC is 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.
** Ampliado/Modificado para adaptarse a los requerimientos actuales **
Browsers Support
Browser
Operating System
Features
Google Chrome
Windows + macOS + Ubuntu + Android
audio + video + screen
Firefox
Windows + macOS + Ubuntu + Android
audio + video + screen
Opera
Windows + macOS + Ubuntu + Android
audio + video + screen
Edge (new)
Windows (7 or 8 or 10) and MacOSX
audio + video + screen
Safari
macOS + iOS (iPhone/iPad)
audio + video
Codecs Support
Browser
Video
Audio
Chrome
VP8, VP9, H264, MKV
OPUS/VORBIS, PCM
Opera
VP8, VP9, H264, MKV
OPUS/VORBIS, PCM
Firefox
VP8, H264
OPUS/VORBIS, PCM
Safari
VP8
OPUS/VORBIS, PCM
Edge (new)
VP8, VP9, H264, MKV
OPUS/VORBIS, PCM
Configuration
constrecorder=RecordRTC(stream,{// audio, video, canvas, giftype: 'video',// audio/webm// video/webm;codecs=vp9// video/webm;codecs=vp8// video/webm;codecs=h264// video/x-matroska;codecs=avc1// video/mpeg -- NOT supported by any browser, yet// video/mp4 -- NOT supported by any browser, yet// audio/wav// audio/ogg -- ONLY Firefox// demo: simple-demos/isTypeSupported.htmlmimeType: 'video/webm',// MediaStreamRecorder, StereoAudioRecorder, WebAssemblyRecorder// CanvasRecorder, GifRecorder, WhammyRecorderrecorderType: MediaStreamRecorder,// disable logsdisableLogs: true,// get intervals based blobs// value in millisecondstimeSlice: 1000,// requires timeSlice above// returns blob via callback functionondataavailable: function(blob){},// auto stop recording if camera stopscheckForInactiveTracks: false,// requires timeSlice aboveonTimeStamp: function(timestamp){},// both for audio and video tracksbitsPerSecond: 128000,// only for audio trackaudioBitsPerSecond: 128000,// only for video trackvideoBitsPerSecond: 128000,// used by CanvasRecorder and WhammyRecorder// it is kind of a "frameRate"frameInterval: 90,// if you are recording multiple streams into single file// this helps you see what is being recordedpreviewStream: function(stream){},// used by CanvasRecorder and WhammyRecorder// you can pass {width:640, height: 480} as wellvideo: HTMLVideoElement,// used by CanvasRecorder and WhammyRecordercanvas: {width: 640,height: 480},// used by StereoAudioRecorder// the range 22050 to 96000.sampleRate: 96000,// used by StereoAudioRecorder// the range 22050 to 96000.// let us force 16khz recording:desiredSampRate: 16000,// used by StereoAudioRecorder// Legal values are (256, 512, 1024, 2048, 4096, 8192, 16384).bufferSize: 16384,// used by StereoAudioRecorder// 1 or 2numberOfAudioChannels: 2,// used by WebAssemblyRecorderframeRate: 30,// used by WebAssemblyRecorderbitrate: 128000,// used by MultiStreamRecorder - to access HTMLCanvasElementelementClass: 'multi-streams-mixer'});
RecordRTC.prototype={// start the recordingstartRecording: function(){},// stop the recording// getBlob inside callback functionstopRecording: function(blobURL){},// pause the recordingpauseRecording: function(){},// resume the recordingresumeRecording: function(){},// auto stop recording after specific durationsetRecordingDuration: function(){},// reset recorder states and remove the datareset: function(){},// invoke save as dialogsave: function(fileName){},// returns recorded BlobgetBlob: function(){},// returns Blob-URLtoURL: function(){},// returns Data-URLgetDataURL: function(dataURL){},// returns internal recordergetInternalRecorder: function(){},// initialize the recorder [deprecated]initRecorder: function(){},// fired if recorder's state changesonStateChanged: function(state){},// write recorded blob into indexed-db storagewriteToDisk: function(audio: Blob,video: Blob,gif: Blob){},// get recorded blob from indexded-db storagegetFromDisk: function(dataURL,type){},// [deprecated]setAdvertisementArray: function([webp1,webp2]){},// [deprecated] clear recorded dataclearRecordedData: function(){},// clear memory; clear everythingdestroy: function(){},// get recorder's stategetState: function(){},// [readonly] property: recorder's statestate: string,// recorded blob [readonly] propertyblob: Blob,// [readonly] array buffer; useful only for StereoAudioRecorderbuffer: ArrayBuffer,// RecordRTC version [readonly]version: string,// [readonly] useful only for StereoAudioRecorderbufferSize: integer,// [readonly] useful only for StereoAudioRecordersampleRate: integer}
Global APIs
// "bytesToSize" returns human-readable size (in MB or GB)letsize=bytesToSize(recorder.getBlob().size);// to fix video seeking issuesgetSeekableBlob(recorder.getBlob(),function(seekableBlob){invokeSaveAsDialog(seekableBlob);});// this function invokes save-as dialoginvokeSaveAsDialog(recorder.getBlob(),'video.webm');// use these global variables to detect browserletbrowserInfo={isSafari, isChrome, isFirefox, isEdge, isOpera};// use this to store blobs into IndexedDB storageDiskStorage={init: function(){},Fetch: function({audioBlob: Blob,videoBlob: Blob,gifBlob: Blob}){},Store: function({audioBlob: Blob,videoBlob: Blob,gifBlob: Blob}){},onError: function(){},dataStoreName: function(){}};
How to fix echo issues?
Set <video>.muted=true and <video>.volume=0
Pass audio: {echoCancellation:true} on getUserMedia