問(wèn)題描述

我正在使用面向模式"約束來(lái)在兩個(gè)攝像頭之間切換，但我無(wú)法完全確定用戶(hù)端是否有環(huán)境"攝像頭(后置攝像頭).僅計(jì)算 enumerateDevices 函數(shù)返回的承諾的視頻輸入"是不夠的.

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.

我嘗試搜索它，我發(fā)現(xiàn)的只是使用視頻 MediaTrack 標(biāo)簽并搜索包含面向背面"的內(nèi)容.字符串，在所有瀏覽器(例如 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 :)

推薦答案

這里有第二個(gè)答案.選擇前置 ( facesMode:'user') 和后置 (facingMode:'environment') 攝像頭是我正在處理的問(wèn)題.

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

如果您有一個(gè)打開(kāi)的 .getUserMedia() 流到相機(jī)，則可以判斷您正在使用哪個(gè)相機(jī).stream.getTracks[0].getCapabilities() 返回一個(gè)帶有 facingMode:'user' 或 facingMode:'environment' 字段的對(duì)象在里面.但是您必須已經(jīng)為特定設(shè)備打開(kāi)了一個(gè)流才能獲得它.

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.

這是我在移動(dòng)設(shè)備測(cè)試場(chǎng)中使用多個(gè)設(shè)備時(shí)發(fā)現(xiàn)的.這些是 .enumerateDevices() 產(chǎn)生的 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 設(shè)備上，前置攝像頭是列表中的第一個(gè)視頻輸入設(shè)備，后置攝像頭是第二個(gè).在 Android 設(shè)備上，前置攝像頭具有字符串front"；在它們的 device.label 值中，后置攝像頭或相機(jī)具有字符串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. 運(yùn)行 Mobile Safari 的 iOS 設(shè)備:device.label 項(xiàng)均已本地化為當(dāng)前選擇的國(guó)家語(yǔ)言.
2. 設(shè)備始終按此順序出現(xiàn)在設(shè)備陣列中，前置攝像頭始終作為陣列中的第一個(gè)設(shè)備出現(xiàn)，并帶有 device.kind:'videoinput'.這是我從我嘗試過(guò)的每臺(tái) iOS 設(shè)備 auf Deutsch 中獲得的設(shè)備標(biāo)簽列表:
   • 音頻輸入: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

你可以告訴你什么時(shí)候在 iPhone 上

You can tell you’re on an iPhone when

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

你可以告訴你什么時(shí)候在 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

請(qǐng)注意，iPad Safari 現(xiàn)在撒謊并聲稱(chēng)它是英特爾 Mac.它顯示了這個(gè) 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 設(shè)備

1. Android 設(shè)備:device.label"項(xiàng)未本地化.

我查看的設(shè)備有不同的 device.label 列表.但我發(fā)現(xiàn)的所有攝像頭在 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.

運(yùn)行 Android 11 的 Pixel 3A 具有此設(shè)備列表.

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

• 音頻輸入:標(biāo)準(zhǔn)
• 音頻輸入:免提
• 音頻輸入:耳機(jī)聽(tīng)筒
• videoinput:camera2 1, 正面
• videoinput:camera2 0, 朝后
• 音頻輸出:標(biāo)準(zhǔn)

運(yùn)行 Android 9 的三星 SM-A205F 有這些設(shè)備.

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

• 音頻輸入:默認(rèn)
• 音頻輸入:免提
• 音頻輸入:耳機(jī)聽(tīng)筒
• videoinput:camera2 1, 正面
• videoinput:camera2 2, 正面
• videoinput:camera2 0, 朝后
• 音頻輸出:默認(rèn)

這個(gè)列舉了兩個(gè)不同的前置自拍相機(jī).第一個(gè)提供比第二個(gè)更高的分辨率.

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

運(yùn)行 Android 6.0.1 的三星 SM-G925I

A Samsung SM-G925I running Android 6.0.1

• 音頻輸入:默認(rèn)
• 音頻輸入:免提
• 音頻輸入:耳機(jī)聽(tīng)筒
• videoinput:camera2 1, 正面
• videoinput:camera2 0, 朝后
• 音頻輸出:默認(rèn)

順便說(shuō)一下，.getSupportedConstraints() 的結(jié)果并沒(méi)有多大幫助:iOS 和 Android 都給出 faceMode:true.

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

這篇關(guān)于getUserMedia 檢測(cè)前置攝像頭的文章就介紹到這了，希望我們推薦的答案對(duì)大家有所幫助，也希望大家多多支持html5模板網(wǎng)！