<template>
	<div class="qrcode">
		<div id="reader">
		</div>
	</div>
</template>

<script>
	import {
		Html5Qrcode
	} from 'html5-qrcode';
	export default {
		created() {
			this.getCameras();
			navigator.mediaDevices.getUserMedia({
					video: true
				})
				.then(stream => {
					this.$refs.qrcodeReader.$refs.reader.$refs.video.srcObject = stream
				})
				.catch(error => {
					console.log(error)
					alert('Failed to access camera.')
				})
		},
		beforeDestroy() {
			this.stop();
		},
		methods: {
			getCameras() {
				Html5Qrcode.getCameras()
					.then((devices) => {
						if (devices && devices.length) {
							this.html5QrCode = new Html5Qrcode('reader');
							this.start();
						}
					})
					.catch((err) => {
						// handle err
						this.html5QrCode = new Html5Qrcode('reader');
						this.error = 'ERROR: 您需要授予相机访问权限';
						this.$emit('err', this.error, err);
					});
			},
			start() {
				//environment后置 user前置
				this.html5QrCode
					.start({
							facingMode: 'environment'
						}, {
							fps: 10, // 设置每秒多少帧
							aspectRatio: 1,
							qrbox: 250, // 设置取景范围
							colorDark: '#0000ff', //加深二维码黑色部分的颜色提高识别度
							colorLight: '#ffffff', //这个应该是提高非黑即白部分的亮度  提高识别度
							visualFeedback: true, //开启视觉反馈  没有体会到
							halfSample: true, //缩小二维码提高识别精度吧
						},
						(decodedText) => {
							this.$emit('ok', decodedText);
						},
					)
					.catch((err) => {
						this.$emit('err', err);
					});
			},
			stop() {
				this.html5QrCode
					.stop()
					.then((ignore) => {
						// QR Code scanning is stopped.
						this.$emit('err', ignore);
						console.log('QR Code scanning stopped.');
					})
					.catch((err) => {
						this.$emit('err', err);
						// Stop failed, handle it.
						console.log('Unable to stop scanning.');
					});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.qrcode {
		position: absolute;
		height: 100%;
		width: 100%;
		// background: rgba($color: #000000, $alpha: 0.48);
		background:rgba(0, 0, 0, 1.48);
	}


	#reader {
		top: 50%;
		left: 0;
		transform: translateY(-50%);
	}
</style>