WebApp在html5在手机网页上调用手机html5调用摄像头录像实现二维码扫描的功能

&!DOCTYPE&html&&&&&&&&HTML5&code&Reader&&&&&&&http-equiv=&Content-Type&&content=&text/&charset=gb2312&&&&&&type=&text/css&&&&html,&body&{&height:&100%;&width:&100%;&text-align:&}&&&&&&&src=&jquery-1.9.1.js&&&&&//这段代&主要是获取摄像头的视频流并显示在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&&&&&&&&&&&&&&&}&&&&&&&&&&&&&&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&&&&&&&&&&&}&&&&&&&&&&if(flag){&&&&&&&&&&&&&&alert('为了获得更准确的测试结果,请尽量将二维码置于框中,然后进行拍摄、扫描。&请确保浏览器有权限使用摄像功能');&&&&&&&&&&}&&&&&&&&&&&//这个是拍照按钮的事件,&&&&&&&&&&&&&&&&&&&&$(&#snap&).click(function&()&{startPat();}).show();&&&&&&}catch(e){&&&&&&&&&&&&&&&&printHtml(&浏览器不支持HTML5&CANVAS&);&&&&&&&&&&&&&}&&&},&false);&&&&&&&&//打印内容到页面&&&&&&&&function&printHtml(content){&&&&&&$(window.document.body).append(content+&&);&&}&&//开始拍照&&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&);&&&&&&}&&}&&&&&&&&&&&&&&&&&id=&support&&&&id=&contentHolder&&&&&&&&&&&id=&video&&width=&320&&height=&320&&autoplay&&&&&&&&&&&&style=&display:&background-color:#F00;&&id=&canvas&&width=&320&&height=&320&&&&&&&id=&snap&&style=&display:&height:50&width:120&开始扫描&&&&&&&&&&&&&&&&&
&?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{&&&&&&&&&&&&&&&&static&function&deCodeBitMap($imagepath,$host,$port){&&&&&&$socket&=&socket_create(AF_INET,&SOCK_STREAM,&SOL_TCP)&or&die($imagepath.&&Could&not&connet&server&create\n&);&&&&&&&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&);&&&&&&&&&$buff&=&socket_read($socket,&1024,&PHP_NORMAL_READ);&&&&&&return&$buff;&&}&&&&}&&
java扩展使用说明
该解析过程需要环境支持,jar包启动后在本机的20147端口接受socket监听,因此网络编程语言都可以调用。
1 命令行启动jar包
java -jar xxxxx.jar
启动成功应该能看到20147端口的应用
2服务socket调用
暂提供调用代码
最终效果:
程序已打包:在我的资源里面,可自行下载!
浏览器支持情况
&&相关文章推荐
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
访问:47243次
排名:千里之外
原创:10篇
转载:130篇
(8)(5)(7)(5)(5)(13)(19)(41)(13)(3)(1)(2)(2)(1)(1)(5)(1)(14)(2)(1)
(window.slotbydup = window.slotbydup || []).push({
id: '4740881',
container: s,
size: '200,200',
display: 'inlay-fix'HTML5手机网页上实现二维码扫描的功能(不是安卓APP程序开发,是网站web程序)_百度知道
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。
HTML5手机网页上实现二维码扫描的功能(不是安卓APP程序开发,是网站web程序)
各位大侠,现在在做微信公共主页开发的时候有一个特别的需求,需要在HTML5手机网页上实现二维码扫描的功能,可以兼容IOS和安卓,我想实现二维码扫描获取一个信息.插入到数据库里面.提交订单的功能.希望大家给我提供一些这方面的资料,我刚刚看了APPscan,不是适合当...
phonegap这种方法我也试了试,让你安装一个第三方软件,然后扫描.这种方法不可行.
我有更好的答案
技术方面不可能实现 html调用不到手机硬件 什么都是浮云看来是新手 断了这个念想呗
采纳率:38%
为您推荐:
其他类似问题
二维码扫描的相关知识
等待您来回答2013年3月 总版技术专家分月排行榜第二
2014年2月 Java大版内专家分月排行榜第一2013年8月 Java大版内专家分月排行榜第一2013年5月 Java大版内专家分月排行榜第一2013年4月 Java大版内专家分月排行榜第一2013年3月 Java大版内专家分月排行榜第一2013年2月 Java大版内专家分月排行榜第一
2015年7月 Web 开发大版内专家分月排行榜第三
本帖子已过去太久远了,不再提供回复功能。

我要回帖

更多关于 html5调用摄像头录像 的文章

 

随机推荐