navigator.mediaDevices.getUserMedia in Nuxt - undefined in Nuxt

Question

I have the following code to trigger a camera in Nuxt so that I can capture an image, but I keep getting the error:

Cannot read property of undefined (read 'getUserMedia')

navigator.mediaDevices.getUserMedia(constraints).then((stream) => {
  player.srcObject = stream;
});

This is in a method. I didn't install anything.

Can anyone help me?

Answer 1

Thanks to @kissun for pointing me in the right direction.

I think this is a recurring issue because navigator.mediaDevices.getUserMedia cannot be used in development mode.

I added this function in mounted as suggested, but that didn't work either.

After searching online, I found that I had to use HTTPS in development mode for this to finally work.

To do this, first create an HTTPS certificate and key, then configure nuxt. Original, complete instructions can be found here How to run NUXT (npm run dev) using HTTPS in localhost?

To set up nuxt, add it to the server object in the nuxt.config.js file:

import path from 'path'
import fs from 'fs'

  server: {
    https: {
      key: fs.readFileSync(path.resolve(__dirname, 'server.key')),
      cert: fs.readFileSync(path.resolve(__dirname, 'server.crt'))
    }
  }

Now try using navigator.mediaDevices.getUserMedia