admin管理员组

文章数量:1571946

前言

  • 最近做一个项目需要用浏览器调用摄像头扫二维码，然后就踩了几个坑记录下。

踩坑记录

  • 我一开始发现了zxing这个库，他分为https://www.npmjs/package/@zxing/library 与
    https://www.npmjs/package/@zxing/browser
  • zxing/browser是最近才建立的，根据我的使用发现zxing/browser有bug，他目前没法像zxing/library一样使用reset来终止摄像头使用。在pc端使用zxing/browser如果未终止或者我还试过使用BrowserQRcodeReader的静态方法去清空流，也不能使得摄像头灯灭了。
	useEffect(() => {
		async function main() {
			codeReader = new BrowserQRCodeReader();
			codeReader.getVideoInputDevices().then(
				//老版本写法
				// codeReader = new BrowserQRCodeReader();
				// BrowserQRCodeReader.listVideoInputDevices().then(
				(videoInputDevices) => {
					console.log(videoInputDevices);
					selectedDeviceId = videoInputDevices[0].deviceId;
				}
			);
		}
		main();
	}, []);
  • zxing/library中使用BrowserQRCodeReader会有明显的废弃提示，但是丝毫不影响其使用，个人用了下没有大的毛病，但是问题就是移动端没法打开摄像头。
  • 然后我就发现了qr-scanner这个库。
  • https://www.npmjs/package/qr-scanner
  • 看介绍说它是基于zxing/library做的（所以感觉按道理zxing/library应该能让移动端开摄像头才对）。
  • 这个库有几个坑需要注意下。
  • 第一：必须在https下移动端才可以开启摄像头
  • 第二：除了导入它的库外，还有个workerpath必须设上：
QrScanner.WORKER_PATH = 'path/to/qr-scanner-worker.min.js';
  • 不设置这个是无法工作的，我不知道为啥这个库要做的这么麻烦，不能一次头导入全部。个人觉得比较好方法就是把那文件甩静态里，这样引用的路径就没问题了。它文档上写的方法有点复杂，还各种配置相当麻烦。（并且我照着配了下还失败了，也懒得去找原因）。
  • 设置完毕后就可以正常工作。
  • 这里推荐个https开发神器ngrok
  • https://ngrok/
  • 有了它开发https限定的就相当方便了，比如pwa应用之类，非常好用。

本文标签： 摄像头浏览器二维码JavaScript

版权声明：本文标题：【javascript】浏览器调用摄像头扫二维码踩坑记录 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://www.elefans.com/dongtai/1725800361a1043489.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。