溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章給大家分享的是有關(guān)web/html5調(diào)用攝像頭實(shí)現(xiàn)二維碼掃描效果的方法的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧。
利用html5（navigator.getUserMedia）調(diào)用攝像頭抓拍圖片媒體流，通過(guò)php調(diào)用java接口解析圖片二維碼，實(shí)現(xiàn)二維碼解析，可結(jié)合自己的業(yè)務(wù)！不過(guò)目前支持的瀏覽器不多是個(gè)問(wè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 簽中
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('指定的媒體類(lèi)型未接收到媒體流', '提示');
} 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>
<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;">開(kāi)始掃描</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)
class utils{
/**
* @access static
* @param $imagepath String 圖片的完整路徑
* @param $host String 主機(jī)如：127.0.0.1
* @param $port String 端口號(hào)如：20147
* @return string 解析出的URL
*/
static function deCodeBitMap($imagepath,$host,$port){
$socket = socket_create(AF_INET, SOCK_STREAM, SOL_TCP) or die($imagepath." Could not connet server create\n"); // 創(chuàng)建一個(gè)Socket
if(!$socket){
return "";
}
$connection = socket_connect($socket, $host, $port) or die($imagepath." Could not connet server connection\n"); // 連接
if(!$connection){
return "";
}
socket_write($socket, $imagepath) or die("Write failed\n"); // 數(shù)據(jù)傳送 向服務(wù)器發(fā)送消息
$buff = socket_read($socket, 1024, PHP_NORMAL_READ);
return $buff;
}
}java擴(kuò)展使用說(shuō)明
該解析過(guò)程需要java環(huán)境支持，jar包啟動(dòng)后在本機(jī)的20147端口接受socket監(jiān)聽(tīng)，因此網(wǎng)絡(luò)編程語(yǔ)言都可以調(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)用代碼
最終效果：
瀏覽器支持情況
感謝各位的閱讀！關(guān)于web/html5調(diào)用攝像頭實(shí)現(xiàn)二維碼掃描效果的方法就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼