navigator.mediaDevices.getUserMedia dans Nuxt - non défini dans Nuxt

Question

J'ai le code suivant pour déclencher la caméra dans Nuxt afin que je puisse capturer une image, mais j'obtiens toujours l'erreur :

Impossible de lire la propriété non définie (lire 'getUserMedia')

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

C'est dans une méthode. Je n'ai rien installé.

Quelqu'un peut-il m'aider ?

Answer 1

Merci à @kissun de m'avoir orienté dans la bonne direction.

Je pense que c'est un problème récurrent car il n'est pas disponible en mode développement navigator.mediaDevices.getUserMedia.

J'ai ajouté cette fonction dans mounted comme suggéré, mais cela ne fonctionne pas non plus.

Après une recherche en ligne, j'ai découvert que je devais utiliser HTTPS en mode développement pour que cela fonctionne enfin.

Pour ce faire, créez d'abord un certificat et une clé HTTPS, puis configurez nuxt. Des instructions originales et complètes peuvent être trouvées ici Comment exécuter NUXT (npm run dev) en utilisant HTTPS dans localhost ?

Pour configurer nuxt, ajoutez ceci à l'objet serveur dans le fichier nuxt.config.js :

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'))
    }
  }

Essayez-le maintenantnavigator.mediaDevices.getUserMedia