zouling
/
qianshanxm_ui


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129
							<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta http-equv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<meta name="format-detection" content="telephone=no" />
		<title>潜山市党建引领信用村(社区)建设</title>
		<meta name="keywords" content="潜山市党建引领信用村(社区)建设">
		<meta name="description" content="潜山市党建引领信用村(社区)建设">
		<script src="static/js/vue.js"></script>
		<script type="text/javascript" src="static/js/vue-router.js"></script>
		<script type="text/javascript" src="./static/js/jquery.min.js"></script>
		<script type="text/javascript" src="./static/js/qrcode.js"></script>
		<script src="static/js/common.js"></script>
		<link href="static/css/common.css" rel="stylesheet" />
		<link href="static/css/style.css" rel="stylesheet" />
		<script type="text/javascript" src="https://blog.minhazav.dev/assets/research/html5qrcode/html5-qrcode.min.js"></script>
		<style></style>
	</head>
	<body>
		<div id="app">
			<div>
				<div @click="getCameras">33</div>
				<div class="scan" :style="{'display':isScan ? 'none' : ''}">
					<div id="qr-reader" width="400px" height="400px">
					</div>
				</div>
				<div @click="stop">关闭</div>
			</div>
			<video id="video" width="640" height="480" autoplay></video>
		</div>

			<script type="text/javascript">
			</script>
			<script type="text/javascript">
				var app = new Vue({
					el: '#app',
					data: {
						cameraId: 0, //相机id
						isScan: true,
						startflag:false
					},
					created() {

					},
					destroyed (){
					    this.stop()
					},
					mounted() {
						// this.init();
						// console.log(this.getQueryString("id"))
					},
					methods: {
						// init() {
						// 	util.addJs("https://blog.minhazav.dev/assets/research/html5qrcode/html5-qrcode.min.js");
						// },
						// 开始扫描
						getCameras() {
							if(!this.startflag){
								this.startflag=true
							Html5Qrcode.getCameras().then(devices => {
								if (devices) {
									if (devices.length == 1) {
										this.cameraId = devices[0].id;
									} else {
										this.cameraId = devices[1].id;
									}
									this.start();
								}
							}).catch(err => {
								this.$notify({
									type: 'warning',
									message: '调用摄像头失败 : ' + err
								});
							});
							}
						},
						// 启动相机
						start() {
						 this.isScan = false;
							this.html5QrCode = new Html5Qrcode("qr-reader");
							this.html5QrCode.start(
								this.cameraId, {
									fps: 10,
									qrbox: {
										width: 250,
										height: 250
									}
								},
								qrCodeMessage => {
									console.log(qrCodeMessage,6)
									if (qrCodeMessage) {
										this.startflag=false
										this.stop();
									}
								}
							).catch(err => {
								console.log(`Unable to start scanning, error: ${err}`);
							});
						},
						// 关闭相机
						stop() {
							this.isScan = true;
							this.html5QrCode.stop().then(ignore => {
								console.log("QR Code scanning stopped.");
							}).catch(err => {
								console.log("Unable to stop scanning.");
							});
						}
					},
				})
			</script>
			<script>
			</script>

			<style>
				.scan {
					width: 100%;
					height: 100vh;
					display: flex;
					align-items: center;
					justify-content: center;
					flex-direction: column;
					overflow: hidden;
				}
			</style>
	</body>
</html>