html5-qrcode 实现 H5 扫码功能，并在本地开发环境中通过 OpenSSL 和 Nginx 设置 HTTPS 协议以进行测试-CFANZ编程社区

在之前的项目中，曾负责开发了一个H5页面上的扫描核销订单功能。最初，这个功能主要针对小程序端进行设计，利用了微信内置的扫一扫功能来实现订单核销。后面随着项目的发展，客户需求扩展到了H5端，这意味着我们需要在标准的网页环境中同样提供这一功能。起初，我以为使用uni-app框架打包成H5应用应该不会有太大问题，但偏偏就只有我写的扫码功能适应不了H5。因为本来的扫码核销订单功能是调用微信的扫一扫功能，因为时间有限，客户那边也是着急上线H5端，虽然本帅是”天才程序员“，但也没办法用半天的时间来自己写这个东西。后面经过一番研究找到了html5-qrcode这个插件，而且调用的方式也是很简单，基本可以当作一个组件来调用，大帅们都知道在H5端要想调用摄像头那么你必须是localhost或者是https协议，但是需要用手机测试，哪里来的localhost？当然这难不倒本帅，等下我把解决的方案写在最后面，提给各位大帅过关斩将，代码里面适应了微信和H5的环境。不啰嗦了，上代码

H5扫码示例

<template>
	<view>
		<div id="reader" width="600px"></div>
	</view>
</template>

<script>
	import {
		Html5Qrcode
	} from "html5-qrcode";
	export default {
		props: {
			autoStop: { // H5扫描成功后是否自动关闭
				type: Boolean,
				default: true
			}
		},
		emits: ['scan'], // 扫描成功回调
		data() {
			return {
				html5Qrcode: null
			}
		},
		methods: {
			start() {
				// #ifdef MP
					this.startMP()
				// #endif
				// #ifdef H5
					this.startH5()
				// #endif
			},
			/**
			 * scan QrCode with WeChat
			 */
			startMP() {
				const _this = this
				uni.scanCode({
					success(res) {
						_this.$emit('scan', res.result)
					},
					fail() {
						uni.showToast({
							icon: 'none',
							title: '调用微信扫一扫失败！'
						})
					}
				})
			},
			/**
			 * scan QrCode with html5
			 */
			startH5() {
				Html5Qrcode.getCameras().then((devices) => {
					if (devices && devices.length > 0) {
						this.html5Qrcode = new Html5Qrcode("reader");
						this.html5Qrcode.start({
								facingMode: 'environment',
								// deviceId: devices[0].id
							}, {
								fps: 20, // 设置每秒多少帧
								qrbox: { width: 250, height: 250 } // 设置取景范围
							},
							(qrCodeMessage, decodedResult) => {
								console.log(`QR code detected and decoded: ${qrCodeMessage}`);
								this.$emit('scan', qrCodeMessage)
								if (this.autoStop) {
									this.stopH5()
								}
							},
							(errorMessage) => {
								console.log(`QR code scanning failed: ${errorMessage}`);
							}
						)
					} else {
						alert('无摄像头！')
					}
				}).catch((error) => alert('获取摄像头失败！'))
			},
			stopH5() {
				if (this.html5Qrcode) {
					this.html5Qrcode.stop().then((ignore) => {
						this.html5Qrcode.clear();
						this.html5Qrcode = null;
					}).catch((err) => {
						console.log(err)
					})
				}
			}
		}
	}
</script>

本地Https测试方案

因为前面也提到了如果H5端要想调用摄像头那么你必须是localhost或者是https协议，需要用手机扫码测试只能在本地搭建https

1.openssl证书和nginx测试https

OpenSSL 是一个用于生成和管理 SSL/TLS 证书的工具。下载并安装 OpenSSL：

下载Openssl工具，根据自己的系统来选择下载

html5-qrcode 实现 H5 扫码功能，并在本地开发环境中通过 OpenSSL 和 Nginx 设置 HTTPS 协议以进行测试_openssl

2.根据你自己的安装路径来配置环境变量

2.安装nginx或者是phpstudy集成工具

3.生成本地SSL证书

打开命令行(cmd)
创建证书和私钥

openssl req -x509 -nodes -days 365 -newkey rsa:2048 -keyout localhost.key -out localhost.crt

// 参数说明
-x509：指定生成自签名证书。
-nodes：不对私钥加密。
-days 365：证书有效期为 365 天。
-newkey rsa:2048：生成一个新的 RSA 密钥。
-keyout：指定私钥输出路径。
-out：指定证书输出路径。

// 输入证书信息，这个可以随便写，但也不要太离谱
国家：填写CN
州/省：
市：
组织：
组织单位：
公共名称：

3.配置Nginx使用ssl

修改Nginx的conf文件，配置Nginx监听443端口和加载你的证书、密钥，然后转发到你H5页面的端口

server {
        listen        443 ssl;
        server_name  192.168.68.239;
        # root   "D:/phpstudy_pro/WWW";
				
        // 这个文件在你生成的时候有显示或者可以去你的用户目录下面找
				ssl_certificate C:/Users/zs-developer/localhost.crt;
				ssl_certificate_key C:/Users/zs-developer/localhost.key;
	
        location / {
            proxy_pass http://localhost:8080;
        }
}