vue: navigator.mediaDevices is undefined

If you are using internal IPs e.g. 192.168.0.300 etc for development, you are likely to encounter this error when dealing with media devices.

Assuming that you are not using localhost for development for a reason, you can do either of the following

  1. In Firefox you can enable the following two options described in https://stackoverflow.com/a/66605018/1805129. Go to about:config
    set to true media.devices.insecure.enabled and media.getusermedia.insecure.enabled

90c8821922ca484ba9ad755c39c9adbe -- <code>about:config</code> options in firefox” title=”” class=”aligncenter” /></a></p>
<ol>
<li>You can use service like <code>ngrok</code> or <a href=https://serveo.net/ to temporarily get https address. I learnt about these two services in the README file of https://www.npmjs.com/package/vue-qrcode-reader.

Leave a Reply