makeit/makeit-scan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

drone.yml
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source
This commit is contained in:
makeit 2024-08-07 16:22:10 +08:00
parent 2c79524599
commit 5ae509a56e
4 changed files with 64 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
.drone.yml Normal file
View File

@ -0,0 +1,54 @@
kind: pipeline
type: docker
name: makeit-scan
steps:
- name: 'build'
image: node
volumes:
- name: node_modules_cache
path: /drone/src/node_modules
commands:
- node -v
- npm -v
- ls -al
- npm config set registry https://registry.npmmirror.com/
- npm i
- npm run build
- name: 'copy'
image: appleboy/drone-scp
settings:
host:
from_secret: secret_host
username:
from_secret: secret_username
password:
from_secret: secret_password
port: 22
source: ./dist/*
target: /makeit/web/scan
- name: 'deploy'
image: appleboy/drone-ssh
settings:
host:
from_secret: secret_host
username:
from_secret: secret_username
password:
from_secret: secret_password
port: 22
command_timeout: 3m
script:
- echo '====== deploy start ======'
- cd /makeit/web/scan
- rm -rf index.html favicon.ico _assets
- mv ./dist/* ./
- rm -rf dist
- echo '====== deploy success ======'
volumes:
- name: node_modules_cache
host:
path: /makeit/web/drone/node_modules

7
README.md
View File

@ -1,13 +1,16 @@
# 扫描解析二维码 / 条形码 # 扫描解析二维码 / 条形码
> 整个 Demo 项目采用的是 Vue3 + Vite + zxing + Ant Design Vue 构建。实现 Web 浏览器端拉起摄像头，扫描二维码 / 条形码并对其解析的功能。（注意：iPhone 系列的手机，除了 Safari 自带浏览器外，其它任何的浏览器是没有权限配置网站是否可用摄像头的，所以采用折中的解决方案，拉起摄像头后拍照进行识别）。
> 整个 Demo 项目采用的是 Vue3 + Vite + zxing + Ant Design Vue 构建。实现 Web 浏览器端拉起摄像头，扫描二维码 / 条形码并对其解析的功能。（注意：iPhone 系列的手机，除了 Safari 自带浏览器外，其它任何的浏览器是没有权限配置网站是否可用摄像头的，所以采用折中的解决方案，拉起摄像头后拍照进行识别）。
>
> Demo 体验地址：[https://scan.makeit.vip/](https://scan.makeit.vip/) > Demo 体验地址：[https://scan.makeit.vip/](https://scan.makeit.vip/)
## 证书 ## 证书
> `localhost` 支持调试，需要用其它任何域名来调试的话，先配置 `https`（我测试的时候用的是 `letsencrypt` + `docker` 来生成免费的 `https` 证书的） > `localhost` 支持调试，需要用其它任何域名来调试的话，先配置 `https`（我测试的时候用的是 `letsencrypt` + `docker` 来生成免费的 `https` 证书的）
## 运行 ## 运行
```
```bash
git clone https://github.com/lirongtong/miitvip-canvas-demo.git git clone https://github.com/lirongtong/miitvip-canvas-demo.git
cd miitvip-scan-demo cd miitvip-scan-demo
npm install npm install

1
index.html
View File

@ -7,6 +7,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="/favicon.ico" /> <link rel="icon" href="/favicon.ico" />
<title>H5 二维码 / 条形码扫描解析 - Powered By makeit.vip.</title> <title>H5 二维码 / 条形码扫描解析 - Powered By makeit.vip.</title>
<meta name="keywords" content="h5,scan,makeit.vip,麦可易特网,miitvip,vue,vite">
<meta name="description" content="H5 + Web 浏览器端拉起摄像头，实现二维码 / 条形码的扫描并且解析（iPhone 系列手机，除了 Safari 自带浏览器支持外，其它任何浏览器不支持设置网站权限，采用折中的拍照识别方式，识别正确率比较低）注：并未做比较全面的测试"> <meta name="description" content="H5 + Web 浏览器端拉起摄像头，实现二维码 / 条形码的扫描并且解析（iPhone 系列手机，除了 Safari 自带浏览器支持外，其它任何浏览器不支持设置网站权限，采用折中的拍照识别方式，识别正确率比较低）注：并未做比较全面的测试">
</head> </head>
<body> <body>

6
package.json
View File

@ -1,8 +1,8 @@
{ {
"name": "miitvip-scan-demo", "name": "makeit-scan",
"version": "0.1.0", "version": "1.0.0",
"author": { "author": {
"url": "https://www.makeit.vip", "url": "https://blog.makeit.vip",
"name": "lirongtong", "name": "lirongtong",
"email": "lirongtong@hotmail.com", "email": "lirongtong@hotmail.com",
"github": "https://github.com/lirongtong" "github": "https://github.com/lirongtong"