index.vue:1144 录音失败: TypeError: Cannot read properties of undefined (reading 'getUserMedia')

在使用 Vue 开发网页应用时，如果在调用录音功能时出现 `TypeError: Cannot read properties of undefined (reading 'getUserMedia')` 错误，通常是因为浏览器无法访问 `navigator.mediaDevices` 或其 `getUserMedia` 方法未正确暴露。以下是可能的原因和解决方案。 ### 原因分析 1. **服务协议问题** 浏览器要求访问音频或视频设备（如麦克风或摄像头）时，必须通过 HTTPS 协议提供页面服务。如果使用 HTTP 协议，`navigator.mediaDevices` 可能为 `undefined`，导致调用失败[^3]。 2. **浏览器兼容性问题** 某些浏览器可能不完全支持 `navigator.mediaDevices.getUserMedia`，或者需要特定的前缀（如 `webkit` 或 `moz`）才能访问该 API。 3. **用户权限未正确请求** 如果未正确请求用户权限，或者用户拒绝了权限请求，也可能导致 `getUserMedia` 调用失败。 4. **环境配置问题** 在某些开发环境中，如 Vite，可能需要额外配置才能启用 HTTPS 服务，以支持设备访问。 ### 解决方案 #### 1. 确保使用 HTTPS 协议 确保你的开发服务器使用 HTTPS 协议。对于 Vite 项目，可以使用 `@vitejs/plugin-basic-ssl` 插件来启用 HTTPS 支持： ```javascript import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import basicSsl from '@vitejs/plugin-basic-ssl' export default defineConfig({ plugins: [vue(), basicSsl()], server: { host: '0.0.0.0', https: true } }) ``` 安装插件： ```bash pnpm install @vitejs/plugin-basic-ssl ``` 重启服务器后，使用 HTTPS 访问项目。虽然浏览器可能会提示证书不安全，但可以点击“高级”继续访问[^3]。 #### 2. 添加浏览器前缀支持 为了确保在不同浏览器中都能调用 `getUserMedia`，可以添加前缀支持： ```javascript const navigator = window.navigator; const getUserMedia = navigator.mediaDevices.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia; if (getUserMedia) { const constraints = { audio: true }; getUserMedia.call(navigator.mediaDevices, constraints) .then(stream => { // 成功获取音频流 console.log('Audio stream obtained', stream); }) .catch(error => { console.error('Error accessing media devices.', error); }); } else { console.error('getUserMedia not supported'); } ``` #### 3. 处理用户权限问题 在调用 `getUserMedia` 之前，确保用户已授予麦克风权限。如果用户拒绝了权限请求，可以提示用户手动授予权限： ```javascript const constraints = { audio: true }; navigator.mediaDevices.getUserMedia(constraints) .then(stream => { // 成功获取音频流 console.log('Audio stream obtained', stream); }) .catch(error => { if (error.name === 'PermissionDeniedError') { alert('麦克风权限被拒绝，请在浏览器设置中启用权限'); } else { console.error('Error accessing media devices.', error); } }); ``` #### 4. 检查浏览器兼容性 确保目标浏览器支持 `getUserMedia`。可以通过以下方式检查： ```javascript if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) { alert('当前浏览器不支持 getUserMedia，请使用最新版 Chrome、Firefox 或 Edge'); } ``` ### 总结 在 Vue 项目中实现录音功能时，遇到 `TypeError: Cannot read properties of undefined (reading 'getUserMedia')` 错误，通常是由于服务协议、浏览器兼容性、权限问题或环境配置不当引起的。通过确保使用 HTTPS 服务、添加浏览器前缀支持、处理用户权限问题以及检查浏览器兼容性，可以有效解决该问题。 ---