getUserMedia 检测前置摄像头

2022-01-11 00:00:00 webrtc localization javascript getusermedia

我正在使用面向模式"约束来在两个摄像头之间切换，但我无法完全确定用户端是否有环境"摄像头(后置摄像头).仅计算 enumerateDevices 函数返回的承诺的视频输入"是不够的.

I'm using the 'facingMode' constrain in order to switch between the two cameras, but I'm not able to fully decided whether the user end has an 'environment' camera (back facing camera).. it's not enough to to count the 'videoinput' of the returned promise of enumerateDevices function.

我尝试搜索它，我发现的只是使用视频 MediaTrack 标签并搜索包含面向背面"的内容.字符串，在所有浏览器(例如 IOS)中似乎不是恒定的.

I tried searching for it and all I found was to use the video MediaTrack label and search for containing "facing back" string, which doesnt seem to be constant in all browsers (IOS for instance).

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

I'm sure there must be a better way :)

推荐答案

这里有第二个答案.选择前置 ( facesMode:'user') 和后置 (facingMode:'environment') 摄像头是我正在处理的问题.

A second answer here. The selection of front (facingMode:'user') and back (facingMode:'environment') cameras is an issue for something I'm working on.

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

It's possible to tell which camera you're using if you have an open .getUserMedia() stream to a camera. stream.getTracks[0].getCapabilities() gives back an object with either a facingMode:'user' or facingMode:'environment' field in it. But you already must have a stream open to the particular device to get this.

这是我在移动设备测试场中使用多个设备时发现的.这些是 .enumerateDevices() 产生的 device 条目的顺序.

Here's what I have discovered using multiple devices in a mobile-device test farm. These are the order of the device entries yielded by .enumerateDevices().

tl;dr:在 iOs 设备上，前置摄像头是列表中的第一个视频输入设备，后置摄像头是第二个.在 Android 设备上，前置摄像头具有字符串front"；在它们的 device.label 值中，后置摄像头或相机具有字符串back".

tl;dr: On iOs devices, the front facing camera is the first videoinput device in the list, and the back-facing camera is the second one. On Android devices, the front facing camera or cameras have the string "front" in their device.label values and the back facing camra or cameras have the string "back".

  1. 运行 Mobile Safari 的 iOS 设备:device.label 项均已本地化为当前选择的国家语言.
  2. 设备始终按此顺序出现在设备阵列中，前置摄像头始终作为阵列中的第一个设备出现，并带有 device.kind:'videoinput'.这是我从我尝试过的每台 iOS 设备 auf Deutsch 中获得的设备标签列表:
    • 音频输入:iPhone Mikrofon
    • 视频输入:前置摄像头
    • 视频输入:Rückkamera
  1. iOS devices running Mobile Safari: the device.label items are all localized to the currently selected national language.
  2. The devices always appear in this order in the device array, with the front camera always appearing as the first device in the array with device.kind:'videoinput'. Here is the list of devices labels I got from every iOS device I tried, auf Deutsch:
    • audioinput:iPhone Mikrofon
    • videoinput:Frontkamera
    • videoinput:Rückkamera

你可以告诉你什么时候在 iPhone 上

You can tell you’re on an iPhone when

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

你可以告诉你什么时候在 iPad 上

You can tell you’re on an iPad when

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

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

Notice that iPad Safari now lies and claims it's an Intel Mac. It presents this User-Agent string:

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

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

Android 设备

  1. Android 设备:device.label"项未本地化.

我查看的设备有不同的 device.label 列表.但我发现的所有摄像头在 device.label 中都有字符串 front 或 back.

The devices I looked at had different device.label lists. But the cameras I found all had either the string front or back in the device.label.

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

A Pixel 3A running Android 11 has this list of devices.

  • 音频输入:标准
  • 音频输入:免提
  • 音频输入:耳机听筒
  • videoinput:camera2 1, 正面
  • videoinput:camera2 0, 朝后
  • 音频输出:标准

运行 Android 9 的三星 SM-A205F 有这些设备.

A Samsung SM-A205F running Android 9 has these devices in order.

  • 音频输入:默认
  • 音频输入:免提
  • 音频输入:耳机听筒
  • videoinput:camera2 1, 正面
  • videoinput:camera2 2, 正面
  • videoinput:camera2 0, 朝后
  • 音频输出:默认

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

This one enumerates two different front-facing selfiecams. The first one offers higher resolution than the second one.

运行 Android 6.0.1 的三星 SM-G925I

A Samsung SM-G925I running Android 6.0.1

  • 音频输入:默认
  • 音频输入:免提
  • 音频输入:耳机听筒
  • videoinput:camera2 1, 正面
  • videoinput:camera2 0, 朝后
  • 音频输出:默认

顺便说一下，.getSupportedConstraints() 的结果并没有多大帮助:iOS 和 Android 都给出 faceMode:true.

And, by the way, the results of .getSupportedConstraints() don't help much: both iOS and Android give facingMode:true.

相关文章