中文RecordRTC实现js屏幕录像摄像头麦克风录制
recordRTC非常强大,适用用于音频+视频+屏幕+画布(2D + 3D动画)录制,可以调用js在chrome和火狐下录制麦克风、摄像头、屏幕的视频,并且支持暂停继续录制、可选比特率、分辨率、编码方式等,视频可保持下载、上传到后端,阿里云oss及YouTube
一、入门代码
支持promise的es6代码示例
let stream = await navigator.mediaDevices.getUserMedia({video: true, audio: true}); let recorder = new RecordRTCPromisesHandler(stream, { type: 'video' }); recorder.startRecording(); const sleep = m => new Promise(r => setTimeout(r, m)); await sleep(3000); await recorder.stopRecording(); let blob = await recorder.getBlob(); invokeSaveAsDialog(blob);es2015代码示例
navigator.mediaDevices.getUserMedia({ video: true, audio: true }).then(async function(stream) { let recorder = RecordRTC(stream, { type: 'video' }); recorder.startRecording(); const sleep = m => new Promise(r => setTimeout(r, m)); await sleep(3000); recorder.stopRecording(function() { let blob = recorder.getBlob(); invokeSaveAsDialog(blob); }); });
二、推荐cdn
<!-- recommended --> <script src="https://www.WebRTC-Experiment.com/RecordRTC.js"></script> <!-- use 5.5.6 or any other version on cdnjs --> <script src="https://cdnjs.cloudflare.com/ajax/libs/RecordRTC/5.5.6/RecordRTC.js"></script> <!-- NPM i.e. "npm install recordrtc" --> <script src="node_modules/recordrtc/RecordRTC.js"></script> <!-- bower --> <script src="bower_components/recordrtc/RecordRTC.js"></script>
三、实例代码
const recorder = RecordRTC(stream, { // audio, video, canvas, gif type: '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.html mimeType: 'video/webm', // MediaStreamRecorder, StereoAudioRecorder, WebAssemblyRecorder // CanvasRecorder, GifRecorder, WhammyRecorder recorderType: MediaStreamRecorder, // disable logs disableLogs: true, // get intervals based blobs // value in milliseconds timeSlice: 1000, // requires timeSlice above // returns blob via callback function ondataavailable: function(blob) {}, // auto stop recording if camera stops checkForInactiveTracks: false, // requires timeSlice above onTimeStamp: function(timestamp) {}, // both for audio and video tracks bitsPerSecond: 128000, // only for audio track audioBitsPerSecond: 128000, // only for video track videoBitsPerSecond: 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 recorded previewStream: function(stream) {}, // used by CanvasRecorder and WhammyRecorder // you can pass {width:640, height: 480} as well video: HTMLVideoElement, // used by CanvasRecorder and WhammyRecorder canvas: { 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 2 numberOfAudioChannels: 2, // used by WebAssemblyRecorder frameRate: 30, // used by WebAssemblyRecorder bitrate: 128000, // used by MultiStreamRecorder - to access HTMLCanvasElement elementClass: 'multi-streams-mixer' });
四、API
RecordRTC.prototype = { // start the recording startRecording: function() {}, // stop the recording // getBlob inside callback function stopRecording: function(blobURL) {}, // pause the recording pauseRecording: function() {}, // resume the recording resumeRecording: function() {}, // auto stop recording after specific duration setRecordingDuration: function() {}, // reset recorder states and remove the data reset: function() {}, // invoke save as dialog save: function(fileName) {}, // returns recorded Blob getBlob: function() {}, // returns Blob-URL toURL: function() {}, // returns Data-URL getDataURL: function(dataURL) {}, // returns internal recorder getInternalRecorder: function() {}, // initialize the recorder [deprecated] initRecorder: function() {}, // fired if recorder's state changes onStateChanged: function(state) {}, // write recorded blob into indexed-db storage writeToDisk: function(audio: Blob, video: Blob, gif: Blob) {}, // get recorded blob from indexded-db storage getFromDisk: function(dataURL, type) {}, // [deprecated] setAdvertisementArray: function([webp1, webp2]) {}, // [deprecated] clear recorded data clearRecordedData: function() {}, // clear memory; clear everything destroy: function() {}, // get recorder's state getState: function() {}, // [readonly] property: recorder's state state: string, // recorded blob [readonly] property blob: Blob, // [readonly] array buffer; useful only for StereoAudioRecorder buffer: ArrayBuffer, // RecordRTC version [readonly] version: string, // [readonly] useful only for StereoAudioRecorder bufferSize: integer, // [readonly] useful only for StereoAudioRecorder sampleRate: integer }
五、回声问题如何解决
设置<video>.muted=true和<video>.volume=0 传递audio: {echoCancellation:true}getUserMedia必
注意:代码须运行在https下,否则无法录制
完整demo代码托管及WEBIDE在线调试地址:http://editor.bfw.wiki/Editor/Open.html?projectid=15829438259988730076
webrtc英文官网:https://recordrtc.org/
网友评论0