Vue 工程在 Chrome 浏览器打开，获取音频设备权限问题

目录

项目场景

问题描述

解决方案

方法一、网页使用https方式访问

方法二、修改浏览器安全配置（最直接、简单）

---

项目场景

VUE 工程中使用 navigator.mediaDevices.getUserMedia 方法调用音视频设备。

---

问题描述

Vue 工程在 Chrome 浏览器打开，无法获取音视频设备，控制台提示获取音频设备权限问题

Cannot read property getUserMedia of undefined

---

解决方案

方法一、网页使用https方式访问

视频会议调用 navigator.mediaDevices.getUserMedia 方法需要在 https 协议下才可以调用，于是需要解决 vue-cli 搭建的项目如何支持 https 访问。

Case 1、vue-cli2 项目

1. 生成本地证书

若本地已经安装 git 客户端（查看 git 安装方法），其中包括了 openssl 程序，可直接在项目文件目录打开 git bash 界面，输入以下命令：

① 在 build 文件夹下新建 cert 文件夹，在 cert 目录下打开 git bash 输入以下命令生成私钥 .key 文件

openssl genrsa -out privatekey.pem 1024

② 通过上面生成的私钥文件生成 CSR 证书签名，根据要求填写一些相关信息，可一路按回车即可

openssl req -new -key privatekey.pem -out certrequest.csr

③ 根据上述私钥文件和 csr 证书签名文件生成证书文件

openssl x509 -req -in certrequest.csr -signkey privatekey.pem -out certificate.pem

完成上述步骤后，cert 目录下分别生成 certificate.pem（证书文件）、certrequest.csr（CSR证书签名）、privatekey.pem（私钥） 三个文件。

2. 修改项目中配置修改 webpack.dev.conf.js。新版 vue-cli 已经改用 webpack 的 devServer 来代替之前的 dev-server。

'use strict'
const utils = require('./utils')
const webpack = require('webpack')
const config = require('../config')
const merge = require('webpack-merge')
const path = require('path')
const baseWebpackConfig = require('./webpack.base.conf')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
const portfinder = require('portfinder')
/*---------添加以下2句，引入https和fs---------*/
const https = require('https')
const fs = require('fs')
/*---------添加以上2句，引入https和fs---------*/

const HOST = process.env.HOST
const PORT = process.env.PORT && Number(process.env.PORT)

const devWebpackConfig = merge(baseWebpackConfig, {
  module: {
    rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })
  },
  devtool: config.dev.devtool,

  devServer: {
    clientLogLevel: 'warning',
    historyApiFallback: {
      rewrites: [
        { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },
      ],
    },
    hot: true,
    contentBase: false, 
    compress: true,
    host: HOST || config.dev.host,
    port: PORT || config.dev.port,
    open: config.dev.autoOpenBrowser,
    overlay: config.dev.errorOverlay
      ? { warnings: false, errors: true }
      : false,
    publicPath: config.dev.assetsPublicPath,
    proxy: config.dev.proxyTable,
    quiet: true,
    watchOptions: {
      poll: config.dev.poll,
    },
    disableHostCheck: true,
    /*---------添加https配置---------*/
    https: {
      key: fs.readFileSync(path.join(__dirname, './cert/privatekey.pem')),
      cert: fs.readFileSync(path.join(__dirname, './cert/certificate.pem'))
    }
    /*---------添加https配置---------*/
  },
............................
以下代码省略

Case 2、vue-cli3 项目

使用 vue 脚手架 3.x 搭建的项目，配置开启 https 方法比较简单，在项目根目录下的 vue.config.js 文件中增加属性 https: true 即可。

// vue.config.js
module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'url',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    },
    // 此处开启 https
    https: true
  }
}

方法二、修改浏览器安全配置（最直接、简单）

1、浏览器地址栏输入：

chrome://flags/#unsafely-treat-insecure-origin-as-secure

2、开启 Insecure origins treated as secure 
在下方输入栏内输入你访问的地址 url ，然后将右侧 Disabled 改成 Enabled 即可。

3、浏览器会提示重启（Relaunch），Relaunch 即可。