这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助

一、前言

最近有遇到一个需求,在h5浏览器中实现扫码功能,其本质便是打开手机摄像头定时拍照,特此做一个记录。主要技术栈采用的是vue2,使用的开发工具是hbuilderX。

经过测试发现部分浏览器并不支持打开摄像头,测试了果子,华子和米,发现夸克浏览器无法打开摄像头实现功能。

h5调用摄像头实现扫一扫只能在https环境下,亦或者是本地调试环境!!

二、技术方案

经过一番了解之后,找到了两个方案

1.使用html5-qrcode(对二维码的精度要求较高,胜在使用比较方便,公司用的是vue2,因此最终采用此方案)

2.使用vue-qrcode-reader(对vue版本和node有一定要求,推荐vue3使用,这里就不展开说了)

三、使用方式

当点击中间的扫码时,设置isScanning属性为true,即可打开扫码功能,代码复制粘贴即可放心‘食用’。

使用之前做的准备

通过npm install html5-qrcode 下载包

引入 import { Html5Qrcode } from 'html5-qrcode';

html结构
<view class="reader-box" v-if="isScaning">
<view class="reader" id="reader"></view>
</view>
所用数据
data(){
return{
html5Qrcode: null,
isScaning: false,
}
}
methods方法
openQrcode() {
this.isScaning = true;
Html5Qrcode.getCameras().then((devices) => {
if (devices && devices.length) {
this.html5Qrcode = new Html5Qrcode('reader');
this.html5Qrcode.start(
{
facingMode: 'environment'
},
{
focusMode: 'continuous', //设置连续聚焦模式
fps: 5, //设置扫码识别速度
qrbox: 280 //设置二维码扫描框大小
},
(decodeText, decodeResult) => {
if (decodeText) { //这里decodeText就是通过扫描二维码得到的内容
this.action(decodeText) //对二维码逻辑处理
this.stopScan(); //关闭扫码功能
}
},
(err) => {
// console.log(err); //错误信息
}
);
}
});
}, stopScan() {
console.log('停止扫码')
this.isScaning = false;
if(this.html5Qrcode){
this.html5Qrcode.stop();
}
}
css样式
.reader-box {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.5);
} .reader {
width:100%;
// width: 540rpx;
// height: 540rpx;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

四、最终效果

本文转载于:

https://juejin.cn/post/7316795553798815783

如果对您有所帮助,欢迎您点个关注,我会定时更新技术文档,大家一起讨论学习,一起进步。

记录--h5端调用手机摄像头实现扫一扫功能的更多相关文章

  1. H5实现调用本地摄像头实现实时视频以及拍照功能

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  2. 使用HTML5+调用手机摄像头和相册

    前言:前端时间使用HTML5做了一个WEB端APP,其中用到了H5页面调用手机摄像头的功能,当时也是花了不少时间去研究.最终是采用了HTML5plus(HTML5+)的方式完成了该功能,现将具体方法简 ...

  3. vue实现PC端调用摄像头拍照人脸录入、移动端调用手机前置摄像头人脸录入、及图片旋转矫正、压缩上传base64格式/文件格式

    进入正题 1. PC端调用摄像头拍照上传base64格式到后台,这个没什么花里胡哨的骚操作,直接看代码 (canvas + video) <template> <div> &l ...

  4. TML5如何在移动网页端调用手机图片或者camera

    TML5如何在移动网页端调用手机图片或者camera可以参考这篇文章: 如果你开始基于iOS系统(ios6 above) 的web应用,可以考虑这段代码: 点击按钮,会调用你的摄像头相册 附源码文件: ...

  5. html5调用手机摄像头,实现拍照上传功能

    今天做手机网站,想实现手机扫描二维码功能.首先实现在浏览器中调用手机摄像头,实现拍照功能并且把拍下的照片显示在页面并上传到服务器上,然后再在服务器端进行分析. 首先实现在浏览器中调用摄像头,当然用现在 ...

  6. 怎样让HTML5调用手机摄像头拍照——实践就是一切

    原文:怎样让HTML5调用手机摄像头拍照--实践就是一切 NanShan 小编将思路提供给了大家.学编程最重要的是实践,我这尽管有完好的代码,可是希望大家都能够自己写出属于自己的代码 HTML5 Th ...

  7. HTML5调用手机摄像头,仅仅支持OPPOHD浏览器

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. 亲测可用)html5 file调用手机摄像头

    在切图网一个客户的webapp项目中需要用到 html5调用手机摄像头,找了很多资料,大都是 js调用api  然后怎样怎样,做了几个demo测试发现根本不行, 后来恍然大悟,用html5自带的 in ...

  9. h5端呼起摄像头扫描二维码并解析

    2016年6月29日补充: 最近做了一些与表单相关的项目,使用了h5的input控件,在使用过程中遇到了很多的坑.也包括与这篇文章相关的. 首先我们应该知道使用h5新提供的属性getUserMedia ...

  10. H5页面调用手机打电话功能

    <head>里面加上: <meta name="format-detection" content="telephone=yes"/> ...

随机推荐

  1. NC50505 二叉苹果树

    题目链接 题目 题目描述 有一棵二叉苹果树,如果数字有分叉,一定是分两叉,即没有只有一个儿子的节点.这棵树共N个节点,标号1至N,树根编号一定为1. 我们用一根树枝两端连接的节点编号描述一根树枝的位置 ...

  2. SpringCloud 注册中心Consul实战

    介绍 Consul是HashiCorp公司推出的开源工具,Consul由Go语言开发,部署起来非常容易,只需要极少的可执行程序和配置文件,具有绿色.轻量级的特点.Consul是分布式的.高可用的. 可 ...

  3. 《系列二》-- 3、FactoryBean 的使用

    目录 FactoryBean 解决的问题 FactoryBean 接口初识 改造结果 最后的补充 回顾下 FactoryBean 的应用 factory-method 和 factory-bean 的 ...

  4. 【Android逆向】frida 破解 滚动的天空

    1. apk 安装到手机中 2. 玩十次之后,会提示 充值 3. adb shell dumpsys window | grep mCurrentFocus 查看一些当前activity是哪一个 是 ...

  5. 具备有效期的sessionStorage存储

    具备有效期的sessionStorage存储 类方式 // 具备有效期的sessionStorage存储-类方式. class SessionStorageWrapper { // 存储数据到sess ...

  6. 【LeetCode二叉树#09】路径总和I+II,以及求根节点到叶节点数字之和(回溯回溯,还是™的回溯)

    路径总和 力扣题目链接(opens new window) 给定一个二叉树和一个目标和,判断该树中是否存在根节点到叶子节点的路径,这条路径上所有节点值相加等于目标和. 说明: 叶子节点是指没有子节点的 ...

  7. 【LeetCode字符串#04】左旋转字符串,以及反转函数使用说明

    左旋转字符串 力扣题目链接(opens new window) 字符串的左旋转操作是把字符串前面的若干个字符转移到字符串的尾部.请定义一个函数实现字符串左旋转操作的功能.比如,输入字符串"a ...

  8. 从零开始学Spring Boot系列-返回json数据

    欢迎来到从零开始学Spring Boot的旅程!在Spring Boot中,返回JSON数据是很常见的需求,特别是当我们构建RESTful API时.我们对上一篇的Hello World进行简单的修改 ...

  9. 【Azure 应用服务】App Service中抓取 Web Job 的 DUMP 办法

    问题描述 使用Azure App Service,也可以部署一个Java程序作为Web Job运行.运行一个 .Jar 文件只需要以下4步: 1)把Java应用打包成一个 .jar 文件 2)创建一个 ...

  10. 【Azure 应用服务】能否通过 Authentication 模块配置 Azure AD 保护 API 应用?

    问题描述 在App Service Authentication 中配置 Azure AD 注册的应用信息后,根据官方文档,可以让前端应用实现用户 AAD 登录,然后通过前端应用获取的Token,来访 ...