html5 在线摄像头,HTML5在线摄像头使用
HTML5在线摄像头应用
最近在搞一个考试系统,系统要求要有随机拍照的功能,并且摄像头能够收到js的控制。在线摄像头嘛,就那两种实现的方式:cab或者flash。
暂且不论本人从没学过的flash(事实上我已经做了一个flash调用摄像头的demo,虽然是调用成功了,但是对于拍照部分我实在是无力了,况且还有js控制flash部分的代码更是令人头痛。)。
本来之前本人已经开发了一个摄像头的cab,但是activeX嘛,只能给IE用用,兼容性和稳定性都不是很好。于是现在开始研究基于HTML5的在线摄像头。
首先看效果
Html5大家也渐渐的不那么陌生了,至少也得知道只有少数浏览器能很好的兼容HTML5吧。所以测试环境是Chrome 18以上版本,并且在测试前应开启浏览器的MediaStream:在地址栏输入about:flags,启用MediaStream。
然后就可以开始敲代码了。
不过值得注意的是,HTML5的测试不能再本地直接打开html网页,而是需要在http上访问html页面。直接搭建IIS,apache或者直接通过VS来查看html5页面。
1、 视频流
添加一个Video标签,并调用getUserMedia获得用户的摄像头视频流。
var video = document.getElementById("video");
navigator.getUserMedia= navigator.getUserMedia ||navigator.webkitGetUserMedia;if(navigator.getUserMedia) {if(navigator.webkitURL) {
navigator.getUserMedia("video", function(stream) {
video.src=window.webkitURL.createObjectURL(stream);
},function(error) { alert(error); });
}else{
navigator.getUserMedia("video", function(stream) {
video.src=window.webkitURL.createObjectURL(stream);
},function(error) { alert(error); });
}
}else{
alert("navigator.getUserMedia Error");
}
这样,运行以后便可以直接在网页中调用摄像头了。运行后会提示
2、 拍照
用Canvas捕获Video标签的内容并显示,就做到了拍照的效果。
同样先添加一个canvas标签和一个button按钮
button点击后调用JS,把Video标签中当前的图像显示到canvas中,效果就不做演示了
functionscamera() {var videoElement = document.getElementById('video');var canvasObj = document.getElementById('canvas1');var context1 = canvasObj.getContext('2d');
context1.fillStyle= "#ffffff";
context1.fillRect(0, 0, 320, 240);
context1.drawImage(videoElement,0, 0, 320, 240);//alert("PaiZhaoSuccess");
}
3.上传到服务器
上传到服务器还是用的老办法,把图片转为base64,通过ajax,毫无新意的保存到了服务器上。(需要注意的是,HTML5中toDataURL方法是转为的PNG格式,发送到服务端后会很大一张:320*240的照片要190kb,所以需要在服务器端转格式为jpg,变为10kb一张。详情见demo)
function uploadPhoto()//上传拍照的图片
{
showImgCode();
request=createRequest();if (request == null) {
alert("Unable to create request");
}else{//alert("request.OK");
var base64Data = document.getElementById('textB64').value.replace(/\+/g, "%2B"); //对参数中的+号编码,防止丢失
var url = "AJAX/UploadPic.aspx";
request.open("POST", url, true);
request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
request.onreadystatechange=responses;
request.send("&img=" +base64Data);//alert("send.OK");
}
}functionresponses() {if (request.readyState == 4)//服务器处理结束
{if (request.status == 200)//一切正常
{if (request.responseText == "OK") {
alert("上传成功!");
}else{
alert("上传失败!");
alert(request.responseText);
}
}
}
}
事实上,通过Html5的其他一些方法,甚至可以做出在线PS的功能,不过这些不在我的需求之内,现在也就不深入研究了。
html5 在线摄像头,HTML5在线摄像头使用相关推荐
- html5摄像头 在线演示,基于HTML5实现的超酷摄像头(HTML5 webcam)摄
}); WebRTC可能是来岁最受关心的HTML5标准了,Mozilla为此开辟了一套协帮你节造软件的API,例如,摄像头,麦克风,或者是加快表.你可以或许不依赖其它的插件来调用你需要的本机软件设备. ...
- 基于HTML5实现的超酷摄像头(HTML5 webcam)拍照功能 - photobooth.js
在线演示 下载 WebRTC可能是明年最受关注的HTML5标准了,Mozilla为此开发了一套帮助你控制硬件的API,例如,摄像头,麦克风,或者是加速表.你可以不依赖其它的插件来调用你需要的本机硬件 ...
- html5在线api,HTML5 历史记录API
HTML5 历史记录API HTML5历史记录API的使用方法,在线实例演示HTML5历史记录API如何使用.浏览器的兼容性.语法定义及它的属性值详细资料等. HTML5历史记录API使您可以通过Ja ...
- 基于 HTML5 的 WebGL 自定义 3D 摄像头监控模型
2019独角兽企业重金招聘Python工程师标准>>> 前言 随着视频监控联网系统的不断普及和发展, 网络摄像机更多的应用于监控系统中,尤其是高清时代的来临,更加快了网络摄像机的发展 ...
- ofd转成html,基于HTML5的OFD文件在线显示的方法以及装置与流程
技术特征: 1.一种基于HTML5的OFD文件在线显示的方法,其特征在于:包括如下步骤: 步骤1.服务器端将OFD文件压缩包进行解压,并将解压后得到的OFD文档目录结构映射至HTML5客户端的URL: ...
- html与摄像头怎么链接,HTML5将DSLR连接为网络摄像头(HTML5 connect DSLR as webcam)
HTML5将DSLR连接为网络摄像头(HTML5 connect DSLR as webcam) 最近我在html5中创建了一个应用程序来连接网络摄像头并拍照. 是否有可能使用dslr / slr作为 ...
- 【前端实例代码】Html5+css3+JavaScript创建在线播放架子鼓电子鼓演奏网页效果!前端开发网页设计基础入门教程!超简单~
b站视频演示效果: [前端实例代码]Html5+css3+JavaScript创建在线播放架子鼓电子鼓演奏网页效果!前端开发网页设计基础入门教程!超简单~ 效果图: 完整代码: <!DOCTYP ...
- html5 chrome 摄像头,html5 - 新版chrome不能访问摄像头
html5 - 新版chrome不能访问摄像头 迷茫2017-04-17 12:03:07 0 5 159 PICTURE var video=document.getElementById( ...
- 微信对话在线生成器html5源码
微信对话在线生成器html5源码的软件特点是: 一:操作简单,下载源码后双击 index.html 即可运行,不需要服务器 二:可以设置外观设置,手机状态栏,包括电量.时间.标题.背景等信息 三:可以 ...
- Html5在线小游戏 在线玩压扁小鸟(flyBird)游戏源码
这个源码无需后台上传服务器,直接在线即可使用. 该游戏源码是基于HTML5和JavaScript开发的,运行在浏览器中,使得用户能够方便地进行游戏,而且不需要进行任何安装和下载操作.想要玩游戏的用户只 ...
最新文章
- secureCRT连接问题
- 视频 + PPT | 突破“十面埋伏”,银行业玩转数字化运营
- spring data jpa 官方文档
- 新书速递 | 《知识图谱:方法、实践与应用》
- oracle清理告警日志,Oracle 跟踪/告警/监听日志的清理脚本
- Java深入 - servlet和Spring的DispatcherServlet详解
- win10 mysql5.7.21_win10下mysql5.7.21解压版安装教程
- vue设置列表数据添加
- swagger默认访问路径_spring-boot集成swagger-ui修改默认访问路径
- 简单的angular表单验证指令
- 业务分析系列主题:业务场景
- 使用Canvas绘制简单工程符号(续)
- unity视频教程【高清+精选】大放送
- 集体心智:社会网络拓扑塑造集体认知
- 2020高考数学:常用知识点公式第四章(文科)
- Springboot电子病历管理APP毕业设计源码010350
- JS去除输入文本的所有空格、逗号、换行符等空白字符
- 共享服务中心建设原则-《企业IT架构转型之道-阿里巴巴中台战略思想与架构实战》
- dingdang-robot:一个开源的中文智能音箱项目
- oracle10g精简版配置,oracle 10g 精简版安装步骤分享