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?
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.