在具有多个摄像头的移动设备上选择默认的备用后置摄像头

Posted 2023-03-12

【中文标题】在具有多个摄像头的移动设备上选择默认的备用后置摄像头

【英文标题】：Selecting the default stock rear camera on mobile devices with multiple camera

【发布时间】：2020-10-14 08:33:04

【问题描述】：

我已经实现了一些 javascript 代码，以允许用户从 Progressive Web App (PWA) 扫描二维码。

使用的 QRScanner 库：https://github.com/mebjas/html5-qrcode

    var html5QrCode = new Html5Qrcode("qrScanner");
    const config =  fps: 15, qrbox: 200 ;
    
    function qrCodeSuccessCallback(successMessage) 
       console.log(successMessage)
    ;
    function qrCodeFailedCallback(failedMessage) 
       return;
    
    html5QrCode.start( facingMode: "environment" , config, qrCodeSuccessCallback, qrCodeFailedCallback)

问题是在华为 P30 Pro 等多个后置摄像头设备上，JavaScript 会自动选择长焦镜头。

想知道是否有任何解决方案可以使其自动选择设备的默认库存相机镜头？

额外信息

另一种方法是让用户选择他们想要的相机镜头的下拉列表（类似于此演示 here）但尽量避免它，因为这将是 UI/UX 需要用户手动操作的缺点在尝试和错误的基础上选择它。

可以获得所有相机镜头，但它没有任何字段来唯一区分哪个相机是正常的默认后置相机，以便我过滤“设备” 它只包含cameraId和label。

// This method will trigger user permissions
Html5Qrcode.getCameras().then(devices => 
  console.log(devices)  // list of devices, which the ID can be used to initialize the camera.
   // e.g. 0: id: "ed3fb96551169649ccf26f4b7858515ea168a5060463e4e7780f2ade48d30150", label: "HP HD Camera (04ca:706d)"

【参考方案1】：

万一其他人有这个问题，我实现了以下，它似乎适用于具有多个摄像头的手机。

使用引导程序 4 的 HTML 代码

<div class="form-row justify-content-md-center">
    <div class="form-group col-md-4 col-sm-4">
        <div class="justify-content-md-center" id="reader"  ></div>
    </div>
</div>

我的 javascript

$(document).ready(function () 

Html5Qrcode.getCameras().then(devices => 
        if (devices && devices.length) 
            var cameraId;
            var cameraLabel;
            if (devices.length === 1) 
                cameraId = devices[0].id;
             else 
                cameraId = devices[1].id;
                //This is for cellphones with 4 cameras. Usually the first 2 detected are the front so in my case selecting the third in the list worked.
                if (cameraLabel.includes("front")) 
                    cameraId = devices[2].id;
                
            

            const html5QrCode = new Html5Qrcode("reader");
            html5QrCode.start(
                cameraId,
                
                    fps: 10,    
                    qrbox: 250  
                ,
                qrCodeMessage => 
                    //Things you want to do when you match a QR Code
                ,
                errorMessage => 
                    // parse error, ignore it.
                )
                .catch(err => 
                    // Start failed, handle it.
                );

        
    ).catch(err => 

    );

)

【讨论】：

我认为这种方法使用的是硬编码的索引值，这并不适合，因为不同的手机型号可能对它们的普通（不是广角、微距等）相机镜头有不同的索引。我正在寻找一种方法来检测哪个索引代表普通相机。