Web page constantly requests microphone access in Firefox because it's served 80/http instead of 443/https

[KathyReid]

Description of issue in object-deviation format

When attempting to record phrases in Firefox on Linux, the below warning is repeatedly presented when ascribing microphone permissions to the web page. This dialogue is shown every time you press the space bar, which is pretty frustrating. You can't tell it to remember the choice because the mimic-recording-studio is served unencrypted.

I know this isn't any fault of the mimic-recording-studio but it's likely to be a bit of a support headache

Workaround

Use Chrome instead, this behaviour is not observed in Chrome.

Desired solution

Is it possible at all to serve this over https/443 to prevent the error? I'm guessing a lot of the people who would likely take mimic-recording-studio for a spin are likely to use Firefox in preference to other browsers.

[penrods]

It would require creating a self-signed certificate and installing it on the browser (because they are also careful about self-signed). Doable, but not really easy. I looked into this for the CES demo.

So I don't think there is a great solution, unfortunately.

[KathyReid]

Should we keep this issue open as a Known Error, with the workaround being to use a different browser? I can imagine it's going to trip a few folks up.

[LearnedVector]

Let's keep this open.

[adocampo]

I was about to open an issue with this subject. I solved it by using an apache reverse proxy, as I have a wildcard lets encrypt certificate. On my Apache configuration I just had to create a new VirtualHost as follows.

 <VirtualHost mimic.docampo.net:443>
     ServerAdmin myemail@example.com
     ServerName mimic.docampo.net:443
     ServerAlias mimic.docampo.net:443
     SSLEngine on
     SSLProxyEngine on
     SSLCertificateFile "/root/.acme.sh/*.docampo.net/fullchain.cer"
     SSLCertificateKeyFile "/root/.acme.sh/*.docampo.net/*.docampo.net.key"
     ErrorLog "/var/log/httpd/mimic.docampo.net-error_log"
     CustomLog "/var/log/httpd/mimic.docampo.net-access_log" common
     ProxyPass / http://192.168.1.100:3000/
     ProxyPassReverse / http://192.168.1.100:3000/
 </VirtualHost>

It just need to be documented while a self-signed certificate is built into the docker image.

[adocampo]

By the way, when I tried on Chrome without SSL, the application crashed So, two problems solved ;)

[tlc]

I have worked on similar code that uses the microphone like this.

I believe that many browsers deny access to the microphone unless the web page is served via HTTPS or from localhost. Firefox may be an exception.

I believe that the constant re-prompting is due to some specific browser API, the result of which could be re-used. Re-using that result would make it a single prompt when the page is loaded.

[NerdDoc]

A find solution - just add to start line - ""start":"HTTPS=true react script start" in frontend/package.json. yarn will create certificates, you just need to accept them. As for me - i changed port to usual ssl port 443.

[dpny518]

To ignore Chrome’s secure origin policy, follow these steps.
Navigate to `chrome://flags/#unsafely-treat-insecure-origin-as-secure` in Chrome.
Find and enable the `Insecure origins treated as secure` section (see below).
Add any addresses you want to ignore the secure origin policy for.
 Remember to include the port number too (if required).Save and restart Chrome.