运行 webrtc sample 报错 TypeError: Cannot read property 'serviceKey' of undefined

### 解决 JavaScript 中 `TypeError: Cannot read property 'mediaDevices' of undefined` 和 `createCameraContext is not a function` 报错问题 在 JavaScript 开发过程中，如果遇到类似于 `TypeError: Cannot read property 'mediaDevices' of undefined` 或 `createCameraContext is not a function` 的错误，通常是由于浏览器或运行环境不支持某些 API 导致的。以下是详细的解决方案： --- #### 1. **检查 `navigator.mediaDevices` 是否可用** `navigator.mediaDevices` 是现代浏览器用于访问媒体设备（如摄像头和麦克风）的标准 API。然而，并非所有浏览器都完全支持它。如果尝试访问 `navigator.mediaDevices` 而其值为 `undefined`，则会抛出类似的错误。 可以通过以下代码片段检测是否存在 `navigator.mediaDevices`： ```javascript if (typeof navigator !== 'undefined' && typeof navigator.mediaDevices !== 'undefined') { console.log('Media devices supported'); } else { console.error('Navigator or mediaDevices is unsupported in the current environment.'); } ``` 如果发现 `navigator.mediaDevices` 不可用，则可能是以下原因之一： - 当前运行环境是一个老旧的浏览器。 - 浏览器的安全设置阻止了对媒体设备的访问[^1]。 在这种情况下，可以考虑提示用户升级浏览器或者使用 polyfill 来填补缺失的功能。 --- #### 2. **Polyfill 替代方案** 为了兼容较老的浏览器，可以引入第三方 Polyfill 库来模拟 `navigator.mediaDevices.getUserMedia()` 功能。例如，[adapter.js](https://github.com/webrtcHacks/adapter) 是一个广泛使用的 WebRTC 兼容库。 安装 adapter.js 后，可以在项目中这样使用： ```bash npm install webrtc-adapter ``` 然后在代码中导入并初始化： ```javascript import adapter from 'webrtc-adapter'; // 尝试调用 getUserMedia() navigator.mediaDevices.getUserMedia({ video: true }) .then(stream => { const videoElement = document.querySelector('video'); videoElement.srcObject = stream; }) .catch(error => { console.error('Failed to access camera:', error); }); ``` 通过这种方式，即使用户的浏览器版本较低，也可以一定程度上实现对媒体设备的支持[^2]。 --- #### 3. **UniApp 中 `createCameraContext` 的兼容性问题** 在 UniApp 框架中，`uni.createCameraContext` 是专为微信小程序设计的一个 API。如果在其他平台上（如 H5 或 App 端）调用了该方法，可能会触发 `TypeError: uni.createCameraContext is not a function` 错误。 要解决这个问题，可以采取以下措施之一： ##### （1）**条件编译** 利用 UniApp 的条件编译功能，仅在支持的小程序环境中调用 `createCameraContext`。对于不支持的平台，提供备用逻辑： ```javascript #ifdef MP-WEIXIN const cameraCtx = uni.createCameraContext(); cameraCtx.takePhoto({ success(res) { console.log('Photo taken successfully:', res.tempImagePath); }, fail(err) { console.error('Failed to take photo:', err); } }); #else console.warn('Fallback logic applied as createCameraContext is unavailable.'); // 提供替代方案，例如让用户手动选择图片 uni.chooseImage({ count: 1, success(res) { console.log('User selected an image:', res.tempFilePaths[0]); } }); #endif ``` ##### （2）**动态检测 API 存在性** 在运行时动态检测 `uni.createCameraContext` 是否存在，从而决定后续操作： ```javascript if (typeof uni.createCameraContext === 'function') { const cameraCtx = uni.createCameraContext(); // 继续执行相关逻辑... } else { console.warn('The platform does not support createCameraContext.'); // 提供备选方案... } ``` --- #### 4. **确保上下文中 `this` 的正确绑定** 另一个常见的问题是，在回调函数或箭头函数中，`this` 的指向发生了改变，导致类似 `TypeError: this.myMethod is not a function` 的错误。为了避免这种情况，推荐始终使用箭头函数或将 `this` 显式绑定给局部变量。 例如： ```javascript class CameraHandler { constructor() { this.initCamera = this.initCamera.bind(this); // 显式绑定 this } initCamera() { if (typeof navigator.mediaDevices !== 'undefined') { navigator.mediaDevices.getUserMedia({ video: true }).then(() => { console.log('Camera initialized by class method.'); }); } else { console.error('Media devices are not available.'); } } } new CameraHandler().initCamera(); ``` 或者直接使用箭头函数简化： ```javascript const handleSuccess = () => { console.log('Arrow function ensures correct this binding.'); }; navigator.mediaDevices.getUserMedia({ video: true }).then(handleSuccess).catch(console.error); ``` --- #### 5. **总结** 上述方法涵盖了从基础检测到高级兼容性的多个层面，旨在帮助开发者有效规避因 API 缺失或上下文混乱引起的 `TypeError` 类型错误。无论是针对标准浏览器还是特定框架（如 UniApp），都可以找到适合的解决方案。 --- ###