引子： 
最近公司項目有個需求，微博客戶端中， h5 的頁面上的某個按鈕能夠與native 交互呼起攝像頭，掃描二維碼并且解析。在非微博客戶端中（微信或者是原生瀏覽器，如：safari）呼起系統的拍照或者上傳圖片按鈕，通過拍照或者上傳圖片解析二維碼。 
第二種方案需要在前端 js 解析二維碼。這樣依賴一個第三方的解析庫jsqrcode。這個庫已經支持在瀏覽器端呼起攝像頭的操作了，但是依賴一個叫getUserMedia的屬性。該屬性移動端的瀏覽器支持的都不是很好，所以只能間接的上傳圖片的方式解析二維碼。 
getUserMedia屬性兼容瀏覽器列表： 

首先感謝 jsqrcode 的開發者，提供這么優秀的解析二維碼的代碼，為我減少了很大的工作量。jsqrcode 地址：點我 
我的代碼庫地址：點我 
1.解決的問題： 
1.能夠在微博客戶端呼起攝像頭掃描二維碼并且解析; 
2.能夠在原生瀏覽器和微信客戶端中掃描二維碼并且解析; 
2.優點： 
web端或者是 h5端可以直接完成掃碼的工作； 
3.缺點： 
圖片不清晰很容易解析失敗(拍照掃描圖片需要鏡頭離二維碼的距離很近)，相對于 native 呼起的攝像頭解析會有1-2秒的延時。 
說明： 
此插件需要配合zepto.js 或者 jQuery.js使用 
使用方法： 
1.在需要使用的頁面按照下面順序引入lib目錄下的 js 文件 
 

發表評論 共有條評論 用戶名: 密碼: 驗證碼: 匿名發表