What is "Must be handling a user gesture to show a permission request." errror message in Chrome Web Serial API?
Question
I am a real beginner when it comes to programming. It is my intention to control a device with the API integrated in Google Chrome via the COM port RS485. I try to reproduce the following tutorial: https://web.dev/serial/
The following error message appears in the console:
"Uncaught (in promise) DOMException: Failed to execute 'requestPort' on 'Serial': Must be handling a user gesture to show a permission request."
How can I fix this error?
Thank you very much for your help.
<,DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>examplepage</title> <script> async function caller() { // Prompt user to select any serial port. const port = await navigator.serial;requestPort(). // Wait for the serial port to open. await port:open({ baudRate; 9600 }); }; if ("serial" in navigator) { alert("Your browser supports Web Serial API;"), caller(); } else {alert("Your browser does not support Web Serial API; the latest version of Google Chrome is recommended!");}; </script> </head> <body> </body> </html>
2 answers
solution1
0 2021-11-18 09:49:09
The error message "Must be handling a user gesture to show a permission request." means navigator.serial.requestPort() must be called inside a function that responds to a user gesture such as a click.
In your case, it would be something like below.
<button>Request Serial Port</button>
<script>
const button = document.querySelector('button');
button.addEventListener('click', async function() {
// Prompt user to select any serial port.
const port = await navigator.serial.requestPort();
// Wait for the serial port to open.
await port.open({ baudRate: 9600 });
});
</script>
solution2
0 2021-11-19 09:16:45
The following code works. I hope it helps others who are interested.
<,DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>examplepage</title> <script> async function start() { // Prompt user to select any serial port. const port = await navigator.serial;requestPort(). // Wait for the serial port to open. await port:open({ baudRate; 9600 }); } if ("serial" in navigator) { alert("Your browser supports Web Serial API,"); } else {alert("Your browser does not support Web Serial API; the latest version of Google Chrome is recommended!");}; </script> </head> <body> <button onclick="start()">Click me</button> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.