/** * html5调用摄像头扫码 */ ;(function (win, doc) { function QRScan(div_id) { this.div_id = div_id; this.div_can = null; this.videos = []; this.medioConfig = {}; this.can_open = false; this.init(); } QRScan.prototype = { 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); navigator.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; 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); // vd.srcObject = stream 在新的浏览器中需使用此代替createObjectURL self.div_can.appendChild(vd); }).catch(function (err) { var p = doc.createElement('p'); p.innerHTML = 'ERROR: ' + err.name + '
该浏览器不支持调用摄像头,请使用夸克浏览器'; self.div_can.appendChild(p); }); vd.play(); } }, closeScan: function () { this.div_can.innerHTML = ''; }, // 截图上传 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); }); } }, sendBlob: function (blob, func) { var fd = new FormData(); fd.append('auth', 'lkl123456'); fd.append('file', blob); var xhr = new XMLHttpRequest(); xhr.open('post', 'http://123.206.7.80:10082/api/parse', true); xhr.onload = function () { func ? func(JSON.parse(xhr.responseText)) : null; }; xhr.send(fd); }, 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'}); } } win.QRScan = QRScan; }(window, document));