I'm having difficulty getting a screen to stream within my Angular 5 Electron application. I am utilizing the desktopCapturer feature provided by Electron. Below is an excerpt of my code:
loadCurrentScreensource() {
desktopCapturer.getSources({
types: [
'window',
'screen'
]
}, (error, sources) => {
if (error) {
throw error;
}
console.log('Finding screen: ' + this.selectedScreenSource);
console.log(sources);
for (let i = 0; i < sources.length; ++i) {
if (sources[i].id === this.selectedScreenSource.id) {
console.log('Found screen');
const constraints = {
audio: false,
video: {
mandatory: {
chromeMediaSource: 'desktop',
chromeMediaSourceId: sources[i].id,
minWidth: 1280,
maxWidth: 1280,
minHeight: 720,
maxHeight: 720
}
}
};
navigator.mediaDevices.getUserMedia(constraints)
.then((stream) => this.handleStream(stream))
.catch((e) => this.handleError(e));
return;
}
}
}
);
}
After consulting the relevant documentation, I realized that I must use the mandatory part of the constraints in order to achieve the desired result. However, TypeScript seems to be throwing an error stating that the property types within 'video' are not compatible. At times, using the following constraints only results in streaming from my webcam:
{ width: 1280, height: 720 }
The information on mozilla.org does not mention the mandatory section, which leads me to believe that there might be a missing import or configuration needed to make getUserMedia accept my constraints. Alternatively, it's possible that getUserMedia has undergone changes without corresponding updates in the documentation.
Where could I potentially be going wrong with my implementation?
[edit]
In addition, the resource detailing MediaTrackConstraints does not include properties like mandatory or chromeMediaSourceId. Interestingly, this documentation is linked to by Electron itself.
[edit2]
I recently discovered the presence of the deviceId constraint which I had previously overlooked. Despite incorporating this constraint into my code, I still seem to be stuck with the webcam stream.
video: {
width: 1280,
height: 720,
deviceId: this.selectedScreenSource.id
}