失眠网 > html5调用设备摄像头实现二维码扫描

html5调用设备摄像头实现二维码扫描

时间：2018-11-22 13:23:47

相关推荐

html5调用设备摄像头实现二维码扫描

html5调用设备摄像头，实现二维码扫描

最近在做一个签到系统，由于我直接使用了纯网页，因此调用摄像头进行扫码成了大问题。经过几番费力的百度终于找到解决方法。

主要用到`MediaDevices.getUserMedia()`这个方法。（仅支持https）

创建一个QRScan对象

function QRScan(div_id) {this.div_id = div_id; // 用来存放video的div idthis.div_can = null; this.videos = [];// 保存设备上所有的摄像头idthis.medioConfig = {}; // 配置this.can_open = false;this.init();}

在web api上调用后置摄像头是这样配置video: { facingMode: { exact: “environment” } }，但是我没有成功，我是通过获取所有设备id然后再指定使用id的方式实现（英语差的我费劲的看了半天文档才弄明白）。

初始化配置等

init: function () {// 各种兼容win.URL = (win.URL || win.webkitURL || win.mozURL || win.msURL);var promisifiedOldGUM = function(constraints) {var getUserMedia = (navigator.getUserMedia ||navigator.webkitGetUserMedia || navigator.mozGetUserMedia);if (!getUserMedia) {return Promise.reject(new Error('getUserMedia is not implemented in this browser'));}return new Promise(function (resolve, reject) {getUserMedia.call(navigator, constraints, resolve, reject);});};if(navigator.mediaDevices === undefined) {navigator.mediaDevices = {};}if(navigator.mediaDevices.getUserMedia === undefined) {navigator.mediaDevices.getUserMedia = promisifiedOldGUM;}var self = this;self.div_can = doc.getElementById(self.div_id);// 这里获取所有的摄像头设备idnavigator.mediaDevices.enumerateDevices().then(function(devices) {devices.forEach(function (dv) {var kind = dv.kind;if (kind.match(/^video.*/)) {self.videos.push(dv.deviceId);console.log(dv);}});var len = self.videos.length;self.can_open = true;// 默认使用后置摄像头。根据测试，在手机上后置摄像头的id会在之后获取self.medioConfig = {audio: false,video: {deviceId: self.videos[len - 1] }}});}

打开摄像头部分

openScan: function () {var self = this;if (self.can_open) {var vd = doc.createElement('video');vd.setAttribute('id', 'video_id');navigator.mediaDevices.getUserMedia(self.medioConfig).then(function (stream) {vd.src = win.URL.createObjectURL(stream);self.div_can.appendChild(vd);}).catch(function (err) {var p = doc.createElement('p');p.innerHTML = 'ERROR: ' + err.name +'<br>该浏览器不支持调用摄像头，请使用**浏览器';self.div_can.appendChild(p);});vd.play();}}

到这里我们就能成功打开设备摄像头了，当然这是需要浏览器支持的

在video中进行图像抓取

getImgDecode: function (func) {var self = this;var video = doc.getElementById('video_id');var canvas = doc.createElement('canvas');canvas.width = 340;canvas.height = 305;var ctx = canvas.getContext('2d');ctx.drawImage(video, 0, 0, 340, 305);if (canvas.toBlob === undefined) {var base64 = canvas.toDataURL();var blob = self.Base64ToBlob(base64);self.sendBlob(blob, func);} else {canvas.toBlob(function (blob) {self.sendBlob(blob, func);});}},Base64ToBlob: function (base64) {var code = win.atob(base64.split(',')[1]);var len = code.length;var as = new Uint8Array(len);for (var i = 0; i < len; i++) {as[i] = code.charCodeAt(i);}return new Blob([as], {type: 'image/png'});}

将获取的二进制文件上传

sendBlob: function (blob, func) {var fd = new FormData();fd.append('file', blob);var xhr = new XMLHttpRequest();xhr.open('post', 'http://ip/api/parse', true);xhr.onload = function () {func ? func(JSON.parse(xhr.responseText)) : null;};xhr.send(fd);}