html5移動(dòng)端調(diào)用手機(jī)攝像頭掃描二維碼并獲取二維碼信息代碼如下：
創(chuàng)新互聯(lián)建站-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價(jià)比安吉網(wǎng)站開(kāi)發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫(kù),直接使用。一站式安吉網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋安吉地區(qū)。費(fèi)用合理售后完善，十年實(shí)體公司更值得信賴。
[html]?view plain?copy
!DOCTYPE?html
htmlhead
titleHTML5?code?Reader/title
meta?http-equiv="Content-Type"?content="text/html;?charset=gb2312"
/head
style?type="text/css"
html,?body?{?height:?100%;?width:?100%;?text-align:center;?}
/style
script?src="jquery-1.9.1.js"/script
script
//這段代?主要是獲取攝像頭的視頻流并顯示在Video?簽中
var?canvas=null,context=null,video=null;
window.addEventListener("DOMContentLoaded",?function?()
{
try{
canvas?=?document.getElementById("canvas");
context?=?canvas.getContext("2d");
video?=?document.getElementById("video");
var?videoObj?=?{?"video":?true,audio:false},
flag=true,
MediaErr?=?function?(error)
{
flag=false;
if?(error.PERMISSION_DENIED)
{
alert('用戶拒絕了瀏覽器請(qǐng)求媒體的權(quán)限',?'提示');
}?else?if?(error.NOT_SUPPORTED_ERROR)?{
alert('對(duì)不起，您的瀏覽器不支持拍照功能，請(qǐng)使用其他瀏覽器',?'提示');
}?else?if?(error.MANDATORY_UNSATISFIED_ERROR)?{
alert('指定的媒體類型未接收到媒體流',?'提示');
}?else?{
alert('系統(tǒng)未能獲取到攝像頭，請(qǐng)確保攝像頭已正確安裝?；驀L試刷新頁(yè)面，重試',?'提示');
}
};
//獲取媒體的兼容代碼，目前只支持（Firefox,Chrome,Opera）
if?(navigator.getUserMedia)
{
//qq瀏覽器不支持
if?(navigator.userAgent.indexOf('MQQBrowser')??-1)?{
alert('對(duì)不起，您的瀏覽器不支持拍照功能，請(qǐng)使用其他瀏覽器',?'提示');
return?false;
}
navigator.getUserMedia(videoObj,?function?(stream)?{
video.src?=?stream;
video.play();
},?MediaErr);
}
else?if(navigator.webkitGetUserMedia)
{
navigator.webkitGetUserMedia(videoObj,?function?(stream)
{
video.src?=?window.webkitURL.createObjectURL(stream);
video.play();
},?MediaErr);
}
else?if?(navigator.mozGetUserMedia)
{
navigator.mozGetUserMedia(videoObj,?function?(stream)?{
video.src?=?window.URL.createObjectURL(stream);
video.play();
},?MediaErr);
}
else?if?(navigator.msGetUserMedia)
{
navigator.msGetUserMedia(videoObj,?function?(stream)?{
$(document).scrollTop($(window).height());
video.src?=?window.URL.createObjectURL(stream);
video.play();
},?MediaErr);
}else{
alert('對(duì)不起，您的瀏覽器不支持拍照功能，請(qǐng)使用其他瀏覽器');
return?false;
}
if(flag){
alert('為了獲得更準(zhǔn)確的測(cè)試結(jié)果，請(qǐng)盡量將二維碼置于框中，然后進(jìn)行拍攝、掃描。?請(qǐng)確保瀏覽器有權(quán)限使用攝像功能');
}
//這個(gè)是拍照按鈕的事件，
$("#snap").click(function?()?{startPat();}).show();
}catch(e){
printHtml("瀏覽器不支持HTML5?CANVAS");
}
},?false);
//打印內(nèi)容到頁(yè)面
function?printHtml(content){
$(window.document.body).append(content+"br/");
}
//開(kāi)始拍照
function?startPat(){
setTimeout(function(){//防止調(diào)用過(guò)快
if(context)
{
context.drawImage(video,?0,?0,?320,?320);
CatchCode();
}
},200);
}
//抓屏獲取圖像流，并上傳到服務(wù)器
function?CatchCode()?{
if(canvas!=null)
{
//以下開(kāi)始編?數(shù)據(jù)
var?imgData?=?canvas.toDataURL();
//將圖像轉(zhuǎn)換為base64數(shù)據(jù)
var?base64Data?=?imgData;//.substr(22);?//在前端截取22位之后的字符串作為圖像數(shù)據(jù)
//開(kāi)始異步上
$.post("saveimg.php",?{?"img":?base64Data?},function?(result)
{
printHtml("解析結(jié)果："+result.data);
if?(result.status?==?"success"??result.data!="")
{
printHtml("解析結(jié)果成功！");
}else{
startPat();//如果沒(méi)有解析出來(lái)則重新抓拍解析
}
},"json");
}
}
/script
body
div?id="support"/div
div?id="contentHolder"
video?id="video"?width="320"?height="320"?autoplay
/video
canvas?style="display:none;?background-color:#F00;"?id="canvas"?width="320"?height="320"
/canvas?br/
button?id="snap"?style="display:none;?height:50px;?width:120px;"開(kāi)始掃描/button
/div
/body/html
1、實(shí)現(xiàn)頭的方法代碼。
2、編寫(xiě)CSS樣式的方法代碼。
3、html上傳代碼。
4、JS處理方法代碼。
5、測(cè)試結(jié)果如下。
注意事項(xiàng)：
JavaScript是一種網(wǎng)絡(luò)腳本語(yǔ)言，在web應(yīng)用開(kāi)發(fā)中得到了廣泛的應(yīng)用，它經(jīng)常被用來(lái)為網(wǎng)頁(yè)添加各種動(dòng)態(tài)功能，為用戶提供更加流暢美觀的瀏覽效果，通常JavaScript腳本被嵌入到HTML中來(lái)實(shí)現(xiàn)自己的功能。
HTML的全稱是超文本標(biāo)記語(yǔ)言，是一種標(biāo)記語(yǔ)言。它包括一系列標(biāo)簽，可以統(tǒng)一網(wǎng)絡(luò)上文檔的格式，將分散的互聯(lián)網(wǎng)資源連接成一個(gè)邏輯整體。HTML是由HTML命令組成的描述性文本，可以解釋文字、圖形、動(dòng)畫(huà)、聲音、表格、鏈接等。Html是一種用來(lái)描述網(wǎng)頁(yè)的語(yǔ)言。它被稱為超文本標(biāo)記語(yǔ)言，它是一種標(biāo)記語(yǔ)言。它包括一系列標(biāo)簽，可以統(tǒng)一網(wǎng)絡(luò)上文檔的格式，將分散的互聯(lián)網(wǎng)資源連接成一個(gè)邏輯整體。
1、打開(kāi)百度，在百度上搜索：易企秀，然后點(diǎn)擊搜索，在搜索的結(jié)果中點(diǎn)擊進(jìn)入易企秀的官方網(wǎng)站。
2、進(jìn)入后，先登錄自己的賬號(hào)，可以直接用QQ微信登錄即可，登錄后就可以開(kāi)始制作自己的手機(jī)網(wǎng)頁(yè)微場(chǎng)景了。
3、首先點(diǎn)擊【我的場(chǎng)景】接著點(diǎn)擊【制作場(chǎng)景】，接著會(huì)進(jìn)入場(chǎng)景模板選擇界面，里面有很多免費(fèi)的模板。
4、可以在模板中心選擇一個(gè)自己需要的點(diǎn)擊，直接套用模板，也可以選擇自己創(chuàng)建一個(gè)空白頁(yè)面。
5、進(jìn)入后就可以根據(jù)自己的需要，將模板里面的文字圖片和音樂(lè)替換成自己需要的即可，如圖所示。
6、還可以給自己的手機(jī)網(wǎng)頁(yè)添加背景音樂(lè)，動(dòng)畫(huà)效果，跳轉(zhuǎn)鏈接，特效組件等等。
重慶分公司
重慶分公司
