H5 end scan function realization – UNIAPP /Vue project

• Application scenario: Use a mobile device to scan the TWO-DIMENSIONAL code in the browser and search for product information. The browser must support other mainstream browsers such as wechat browser
• Technology stack: UNI-app +uView
• Final implementation: use HTML5 – Qrcode plug-in

1. The API provided by UNI-App does not support the H5 side

• Document links: uniapp. Dcloud. IO/API/system /…

2. Wechat provides a scan interface (this method is not selected because it does not support other browsers).

• Document links: developers.weixin.qq.com/doc/offiacc…

3. Introduce your html5-qrcode library

This paper reference links: blog.csdn.net/happlyli/ar…

The final effect is as follows:

Matters needing attention:

• The H5 terminal and PC terminal must have a camera. Otherwise, the H5 terminal and PC terminal cannot be enabled
• The CDN is introduced into the original reference articles, with below: blog. Minhazav. Dev/assets/rese…

Complete code:

<template>
    <view class="scan size">
        <u-navbar back-text="Qr code scanning"></u-navbar>
        <view class="sectionview"><view id="qr-reader" style="width:100%; height:100%;"></view></view>
        <view class="footer"><u-button @click="getCameras" color="rgba(249, 185, 73, 1)">scan the code</u-button></view>  
        <u-toast ref="uToast" />
    </view>
</template>
<script>
export default {
    data() {
        return {
            codeUrl: ' '.cameraId: ' '}; },mounted() {
        this.current = this.$route.query.current || 0;
        this.init();
    },
    beforeDestroy() {
        this.stop();
    },
    methods: {
        // Return the result
        getCode(id) {
            if(! id)return;
            // Jump to the page
            this.$u.route('/pages/selfInquiry/index', {
                paraValue: id
            });
        },
        init() {
            this.AddJs('https://blog.minhazav.dev/assets/research/html5qrcode/html5-qrcode.min.js');
            // You are advised to delay the loading time before obtaining the device list
            setTimeout(() = > {
                this.getCameras();
            }, 1000);
        },
        stop() {
            this.html5QrCode
                .stop()
                .then(ignore= > {
                    // QR Code scanning is stopped.
                    console.log('QR Code scanning stopped.');
                })
                .catch(err= > {
                    // Stop failed, handle it.
                    console.log('Unable to stop scanning.');
                });
        },
        start() {
            this.html5QrCode = new Html5Qrcode('qr-reader');
            this.html5QrCode
                .start(
                    this.cameraId, // retreived in the previous step.
                    {
                        fps: 10.// sets the framerate to 10 frame per second
                        qrbox: 250 // sets only 250 X 250 region of viewfinder to
                        // scannable, rest shaded.
                    },
                    qrCodeMessage= > {
                        // do something when code is read. For example:
                        if (qrCodeMessage) {
                            this.$refs.uToast.show({
                                title: 'Sweep code successfully'.type: 'success'
                            });
                            this.getCode(qrCodeMessage);
                            this.stop(); }},errorMessage= > {
                        // parse error, ideally ignore it. For example:
                        // console.log(`QR Code no longer in front of camera.`);
                    }
                )
                .catch(err= > {
                    // Start failed, handle it. For example,
                    console.log(`Unable to start scanning, error: ${err}`);
                    this.$refs.uToast.show({
                        title: 'Failed to scan code:${err}`.type: 'error'
                    });
                });
        },
        getCameras() {
            Html5Qrcode.getCameras()
                .then(devices= > {
                    /** * devices would be an array of objects of type: * { id: "id", label: "label" } */
                    if (devices && devices.length) {
                        if (devices.length > 1) {
                            this.cameraId = devices[1].id;
                        } else {
                            this.cameraId = devices[0].id;
                        }
                        console.log(this.cameraId, 'cameraId');
                        this.start();
                    }
                })
                .catch(err= > {
                    this.$refs.uToast.show({
                        title: 'Camera enabled failed'.type: 'error'
                    });
                });
        },
        // Create a script dynamically
        AddJs(url) {
            / / the console. The log (' url: url);
            return new Promise((resolve, reject) = > {
                const script = document.createElement('script');
                script.src = url;
                script.type = 'text/javascript';
                document.body.appendChild(script);
                script.onload = () = >{ resolve(); }; }); }}};</script>
<style lang="less">
.scan {
    width: 100%;
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    .footer {
        position: fixed;
        bottom: 50rpx;
        width: 100%;
        display: flex;
        justify-content: center; }}</style>

Copy the code