I would like to handle the sound of microphones connected to smartphones and PCs within a web application configured with VueCLI.I would like to access the development server built on the development PC from my iPhone or other PC from within the local network to check the movement, but I cannot handle the microphone on any device other than the development PC.I checked and found that HTTPS needs to set up a server, so it may work well in production, but would it be difficult to access media such as audio and video on other devices in the local network during development?
javascript vuejs
Would you like to use the secure context in your local development environment?Of course it's possible.
First, an API such as MediaDevices.getUserMedia() indicated in the questionnaire requires a Secure Context, which can be used primarily in the following environments, as described in MDN:
http://127.0.0.1 (loopback address)http://localhost, http://*.localhost (domain guaranteed to point to loopback address)https://http://127.0.0.1 (loopback address)http://localhost, http://*.localhost (domain guaranteed to point to loopback address)https://You can use the variables available at the global scope, window.isSecureContext to see if the current page is affected.
By the way, what if the certificate is incorrect (ignoring the warning screen, such as domain mismatch or expiration)?Apparently, this is accepted as a secure context.
Now, based on the above, you will roughly do one of the following:
Let's take an overview of each of these examples.
This is done by port forwarding.It forwards the local port of the remote machine (client) and the port of the host (developer).
For Android Chrome, this is easy to do with the features provided by Chrome's remote debugging.
Modern PCs can use OpenSSH on both Windows and macOS.Allows port forwarding over SSH.It seems that there are several applications that enable this on iOS devices.I will omit the details here.
There are two main approaches.
You can wait at https with external service and forward your request to the development machine.A famous service that can do this is ngrok.
One caveat is that anyone who knows the address can access it.(For free plans)
Register and follow the instructions on the dashboard to download and set up ngrok for port forwarding.
I've been writing a series of troubling methods so far, but the vue-cli actually supports serving at https.You don't have to worry about preparing a certificate.
Simply add --https to the vue-cli-service serve option.
For example, if you normally start the server with yarn serve, you can start the server with https using the Ore certificate by simply tapping the command like yarn serve--https, or npm run serve.
© 2024 OneMinuteCode. All rights reserved.