我正在用Angular 9编写一个桌面应用程序,使用Electron作为框架。我想添加捕获整个桌面的视频以及音频输入的能力。
我已经尝试过利用RecordRTC库,它可以用音频录制视频,但不是我的桌面,而是网络摄像头。
Angular的文档严重不足,而Electron的文档也缺少一个有效的示例。
Angular中的MediaStreams存在问题,不幸的是,RecordRTC的示例都是用JS编写的,JS本身就一团糟……
如果能有一个详细的、有效的解决方案,我会非常感激。我想要的是: 1.按一个按钮开始录制2.用音频录制桌面视频3.按另一个按钮停止录制4.使用Electron的openSaveDialog将视频保存为文件。
我不想要选择要录制哪个窗口的功能,我想保持关闭网络摄像头。
谢谢!
发布于 2020-05-28 19:12:43
这就是我在Angular 9上解决问题的方法。使用ngx电子。
declare var MediaRecorder: any; // Before the @Component({ declaration
...
public recorder;
public recordedChunks = [];
public isRecording = false;
public recImage = 'assets/cameraOff.png';
...
startRecording() {
this.recordedChunks = [];
this.electronService.desktopCapturer.getSources({ types: ['window', 'screen'] }).then(async sources => {
for (const source of sources) {
if (source.name === 'Teacher') {
try {
const stream = await (<any>navigator).mediaDevices.getUserMedia({
audio: false,
video: {
mandatory: {
chromeMediaSource: 'desktop',
chromeMediaSourceId: source.id,
minWidth: 1280,
maxWidth: 1280,
minHeight: 720,
maxHeight: 720
}
}
});
this.handleStream(stream);
} catch (e) {
this.handleError(e);
}
return;
}
}
});
}
handleStream(stream) {
this.recorder = new MediaRecorder(stream);
this.recorder.ondataavailable = event => {
this.recordedChunks.push(event.data);
};
this.recorder.start();
}
handleError(e) {
console.log(e);
}
stopRecording() {
this.recorder.onstop = () => this.save();
this.recorder.stop();
}
save() {
this.toArrayBuffer(new Blob(this.recordedChunks, { type: 'video/webm' }), (ab) => {
const buffer = this.toBuffer(ab);
let moviePath = this.electronService.remote.dialog.showSaveDialogSync({
properties: ['showOverwriteConfirmation'],
filters: [{ name: 'WEBM movies', extensions: ['webm'] }],
defaultPath: this.electronService.remote.app.getPath('home')
});
if (moviePath !== '') {
moviePath += '.webm';
this.electronService.remote.require('fs').writeFileSync(moviePath, buffer, 'base64');
}
});
}
toBuffer(ab) {
const buffer = Buffer.from(ab);
const arr = new Uint8Array(ab);
for (let i = 0; i < arr.byteLength; i++) {
buffer[i] = arr[i];
}
return buffer;
}
toArrayBuffer(blob, cb) {
const fileReader = new FileReader();
fileReader.onload = () => {
const arrayBuffer = fileReader.result;
cb(arrayBuffer);
};
fileReader.readAsArrayBuffer(blob);
}
toggleRecording() {
if (!this.isRecording) {
this.isRecording = true;
this.startRecording();
this.recImage = 'assets/cameraOn.png';
return;
} else {
this.isRecording = false;
this.stopRecording();
this.recImage = 'assets/cameraOff.png';
return;
}
}希望能对某些人有所帮助!它仍然不是完美的。我不能打开录音。而且看起来,记录器在保存后没有释放。我设法录制了一段视频,然后它失败了好几次。它一点也不稳定。
https://stackoverflow.com/questions/62022968
复制相似问题