最近在搞一个考试系统,系统要求要有随机拍照的功能,并且摄像头能够收到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获得用户的摄像头视频流。
<video id="video" autoplay="" width="320px" height="240px"></video>
<script type="text/javascript">
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");
}
</script>
这样,运行以后便可以直接在网页中调用摄像头了。运行后会提示
2、 拍照
用Canvas捕获Video标签的内容并显示,就做到了拍照的效果。
同样先添加一个canvas标签和一个button按钮
<canvas id="canvas1" width="320" height="240"></canvas>
button点击后调用JS,把Video标签中当前的图像显示到canvas中,效果就不做演示了
function scamera() {
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");
}
}
function responses() {
if (request.readyState == 4)//服务器处理结束
{
if (request.status == 200)//一切正常
{
if (request.responseText == "OK") {
alert("上传成功!");
}
else {
alert("上传失败!");
alert(request.responseText);
}
}
}
}
事实上,通过Html5的其他一些方法,甚至可以做出在线PS的功能,不过这些不在我的需求之内,现在也就不深入研究了。
分享到:
相关推荐
使用html5读取摄像头的例子 请点击“允许”按钮,授权网页访问您的摄像头!若您并未看到任何授权提示,则表示您的浏览器不支持Media Capture或您的机器没有连接摄像头设备。
html页直接查看摄像头视频,内有说明文档。
1)谷歌的发布的Chrome到了21版本后,才新增了一个用于高质量视频音频通讯的getUserMedia API,该API允许Web应用程序访问摄像头和麦克风,其他手机浏览器只有opera支持html5调用本地拍照功能 2)两个浏览器均不支持...
这是一款基于HTML5 Canvas的3D房间模拟动画,房间里有电视机、沙发、书柜、灯具...更重要的是,这款3D动画可以利用HTML5特性读取本地麦克风和摄像头,这样就可以通过摄像头将你自己投影到电视机上,看上去挺神奇的。
其中一个应用接口技术就是getUserMedia API,它能让应用开发者访问用户的摄像头或内置相机。下面就让我展示一下如何通过浏览器来访问你的摄像头,并提取截屏图形。 HTML代码 下面的代码里我写了一部分注释,请阅读:...
应用html5技术进行拍照,可以调用本地摄像头或者调用usb摄像头获取图像,然后进行拍照保存。该例子可供参考,也可以在此基础上做进一步开发。
图片 从计算机网络摄像头拍摄照片的 HTML5 应用程序。 中文: 一个使用网络摄像头制作照片的 HTML5 应用程序。
1、使用jweixin-1.4.0.js实现微信公众号Html5页面调用手机照相机识别二维码 2、核心代码已经给到txt文件中,可以根据需要自行扩充。 3、二维码可以由自己的API生成,应用到很多领域。
今天给大家介绍的是一款HTML5调用本地摄像头,然后识别人体的手掌的动画应用。当HTML5调起本地摄像头后,你只要在镜头前挥动你的双手,摄像头就会自动识别,并且在视频中显示,更厉害的是,它可以精确识别到手指手腕...
斯佩基奥响应式网络摄像头应用程序。 项目名称是意大利语的“镜子”。 在 HTML5、CSS3 和 Javascript 中实现。怎么跑包含一个简单的服务器文件,可以从命令行使用 Python 运行该文件。 这将为localhost:5000提供一个...
Vue摄像头手势让用户仅用一行HTML就可以使用AI,其摄像头和所选手势来控制您的Vue应用程序! 演示和完整文档Vue相机手势让用户仅用一行HTML就能使用AI,相机和他们选择的手势来控制您的Vue应用! 演示和完整文档安装...
项目使用环境以及工具: Eclipse,JDK1.7,struts2,HTML5,Jquery,QRCode HTML5技术支持WebApp在手机上拍照,显示在页面上并上传到...这是手机微博应用中常见的功能,当然你也可以在其它类型应用中适当使用此技术。
您可以轻松地将其作为模块添加到自己的应用程序中。 在台式计算机或移动设备上流式传输网络摄像头在手机上切换后置或前置摄像头拍照并可以下载。现场演示安装使用Git克隆git ...
DFT的matlab源代码HTML5心率监测器 一个html5 + js代码,可使用常见的网络摄像头检测一个人的心律。 在Chromium 45.0.2454.101 Ubuntu 15.04(64位)上进行了测试。 在某些浏览器/操作系统上可能运行缓慢,因为它...
Java虚拟摄像头VCamSDK是适用于Windows的虚拟相机SDK,允许您在无需安装软件的情况下向应用程序添加“虚拟摄像头”功能。 VCamSDK: ://www.e2esoft.com/sdk/vcam-sdk/ VCamSDK包含将虚拟摄像机功能添加到应用程序所...
使用此轻量级库轻松/快速地将 QR 码、条形码和其他常见代码扫描功能集成到您的 Web 应用程序中。带UI的端到端扫描器,集成不到十行代码。一组功能强大的 API,可用于构建 UI,而无需担心相机设置、处理权限、读取...
这个代码是一个基于Web的AI对象检测应用程序,使用了ML5.js和COCO-SSD模型。它可以通过计算机摄像头实时检测视频中的对象,并在屏幕上显示其位置和标签。这种应用程序可用于安全监控、自动化控制和智能家居等领域。 ...
感觉挺有趣的,今天,我们就来研究一下这个功能的原理,不过我们不是用Android来做,而是用HTML5和javascript来做,浏览器支持IE9+。 布局很简单,就是设置一个“拍照”按钮的监听器,调用摄像头video,然后显示...
用于搭建跨平台应用,使用它中以创建出HTML5的本地化应用。 支持传感器,摄像头,获得联系人等功能。。。