本文給大家介紹如何用web/html5調(diào)用攝像頭實(shí)現(xiàn)二維碼掃描的效果，有一定的參考價(jià)值抑胎，有需要的朋友可以參考一下何鸡，希望對(duì)你們有所幫助。
利用html5（navigator.getUserMedia）調(diào)用攝像頭抓拍圖片媒體流，通過php調(diào)用java接口解析圖片二維碼逸绎，實(shí)現(xiàn)二維碼解析惹恃，可結(jié)合自己的業(yè)務(wù)！不過目前支持的瀏覽器不多是個(gè)問題棺牧。
需要面試題點(diǎn)擊下面鏈接查看巫糙，有很多：
web前端全棧資料粉絲福利（面試題、視頻颊乘、資料筆記参淹、進(jìn)階路線）
html/js
<!DOCTYPE html>
<html><head>
????<title>HTML5 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 簽中?
varcanvas=null,context=null,video=null;??
window.addEventListener("DOMContentLoaded", function()
{
????try{
????????canvas = document.getElementById("canvas");
????????context = canvas.getContext("2d");
????????video = document.getElementById("video");
????????varvideoObj = { "video": true,audio:false},
????????flag=true,
????????MediaErr = function(error)
????????{??????????
????????????flag=false;?
????????????if(error.PERMISSION_DENIED)
????????????{
?????????????????alert('用戶拒絕了瀏覽器請(qǐng)求媒體的權(quán)限', '提示');
????????????} elseif(error.NOT_SUPPORTED_ERROR) {
?????????????????alert('對(duì)不起，您的瀏覽器不支持拍照功能乏悄，請(qǐng)使用其他瀏覽器', '提示');
????????????} elseif(error.MANDATORY_UNSATISFIED_ERROR) {
?????????????????alert('指定的媒體類型未接收到媒體流', '提示');
????????????} else{
?????????????????alert('系統(tǒng)未能獲取到攝像頭浙值，請(qǐng)確保攝像頭已正確安裝￠菪。或嘗試刷新頁面开呐，重試', '提示');
????????????}
????????};
????????//獲取媒體的兼容代碼，目前只支持（Firefox,Chrome,Opera）
????????if(navigator.getUserMedia)
????????{
????????????//qq瀏覽器不支持
????????????if(navigator.userAgent.indexOf('MQQBrowser') > -1) {
?????????????????alert('對(duì)不起规求，您的瀏覽器不支持拍照功能负蚊，請(qǐng)使用其他瀏覽器', '提示');
?????????????????returnfalse;
????????????}
????????????navigator.getUserMedia(videoObj, function(stream) {
????????????????video.src = stream;???????????????
????????????????video.play();?????
????????????}, MediaErr);??????????
????????}
????????elseif(navigator.webkitGetUserMedia)
????????{
???????????navigator.webkitGetUserMedia(videoObj, function(stream)
???????????{?????????
?????????????video.src = window.webkitURL.createObjectURL(stream);??????????
?????????????video.play();??????????
????????????}, MediaErr);??????????
????????}
????????elseif(navigator.mozGetUserMedia)
????????{
????????????navigator.mozGetUserMedia(videoObj, function(stream) {
?????????????????video.src = window.URL.createObjectURL(stream);
?????????????????video.play();
????????????}, MediaErr);
????????}
????????elseif(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)使用其他瀏覽器');
????????????returnfalse;
????????}
????????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)容到頁面?????
functionprintHtml(content){
????$(window.document.body).append(content+"<br/>");
}
//開始拍照
functionstartPat(){
????setTimeout(function(){//防止調(diào)用過快
????????if(context)
????????{
????????????context.drawImage(video, 0, 0, 320, 320);????
????????????CatchCode();
????????}
????},200);
}
//抓屏獲取圖像流姨伤，并上傳到服務(wù)器?????
functionCatchCode() {???????
????if(canvas!=null)
????{?
????????//以下開始編 數(shù)據(jù)??
????????varimgData = canvas.toDataURL();
????????//將圖像轉(zhuǎn)換為base64數(shù)據(jù)
????????varbase64Data = imgData;//.substr(22); //在前端截取22位之后的字符串作為圖像數(shù)據(jù)
????????//開始異步上
???????$.post("saveimg.php", { "img": base64Data },function(result)
???????{??
????????????printHtml("解析結(jié)果："+result.data);
????????????if(result.status == "success"&& result.data!="")
????????????{????????????????
????????????????printHtml("解析結(jié)果成功！");
????????????}else{?
????????????????startPat();//如果沒有解析出來則重新抓拍解析??????
????????????}
???????},"json");
????}
}?????
</script>
??<body>
<p id="support"></p>
<p 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;">開始掃描</button>?
???</p>
</body></html>
php(saveimg)
<?php
include_once("utils.php");
$base64_image_content=$_POST['img'];
if(preg_match('/^(data:\s*image\/(\w+);base64,)/', $base64_image_content, $result))
{
??$type= $result[2];
??$new_file= "./2.{$type}";
??if(file_put_contents($new_file, base64_decode(str_replace($result[1], '', $base64_image_content)))){
????$code=utils::deCodeBitMap("2.png","192.168.46.123",20147);
????echo'{"status":"success","data":"'.trim($code).'"}';
??}else{
????echo'{"status":"write error","data":"NO"}';
??}
}else{
????echo'{"status":"preg error","data":"NO"}';
}
?>
php(utils)
classutils{
???/**
???????* @access static
???????* @param? $imagepath String 圖片的完整路徑
???* @param? $host????? String 主機(jī)如：127.0.0.1
???* @param? $port????? String 端口號(hào)如：20147
???????* @return string 解析出的URL
???????*/
???staticfunctiondeCodeBitMap($imagepath,$host,$port){
???????$socket= socket_create(AF_INET, SOCK_STREAM, SOL_TCP) ordie($imagepath." Could not connet server create\n"); // 創(chuàng)建一個(gè)Socket
???????if(!$socket){
???????????return"";
???????}
???????$connection= socket_connect($socket, $host, $port) ordie($imagepath." Could not connet server connection\n");??? //? 連接
???????if(!$connection){
???????????return"";
???????}
???????socket_write($socket, $imagepath) ordie("Write failed\n"); // 數(shù)據(jù)傳送 向服務(wù)器發(fā)送消息
???????$buff= socket_read($socket, 1024, PHP_NORMAL_READ);
???????return$buff;
???}
}
java擴(kuò)展使用說明
該解析過程需要java環(huán)境支持庸疾，jar包啟動(dòng)后在本機(jī)的20147端口接受socket監(jiān)聽乍楚，因此網(wǎng)絡(luò)編程語言都可以調(diào)用。
1 命令行啟動(dòng)jar包
java -jar xxxxx.jar
啟動(dòng)成功應(yīng)該能看到20147端口的應(yīng)用
2服務(wù)socket調(diào)用
暫提供php調(diào)用代碼
最終效果：
瀏覽器支持情況
總結(jié)：以上就是本篇文的全部內(nèi)容届慈，希望能對(duì)大家的學(xué)習(xí)有所幫助徒溪。更多相關(guān)內(nèi)容請(qǐng)關(guān)注我！金顿！
