navigator.mediaDevices.getUserMedia - 反转摄像头列表顺序/仅在 HTML5 QR JS 代码扫描仪中显示后置摄像头

问题描述

我正在为 PHP 应用程序使用以下二维码扫描器来扫描二维码

Link to HTML5 JS QR Code Scanner

The JS file in question for which I have a local copy of referenced in my HTML file in my case

但是,当在 Android 和 iOS 上选择相机时,列表会先排列前置摄像头,最后排列后置摄像头。我相信这可能因设备而异,但是有没有办法

A) 自动开启后置摄像头

B) 只允许访问后置摄像头

C) 颠倒返回的摄像头的顺序,使底部回到列表的顶部,从而将后置摄像头置于列表中的前置摄像头之上

谢谢

dropdown with 1st option selected

list of cameras order

解决方法

这是不合理的杂乱,伤心的话。 (为什么?Apple 正在拖延为 getUserMedia() 提供一流的支持,我想是因为网络应用程序不必通过应用程序商店。)

您必须编写一些代码才能使用 .enumerateDevices() 查找所需的视频设备。在 Android 设备中,设备的 .label 属性包含您想要的相机的字符串 back

在 iOS 设备中,前置摄像头是 .enumerateDevices() 结果列表中的第一个摄像头。很难使用 .label 属性,因为它已本地化为 iOS 用户自己的语言。 (Android 不会本地化这些标签。)

如果您要提供一个选择列表,只需对其进行排序,以便在您展示它之前先使用后置摄像头。

这是我对该主题的研究。

getUserMedia detect front camera