web/html5调用摄像头实现二维码扫描

最新推荐文章于 2024-07-05 13:32:54 发布
最新推荐文章于 2024-07-05 13:32:54 发布
阅读量1.6w 收藏 16
点赞数 1
分类专栏： view

web/html5调用摄像头实现二维码扫描



  1. <!DOCTYPE html>  
  2. <html><head>  
  3.     <title>HTML5 code Reader</title>  
  4.     <meta http-equiv="Content-Type" content="text/html; charset=gb2312">  
  5. </head>  
  6. <style type="text/css">  
  7.  html, body { height: 100%; width: 100%; text-align:center; }    
  8. </style>  
  9. <script src="jquery-1.9.1.js"></script>  
  10. <script>  
  11. //这段代 主要是获取摄像头的视频流并显示在Video 签中    
  12. var canvas=null,context=null,video=null;     
  13. window.addEventListener("DOMContentLoaded", function ()  
  14. {  
  15.     try{  
  16.         canvas = document.getElementById("canvas");  
  17.         context = canvas.getContext("2d");  
  18.         video = document.getElementById("video");  
  19.           
  20.         var videoObj = { "video": true,audio:false},  
  21.         flag=true,  
  22.         MediaErr = function (error)  
  23.         {             
  24.             flag=false;    
  25.             if (error.PERMISSION_DENIED)  
  26.             {  
  27.                  alert('用户拒绝了浏览器请求媒体的权限', '提示');  
  28.             } else if (error.NOT_SUPPORTED_ERROR) {  
  29.                  alert('对不起，您的浏览器不支持拍照功能，请使用其他浏览器', '提示');  
  30.             } else if (error.MANDATORY_UNSATISFIED_ERROR) {  
  31.                  alert('指定的媒体类型未接收到媒体流', '提示');  
  32.             } else {  
  33.                  alert('系统未能获取到摄像头，请确保摄像头已正确安装。或尝试刷新页面，重试', '提示');  
  34.             }  
  35.         };  
  36.         //获取媒体的兼容代码，目前只支持（Firefox,Chrome,Opera）  
  37.         if (navigator.getUserMedia)  
  38.         {  
  39.             //qq浏览器不支持  
  40.             if (navigator.userAgent.indexOf('MQQBrowser') > -1) {  
  41.                  alert('对不起，您的浏览器不支持拍照功能，请使用其他浏览器', '提示');  
  42.                  return false;  
  43.             }  
  44.             navigator.getUserMedia(videoObj, function (stream) {  
  45.                 video.src = stream;                  
  46.                 video.play();        
  47.             }, MediaErr);             
  48.         }  
  49.         else if(navigator.webkitGetUserMedia)  
  50.         {  
  51.            navigator.webkitGetUserMedia(videoObj, function (stream)  
  52.            {            
  53.              video.src = window.webkitURL.createObjectURL(stream);             
  54.              video.play();             
  55.             }, MediaErr);             
  56.         }  
  57.         else if (navigator.mozGetUserMedia)  
  58.         {  
  59.             navigator.mozGetUserMedia(videoObj, function (stream) {  
  60.                  video.src = window.URL.createObjectURL(stream);  
  61.                  video.play();  
  62.             }, MediaErr);  
  63.         }  
  64.         else if (navigator.msGetUserMedia)  
  65.         {   
  66.              navigator.msGetUserMedia(videoObj, function (stream) {  
  67.                 $(document).scrollTop($(window).height());  
  68.                 video.src = window.URL.createObjectURL(stream);  
  69.                 video.play();  
  70.              }, MediaErr);  
  71.         }else{  
  72.             alert('对不起，您的浏览器不支持拍照功能，请使用其他浏览器');  
  73.             return false;  
  74.         }  
  75.         if(flag){  
  76.             alert('为了获得更准确的测试结果，请尽量将二维码置于框中，然后进行拍摄、扫描。 请确保浏览器有权限使用摄像功能');  
  77.         }  
  78.          //这个是拍照按钮的事件，            
  79.         $("#snap").click(function () {startPat();}).show();  
  80.     }catch(e){        
  81.         printHtml("浏览器不支持HTML5 CANVAS");         
  82.     }   
  83. }, false);  
  84.       
  85. //打印内容到页面        
  86. function printHtml(content){  
  87.     $(window.document.body).append(content+"<br/>");  
  88. }  
  89. //开始拍照  
  90. function startPat(){  
  91.     setTimeout(function(){//防止调用过快  
  92.         if(context)  
  93.         {  
  94.             context.drawImage(video, 0, 0, 320, 320);       
  95.             CatchCode();   
  96.         }  
  97.     },200);  
  98. }   
  99. //抓屏获取图像流，并上传到服务器        
  100. function CatchCode() {          
  101.     if(canvas!=null)  
  102.     {    
  103.         //以下开始编 数据     
  104.         var imgData = canvas.toDataURL();   
  105.         //将图像转换为base64数据  
  106.         var base64Data = imgData;//.substr(22); //在前端截取22位之后的字符串作为图像数据  
  107.         //开始异步上  
  108.        $.post("saveimg.php", { "img": base64Data },function (result)  
  109.        {     
  110.             printHtml("解析结果："+result.data);  
  111.             if (result.status == "success" && result.data!="")  
  112.             {                   
  113.                 printHtml("解析结果成功！");  
  114.             }else{    
  115.                 startPat();//如果没有解析出来则重新抓拍解析         
  116.             }  
  117.        },"json");  
  118.     }  
  119. }        
  120. </script>  
  121.   <body>  
  122.   
  123. <div id="support"></div>  
  124. <div id="contentHolder">         
  125. <video id="video" width="320" height="320" autoplay>  
  126. </video>         
  127. <canvas style="display:none; background-color:#F00;" id="canvas" width="320" height="320">  
  128. </canvas> <br/>  
  129. <button id="snap" style="display:none; height:50px; width:120px;">开始扫描</button>    
  130.    </div>  
  131.   
  132.   
  133.   
  134. </body></html>  

PHP(saveimg)

[php] view plain copy print ?
  1. <?php  
  2. include_once("utils.php");  
  3. $base64_image_content=$_POST['img'];  
  4. if (preg_match('/^(data:\s*image\/(\w+);base64,)/', $base64_image_content, $result))  
  5. {  
  6.   $type = $result[2];  
  7.   $new_file = "./2.{$type}";  
  8.   if (file_put_contents($new_file, base64_decode(str_replace($result[1], '', $base64_image_content)))){  
  9.     $code=utils::deCodeBitMap("2.png","192.168.46.123",20147);  
  10.     echo '{"status":"success","data":"'.trim($code).'"}';  
  11.   }else{  
  12.     echo '{"status":"write error","data":"NO"}';  
  13.   }  
  14. }else{  
  15.     echo '{"status":"preg error","data":"NO"}';  
  16. }  
  17. ?>  

php(utils)

[php] view plain copy print ?
  1. class  utils{  
  2.       
  3. /** 
  4.         * @access static 
  5.         * @param  $imagepath String 图片的完整路径 
  6. * @param  $host      String 主机如：127.0.0.1 
  7. * @param  $port      String 端口号如：20147 
  8.         * @return string 解析出的URL 
  9.     */  
  10. static function deCodeBitMap($imagepath,$host,$port){  
  11.     $socket = socket_create(AF_INET, SOCK_STREAM, SOL_TCP) or die($imagepath." Could not connet server create\n"); // 创建一个Socket  
  12.     if(!$socket){  
  13.         return "";  
  14.     }  
  15.     $connection = socket_connect($socket, $host, $port) or die($imagepath." Could not connet server connection\n");    //  连接  
  16.     if(!$connection){  
  17.         return "";  
  18.     }  
  19.     socket_write($socket, $imagepath) or die("Write failed\n"); // 数据传送 向服务器发送消息  
  20.   
  21.     $buff = socket_read($socket, 1024, PHP_NORMAL_READ);  
  22.     return $buff;  
  23. }  
  24.   
  25. }  
java扩展使用说明

该解析过程需要Java环境支持，jar包启动后在本机的20147端口接受socket监听，因此网络编程语言都可以调用。
1 命令行启动jar包
java -jar xxxxx.jar
启动成功应该能看到20147端口的应用
2服务socket调用
暂提供php调用代码

最终效果：


程序已打包：在我的资源里面，可自行下载！

源码打包下载


浏览器支持情况

u010154380
关注
  • 1
    点赞
  • 踩
  • 16
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
web/html5调用摄像头实现二维码扫描效果（代码实例）
lin123_00的博客
05-21 9999
本文给大家介绍如何用web/html5调用摄像头实现二维码扫描的效果，有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。 利用html5（navigator.getUserMedia）调用摄像头抓拍图片媒体流，通过php调用java接口解析图片二维码，实现二维码解析，可结合自己的业务！不过目前支持的浏览器不多是个问题。 需要面试题点击下面链接查看，有很多： 打造全网web前端全栈资料库（总目录）看完学的更快，掌握的更加牢固，你值得拥有（持续更新） html/js <!DOCT
html/js 实现PC端网页调用摄像头扫描解析二维码
weixin_43672817的博客
11-30 1万+
首先是二维码解析库，下载链接：https://pan.baidu.com/s/1MbVb_QqAjIIlAk9OEXy-6w  提取码：zip4    下面代码写在html中：   &lt;script type="text/javascript" src="src/qrcode/grid.js"&gt;&lt;/script&gt; &lt;script type="text/javas...
uniapp实现条码扫描 可开闪光灯，原生H5调用，不需要任何sdk。_uniapp h5扫码
2401_84851624的博客
05-17 904
基于上面所诉内容，我这里有现成的组件代码，复制就可以使用！quaggaJs的文件可以私我，我发给各位。当然也可以直接引入mainJs文件。
html+js调用手机摄像头扫描二维码（生产勿用！）
热门推荐
github_37125043的博客
01-21 3万+
&amp;amp;amp;amp;amp;amp;amp;amp;lt;!DOCTYPE html&amp;amp;amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;amp;amp;lt;head&amp;amp;amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;amp;amp;lt;title&amp;amp;amp;amp;amp
html5调用设备摄像头，实现二维码扫描
weixin_43617604的博客
07-15 8808
html5调用设备摄像头，实现二维码扫描 最近在做一个签到系统，由于我直接使用了纯网页，因此调用摄像头进行扫码成了大问题。经过几番费力的百度终于找到解决方法。 主要用到MediaDevices.getUserMedia()这个方法。（仅支持https） 创建一个QRScan对象 function QRScan(div_id) { this.div_id = div_id; // 用来存放video的div id this.div_can = null;
HTML调用摄像头实时识别二维码
weixin_43166518的博客
08-08 1102
【代码】HTML调用摄像头实时识别二维码。
Fiori 实现在网页端调用摄像头扫描二维码进行识别
jiarusong的博客
07-23 719
我们在UI5官方文档上进行搜索Scan,是只能找到一个BarcodeScanner的，这个API是无法实现我们这个需求的，所以如果有朋友收到这种需求，不想做的情况下，是可以推脱一下，把问题抛给SAP的（笑）。不过非标准功能，使用第三方库进行开发始终是有风险，可以自行评估下。contoller代码，在onInit方法里面放个input当成qrcode的容器，在onAfterRendering里面。下面的js复制一份，然后粘贴进刚刚创建的html5-qrcode.min.js里面。...
移动互联网_1：JavaScript_网页调用摄像头读取二维码
weixin_42076997的博客
05-16 627
精悍的jsQR.js框架，高效读取二维码
uni-app-H5页面调用设备摄像头扫描二维码
qq_42371932的博客
07-05 700
应用场景：APK里面webView，访问用uniapp写的H5页面，需要调用设备摄像头扫描二维码。这样就可以打开扫描界面，返回你扫描得到的信息。H5页面的环境必须是HTTPS！H5页面的环境必须是HTTPS！H5页面的环境必须是HTTPS！插入好之后，新建页面用于展示扫描界面。
HTML5 调用手机摄像头扫描二维码
sas6216402fx的博客
04-01 2万+
最近有个项目需要使用H5调用手机摄像头扫描二维码斌且识别。（很奇葩的需求） 百度了下找到了这个api： 旧版：（目前只有UC浏览器支持，其他的手机浏览器一律没有反应） https://developer.mozilla.org/zh-CN/docs/Web/API/Navigator/getUserMedia 新版：（目前只有火狐浏览器手机版和谷歌浏览器桌面版支持支持） https:
网页调用摄像头实现二维码扫描功能
06-14
在现代Web开发中，利用HTML5的技术特性，我们可以实现在网页上调用摄像头并实现二维码扫描功能。这个功能对于移动互联网应用来说非常实用，比如在线支付、信息分享、登录验证等场景。本教程将深入探讨如何利用js...
Html5调用摄像头读取二维码(全部源码)
08-08
总结来说，"Html5调用摄像头读取二维码(全部源码)"项目展示了HTML5、JavaScript和相关二维码库如何协同工作，实现在Web浏览器中通过摄像头进行二维码扫描的功能。这个功能对于移动应用开发、物联网交互以及其他需要...
Android使用WebView调用H5完成摄像头扫描二维码
11-04
为了调用摄像头并扫描二维码，我们需要在H5页面中使用相关的JavaScript库，例如`html5-qrcode`。这个库提供了一种简单的方法来访问设备的摄像头，并解析捕获到的图像中的二维码数据。在H5页面中，我们可以创建一个...
HTML5混合开发二维码扫描以及调用本地摄像头
09-28
本文将详细讲解如何在HTML5混合开发环境中实现二维码扫描功能并调用本地摄像头。 首先，HTML5提供了MediaDevices接口，该接口允许我们访问用户的媒体输入设备，如摄像头。通过调用`navigator.mediaDevices....
JS实现微信公众号Html5页面调用手机照相机识别二维码
02-24
1、使用jweixin-1.4.0.js实现微信公众号Html5页面调用手机照相机识别二维码 2、核心代码已经给到txt文件中，可以根据需要自行扩充。 3、二维码可以由自己的API生成，应用到很多领域。
pi_heif-0.17.0-pp310-pypy310_pp73-macosx_12_0_x86_64.whl
最新发布
07-27
pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。
mmexport1722080103662.jpg
07-27
mmexport1722080103662.jpg
matlab 20244a 6
07-27
matlab 20244a 6
vue调用摄像头扫描二维码
08-09
要在Vue中调用摄像头进行二维码扫描，可以使用WebRTC（Web实时通信）技术。下面是一个简单的示例： 首先，确保你已经安装了Vue.js和所需的WebRTC库。然后，你可以创建一个Vue组件来处理二维码扫描。在该组件的模板...
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值