原生的JS实现摄像头拍照/扫码

已经三个月没有写博客了吧，因为工作有点忙，写完之后就想在床上躺着，所以就一直没有写过了，今天七夕，没人给我玩。只能写博客了

最近工作上需要在前端页面进行拍照以及解析条形码和二维码，所以研究了下JS的API，但是只支持谷歌内核的浏览器
可以在这里看下： https://developer.mozilla.org/zh-CN/docs/Web/API

接下来上代码，这个是封装好的相机组件


/*** 创建相机对象* @Author Fanxing* @param app  绑定div* @param width 宽度 （与app宽度相同* @param height 高度 （与app高度相同* @param type 没有类型，忽略。。不是相机前置或后置。。* ps: 扫码结果在 res.text里，方法是qrcode  获取拍照图片调用 getImg*/
function camera(app, width, height, type) {let appObject = document.getElementById(app);let video = document.createElement("video");let span = document.createElement("span");let facingMode = 'environment';const codeReader = new ZXingBrowser.BrowserMultiFormatReader();video.style.width = widthvideo.id = 'video'video.style.height = heightvideo.autoplay = "autoplay";video.style.margin = 0;appObject.insertBefore(video, appObject.childNodes[0]);/***  修改优先使用那颗摄像头，前置或后置* */this.setFacingMode = function(type) {// 前置摄像头：user 后置摄像头：environmentfacingMode = type;}this.establish = function establish() {let constraints = {video: {facingMode: facingMode,height: height,width: width},audio: false};let promise = navigator.mediaDevices.getUserMedia(constraints);promise.then(function(MediaStream) {video.srcObject = MediaStream;video.play();}).catch(function(PermissionDeniedError) {console.log(PermissionDeniedError);})}this.photograph = function photograph() {canvas = document.createElement("canvas");canvas.height = height;canvas.width = width;let ctx = canvas.getContext('2d');ctx.drawImage(video, 0, 0, width, height);return canvas;}// 解析码，获取解码的内容this.qrcode = function qrcode() {var promise = codeReader.decodeOnceFromVideoElement(video);// codeReader.decodeOnceFromVideoElement(video).then(function(res){//  console.log("res:" + res)//  return res;// })console.log(promise)return promise;}this.getImg = function getImg() {return this.photograph().toDataURL('image/jpeg')}this.close = function close() {this.MediaStreamTrack && this.MediaStreamTrack.stop();}// 开始疯狂扫码this.starcode = function starcode() {alert("在外部实现！！！")}//停止疯狂扫码this.stopcode = function stopcode() {alert("在外部实现！！！")}
}

扫码功能需要：zxing-browser.min.js

DEMO：

<!doctype html>
<html lang="en"><head><title>GET VIDEO</title><meta charset="utf-8"></head><body><span id="sa"></span><div style="width:500px;height:800px;border: 1px solid red;" id="app"></div><button id="snap" onclick="qr()">拍照吧</button><button id="snap" onclick="vi.close()">拍照</button><script type="text/javascript" src="js/zxing-browser.min.js"></script><script type="application/javascript" src="js/xcamera.js"></script><script>let vi = new camera("app", 500, 1000);vi.establish()function qr() {vi.qrcode().then(function(res) {if (res.text != undefined) {alert("识别成功" + res.text);}})}</script></body>
</html>

代码和zxing的下载地址：https://gitee.com/fxboy/html-camera

原生的JS实现摄像头拍照/扫码相关推荐

在微信小程序中调用前置摄像头拍照后置摄像头拍照扫码
1.需求:点击扫码按钮,扫描二维码识别单号实现: <view class="getcode" bindtap="scanCode"> &l ...
@zxing/library插件在H5页面上调用摄像头进行扫码识别解决方法，以及对华为手机的兼容
@zxing/library调用摄像头这是第一次写博客,不太熟悉,如果我的方法有些问题,请多指正,谢谢!! 关于@zxing/library 导入@zxing/library npm i @zxin ...
html5 隐藏摄像头,js控制摄像头拍照请问html5怎么关闭摄像头？
JS 能不能调用摄像头并拍照可以调用,不过适合HTML5,浏览器版本也要高点,有些低版本的估计不支持 var promisifiedOldGUM = function(constraints) { ...
微信js调用摄像头拍照上传_微信JSSDK实现打开摄像头拍照再将相片保存到服务器...
在微信端打开手机摄像头拍照,将拍照图片保存到服务器上需要使用到微信的JSSDK接口,主要使用到了拍照或从手机相册中选图接口(chooseImage),上传图片接口(uploadImage) 参考资料: ...
JS调用摄像头拍照，上传图片并显示到前端页面
本文实例为大家分享了JS实现截取视频画面的具体代码,供大家参考,具体内容如下: index.jsp 展示界面,按钮点击拍照,将拍照图片显示 <img id="showImage_img ...
js调用摄像头拍照并访问后端代码
1.先上效果(注意我的摄像头是打开的这里获取的是实时的视频流): 图略,太丑了决定删了 2.index.html <!-- Copyright (c) 2018 ml5This software ...
前端调用手机摄像头权限进行扫码解析
前端调用手机摄像头权限进行扫码解析(demo含Vue及原生) 前端调用手机摄像头权限进行扫码解析(demo含Vue及原生js写法) 引子实践此时已经可以成功调用摄像头,接下来集成进Vue工程中最 ...
【科普文】二维码的[生成]和[扫码]
作者:孙辉,美团金融前端团队成员.15年毕业加入美团,相信技术,更相信技术只是大千世界里知识的一种,个人博客: sunyuhui.com 最近这段时间,团队在做的业务主要和二维码相关,在做的过程中,发 ...
微信扫码支付初步使用
微信扫码支付初步使用一丶对二维码的认知二维码又称QR Code,QR全称Quick Response,是一个近几年来移动设备上超流行的一种编码方式,它比传统的Bar Code条形码能存更多的信息, ...

原生的JS实现摄像头拍照/扫码

原生的JS实现摄像头拍照/扫码相关推荐

最新文章

热门文章