<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <video id="video" width="640" height="480" autoplay></video> </body> <script type="text/javascript"> var promisifiedOldGUM = function(constraints) { // 第一個拿到getUserMedia，如果存在 var getUserMedia = (navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia); // 有些瀏覽器只是不實現它-返回一個不被拒絕的承諾與一個錯誤保持一致的接口 if (!getUserMedia) { return Promise.reject(new Error('getUserMedia is not implemented in this browser-getUserMedia是不是在這個瀏覽器實現')); } // 否則，調用包在一個舊navigator.getusermedia承諾 return new Promise(function(resolve, reject) { getUserMedia.call(navigator, constraints, resolve, reject); }); } // 舊的瀏覽器可能無法實現mediadevices可言，所以我們設置一個空的對象第一 if (navigator.mediaDevices === undefined) { navigator.mediaDevices = {}; } // 一些瀏覽器部分實現mediadevices。我們不能只指定一個對象 // 隨着它將覆蓋現有的性能getUserMedia。. // 在這里，我們就要錯過添加getUserMedia財產。. if (navigator.mediaDevices.getUserMedia === undefined) { navigator.mediaDevices.getUserMedia = promisifiedOldGUM; } // Prefer camera resolution nearest to 1280x720. var constraints = { audio: true, video: { width: 1280, height: 720 } }; navigator.mediaDevices.getUserMedia(constraints) .then(function(stream) { var video = document.querySelector('video'); video.src = window.URL.createObjectURL(stream); video.onloadedmetadata = function(e) { video.play(); }; }).catch(function(err) { console.log(err.name + ": " + err.message); }); </script> </html>
可用調用攝像頭
通過
catch(function(err) {
console.log(err.name + ": " + err.message);
});可用判斷是否有可使用的攝像頭但是錯誤信息有限無法詳細判斷
NavigatorUserMediaError {name: "DevicesNotFoundError", message: "", constraintName: ""}
constraintName:""
message:""
name:"DevicesNotFoundError"
目前沒時間詳細查看先記錄下來以后看
參考：http://blog.csdn.net/qq_16559905/article/details/51743588
https://developer.mozilla.org/zh-CN/docs/Web/API/MediaDevices/getUserMedia
下面是H5調用攝像頭進行掃一掃的功能，https://github.com/zhiqiang21/WebComponent（開發者所有的插件）
https://github.com/zhiqiang21/WebComponent/tree/master/html5-Qrcode（掃一掃功能）
http://www.cnblogs.com/yisuowushinian/p/5145262.html
親測有效，但是兼容性不是很好
實現是調用拍照或者調用相冊獲取到二維碼圖片，用jsqrcode進行二維碼分析 地址
然后獲取到實際的二維碼內寫的字符串
后續實現自行可以處理