getUserMedia检测前置摄像头 [英] getUserMedia detect front camera

问题描述

我正在使用'faceingMode'约束来在两个摄像头之间切换，但是我无法完全确定用户端是否具有环境"摄像头(背面摄像头)..不足以计算enumerateDevices函数返回的Promise的"videoinput".

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

我确定必须有更好的方法:)

解决方案

此处的第二个答案.前置摄像头( faceingMode:'用户')和后置摄像头( faceingMode:'environment')的选择是我正在研究的问题.

如果您有打开的 .getUserMedia()流到摄像机，则可以判断您使用的是哪个摄像机. stream.getTracks [0] .getCapabilities()传回具有 faceingMode:'user'或 faceingMode:'environment'字段的对象在里面.但是您必须已经向特定设备打开了流才能获得此功能.

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

tl; dr:在iOs设备上，前置摄像头是列表中的第一个视频输入设备，而后置摄像头是第二个.在Android设备上，一个或多个前置摄像头的字符串为"front".在其 device.label 值中，并且背面的照相机或相机的字符串为"back".

iOS设备

1. 运行Mobile Safari的iOS设备: device.label 项均已本地化为当前所选的本国语言.
2. 设备始终按此顺序出现在设备阵列中，而前置摄像头始终显示为阵列中的第一个设备，其 device.kind:'videoinput'.这是我尝试过的每个iOS设备上获得的设备标签的列表:auf Deutsch:
   • 音频输入:iPhone Mikrofon
   • videoinput:Frontkamera
   • videoinput:Rückkamera
3. 某些iPhone的背面有多个摄像头镜头.但是，Mobile Safari中的MediaStream API仅显示一台摄像机.

您可以告诉您何时在iPhone上

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

您可以告诉您何时在iPad上

  typeof navigator.maxTouchPoints ==='数字'&&navigator.maxTouchPoints>2个&&typeof navigator.vendor ==='字符串'&&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，如Gecko)版本/14.0.1 Safari/605.1.15

Android设备

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

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

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

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

4. 运行Android 9的Samsung SM-A205F依次订购了这些设备.

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

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

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

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

而且，顺便说一下， .getSupportedConstraints()的结果并没有太大帮助:iOS和Android都给出了 faceingMode:true .

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.

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 :)

解决方案

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

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.

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: 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".

iOS devices

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
3. Some iPhones have multiple camera lenses on the back. Nevertheless, the MediaStream APIs in Mobile Safari only show one camera.

You can tell you’re on an iPhone when

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

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

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) Version/14.0.1 Safari/605.1.15

Android devices

1. Android devices: the `device.label' items are not localized.

2. 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.

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

   • audioinput:Standard
   • audioinput:Speakerphone
   • audioinput:Headset earpiece
   • videoinput:camera2 1, facing front
   • videoinput:camera2 0, facing back
   • audiooutput:Standard

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

   • audioinput:Default
   • audioinput:Speakerphone
   • audioinput:Headset earpiece
   • videoinput:camera2 1, facing front
   • videoinput:camera2 2, facing front
   • videoinput:camera2 0, facing back
   • audiooutput:Default

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

5. A Samsung SM-G925I running Android 6.0.1

   • audioinput:Default
   • audioinput:Speakerphone
   • audioinput:Headset earpiece
   • videoinput:camera2 1, facing front
   • videoinput:camera2 0, facing back
   • audiooutput:Default

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

这篇关于getUserMedia检测前置摄像头的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！