生活随笔
收集整理的這篇文章主要介紹了
mui调用摄像头
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
版權聲明:本文為博主原創文章,未經博主允許不得轉載。 https://blog.csdn.net/zhuming3834/article/details/53391872
好久沒有寫《HBuilder webApp App開發》這個專欄了。這周的這兩天暫時比驕沒事,就對著官方文檔barcode寫了這個二維碼掃描的Demo。?
以前做原生開發的時候,關于二維碼掃描、識別圖片中的二維碼、和二維碼生成都寫過。具體可以看這些:?
《【iOS】AVFoundation架構下的原生二維碼和條形碼掃描》?
《【iOS】CoreImage原生二維碼生成(一)》?
《【iOS】CoreImage原生二維碼生成(二)一個方法生成帶logo的二維碼》?
在做H5的APP的時候,之前也寫過《HBuilder webApp開發(十一)二維碼生成》。?
原生開發和H5的開發都寫過,發現還是H5的開發代碼量會少一點,但是這個就看項目是原生開發還是H5開發了。總體感覺做二維碼掃描和生成不難,認真看文檔,理清思路,修改官方Demo,然后測試就好了。?
直接上代碼,注釋都在代碼里面了。
<body ><header class="mui-bar mui-bar-nav white"><a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a><h1 class="mui-title">二維碼掃描</h1></header><div class="mui-content"><button id="startScan" class="mui-btn mui-btn-success">開始掃描</button><button id="cancelScan" class="mui-btn mui-btn-success">取消掃描</button><button id="setFlash" class="mui-btn mui-btn-success">開啟/關閉閃光燈</button><div id= "bcid"></div></div>
</body>
<script>mui.init({swipeBack:true //啟用右滑關閉功能});var scan = null;var isOpen = false; // 閃光燈是否開始標志 true:閃光燈已經開啟 false:閃光燈關閉// 條碼識別成功事件function onmarked( type, result ) {var text = '未知: ';switch(type){case plus.barcode.QR:text = 'QR: '; // 二維碼break;case plus.barcode.EAN13:text = 'EAN13: ';break;case plus.barcode.EAN8:text = 'EAN8: ';break;}alert( text+result );}// 創建掃描控件function startRecognize() {scan = new plus.barcode.Barcode('bcid');scan.onmarked = onmarked; }// 開始掃描document.getElementById("startScan").addEventListener('tap',function(){startRecognize();scan.start();})// 取消掃描document.getElementById("cancelScan").addEventListener('tap',function(){startRecognize();scan.cancel();})// 開啟和關閉閃光燈document.getElementById("setFlash").addEventListener('tap',function(){startRecognize();isOpen = !isOpen;if(isOpen){scan.setFlash(true);}else{scan.setFlash(false);}})
</script>
總結
以上是生活随笔為你收集整理的mui调用摄像头的全部內容,希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯,歡迎將生活随笔推薦給好友。