navigator.mediaDevices.getUserMedia in Nuxt – undefiniert in Nuxt

Question

Ich habe den folgenden Code, um die Kamera in Nuxt auszulösen, damit ich ein Bild aufnehmen kann, aber ich erhalte ständig die Fehlermeldung:

Eigenschaft von undefiniert kann nicht gelesen werden (lesen Sie „getUserMedia“)

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

Dies ist eine Methode. Ich habe nichts installiert.

Kann mir jemand helfen?

Answer 1

感谢@kissun 为我指明了正确的方向。

我认为这是一个反复出现的问题，因为无法在开发模式下使用 navigator.mediaDevices.getUserMedia。

我按照建议在 mounted 中添加了此函数，但这也不起作用。

在网上搜索后，我发现我必须在开发模式下使用 HTTPS 才能最终正常工作。

为此，请先创建 HTTPS 证书和密钥，然后配置 nuxt。原始的、完整的说明可以在这里找到 如何在本地主机中使用 HTTPS 运行 NUXT (npm run dev)？

要设置 nuxt，请将其添加到 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'))
    }
  }

现在尝试使用navigator.mediaDevices.getUserMedia