I have the following code that attempts to capture audio/video from a specific application running on my windows desktop:
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title>Audio and Video</title>
</head>
<body>
<video autoplay></video>
<script type = "text/javascript">
var desktopCapturer = require('electron').desktopCapturer;
console.log("are you here?")
console.log(desktopCapturer)
desktopCapturer.getSources({ types: ['window', 'screen'] }).then(async sources => {
for (const source of sources) {
if (source.name === 'MyStreamingApp') {
try {
const stream = await navigator.mediaDevices.getUserMedia({
audio: {
mandatory: {
chromeMediaSource: 'desktop',
chromeMediaSourceId: source.id,
}
},
video: {
mandatory: {
chromeMediaSource: 'desktop',
chromeMediaSourceId: source.id,
minWidth: 1280,
maxWidth: 1280,
minHeight: 720,
maxHeight: 720
}
}
})
handleStream(stream)
} catch (e) {
handleError(e)
}
return
}
}
})
function handleStream (stream) {
const video = document.querySelector('video')
video.srcObject = stream
video.onloadedmetadata = (e) => video.play()
}
function handleError (e) {
console.log(e)
}
</script>
</body>
</html>
When I run this, I can hear audio... but of course I can't tell if the audio is coming from the original windows app or the electron app
Questions
Any suggestions on how to test this? How can i prove to myself that the the electron app is sending audio too? For example, is there a way to "tell" electron to play the audio using a specific device instead of just on default speakers / output for computer?
I'm assuming this is the way to capture audio/video from a specific application that's running instead of getting a/v from the system's speakers in general. Is this assumption correct?
Edit 1
Since posting, I combed over this manual:
https://www.electronjs.org/docs/api/desktop-capturer?q=console.log
I changed the code so that for the audio, I don't specify a source id, like so:
const stream = await navigator.mediaDevices.getUserMedia({
audio: {
mandatory: {
chromeMediaSource: 'desktop',
//when capturing audio, need to remove the sourceid constraint.
//chromeMediaSourceId: source.id,
}
},
video: {
mandatory: {
chromeMediaSource: 'desktop',
chromeMediaSourceId: source.id,
minWidth: 1280,
maxWidth: 1280,
minHeight: 720,
maxHeight: 720
}
}
})
And now... when I start the electron app and start my av app, the electron app send chopped audio. it's so badly mangled I can't make out anything ... Meanwhile, i can still hear the audio from the source application. So I guess I've proven it's capturing some audio ... but it's so bad, it's unusable.
Based on the notes in the documentation, the fact that it says NOT to specify a sourceID when streaming audio, I'm going to guess that you can use electron as is to get audio from a specific windows application . You can only request the entire desktop audio. But it'd be nice if someone with more experience can confirm.
Thanks.