Why torch is always not supported?

[magic3584]

I run https://vue-qrcode-reader.netlify.app/demos/Torch.html on iPhone 12, but it always show torchNotSupported. And iPhone does has a flashlight.

[gruhn]

The issue is that Apple does not implement the browser API to control the flash light.

[magic3584]

Can I just open the torch without the browser API ?

But with chrome on android, it does not work either. Nor is changing the camera.

[gruhn]

Can I just open the torch without the browser API ?

Sadly, no.

But with chrome on android, it does not work either.

I setup a simple demo that should allow you to confirm whether torch is supported on a device or not. Note that it might be supported for a rear camera but not the front camera or something (even if the front camera is equipped with a flashlight). Go on this page with our device:

https://vue-qrcode-reader.netlify.app/select-camera-demo.html

The list of links represents all cameras installed on the device. If you click, the camera should be loaded. Below the camera view the JSON object of "capabilities" should be printed. If it doesn't contain the key/value pair "torch": true then flashlight is not supported for that camera.

Nor is changing the camera.

Hmm, what do you mean? From your screenshot it looks like it does work.

[magic3584]

Hi, I have uploaded a video:

The Chrome is the latest version in Google Play which updated by 2023-12-12.

49.MOV

[magic3584]

The issue is that Apple does not implement the browser API to control the flash light.

Is there a official document by Apple?

[Sec-ant]

We can communicate in Chinese which will be more efficient if it's okay by you. If this is something that should be fixed in this repo I'll push a fix to let you know. @gruhn

@magic3584 Hello，我们可以用中文沟通，你可以讲一下你手机的 iOS 系统版本吗？以及你那里有没有条件可以查看手机浏览器的控制台输出？（应该是需要一个 Mac 支持）

[magic3584]

@Sec-ant 可以的
iOS 是15.4
android 是基于 Android 12 的 LineageOS 19.1 ROM

可以用 Mac Safari 查看手机浏览器输出

[Sec-ant]

@Sec-ant 可以的 iOS 是15.4 android 是基于 Android 12 的 LineageOS 19.1 ROM

可以用 Mac Safari 查看手机浏览器输出

@magic3584 那么你用这两台设备分别访问 https://vue-qrcode-reader.netlify.app/demos/Torch.html 和 https://vue-qrcode-reader.netlify.app/select-camera-demo.html 这两个网页时，控制台有没有输出什么信息？（安卓可以考虑用 kiwi 浏览器查看控制台，或者用 ADB）

还有上面这两个 vue-qrcode-reader.netlify.app 页面都需要获取摄像头权限，但是你的视频 demo 里面似乎也没有请求权限这一过程，是已经同意过了吗？如果没有的话需要重新允许一下权限。

为了避免其它干扰，我还建议先尝试清除 vue-qrcode-reader.netlify.app 这个域名下的缓存再重新访问测试。

[magic3584]

iOS 上的话，访问这两个网页控制台都没有任何输出。
https://vue-qrcode-reader.netlify.app/select-camera-demo.html 这里显示两个相机，预览正常，网页里显示文字

Capabilities:

{
  "aspectRatio": {
    "max": 4032,
    "min": 0.00033068783068783067
  },
  "deviceId": "B579",
  "facingMode": [
    "environment"
  ],
  "frameRate": {
    "max": 60,
    "min": 1
  },
  "height": {
    "max": 3024,
    "min": 1
  },
  "width": {
    "max": 4032,
    "min": 1
  }
}

android 的我不太熟，稍等我琢磨下。。。

[Sec-ant]

iOS 上的话，访问这两个网页控制台都没有任何输出。
https://vue-qrcode-reader.netlify.app/select-camera-demo.html 这里显示两个相机，预览正常，网页里显示文字 ...

这个显示的文字代表设备/浏览器所允许当前相机配置的功能（capabilities），如果里面没有 "torch": true 选项，就代表设备或浏览器不支持对闪光灯/手电筒进行配置。点击网页上方的显示出来的相机链接可以切换相机，查看不同相机的 capabilities ，如果都没有 "torch": true 这一选项，那么就代表都不支持。这个浏览器 API 层面如果不支持的话是没办法修复的。

关于 iOS 使用 Torch 功能相关的讨论（我不清楚最新版本是否支持）：

• Torch in IOS zxing-js/browser#12
• https://developer.apple.com/forums/thread/724230

安卓端也是相同的道理，但支持程度比 iOS 要高很多，不过你的 demo 里面安卓端访问 select-camera-demo.html 是白屏有点奇怪。。

[magic3584]

https://vue-qrcode-reader.netlify.app/demos/Torch.html 结果：
一开始打开可以预览，但是如果选择了另外的相机，预览就不能用了，每一个都点一遍也都不行

第一次正常预览的时候控制台输出

{
    "aspectRatio": {
        "max": 2592,
        "min": 0.0005154639175257732
    },
    "colorTemperature": {
        "max": 7000,
        "min": 2850,
        "step": 50
    },
    "deviceId": "d9892de56",
    "exposureCompensation": {
        "max": 4,
        "min": -4,
        "step": 0.1666666716337204
    },
    "exposureMode": [
        "continuous",
        "manual"
    ],
    "exposureTime": {
        "max": 10534,
        "min": 0,
        "step": 0
    },
    "facingMode": [
        "user"
    ],
    "focusDistance": {
        "max": 2.751004695892334,
        "min": 0,
        "step": 0.009999999776482582
    },
    "focusMode": [
        "manual"
    ],
    "frameRate": {
        "max": 30,
        "min": 0
    },
    "groupId": "681b8989b764537c15887cd0d1105",
    "height": {
        "max": 1940,
        "min": 1
    },
    "iso": {
        "max": 800,
        "min": 50,
        "step": 1
    },
    "resizeMode": [
        "none",
        "crop-and-scale"
    ],
    "whiteBalanceMode": [
        "continuous",
        "manual"
    ],
    "width": {
        "max": 2592,
        "min": 1
    },
    "zoom": {
        "max": 10,
        "min": 1,
        "step": 0.1
    }
}

https://vue-qrcode-reader.netlify.app/select-camera-demo.html 结果：
控制台一直都没有输出
第一次进入是空白，

重置权限后网页马上显示如下截图。但是如果下拉刷新重新获取权限后，又都是空白了

截图的时候又如下显示：

[magic3584]

@Sec-ant
不过我在 Safari 上就算切换了后摄像头，还是无法开启闪光灯。
仓库作者说是苹果没实现浏览器的相关 API， 我想知道有出处吗？是否有官方文档支持？上面论坛链接也没有标明出处。

[Sec-ant]

仓库作者说是苹果没实现浏览器的相关 API， 我想知道有出处吗？是否有官方文档支持？上面论坛链接也没有标明出处。

摄像头允许调用的能力同时取决于浏览器、平台和设备，iOS + Safari 是支持获取摄像头能力这一接口的（getCapabilities），但结果是获取到的这些能力中不包括控制闪光灯的能力。

我不清楚这个有没有官方文档支持（目前看来是没有的），而且浏览器、平台、设备互相之间差异巨大，不太可能有一个统一的标准，这个接口的标准调用流程就是要在调用时先检查当前摄像头支持哪些能力：https://developer.mozilla.org/en-US/docs/Web/API/Media_Capture_and_Streams_API/Constraints#overview

苹果返回回来的结果不支持 torch 那就没有其它办法了，因为它没有把这项能力提供给浏览器让开发者调用。

那个上面安卓的问题我觉得可以另开一个 issue。

[magic3584]

如果整个 iOS平台都无法实现，我得在项目里抛出这个问题了。。。
目前这个库有些条形码不支持，我可能还得寻求别的库。。。
至于我这 android 上的问题，可能跟 rom 有关？明天我再找些别的 android 设备测试一下。

[Sec-ant]

这个库目前用的二维码识别核心部分是我的 barcode-detector，它主要目的是给浏览器的 Barcode Detection API 提供 polyfill。如果不要求和浏览器 API 保持一致，它的底层 zxing-wasm 可以支持更多的条码识别，也支持更多的配置（demo）。只不过目前还没有基于 zxing-wasm 的 React 或者 Vue 的扫码组件。

我可能后期会把 zxing-wasm 所支持的条码都添加到 barcode-detector 中，这样这个库就可以直接扫这些条码了。

barcode-detector 已经支持了所有 zxing-wasm 所支持的条码格式，已向 vue-qrcode-reader 提交 PR 支持这些新格式：#400

[Sec-ant]

@gruhn I think we can close this. But do you know if it is true that the latest iOS still doesn't support torch capability on the newest devices? And do you think we should put this in FAQ Troubleshooting ?

[magic3584]

这个库目前用的二维码识别核心部分是我的 barcode-detector，它主要目的是给浏览器的 Barcode Detection API 提供 polyfill。如果不要求和浏览器 API 保持一致，它的底层 zxing-wasm 可以支持更多的条码识别，也支持更多的配置（demo）。只不过目前还没有基于 zxing-wasm 的 React 或者 Vue 的扫码组件。

我可能后期会把 zxing-wasm 所支持的条码都添加到 barcode-detector 中，这样这个库就可以直接扫这些条码了。

大佬我现在用这个库还发现有问题：

1. codabar 扫不出来 而 https://github.com/Sec-ant/barcode-detector 里说是支持的
2. code 128 扫出来结果 format 是'qr_code'

[Sec-ant]

@magic3584 如果是这个仓库的问题，新开一个 issue，附上能够复现的操作步骤和条码。

[gruhn]

But do you know if it is true that the latest iOS still doesn't support torch capability on the newest devices?

I haven’t found an official source. But mu iPhone is on iOS 17.1 and it’s still not supported.

And do you think we should put this in FAQ Troubleshooting ?

That’s a good idea 👍

[magic3584]

@magic3584 如果是这个仓库的问题，新开一个 issue，附上能够复现的操作步骤和条码。

就随便生成一个 codebar 也扫不出来。
使用的 https://vue-qrcode-reader.netlify.app/demos/CustomTracking.html

[Sec-ant]

@magic3584 如果是这个仓库的问题，新开一个 issue，附上能够复现的操作步骤和条码。

就随便生成一个 codebar 也扫不出来。
使用的 https://vue-qrcode-reader.netlify.app/demos/CustomTracking.html

两个问题：

1. 这个仓库的 <qr-stream/> 组件默认只识别 QR Code 条码，其他格式的条码是后期增加支持的，所以需要配置 formats 属性，所以应该用这个 demo 测试：https://vue-qrcode-reader.netlify.app/demos/CustomTrackingWithFormats.html

2. codabar （以及其他一维条码）在周围空白比较小或者有其他文字、图形环绕的情况下识别率会比较低，因为一维条码非常容易误检测，如果你把你的图片周围空白区域调大是很容易检测出来的。但如果不要求实时追踪的话，即检测到条码就返回能满足场景需求，那么不调整空白区域也是能检测出来的。

[magic3584]

@magic3584 如果是这个仓库的问题，新开一个 issue，附上能够复现的操作步骤和条码。

就随便生成一个 codebar 也扫不出来。 使用的 https://vue-qrcode-reader.netlify.app/demos/CustomTracking.html

@Sec-ant 抱歉我的错，通过 #379 (comment) 解决了。我认为应该把默认只识别二维码写在 README 里。

@gruhn
Sorry for my mistake, I have resolved it through #379 (comment). I believe it should be mentioned in the README that it defaults to recognizing only QR codes.

[magic3584]

@Sec-ant
感谢大佬，我的错，不应该一上来就找别人的错。
您的底层核心代码 star 太少了，在这个 repo 里加上 thanks 肯定涨的更多。
已 star。

至于android白屏幕问题，就跟这个 issue 无关了。。。

再次感谢。