如何解决如何使用 RecordRTC 录制屏幕+音频+麦克风
我正在做一个项目,我需要用户能够录制屏幕、音频和麦克风。目前我只能让它识别屏幕和音频。
首先,我正在捕获屏幕和其中的音频并将其保存到一个变量中。然后我捕获该变量以显示视频组件。
invokeGetdisplayMedia(success,error) {
let displaymediastreamconstraints = {
video: {
displaySurface: 'monitor',// monitor,window,application,browser
logicalSurface: true,cursor: 'always' // never,always,motion
}
};
// above constraints are NOT supported YET
// that's why overridnig them
displaymediastreamconstraints = {
video: true,audio:true
};
if (navigator.mediaDevices.getdisplayMedia) {
navigator.mediaDevices.getdisplayMedia(displaymediastreamconstraints).then(success).catch(error);
}
else {
navigator.getdisplayMedia(displaymediastreamconstraints).then(success).catch(error);
}
},captureScreen(callback) {
this.invokeGetdisplayMedia((screen) => {
this.addStreamStopListener(screen,() => {
//
});
callback(screen);
},function (error) {
console.error(error);
alert('Unable to capture your screen. Please check console logs.\n' + error);
});
},startRecording() {
this.captureScreen(screen=>{
this.audioStream = audio
console.log(audio)
this.video=this.$refs.videoScreen
this.video.srcObject = screen;
this.recorder = RecordRTC(screen,{
type: 'video'
});
this.recorder.startRecording();
// release screen on stopRecording
this.recorder.screen = screen;
this.videoStart = true;
});
},
解决方法
我通过增加一个从麦克风捕获音频的功能来修复它
captureAudio(success,error) {
let displayuserstreamconstraints = {
audio:true
};
if (navigator.mediaDevices.getUserMedia) {
navigator.mediaDevices.getUserMedia(displayuserstreamconstraints).then(success).catch(error);
}
else {
navigator.getUserMedia(displayuserstreamconstraints).then(success).catch(error);
}
},
并在startRecording方法中添加一个函数
startRecording() {
this.captureAudio((audio) => {
this.captureScreen(screen=>{
this.video=this.$refs.videoScreen
this.audioStream=audio
this.video.srcObject = screen;
this.recorder = RecordRTC(screen,{
type: 'video'
});
this.recorder.startRecording();
// release screen on stopRecording
this.recorder.screen = screen;
this.videoStart = true;
});
})
},
并在stopRecording方法中添加一个函数
stopRecordingCallback() {
this.video.src = this.video.srcObject = null;
this.video=this.$refs.videoScreen
this.video.src = URL.createObjectURL(this.recorder.getBlob());
this.recorder.screen.stop();
this.audioStream.stop();
this.recorder.destroy();
this.recorder = null;
},
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。