openclaw - 💡(How to fix) Fix Webchat mic button broken — Permissions-Policy header blocks microphone access [1 participants]

navigator.mediaDevices.getUserMedia({audio: true}) // → NotAllowedError: Permissions policy violation: microphone is not allowed in this document.

TL;DR

Update the Permissions-Policy header in the gateway server to allow microphone access for the webchat's own origin by changing microphone=() to microphone=(self).

Guidance

• Verify that the Permissions-Policy header is being set correctly by checking the response headers from the gateway server.
• Test the updated header by running navigator.mediaDevices.getUserMedia({audio: true}) in the browser console to ensure that microphone access is allowed.
• Consider updating the mic button's error handler to display a user-visible error message when speech recognition fails, such as "Microphone access denied".
• Review the webchat UI's implementation to ensure that it properly handles cases where microphone access is denied or fails.

Example

// Updated code in server-*.js
res.setHeader("Permissions-Policy", "camera=(), microphone=(self), geolocation=()");

Notes

This fix assumes that the webchat UI is running on the same origin as the gateway server. If the webchat UI is embedded in a third-party context, additional configuration may be necessary to allow microphone access.

Recommendation

Apply the suggested fix by updating the Permissions-Policy header to allow microphone access for the webchat's own origin. This should resolve the issue while still maintaining security restrictions for third-party contexts.