Today, my supervisor gave me a request, saying that I need to use hybrid development and use H5 to call the local camera to scan the QR code. I have done native Android QR code scanning before, mainly by calling the zxing plug-in. I also got a flash. But I had never come across a pure H5, so I didn’t know what to do, so I went home at night and started looking for solutions online. The following is my understanding and code of H5 scanning QR codes and calling local cameras.
Popular science website:
How H5 generates Android component objects
H5 calls Android local camera api
Online QR code image generator
QR code scanning: (using the mui framework, the following is the html code)
<!doctype html> <html> <head> <meta charset=UTF-8> <title></title> <meta name=viewport content=width=device-width,initial-scale=1,minimum-scale=1 ,maximum-scale=1,user-scalable=no /> <link href=css/mui.min.css rel=stylesheet /> <script src=js/mui.min.js></script> <style type=text/css> #bcid{ width: 100%; height: 100%; position: absolute; background: #000000; } html, body ,div { height:100%; width: 100%; } .fbt{ color: #0E76E1; width: 50%; background-color: #ffffff; float: left; line-height: 44px; text-align: center; } </style> </head> <body> <header class=mui-bar mui-bar-nav style=> <a class= mui-action-back mui-icon mui-icon-left-nav mui-pull-left></a> <h1 class=mui-title style=color: #0E76E1;>H5webapp QR code scanning</h1> <span class=mui-icon mui-icon-spinner-cycle mui-spin mui-pull-right id=turnTheLight></span> </header> <div id =bcid> <!--The div holding the scan control--> </div> <div class=mui-bar mui-bar-footer style=padding: 0px;> <div class=fbt onclick=scanPicture();>Select QR code from album</div> <div class=fbt mui-action-back>Cancel</div> </div> <script type=text /javascript> var height = window.innerHeight + 'px';//Get the actual height of the page var width = window.innerWidth + 'px'; document.getElementById(bcid).style.height= height; document.getElementById(bcid).style.width= width; scan = null;//Scan object mui.plusReady(function () { //Initialize scan mui through mui. init(); startRecognize(); }); function startRecognize(){ //Turn on scanning try{ var filter; //Customized scanning control style var styles = {frameColor: #29E52C,scanbarColor: #29E52C,background: } //Scan control construction scan = new plus.barcode.Barcode('bcid',filter,styles); scan.onmarked = onmarked; scan.onerror = onerror; //Scan error scan.start(); //Turn on and off flash processing var flag = false; document.getElementById(turnTheLight).addEventListener('tap',function(){ if(flag == false){ scan.setFlash(true); flag = true; }else{ scan.setFlash(false); flag = false; } }); }catch(e){ alert(An error occurred:/n+e); } }; function onerror(e){ //Error popup alert(e); }; function onmarked( type, result ) { //This is the callback function for scanning the QR code, type is the type of callback for scanning the QR code var text = ''; switch(type ){ //QR, EAN13, and EAN8 are all encoding formats of QR codes, and result is the returned result. case plus.barcode.QR: text = 'QR: '; break; case plus.barcode.EAN13: text = 'EAN13: '; break; case plus.barcode.EAN8: text = 'EAN8: '; break; } alert( text + : + result ); }; // Select a QR code picture from the album function scanPicture() { // OK Directly identify QR code images plus.gallery.pick(function(path){ plus.barcode.scan(path,onmarked,function(error){ plus.nativeUI.alert(Unable to recognize this image); }); },function(err){ plus.nativeUI.alert(Failed: +err.message); }); } </script> </body> </html>The following is the package structure: the development tool is hbuilder
The mui.plusReady function is mainly for initialization
startRecognize() is to enable the function of scanning QR codes
onerror is an error message
onmarked is the key point, it is the callback function after the QR code is scanned, type is the QR code recognition type, and result is the content of the QR code callback.scanPicture() can directly identify local QR code pictures and analyze them
H5 calls local camera
<!DOCTYPE html><html><head> <meta charset=utf-8> <meta name=viewport content=width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1, user-scalable=no /> <title></title> <script src=js/mui.min.js></script> <link href=css/mui.min.css rel=stylesheet/> <script type=text/javascript charset=utf-8> document.addEventListener( plusready, function(){ mui.init(); }); function getCamera() { var cam = plus.camera.getCamera(); //String array, camera resolution supported by the camera var Resolutions = cam.supportedImageResolutions[0]; //String array, photo file formats supported by the camera var Formats = cam.supportedImageFormats[0]; //Call the photo method //capturedFile, after the photo is completed, the photo storage address cam.captureImage( function(capturedfile){ //Photography succeeded alert(capturedfile); //Print it}, function(){ //Photography failed},{ //Photography parameters format: Formats, index: 1//1 represents the main camera, 2 represents the auxiliary camera}); var Resolutions = cam.supportedImageResolutions[0]; //String array, photo file format supported by the camera var Formats = cam.supportedImageFormats[0] ; //Call the photography method //capturedFile. After the photography is completed, the photo storage address cam.captureImage(function(capturedFile){ //Photo taken successfully alert(capturedFile); //Print it //Call the system method to get the photo according to the photo address plus.io.resolvLocalFileSystemURL(capturedFile, //Successful callback function //Entry file related information function(entry){ var img = document.createElement(img); img.src = entry.toLocalURL(); document.documentElement.appendChild(img); },function(){ //Failed callback function}); }); } </script></head><body> <button onclick=getCamera()>Photography</button></body></html >mui.init(); is mui framework initialization
The getCamera() method first generates a camera object, then takes a photo, and prints out the generated image path after taking the photo.
SummarizeThe above is the HTML5 hybrid development QR code scanning and calling local camera introduced by the editor. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. I would also like to thank everyone for your support of the VeVb martial arts website!