Use Chrome's webkitSpeechRecognition without need to allow mic permission every time #405

soulchainer · 2024-06-11T13:36:25Z

soulchainer
Jun 11, 2024

Hi.

I'm pretty new at this (golang, the wrapper I'm using, and webui itself), so sorry if my question sounds too obvious.

Is there a way of building (with go-webui) an app taking advantage of the Chrome's webkitSpeechRecognition API which doesn't implies asking the user for microphone access permission every single time the app is used?

I mean, there is an option to «Allow always», but is not honored by the app (it will ask anyways for mic permission every single time the app is used).

Is this just because the app is running «the GUI» (Chrome in this case) over http instead of https (some sources says so)? Or is it also because of the «Using private profile for safety» part?

If it's just because of the app running over http instead of https... is it possible to run the app over https somehow?
I have been searching and I can't find how. I have found SetTLSCertificate func in the lib code, but I'm clueless about if I can use it to achieve it or not (I already generated the certs). Also, note the comment above SetTLSCertificate func says «If set to empty, WebUI will generate a self-signed certificate», but as far as I saw, if the func receives empty strings, it will cause a compiling/build error.

If it's also about the «Using private profile for safety» part, I guess it's not feasible then.

Thanks for your time :).

Answered by hassandraga

Jun 25, 2024

I can't reproduce the issue, however, I tested it in Ubuntu using Chrome, with latest webui commit.

UI:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mic</title>
</head>
<body>
    <button id="requestMic">Request Microphone Permission</button>
    <script>
        document.getElementById('requestMic').addEventListener('click', () => {
            navigator.mediaDevices.getUserMedia({ audio: true })
                .then(stream => {
                    // Permission granted
                    console.log('Microphone permission granted');
                    stream.getTracks().forEach(t…

View full answer

hassandraga · 2024-06-11T13:56:14Z

hassandraga
Jun 11, 2024
Maintainer

Good questions. Yes, WebUI support TLS https, and does not use private browsing, but a separated normal profile isolated from the user default profile. We are currently working on version 2.5 which will have a better documentation.

Auto TLS build version in Go-WebUI still in TODO list, however, this is how to do it manually.

Install a C compiler (MSVC, GCC, Clang, MinGW...)
Clone & build TLS version of WebUI, here is the instructions
manually copy webui-2-secure.a to your local Go module (rename webui-2-secure.a to webui-2.a)

Now, your webui Go module use a secure version of webui and SetTLSCertificate() will be available.

13 replies

neroist Jun 12, 2024

Looking through Chromium flags, --auto-accept-camera-and-microphone-capture & --use-fake-ui-for-media-stream seem useful. Should this be added to WebUI?

hassandraga Jun 12, 2024
Maintainer

@soulchainer, Make sure your app does not call webui_clean at the end, because this will remove the profile and so all permissions.

@neroist, Yes, all those kind of commands should be added because webui is designed for desktop local apps, so it's safe to allow those permissions by default.

soulchainer Jun 12, 2024
Author

@neroist That looks promising.

But if all that is needed is go to ~/.local/go/pkg/mod/github.com/webui-dev/go-webui/[email protected]/webui/src/webui.c and edit:

const char* chromium_options[] = {
        "--no-first-run",
        // "--no-proxy-server",
        "--safe-mode",
        "--disable-extensions",
        "--disable-background-mode",
        "--disable-plugins",
        "--disable-plugins-discovery",
        "--disable-translate",
        "--disable-features=Translate",
        "--bwsi",
        "--disable-sync",
        "--disable-sync-preferences",
        "--disable-component-update",
        "--allow-insecure-localhost",
       // I'm adding this line
        "--auto-accept-camera-and-microphone-capture",
    };

And them just go build -tags webui_tls, then, if I'm not missing something, I'm sad to say that it doesn't work in webui. Not simply doing that. I just tried, and it keeps asking everytime.

Thing is, it does work (this flag) with chromium installed locally. It also works with google-chrome-stable installed locally.
It also does work with the same ui/index.html that I'm using here, just changing the file routes to open the file with the local google-chrome-stable and adding this flag.
It just doesn't work when we use it with/inside webui (which I'm using with Chrome). And I only have google-chrome-stable channel of Chrome installed.
And I'm not calling webui_clean . ATM, I just have this go code (later I will add more) in main.go:

package main

import (
	"github.com/webui-dev/go-webui/v2"
)

func main() {
	webui.SetTLSCertificate(certificates and all that, this already works)

	w := webui.NewWindow()
	w.ShowBrowser("ui/index.html", webui.Chrome)
	webui.Wait()
}

hassandraga Jun 13, 2024
Maintainer

Thing is, it does work (this flag) with chromium installed locally

Normally, WebUI will use the same chromium installed locally, just with a different profile, I'm really wondering why it's not working.
Can you please use the debug version of WebUI? And share the logs, in this way we can help you even faster.

go run -tags webui_log main.go

soulchainer Jun 13, 2024
Author

Hi again, @hassandraga. This is so weird!

If I run go run -tags webui_tls main.go it doesn't work.
If I run go build -tags webui_tls it also doesn't work.

BUT if I run or build the project with the -tags webui_tls,webui_log ... it works!

But, of course, we want to run and build without the logging :þ.

Here you have the logs, but have that into account: with the debug mode... it works, is sooo weird.
Could it be that such flag is not being added if not in debug mode, somehow? IDK.

 ╰─λ go run -tags webui_tls,webui_log main.go
[User] webui_set_tls_certificate()
[Core]          WebUI v2.5.0-beta.1 (GNU/Linux, GCC, TLS-Encryption)
[Core]          _webui_init()
[Core]          _webui_get_current_path()
[Core]          _webui_malloc([4096])
[Core]          _webui_ptr_add(0x0x39932c70)
[Core]          _webui_malloc([4096])
[Core]          _webui_ptr_add(0x0x39934c80)
[Core]          _webui_check_certificate()
[Core]          _webui_free_mem(0x(nil))
[Core]          _webui_free_mem(0x(nil))
[Core]          _webui_free_mem(0x(nil))
[Core]          _webui_free_mem(0x(nil))
[Core]          _webui_malloc([1613])
[Core]          _webui_ptr_add(0x0x3998ad90)
[Core]          _webui_malloc([1707])
[Core]          _webui_ptr_add(0x0x3999c270)
[User] webui_set_tls_certificate() -> SSL/TLS Certificate:
-----BEGIN CERTIFICATE-----
here goes my certificate
-----END CERTIFICATE-----
-----BEGIN PRIVATE KEY-----
here goes my private key
-----END PRIVATE KEY-----
[User] webui_new_window()
[User] webui_get_new_window_id()
[User] webui_new_window_id([1])
[Core]          _webui_malloc([2296])
[Core]          _webui_ptr_add(0x0x3998c1f0)
[Core]          _webui_malloc([4096])
[Core]          _webui_ptr_add(0x0x3999ed80)
[Core]          _webui_malloc([4096])
[Core]          _webui_ptr_add(0x0x399a0d90)
[User] webui_new_window_id() -> New window #1 @ 0x0x3998c1f0
[User] webui_new_window_id() -> New window Token 0x9099DD08 (2426002696)
[User] webui_show_browser([1], [2])
[Core]          _webui_show([2])
[Core]          _webui_malloc([13])
[Core]          _webui_ptr_add(0x0x3999d790)
[Core]          _webui_is_valid_url([ui/index...])
[Core]          _webui_show() -> File: [ui/index.html]
[Core]          _webui_show_window(FILE, [2])
[Core]          _webui_get_free_port()
[Core]          _webui_port_is_used([30871])
[Core]          _webui_socket_test_listen_mg([30871])
[Core]          _webui_malloc([64])
[Core]          _webui_ptr_add(0x0x3999d810)
[Core]          _webui_malloc([32])
[Core]          _webui_ptr_add(0x0x3994c960)
[Core]          _webui_url_encode()
[Core]          _webui_malloc([53])
[Core]          _webui_ptr_add(0x0x3998c160)
[Core]          _webui_malloc([79])
[Core]          _webui_ptr_add(0x0x39999080)
[Core]          _webui_free_mem(0x0x3998c160)
[Core]          _webui_free_mem(0x0x3998c160) -> Free 64 bytes
[Core]          _webui_free_mem(0x0x3999d790)
[Core]          _webui_free_mem(0x0x3999d790) -> Free 16 bytes
[Core]          _webui_browser_start([https://localhost:30871/ui%2Findex.html], [2])
[Core]          _webui_browser_start_chrome([https://localhost:30871/ui%2Findex.html])
[Core]          _webui_browser_exist([2])
[Core]          _webui_cmd_sync()
[Core]          _webui_cmd_sync() -> Running [google-chrome --version >>/dev/null 2>>/dev/null] 
[Core]          _webui_cmd_sync()
[Core]          _webui_cmd_sync() -> Running [google-chrome-stable --version >>/dev/null 2>>/dev/null] 
[Core]          _webui_browser_create_new_profile(2)
[Core]          _webui_malloc([4096])
[Core]          _webui_ptr_add(0x0x399a2da0)
[Core]          _webui_malloc([4096])
[Core]          _webui_ptr_add(0x0x399a4db0)
[Core]          _webui_browser_create_new_profile(2) -> Generating WebUI profile
[Core]          _webui_get_temp_path()
[Core]          _webui_get_browser_args([2])
[Core]          _webui_run_browser()
[Core]          _webui_cmd_async()
[Core]          _webui_cmd_async() -> Running [google-chrome-stable --user-data-dir="/home/soulchainer/.WebUI/WebUIChromeProfile" --no-first-run --safe-mode --disable-extensions --disable-background-mode --disable-plugins --disable-plugins-discovery --disable-translate --disable-features=Translate --bwsi --disable-sync --disable-sync-preferences --disable-component-update --allow-insecure-localhost --auto-accept-camera-and-microphone-capture --no-proxy-server --app=https://localhost:30871/ui%2Findex.html >>/dev/null 2>>/dev/null &] 
[Core]          _webui_show_window() -> App-mode browser succeeded.
[Core]          _webui_free_mem(0x0x39999080)
[Core]          _webui_free_mem(0x0x39999080) -> Free 128 bytes
[Core]          _webui_show_window() -> Waiting for window connection
[Core]          _webui_server_thread()
[Core]          _webui_server_thread([1]) -> URL: [https://localhost:30871]
[Core]          _webui_malloc([64])
[Core]          _webui_ptr_add(0x0x716ec4000b70)
[Core]          _webui_tls_initialization()
[Core]          _webui_server_thread([1]) -> Listening Success
[Core]          _webui_server_thread([1]) -> HTTP/WS Port: 127.0.0.1:30871s
[Core]          _webui_server_thread([1]) -> Timeout is 15 seconds
[Core]          _webui_server_thread([1]) -> Root path: .
[Core]          _webui_server_thread([1]) -> Waiting for first HTTP request
[Core]          _webui_http_handler()
[Core]          _webui_http_handler() -> GET [/ui/index.html]
[Core]          _webui_get_extension()
[Core]          _webui_http_handler() -> Text based local file
[Core]          _webui_serve_file()
[Core]          _webui_get_file_name_from_url([/ui/index.html])
[Core]          _webui_get_file_name_from_url() -> File name: [ui/index.html]
[Core]          _webui_get_full_path([ui/index.html])
[Core]          _webui_malloc([15])
[Core]          _webui_ptr_add(0x0x716eb8007210)
[Core]          _webui_free_mem(0x0x716eb80071f0)
[Core]          _webui_get_full_path() -> Full path: [./ui/index.html]
[Core]          _webui_file_exist([./ui/index.html])
[Core]          _webui_file_exist() -> Parsed to [./ui/index.html]
[Core]          _webui_free_mem(0x0x716eb8007210)
[Core]          _webui_free_mem(0x0x716eb8007210) -> Free 16 bytes
[Core]          _webui_free_mem(0x0x716eb80071f0)
[Core]          _webui_http_handler() -> HTTP Status Code: 200
[Core]          _webui_server_thread([1]) -> Waiting for first connection
[Core]          _webui_http_handler()
[Core]          _webui_http_handler() -> GET [/ui/css/main.css]
[Core]          _webui_get_extension()
[Core]          _webui_http_handler() -> Text based local file
[Core]          _webui_serve_file()
[Core]          _webui_get_file_name_from_url([/ui/css/main.css])
[Core]          _webui_get_file_name_from_url() -> File name: [ui/css/main.css]
[Core]          _webui_get_full_path([ui/css/main.css])
[Core]          _webui_malloc([17])
[Core]          _webui_ptr_add(0x0x716eb0008cf0)
[Core]          _webui_free_mem(0x0x716eb00064a0)
[Core]          _webui_get_full_path() -> Full path: [./ui/css/main.css]
[Core]          _webui_file_exist([./ui/css/main.css])
[Core]          _webui_file_exist() -> Parsed to [./ui/css/main.css]
[Core]          _webui_free_mem(0x0x716eb0008cf0)
[Core]          _webui_free_mem(0x0x716eb0008cf0) -> Free 32 bytes
[Core]          _webui_free_mem(0x0x716eb00064a0)
[Core]          _webui_http_handler() -> HTTP Status Code: 200
[Core]          _webui_http_handler()
[Core]          _webui_http_handler() -> GET [/webui.js]
[Core]          _webui_http_handler() -> WebUI-Bridge
[Core]          _webui_generate_js_bridge()
[Core]          _webui_malloc([64])
[Core]          _webui_ptr_add(0x0x716eb800e280)
[Core]          _webui_http_handler()
[Core]          _webui_http_handler() -> GET [/ui/js/data.js]
[Core]          _webui_get_extension()
[Core]          _webui_http_handler() -> Text based local file
[Core]          _webui_serve_file()
[Core]          _webui_get_file_name_from_url([/ui/js/data.js])
[Core]          _webui_get_file_name_from_url() -> File name: [ui/js/data.js]
[Core]          _webui_get_full_path([ui/js/data.js])
[Core]          _webui_malloc([15])
[Core]          _webui_malloc([21332])
[Core]          _webui_ptr_add(0x0x716eac016080)
[Core]          _webui_free_mem(0x0x716eac016190)
[Core]          _webui_get_full_path() -> Full path: [./ui/js/data.js]
[Core]          _webui_file_exist([./ui/js/data.js])
[Core]          _webui_file_exist() -> Parsed to [./ui/js/data.js]
[Core]          _webui_ptr_add(0x0x716eb8025170)
[Core]          _webui_free_mem(0x0x716eb800e280)
[Core]          _webui_free_mem(0x0x716eb800e280) -> Free 128 bytes
[Core]          _webui_http_send()
[Core]          _webui_free_mem(0x0x716eac016080)
[Core]          _webui_free_mem(0x0x716eac016080) -> Free 16 bytes
[Core]          _webui_free_mem(0x0x716eac016190)
[Core]          _webui_http_handler() -> HTTP Status Code: 200
[Core]          _webui_free_mem(0x0x716eb8025170)
[Core]          _webui_free_mem(0x0x716eb8025170) -> Free 32768 bytes
[Core]          _webui_http_handler() -> HTTP Status Code: 200
[Core]          _webui_http_handler()
[Core]          _webui_http_handler() -> GET [/ui/js/alpine.js]
[Core]          _webui_get_extension()
[Core]          _webui_http_handler() -> Text based local file
[Core]          _webui_serve_file()
[Core]          _webui_get_file_name_from_url([/ui/js/alpine.js])
[Core]          _webui_get_file_name_from_url() -> File name: [ui/js/alpine.js]
[Core]          _webui_get_full_path([ui/js/alpine.js])
[Core]          _webui_malloc([17])
[Core]          _webui_ptr_add(0x0x716ea400e310)
[Core]          _webui_free_mem(0x0x716ea40161e0)
[Core]          _webui_get_full_path() -> Full path: [./ui/js/alpine.js]
[Core]          _webui_file_exist([./ui/js/alpine.js])
[Core]          _webui_file_exist() -> Parsed to [./ui/js/alpine.js]
[Core]          _webui_free_mem(0x0x716ea400e310)
[Core]          _webui_free_mem(0x0x716ea400e310) -> Free 32 bytes
[Core]          _webui_free_mem(0x0x716ea40161e0)
[Core]          _webui_http_handler() -> HTTP Status Code: 200
[Core]          _webui_ws_connect_handler()
[Core]          _webui_ws_ready_handler()
[Core]          _webui_receive([1], [2], [0])
[Core]          _webui_malloc([40])
[Core]          _webui_ptr_add(0x0x716eb00151b0)
[Core]          [Thread .] _webui_process_thread()
[Core]          _webui_process(1)
[Core]          _webui_process(1) -> Start
[Core]          _webui_process(1) -> WebSocket connected
[Core]          _webui_process(1) -> Finished.
[Core]          _webui_free_mem(0x0x716ec4037670)
[Core]          _webui_free_mem(0x0x716eb00151b0)
[Core]          _webui_free_mem(0x0x716eb00151b0) -> Free 64 bytes
[Loop] webui_wait()
[Loop] webui_wait() -> Waiting (Timeout in 15 seconds)
[Loop] webui_wait() -> Linux web browser loop
[Core]          _webui_server_thread([1]) -> Window Connected.
[Core]          _webui_http_handler()
[Core]          _webui_http_handler() -> GET [/favicon.ico]
[Core]          _webui_file_exist_mg()
[Core]          _webui_malloc([12])
[Core]          _webui_ptr_add(0x0x716eac016170)
[Core]          _webui_malloc([13])
[Core]          _webui_ptr_add(0x0x716eac0087e0)
[Core]          _webui_file_exist([./favicon.ico])
[Core]          _webui_file_exist() -> Parsed to [./favicon.ico]
[Core]          _webui_free_mem(0x0x716eac016170)
[Core]          _webui_free_mem(0x0x716eac016170) -> Free 16 bytes
[Core]          _webui_free_mem(0x0x716eac0087e0)
[Core]          _webui_free_mem(0x0x716eac0087e0) -> Free 16 bytes
[Core]          _webui_http_handler() -> HTTP Status Code: 302
[Core]          _webui_http_handler()
[Core]          _webui_http_handler() -> GET [/favicon.svg]
[Core]          _webui_file_exist_mg()
[Core]          _webui_malloc([12])
[Core]          _webui_ptr_add(0x0x716eb801cfb0)
[Core]          _webui_malloc([13])
[Core]          _webui_ptr_add(0x0x716eb801df10)
[Core]          _webui_file_exist([./favicon.svg])
[Core]          _webui_file_exist() -> Parsed to [./favicon.svg]
[Core]          _webui_free_mem(0x0x716eb801cfb0)
[Core]          _webui_free_mem(0x0x716eb801cfb0) -> Free 16 bytes
[Core]          _webui_free_mem(0x0x716eb801df10)
[Core]          _webui_free_mem(0x0x716eb801df10) -> Free 16 bytes
[Core]          _webui_http_send()
[Core]          _webui_http_handler() -> HTTP Status Code: 200
[Core]          _webui_ws_data_handler()
[Core]          _webui_ws_close_handler()
[Core]          _webui_receive([1], [3], [0])
[Core]          _webui_malloc([40])
[Core]          _webui_ptr_add(0x0x716eb00164f0)
[Core]          [Thread .] _webui_process_thread()
[Core]          _webui_process(2)
[Core]          _webui_process(2) -> Start
[Core]          _webui_process(2) -> WebSocket Closed
[Core]          _webui_process(2) -> Finished.
[Core]          _webui_free_mem(0x0x716ec4037670)
[Core]          _webui_free_mem(0x0x716eb00164f0)
[Core]          _webui_free_mem(0x0x716eb00164f0) -> Free 64 bytes
[Core]          _webui_server_thread([1]) -> Window disconnected
[Core]          _webui_server_thread([1]) -> Waiting for reconnection
[Core]          _webui_server_thread([1]) -> Cleaning
[Core]          _webui_free_port([30871])
[Core]          _webui_free_mem(0x0x716ec4000b70)
[Core]          _webui_free_mem(0x0x716ec4000b70) -> Free 128 bytes
[Core]          _webui_server_thread([1]) -> Server stopped.
[Loop] webui_wait() -> Cleaning
[Loop] webui_wait() -> Main loop exit successfully.

hassandraga · 2024-06-13T14:26:15Z

hassandraga
Jun 13, 2024
Maintainer

if I run or build the project with the -tags webui_tls,webui_log ... it works!

Glad to hear that!
Just to confirm, do you mean by working is that the browser does not ask again about the permission?

If I run go run -tags webui_tls main.go it doesn't work

Can you please use the web browser's DevTool to make sure that WebUI is using HTTPS in the non-debug mode?

4 replies

soulchainer Jun 13, 2024
Author

Glad to hear that! Just to confirm, do you mean by working is that the browser does not ask again about the permission?

Yes. When using -tags webui_tls,webui_log together. It doesn't ask at any time, not a single time (just like the flag --auto-accept-camera-and-microphone-capture is expected to work).

Can you please use the web browser's DevTool to make sure that WebUI is using HTTPS in the non-debug mode?

I have been using the webui_tls all the time since I get it working, so yes, it's using https in the non-debug mode, because that's -tags webui_tls (webui TLS version). And I have been checking it all times (I checked it again and can confirm).

To running with the debug mode, I do, as already commented, -tags webui_tls,webui_log, because, if not, it doesn't support TLS neither SetTLSCertificate, so the already showed code won't run.

soulchainer Jun 24, 2024
Author

@hassandraga Question: can we expect this to work in next 2.5 in «production» mode, instead of exclusively in debug mode (how it is working right now)?

hassandraga Jun 25, 2024
Maintainer

I can't reproduce the issue, however, I tested it in Ubuntu using Chrome, with latest webui commit.

UI:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mic</title>
</head>
<body>
    <button id="requestMic">Request Microphone Permission</button>
    <script>
        document.getElementById('requestMic').addEventListener('click', () => {
            navigator.mediaDevices.getUserMedia({ audio: true })
                .then(stream => {
                    // Permission granted
                    console.log('Microphone permission granted');
                    stream.getTracks().forEach(track => track.stop());
                })
                .catch(error => {
                    // Permission denied
                    console.error('Microphone permission denied', error);
                });
        });
    </script>
</body>
</html>

go run -tags webui_tls,webui_log main.go
go run -tags webui_tls main.go

Both works fine.

Answer selected by soulchainer

soulchainer Jun 25, 2024
Author

Thanks for your help and patience, @hassandraga& @neroist. I have checked cloning last webui code + go get github.com/webui-dev/go-webui/v2@<last commit SHA> and it works just fine now 😃 . This question is resolved <3 .

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Use Chrome's webkitSpeechRecognition without need to allow mic permission every time #405

{{title}}

Replies: 2 comments 17 replies

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

Use Chrome's webkitSpeechRecognition without need to allow mic permission every time #405

soulchainer Jun 11, 2024

Replies: 2 comments · 17 replies

hassandraga Jun 11, 2024 Maintainer

neroist Jun 12, 2024

hassandraga Jun 12, 2024 Maintainer

soulchainer Jun 12, 2024 Author

hassandraga Jun 13, 2024 Maintainer

soulchainer Jun 13, 2024 Author

hassandraga Jun 13, 2024 Maintainer

soulchainer Jun 13, 2024 Author

soulchainer Jun 24, 2024 Author

hassandraga Jun 25, 2024 Maintainer

soulchainer Jun 25, 2024 Author

soulchainer
Jun 11, 2024

Replies: 2 comments 17 replies

hassandraga
Jun 11, 2024
Maintainer

hassandraga Jun 12, 2024
Maintainer

soulchainer Jun 12, 2024
Author

hassandraga Jun 13, 2024
Maintainer

soulchainer Jun 13, 2024
Author

hassandraga
Jun 13, 2024
Maintainer

soulchainer Jun 13, 2024
Author

soulchainer Jun 24, 2024
Author

hassandraga Jun 25, 2024
Maintainer

soulchainer Jun 25, 2024
Author