I need co connect user display media(screen capture) to a webRTC application.
The following code is used to initiate screen capture:
navigator.mediaDevices.getDisplayMedia({video: true})
This prompts the user about the screen capture and creates a video stream that can be used once the permission is granted. However I was unable to get it to run on iOS or Android devices.
iPad i was testing this on was unable to find navigator.mediaDevices.getDisplayMedia - undefined
(iOS 13.3)
Chrome (v79) on Android shows the following error when i try to call it:
DOMException: Invalid state
according to this: https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getDisplayMedia the error can be generated if the code was not initiated by the user action, but it should not be an issue in my case since the code is being called like so:
startScreenSharing = event => {
navigator.mediaDevices.getDisplayMedia({video: true})
}
<Button onClick={this.startScreenSharing} />
event variable holds a valid event but i still get an "Invalid State" error.
This must be something that i'm missing, since it is working fine on desktop Chrome & Safari.
Edit
I came across this: Demo of getDisplayMedia and screen recording and having the same error generated on this webpage. Can this be due to my hardware device settings?
getDisplayMediais not implemented on android. See this answer. – jib