【javascript】浏览器调用摄像头扫二维码踩坑记录

前言

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

踩坑记录

• 我一开始发现了zxing这个库，他分为https://www.npmjs.com/package/@zxing/library 与
  https://www.npmjs.com/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.com/package/qr-scanner
• 看介绍说它是基于zxing/library做的（所以感觉按道理zxing/library应该能让移动端开摄像头才对）。
• 这个库有几个坑需要注意下。
• 第一：必须在https下移动端才可以开启摄像头
• 第二：除了导入它的库外，还有个workerpath必须设上：

QrScanner.WORKER_PATH = 'path/to/qr-scanner-worker.min.js';

• 不设置这个是无法工作的，我不知道为啥这个库要做的这么麻烦，不能一次头导入全部。个人觉得比较好方法就是把那文件甩静态里，这样引用的路径就没问题了。它文档上写的方法有点复杂，还各种配置相当麻烦。（并且我照着配了下还失败了，也懒得去找原因）。
• 设置完毕后就可以正常工作。
• 这里推荐个https开发神器ngrok
• https://ngrok.com/
• 有了它开发https限定的就相当方便了，比如pwa应用之类，非常好用。