Search code examples
webpackhttpsprogressive-web-appsmicrophoneself-signed-certificate

Configure HTTPS for localhost to gain access to microphone on phone via USB

I'm setting up my dev environment using this template. My goal is to gain access to the microphone, so I can start developing a small project using the Web Audio API. I run the server on Windows 7 laptop and accessing it locally is working fine -> I open localhost, call navigator.mediaDevices.getUserMedia and gain access to the stream. However, I want to run it on my phone (Nokia 6 with Android 9). But to access the microphone there, my localhost needs HTTPS and I can't get the Windows 7 trust my generated certificate. (Or at least Chrome says so. Tested on Opera too.)

I set up my server to use https and the generated certificate by modifying some configurations of the webpack express server (hopefully the right way) In /build/dev-server.js I have (besides all other logic in the template):

const app = express()
const options = {
  key: fs.readFileSync(path.join(__dirname, '../cert/server.key')),
  cert: fs.readFileSync(path.join(__dirname, '../cert/server.crt')),
  ca: fs.readFileSync(path.join(__dirname, '../cert/rootCA.pem'))
}
const server = https.createServer(options, app).listen(port)

I pass the webpack validation and the server runs successfully, but the browser still says NET::ERR_CERT_AUTHORITY_INVALID, even though I provide SAN (at least I think I do) I generate a certificate using OpenSSL by following this article. The difference here is that the article gives an example of an IIS server certificate configuration (through mmc.exe) and my application is just a webpack express server, ran locally. So I do both of what the article suggests in the same place -> under personal certificates I add both rootCA.pem and server.pfx. Under Trusted Root Certification Authorities I imported rootCA.pem but didn't get a warning message as the article said.

That didn't work.

I had trouble generating certificate with other tools. Could not generate with makecert.exe (didn't try harder, because it's deprecated) and New-SelfSignedCertificate cmdlet is not available in Windows 7 Powershell.

Could you help me find what I'm doing wrong? Am I configuring webpack correctly and if yes - what is the right way to trust my self-signed certificate?

Solution

  • You can use http://localhost for these APIs without HTTPS. It is done that way so you can develop applications easier.

    I have used several of these APIs for different projects. I have also used USB and BlueTooth.

    Now accessing from an external device will require real HTTPS.

    For me it is easier to test from devices by deploying to a test origin. I use S3 and CloudFront if that helps.