<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1, minimum-scale=1, user-scalable=no,uc-fitscreen=yes">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<video webkit-playsinline="webkit-playsinline"></video>
<title>摄像头扫码</title>
<script type="text/javascript" src="./reqrcode.js"></script>
<style type="text/css">
html,
body {
padding: 0;
margin: 0;
width: 100%;
height: 100%;
}
* {
max-width: 100%;
max-height: 100%;
}
.clear {
clear: all;
overflow: hidden;
}
.flex2 {
display: flex;
height: 100%;
/*css3 的盒模型设置垂直排序 新老方法 box-orient老方法 flex-direction新方法*/
box-orient: vertical;
flex-direction: column;
}
.flex {
display: flex;
/*父元素设置该属性*/
}
.item {
flex: 1;
/*所占比例/份数*/
}
.mask {
background-color: rgba(0, 0, 0, 0.7);
}
.abs {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 1;
width: 100%;
height: 100%;
}
.scanCodeLayout {
display: block;
position: fixed;
right: 0;
top: 0;
left: 0;
bottom: 0;
padding: 0;
margin: 0;
overflow: hidden;
background-color: #000;
}
.scanCodeLayout .scanwh {
width: 60vw;
height: 60vw;
position: relative;
}
.scanCodeLayout .scanwh .leftwh::before {
content: "";
position: absolute;
left: 0;
top: 0;
background-color: rgba(255, 255, 255, 0.7);
width: 20px;
height: 3px;
}
.scanCodeLayout .scanwh .leftwh::after {
content: "";
position: absolute;
left: 0;
top: 0;
background-color: rgba(255, 255, 255, 0.7);
width: 3px;
height: 20px;
}
.scanCodeLayout .scanwh .rightwh::before {
content: "";
position: absolute;
right: 0;
top: 0;
background-color: rgba(255, 255, 255, 0.7);
width: 20px;
height: 3px;
}
.scanCodeLayout .scanwh .rightwh::after {
content: "";
position: absolute;
right: 0;
top: 0;
background-color: rgba(255, 255, 255, 0.7);
width: 3px;
height: 20px;
}
.scanCodeLayout .scanwh .topwh::before {
content: "";
position: absolute;
left: 0;
bottom: 0;
background-color: rgba(255, 255, 255, 0.7);
width: 20px;
height: 3px;
}
.scanCodeLayout .scanwh .topwh::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
background-color: rgba(255, 255, 255, 0.7);
width: 3px;
height: 20px;
}
.scanCodeLayout .scanwh .bottomwh::before {
content: "";
position: absolute;
right: 0;
bottom: 0;
background-color: rgba(255, 255, 255, 0.7);
width: 20px;
height: 3px;
}
.scanCodeLayout .scanwh .bottomwh::after {
content: "";
position: absolute;
right: 0;
bottom: 0;
background-color: rgba(255, 255, 255, 0.7);
width: 3px;
height: 20px;
}
.scanCodeLayout .scanwh .scanbg {
background-image: url('scan.png');
background-repeat: no-repeat;
background-size: 50%;
background-position: center center;
opacity: 0.5;
background-color: rgba(0, 0, 0, 0.7);
}
.scanCodeLayout .scanwh .scanbg::after {
position: absolute;
left: 20%;
right: 20%;
top: 50%;
content: "";
background-color: rgba(255, 255, 255, 0.7);
height: 8px;
margin-top: -4px;
}
.scanCodeLayout .scanVideo {
position: absolute;
z-index: -1;
display: block;
left: 0;
right: 0;
bottom: 0;
bottom: 0;
}
.scanCodeLayout .scanCanvas {
position: absolute;
display: block;
left: 0;
right: 0;
bottom: 0;
bottom: 0;
}
.scanCodeImg{
width:50vw;height: 50vw;margin:5vw 0 0 5vw;object-fit: contain;
/*display: none;*/
}
#msg {
position: absolute;
left: 0;
right: 0;
top: 0;
background-color: red;
color: #fff;
box-sizing: border-box;
word-wrap: break-word;
word-break: break-all;
}
</style>
</head>
<body>
<div class="scanCodeLayout" id="scanCont">
<video id="scanVideo" autoplay muted class="scanVideo"></video>
<canvas id="scanCanvas" class="scanCanvas"></canvas>
<div class="flex abs">
<div class="item mask"></div>
<div class="flex2">
<div class="item mask"></div>
<div class="scanwh" id="scanCodeLayout">
<div class="leftwh"></div>
<div class="rightwh"></div>
<div class="topwh"></div>
<div class="bottomwh"></div>
<div class="abs scanbg" id="canotscan" onclick="openCamera()"></div>
<image id="scanCodeImg" class="scanCodeImg" />
</div>
<div class="item mask"></div>
</div>
<div class="item mask"></div>
</div>
<div id="msg"></div>
</div>
<script type="text/javascript">
// 老的浏览器可能根本没有实现 mediaDevices，所以我们可以先设置一个空的对象
if (navigator.mediaDevices === undefined) {
navigator.mediaDevices = {};
// 一些浏览器部分支持 mediaDevices。我们不能直接给对象设置 getUserMedia
// 因为这样可能会覆盖已有的属性。这里我们只会在没有getUserMedia属性的时候添加它。
navigator.mediaDevices.getUserMedia = function(constraints) {
// 首先，如果有getUserMedia的话，就获得它
var getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
// 一些浏览器根本没实现它 - 那么就返回一个error到promise的reject来保持一个统一的接口
if (!getUserMedia) {
return Promise.reject(new Error('getUserMedia is not implemented in this browser'));
}
// 否则，为老的navigator.getUserMedia方法包裹一个Promise
return new Promise(function(resolve, reject) {
getUserMedia.call(navigator, constraints, resolve, reject);
});
}
}
window.requestAnimFrame = (function() {
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback) { window.setTimeout(callback, 1000 / 60);};
})();
window.URL = (window.URL || window.webkitURL || window.mozURL || window.msURL);
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
var timer = null;
var mediaStreamTrack = null;
var releasIng = false;
var ready = false;
var canotscan = document.getElementById('canotscan');//是否可扫码图标
var scanCont = document.getElementById('scanCont');//全屏区
var msginfo = document.getElementById('msg');//报示div
var scanCodeImg = document.getElementById('scanCodeImg');//选择拍照图片
// scanCodeImg.widht = 150
// scanCodeImg.hegiht = 150
var video = document.getElementById('scanVideo');//视频
video.width = scanCont.clientWidth;
video.height = scanCont.clientHeight;
// video.width = 360;
// video.height = 240;
var canvas = document.getElementById('scanCanvas');//视频画布
canvas.width = video.width;
canvas.height = video.height;
var context = canvas.getContext('2d');
var layout = document.getElementById('scanCodeLayout');//扫码尺寸
function success(stream) {
mediaStreamTrack = stream
//兼容webkit核心浏览器
var CompatibleURL = window.URL || window.webkitURL;
function renderVideo(){
//兼容webkit核心浏览器
if ("srcObject" in video) {
video.srcObject = mediaStreamTrack
} else {
video.src = CompatibleURL.createObjectURL(mediaStreamTrack)
}
video.onloadedmetadata = function(e) {
video.play()
context.drawImage(video, 0, 0, video.clientWidth, video.clientHeight);
if(video.paused){
canvas.style.display = 'block'
video.style.zIndex = '-100'
video.style.zIndex = '-100'
// if(renderID){
// cancelReque
h5扫码实现，纯前端代码
1星 需积分: 34 5 浏览量
2021-04-22
16:26:05
上传
评论
收藏 23KB ZIP 举报 
h5扫码实现.zip （3个子文件） 
reqrcode.js 44KB
index.html 14KB
scan.png 6KB资源评论
unstablellt2022-10-29我使用时无效，
王明鹏2023-03-03不管用确实
batups2022-12-09无法正常使用。
狼性生物
- 粉丝: 9
- 资源: 3
最新资源
- 基于springboot+vue实现的在线考试系统+源代码+文档
- RTL8723DS 2022 版本 Linux驱动，android驱动 支持4.0-10x
- 要玩NDS的遊戲，必須要先下載三個bios檔案到你的檔案資料夾
- 各类型数据库4月排名，基于排名网站数据爬虫json结果
- 基于springboot+vue实现的在线考试系统+源代码+文档
- 淮北市杜集区人才补贴+生活补贴
- JAVA-JSP技术文档
- 课内实验02-决策表（共享单车月卡）.docx
- 基于【React + Node+SpringBoot】疫情数据查看系统的设计与实现【源码+lw+部署+讲解】
- 基于【React + Node】云课堂系统设计与实现【源码+lw+部署+讲解】
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
