html5移動端頁面上調用手機攝像頭掃描二維碼并獲取二維碼信息代碼？

html5移動端調用手機攝像頭掃描二維碼并獲取二維碼信息代碼如下：

創新互聯建站網站建設公司，提供網站設計、做網站，網頁設計，建網站，PHP網站建設等專業做網站服務;可快速的進行網站開發網頁制作和功能擴展；專業做搜索引擎喜愛的網站，是專業的做網站團隊，希望更多企業前來合作!

[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('用戶拒絕了瀏覽器請求媒體的權限',?'提示');

}?else?if?(error.NOT_SUPPORTED_ERROR)?{

alert('對不起，您的瀏覽器不支持拍照功能，請使用其他瀏覽器',?'提示');

}?else?if?(error.MANDATORY_UNSATISFIED_ERROR)?{

alert('指定的媒體類型未接收到媒體流',?'提示');

}?else?{

alert('系統未能獲取到攝像頭，請確保攝像頭已正確安裝。或嘗試刷新頁面，重試',?'提示');

}

};

//獲取媒體的兼容代碼，目前只支持（Firefox,Chrome,Opera）

if?(navigator.getUserMedia)

{

//qq瀏覽器不支持

if?(navigator.userAgent.indexOf('MQQBrowser')??-1)?{

alert('對不起，您的瀏覽器不支持拍照功能，請使用其他瀏覽器',?'提示');

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('對不起，您的瀏覽器不支持拍照功能，請使用其他瀏覽器');

return?false;

}

if(flag){

alert('為了獲得更準確的測試結果，請盡量將二維碼置于框中，然后進行拍攝、掃描。?請確保瀏覽器有權限使用攝像功能');

}

//這個是拍照按鈕的事件，

$("#snap").click(function?()?{startPat();}).show();

}catch(e){

printHtml("瀏覽器不支持HTML5?CANVAS");

}

},?false);

//打印內容到頁面

function?printHtml(content){

$(window.document.body).append(content+"br/");

}

//開始拍照

function?startPat(){

setTimeout(function(){//防止調用過快

if(context)

{

context.drawImage(video,?0,?0,?320,?320);

CatchCode();

}

},200);

}

//抓屏獲取圖像流，并上傳到服務器

function?CatchCode()?{

if(canvas!=null)

{

//以下開始編?數據

var?imgData?=?canvas.toDataURL();

//將圖像轉換為base64數據

var?base64Data?=?imgData;//.substr(22);?//在前端截取22位之后的字符串作為圖像數據

//開始異步上

$.post("saveimg.php",?{?"img":?base64Data?},function?(result)

{

printHtml("解析結果："+result.data);

if?(result.status?==?"success"??result.data!="")

{

printHtml("解析結果成功！");

}else{

startPat();//如果沒有解析出來則重新抓拍解析

}

},"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;"開始掃描/button

/div

/body/html

用HTML5 可以實現二維碼掃描識別的功能嗎

恰好這幾天在嘗試，沒有兼容所有瀏覽器。只在手機上試過firefox, 自帶瀏覽器試過不行。以下是代碼：

---------------------------------------------------------Html----------------------------------------------------------------

form id="picForm" action="@Url.Action("scan")" method="post"

input type="hidden" value="" id="code" name="code" /

input type="hidden" value="" id="status" name="status" /

section style="position: relative;"

video width="100%" id="video" autoplay="autoplay"/video

div id="result" style="position: absolute; top: 0; left: 0;width:100%;height:100%;text-align: center;border:1px solid yellow;" onclick="scanCode();"

section class="smtwo" style="text-align:center;"

h3 a class="back" href="${ctx }/index/index.htm"

img src="images/smtwo_1.png" style="border: none" alt=""/a請將掃描框對準設備或包裝上的二維碼 /h3

/section

div id="getCode" style="margin:auto;width:200px;height:200px;border:1px solid red;"/div

canvas width="200" height="200" id="canvas"/canvas

/div

/section

/form

--------------------------------------------------------------Js--------------------------------------------------------------------

script

var video, canvas, videoObj;

window.addEventListener('DOMContentLoaded', function () {

'use strict';

//調取攝像頭

navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;

window.URL = window.URL || window.webkitURL || window.mozURL || window.msURL;

if (navigator.getUserMedia) {

videoObj = { video: true };

video = document.getElementById("video");// $("#video").get(0);

canvas = document.getElementById("canvas");// $("#canvas").get(0);

navigator.getUserMedia({

video: true

}, gotStream, noStream);

} else {

alert('Native web camera streaming (getUserMedia) not supported in this browser.');

}

//調取攝像頭成功的回調函數

function gotStream(stream) {

if (video.mozSrcObject !== undefined) {

video.mozSrcObject = stream;

} else {

video.src = (window.URL window.URL.createObjectURL(stream)) || stream;

}

video.play();

//啟動攝像頭成功之后開始獲取二維碼

scanCode();

}

//調取攝像頭失敗的回調函數

function noStream(error) {

alert('An error occurred: [CODE ' + error.code + ']');

}

}, false);

//抓取video畫面放入canvas

function photograph() {

var context = canvas.getContext("2d");

// 截取取景框范圍（這里用canvas做取景框）

//var x = canvas.clientLeft;

//var y = canvas.clientTop;

//context.drawImage(video,x, y, canvas.width, canvas.height, 0, 0, canvas.width, canvas.height);

var box = getBox();

context.drawImage(video, box.X, box.Y, box.W, box.H, 0, 0, box.W , box.H);

//imageConvertToGray(context);

var imgData = canvas.toDataURL("image/png");

$("#code").val(imgData);

}

function getBox() {

var box = $("#getCode");

var position = { X: $(box).offset().top, Y: $(box).offset().left, W: $(box).width(), H: $(box).height() };

return position

}

//將圖片處理成黑白的（二維碼掃描需要處理黑白色圖片，如果僅用于拍照這一步就省略了）

function imageConvertToGray(ctx) {

var length = canvas.width * canvas.height;

imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);

for (var i = 0; i length * 4; i += 4) {

var myRed = imageData.data[i];

var myGreen = imageData.data[i + 1];

var myBlue = imageData.data[i + 2];

myGray = parseInt((myRed + myGreen + myBlue) / 3);

imageData.data[i] = myGray;

imageData.data[i + 1] = myGray;

imageData.data[i + 2] = myGray;

}

ctx.putImageData(imageData, 0, 0);

}

function scanCode() {

//生成圖片的base64碼

photograph();

var data = { "code": $("#code").val() };

ajaxPostCompliate("@Url.Action("scan")", data, function (result) {

console.info("-----------result--------------" + result);

if (result != null) {//掃描出結果

var obj = JSON.parse(result);

if (obj.org != undefined) {

location.href = "@Url.Action("ScanResult")?org=" + obj.org + "tp=" + obj.tp + "ad=" + obj.ad;

} else {

alert("該二維碼非ME+授權編碼");

}

} else {//繼續掃描

setTimeout(function () {

scanCode();

}, 2000);

}

});

}

/script

html5+js實現二維碼掃描

通過下面的代碼即可實現：

HBuilder就有調用原生硬件的接口html5++

!DOCTYPE?html

html

head

meta?charset="utf-8"

titleCamera?Example/title

script?type="text/javascript"

//?擴展API加載完畢后調用onPlusReady回調函數

document.addEventListener(?"plusready",?onPlusReady,?false?);

var?r?=?null;

//?擴展API加載完畢，現在可以正常調用擴展API

function?onPlusReady()?{

//?獲取設備默認的攝像頭對象

var?cmr?=?plus.camera.getCamera();

1、代碼：代碼就是程序員用 開發工具所支持的語言寫出來的 源文件，是一組由 字符、符號或信號 碼元以離散形式表示信息的明確的規則體系。

2、html5：是指萬維網的核心語言、 標準通用標記語言下的一個應用 超文本標記語言（ HTML）的第五次重大修改。2014年10月29日，?萬維網聯盟宣布，經過接近8年的艱苦努力，該標準規范終于制定完成。

html5怎么做掃描二維碼的功能

1.解決的問題：

1.能夠在微博客戶端呼起攝像頭掃描二維碼并且解析;

2.能夠在原生瀏覽器和微信客戶端中掃描二維碼并且解析;

2.優點：

web端或者是 h5端可以直接完成掃碼的工作；

3.缺點：

圖片不清晰很容易解析失敗(拍照掃描圖片需要鏡頭離二維碼的距離很近)，相對于 native 呼起的攝像頭解析會有1-2秒的延時。

說明：

此插件需要配合zepto.js 或者 jQuery.js使用

使用方法：

1.在需要使用的頁面按照下面順序引入lib目錄下的 js 文件

復制代碼

代碼如下:

script src="lib/zepto.js"/script

script src="lib/qrcode.lib.min.js"/script

script src="lib/qrcode.js"/script

用html5可以實現rfid掃描嗎

RFID就是一個命令控制設備，只要能夠下發讀寫器的操作命令就可以實現RFID掃描，理論上和用什么語言編程沒關系，希望能給你幫助

html5怎么掃描二維碼

掃描二維碼的話，取決于手機攝像頭。

Html5文件的話，你需要將制作好的二維碼圖片放在Html5內容里面。

將建好的網址加在微信公眾號，或者是QQ公眾的導航上面，或者是網站里面。

當點擊進入頁面之后，會看到二維碼圖片。

用手機按壓圖片，APP會提示掃描圖片中的二維碼？

點擊確定掃描二維碼即可。

注釋：圖片盡量做成像下圖一樣的，增強二維碼的趣味性，吸引其他人掃描。