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