javascript - getUserMedia 检测前置摄像头

Question

我正在使用“facingMode”约束来在两个摄像头之间切换， 但我不能完全确定用户端是否有一个“环境”摄像头(后置摄像头)。计算 enumerateDevices 函数返回的 promise 的“视频输入”是不够的。

我尝试搜索它，但我发现的只是使用视频 MediaTrack 标签并搜索包含“facing back”字符串，这似乎在所有浏览器(例如 IOS)中都不是常量。

我相信一定有更好的方法:)

Answer 1

第二个答案在这里。前置 (facingMode:'user') 和后置 (facingMode:'environment') 摄像头的选择是我正在研究的问题。

如果您有一个打开的 .getUserMedia() 流到相机，就可以告诉您正在使用哪个相机。 stream.getTracks[0].getCapabilities() 返回一个带有 facingMode:'user' 或 facingMode:'environment' 字段的对象在里面。但是您必须已经为特定设备打开了一个流才能获得它。

以下是我在移动设备测试场中使用多台设备发现的结果。这些是 .enumerateDevices() 生成的 device 条目的顺序。

tl;dr:在 iOs 设备上，前置摄像头是列表中的第一个视频输入设备，后置摄像头是第二个。 在 Android 设备上，一个或多个前置摄像头在其 device.label 值中具有字符串“front”，而一个或多个后置摄像头具有字符串“back”。

iOS 设备

1. 运行 Mobile Safari 的 iOS 设备:device.label 项目全部本地化为当前选择的本地语言。
2. 设备始终按此顺序出现在设备数组中，前置摄像头始终显示为数组中具有 device.kind:'videoinput' 的第一个设备。这是我从我尝试过的每台 iOS 设备中获得的设备标签列表，auf Deutsch:
   • 音频输入:iPhone Mikrofon
   • 视频输入:前置摄像头
   • 视频输入:Rückkamera
3. 有些 iPhone 的背面有多个摄像头镜头。然而，Mobile Safari 中的 MediaStream API 仅显示一个摄像头。

当您在使用 iPhone 时

navigator.userAgent.indexOf(' iPhone ') >= 0  

你可以告诉你在 iPad 上

    typeof navigator.maxTouchPoints === 'number' 
 && navigator.maxTouchPoints > 2
 && typeof navigator.vendor === 'string'
 && navigator.vendor.indexOf('Apple') >= 0

请注意，iPad Safari 现在撒谎并声称它是 Intel Mac。它显示了这个 User-Agent 字符串:

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.0.1 Safari/605.1.15

安卓设备

1. Android 设备:“device.label”项未本地化。

2. 我查看的设备具有不同的 device.label 列表。但是我发现的所有相机在 device.label 中都有字符串 front 或 back。

3. 运行 Android 11 的 Pixel 3A 具有此设备列表。

   • 音频输入:标准
   • 音频输入:扬声器
   • audioinput:耳机听筒
   • videoinput:camera2 1，面向前方
   • videoinput:camera2 0，背面
   • 音频输出:标准

4. 运行 Android 9 的三星 SM-A205F 按顺序排列了这些设备。

   • 音频输入:默认
   • 音频输入:扬声器
   • audioinput:耳机听筒
   • videoinput:camera2 1，面向前方
   • videoinput:camera2 2，面向前方
   • videoinput:camera2 0，背面
   • 音频输出:默认

   这个列举了两个不同的前置自拍相机。第一个提供比第二个更高的分辨率。

5. 运行 Android 6.0.1 的三星 SM-G925I

   • 音频输入:默认
   • 音频输入:扬声器
   • audioinput:耳机听筒
   • videoinput:camera2 1，面向前方
   • videoinput:camera2 0，背面
   • 音频输出:默认

而且，顺便说一下，.getSupportedConstraints() 的结果帮助不大:iOS 和 Android 都提供 facingMode:true。