Реализуйте распознавание QR-кода на чистой веб-странице

Canvas

предисловие

В последнее время в бизнес-сценарии компании появилась необходимость генерировать QR-коды и идентифицировать QR-коды. Я сделал это перед генерацией QR-кода, и используется фронтенд-библиотека qrcode.js, с которой относительно просто работать. Я не буду здесь вдаваться в подробности. Когда я впервые столкнулся с необходимостью двухмерного распознавания, я подумал, что это очень просто, и решил, что достаточно напрямую использовать соответствующую интерфейсную библиотеку. Но когда я действительно начал писать функции, я обнаружил, что 2D-распознавание включает множество других функций. Без лишних слов, давайте посмотрим, как этого добиться.

Процесс реализации

  • вызов камеры

    Вызов камеры через браузер уже имеет атрибут в h5, совместимый с большинством платформ.navigator.getUserMedia = navigator.mediaDevices.getUserMedia || navigator.mediaDevices.webkitGetUserMedia || navigator.mediaDevices..mozGetUserMedia;Давайте взглянем на введение в mdn:MediaDevices.getUserMedia() запрашивает у пользователя разрешение на использование медиа-ввода, который создает MediaStream, содержащий дорожки запрошенного медиа-типа. Этот поток может содержать видеодорожку (из аппаратных или виртуальных источников видео, таких как камеры, устройства видеозахвата, сервисы совместного использования экрана и т. д.), аудиодорожку (также из аппаратных или виртуальных источников звука, таких как микрофоны, аналого-цифровые преобразователи и т. д.) и т. д.), и, возможно, другие орбитальные типы. Он возвращает объект Promise, который разрешает и вызывает объект MediaStream в случае успеха. Если пользователь отклоняет разрешение или требуемый источник мультимедиа недоступен, обещание будет отклонено с ошибкой PermissionDeniedError или NotFoundError.проверить деталиТо есть в возвращаемом значении этого свойства мы можем получить видеопоток, который снимает камера.

  • Получить видеопоток и отобразить его в видео Видеопоток уже можно получить через getUserMedia, а затем его нужно засунуть в видео:

let option = {
                    width: 1280,
                    height: 720
                }
if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
                            navigator.mediaDevices.getUserMedia({
                                video: option
                            }).then(function(stream) {
                              //将视频流实时播放在video
                                self.$refs.video.srcObject = stream
                                self.$refs.video.style.display = 'block'
                                //截取video内容
                                setTimeout(() => {
                                    self.screenShot()
                                }, 2000);
                            }).catch(function(err) {
                                alert(err);
                            });
                } else if (navigator.getUserMedia) {
                    navigator.getUserMedia({
                        video: true
                    }).then(function(stream) {
                        self.$refs.video.srcObject = stream
                        self.$refs.video.style.display = 'block'
                        setTimeout(() => {
                            self.screenShot()
                        }, 2000);
                    }).catch(function(err) {
                        alert(err);
                    });
                }
  • Скриншот реализации холста

Когда видео отображается нормально, мы можем делать скриншоты в режиме реального времени. б

                let $canvas = $('canvas');
                let $video = $('video');
                $canvas.attr({
                    width: $video.width(),
                    height: $video.height(),
                })
                let ctx = $canvas[0].getContext('2d');
                ctx.drawImage($video[0], 0, 0, $video.width(), $video.height());
                let base64 = $canvas[0].toDataURL('images/png');
                //截图成功对图片进行识别
                this.decodeQrcode(base64)
  • Распознавание изображений (судя, является ли это QR-кодом)

Используйте библиотеку распознавания QR-кода reqrcode.js для идентификации перехваченных видеоизображений, если это не удается, продолжайте делать скриншоты и повторно идентифицировать


decodeQrcode(base64) {
                let self = this
                // $('#screenshot_img').attr('src', base64)
                qrcode.decode(base64)
                qrcode.callback = function(imgMsg) {
                    if (!self.visible) {
                        return
                    }
                    if (imgMsg == 'error decoding QR Code') {
                        setTimeout(function() {
                        //截图重新识别
                            self.screenShot()
                        }, 2000)
                    } else {
                        alert(imgMsg)
                        window.location.href = imgMsg
                    }
                }
                // }
            }
  • получить идентификацию

Определите успешное получение содержимого QR-кода

Суммировать

В конце концов, хотя функция QR-кода была реализована, это намного превысило мое предполагаемое время.В основном причина здесь в том, что распознавание QR-кода требует большего, чем просто функция распознавания QR-кода. Перед идентификацией нам нужно реализовать ряд проблем, таких как JavaScript, вызывающий функцию камеры, функцию скриншота холста и так далее. Поэтому в следующий раз, когда вы столкнетесь со спросом, с которым вы не сталкивались, вам необходимо провести достаточное исследование и подробный анализ сложности спроса.

Категории