Piping screen share error

Coding Help
#1

Hello, I’m trying out a Piping screen share demo and I’m getting this error:

Uncaught (in promise) 
MediaStreamError { name: "InvalidStateError", message: "getDisplayMedia must be called from a user gesture handler.", constraint: "", stack: "" }

Any idea how I can fix this?

#2

A user gesture handler refers to something like this

startButton.addEventListener('click', (e) => {
  whatever.getDisplayMedia(...);
});

Examples of calling it not from such a handler would be:

  • calling it from the top level of the script
  • calling it from an onload callback
  • calling it in the callback of a setTimeout

These latter cases result in some unpleasant behavior of a bunch of permission popups appearing as the page loads. Browsers have since put in place these rules to prevent that. You’ll have to restructure your program to wait for the user to click a button or something similar–a ‘gesture,’ as the error message dictates.

4 Likes
#3

Ok that might explain what is going wrong, I’ll make some tweaks and report back here if I run into other issues.

Edit, it worked, thanks @wh0