I'm struggling to change microphone while recording a window through desktopCapturer.My recorder process is basically a hidden BrowserWindow running an Angular service, and I initialize my service this way:
init(): void {
//get "Preview" window
from(this.electron.desktopCapturer.getSources({ types: ["window"] }))
.pipe(
//transform capturer source in media constraints
map((sources) => {
return {
audio: false,
video: {
mandatory: {
chromeMediaSource: "desktop",
chromeMediaSourceId: sources.filter(
(source) => source.name === "Preview"
)[0].id,
},
},
};
}),
switchMap((constraints) => {
// Forced to cast to "any" as chromeMediaSource and chromeMediaSourceId are not standard WebRTC constraints
return zip(
from(
navigator.mediaDevices.getUserMedia({ video: false, audio: true })
),
from(
(<any>navigator.mediaDevices).getUserMedia(constraints)
) as Observable<MediaStream>
);
}),
switchMap(([audioStream, videoStream]) => {
videoStream.addTrack(audioStream.getAudioTracks()[0]);
return of(videoStream);
}),
take(1)
)
.subscribe((stream) => {
// get stream from Preview window and creates recorder
this.audioCtx.createMediaStreamSource(stream);
const finalStream=this.audioCtx.createMediaStreamDestination();
this.recorder = new MediaRecorder(stream, {
mimeType: "video/webm;codecs=h264",
videoBitsPerSecond: 3 * 1024 * 1024,
});
this.recorder.ondataavailable = (e) => {
//recording stuff
};
});
When the window receives a message informing that the audio source has changed, this is what I call:
this.avService.audioSource.subscribe(audioSrc=>{
if(this.currentMic){
this.currentMic.disconnect();
}
this.currentMic=this.audioCtx.createMediaStreamSource(audioSrc);
this.currentMic.connect(this.audioCtx.destination);
});
The only effect I get is to hear an echo while recording, but it always takes the default microphone in the recorded video.
How can I solve it?