Nuxt中的navigator.mediaDevices.getUserMedia - 在Nuxt中未定义

Question

我有以下代码来触发 Nuxt 中的相机，以便我可以捕获图像，但我不断收到错误消息：

无法读取未定义的属性（读取“getUserMedia”）

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

这是在一个方法中。我没有安装任何东西。

谁能帮帮我吗？

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