vue/react等前端页面打开摄像头报错TypeError: Cannot read properties of undefined (reading 'getUserMedia')

291 阅读1分钟

往往非常大概率是因为你启动的是http,而不是https服务,启动摄像头必须是https服务!!!!!

所以需要把你的项目启动为https服务,如果你用的vite,那么恭喜你,很简单就可以启动https服务,详细可以看这篇文章:vite项目配置本地开发使用https访问,3分钟搞定_vite-plugin-mkcert-CSDN博客

使用插件@vitejs/plugin-basic-ssl
这个插件仓库地址:https://github.com/vitejs/vite-plugin-basic-ssl

安装依赖@vitejs/plugin-basic-ssl:

pnpm i @vitejs/plugin-basic-ssl

然后配置到vite中:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
import basicSsl from '@vitejs/plugin-basic-ssl'
 
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(), basicSsl()],
  server: {
    host: '0.0.0.0',
    https: true
  },
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src')
    }
  }
})


最后重启服务器:

但是这种方式会让浏览器提示不安全,这时候点击高级,继续访问就可以了:

但是这种是最简单的,启动之后就可以访问了: