前端 - navigator.mediaDevices.enumerateDevices在ios微信浏览器里调用摄像头无响应？

Question

navigator.mediaDevices.getUserMedia在ios微信浏览器里调用前置摄像头无响应

测试了4台
ios 17.0以上的（微信版本都为8.0.48） 微信浏览器和safari浏览器都可以正常调用 17以下不行

而且控制台没有任何异常和日志 我在navigator.mediaDevices.getUserMedia后也跟了catch方法 也没有捕获到 代码执行似乎是陷入这个方法里没有出来一样 then和catch都没有执行 然后也没有任何异常捕获

后面又尝试先获取设备id去调用 navigator.mediaDevices.enumerateDevices
手机上获取的设备信息 deviceId为空字符串

Answer 1

你遇到的问题似乎与iOS微信浏览器中的某些特定版本或配置有关，特别是在iOS 17.0以下版本。以下是一些建议的解决步骤和考虑因素：

1. 权限问题：确保你的应用或网站已经获得了调用摄像头和麦克风的必要权限。在iOS中，用户需要明确授予访问摄像头的权限。
2. iOS版本和微信版本：你提到iOS 17.0以上版本的微信浏览器和Safari浏览器都可以正常工作，但17.0以下版本存在问题。这可能是因为微信或iOS的某些更新修复了这个问题。建议用户更新他们的iOS和微信版本。
3. navigator.mediaDevices.enumerateDevices问题：如果deviceId为空字符串，可能是因为某些设备没有被正确识别或列出。尝试在不同的设备和iOS版本上测试，看看是否都存在这个问题。
4. Promise处理：navigator.mediaDevices.getUserMedia返回一个Promise。确保你正确地处理了Promise的then和catch部分。例如：

navigator.mediaDevices.getUserMedia({ video: true })  .then(stream => {    // 处理媒体流  })  .catch(error => {    console.error("获取媒体设备失败:", error);  });

如果then和catch都没有执行，可能是因为Promise被挂起或因为某种原因没有解决或拒绝。

5. 微信浏览器的限制：微信浏览器可能有自己的API限制或实现方式。建议查看微信开发文档，看看是否有关于调用摄像头和麦克风的特定指南或限制。
6. 其他浏览器测试：除了微信和Safari，尝试在其他iOS浏览器（如Chrome）上测试你的代码，以确定问题是否仅限于微信浏览器。
7. 检查控制台日志：尽管你提到控制台没有任何异常，但再次确认没有其他的警告或信息可能会提供额外的线索。
8. 代码简化：尝试简化你的代码，只调用navigator.mediaDevices.getUserMedia而不进行其他操作，看看问题是否仍然存在。这有助于确定问题是否与其他代码部分有关。

如果上述建议都不能解决问题，建议进一步深入研究或考虑与微信开发团队或相关社区联系，看看是否有其他人遇到了相同的问题或是否有已知的解决方案。