如何用html的object开启js调用摄像头拍照上传在线拍照

来源：蜘蛛抓取(WebSpider) 时间：2016-11-08 05:46 标签： 摄像头拍照软件
用HTML5打开摄像头
网上很多关于用HTML5打开本地摄像头的文章，但各有瑕疵。根据我自己的亲身体验，我分享一下我用HTML5打开摄像头的经验。废话不多说，直接看代码。HTML代码：HTML 代码&video id=&video& width=&640& height=&480& autoplay&&/video&
&button id=&snap&&Snap Photo&/button&
&canvas id=&canvas& width=&640& height=&480&&&/canvas&接下来是js代码：打开摄像头HTML 代码var aVideo=document.getElementById('video');
var aCanvas=document.getElementById('canvas');
var ctx=aCanvas.getContext('2d');
navigator.getUserMedia
= navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserM//获取媒体对象（这里指摄像头）
navigator.getUserMedia({video:true}, gotStream, noStream);//参数1获取用户打开权限；参数二成功打开后调用，并传一个视频流对象，参数三打开失败后调用，传错误信息
function gotStream(stream) {
video.src = URL.createObjectURL(stream);
video.onerror = function () {
stream.stop();
stream.onended = noS
video.onloadedmetadata = function () {
alert('摄像头成功打开！');
function noStream(err) {
alert(err);
}按钮模拟拍照HTML 代码document.getElementById(&snap&).addEventListener(&click&, function() {
ctx.drawImage(aVideo, 0, 0, 640, 480);//将获取视频绘制在画布上
});这样就成功啦！但是！！！还有一点要注意，这在很多人那里都没有提到的，就是，打开摄像头一定要上server上打开，否则没办法使用！因为打开的是属于网络的webcam，需要在server上打开。目前好像chrome和opera还有大多数移动设备支持HTLM5打开摄像头，我这个是在chrome上测试成功的。还有一点，如果没成功，很可能是你不小心关闭了chrome打开摄像头的权限，你重新启用权限就可以啦！
你要在支持canvas的浏览器上使用，getContext是最基本的接口函数，一半不会出错，还有你代码记得要运行在服务器上。 //：getContext 为什么我复制了 说这个是null //：我以为没加就看得懂的
加了注释咯，有什么疑问可以提 //：如果能加上注释就更好了
我这几天抽空加 //：看不懂 //：我以为没加就看得懂的
getContext 为什么我复制了 说这个是null //：我以为没加就看得懂的
看不懂 //：我以为没加就看得懂的
我以为没加就看得懂的
如果能加上注释就更好了
&& 对不起，我忘记做注释了，希望大家看得懂
50 总笔记数
4.5万 总阅读量
Copyright &
All Rights Reserved.
合作伙伴：基于HTML5实现的超酷摄像头（HTML5 webcam）拍照功能 - phot--一哚女子的博客--凤凰网博客
凤凰博报 由你开始
你确定要删除此博文及其所有评论吗？
基于HTML5实现的超酷摄像头（HTML5 webcam）拍照功能 - phot
　　正在线演示　　WebRTC能够是明年最受存眷的HTML5尺度了，Mozilla为此开发了一套帮忙您控制硬件的API，歧，摄像头，麦克风，大体是加速表。您可以没有依靠此外的插件往调用您需要的本机硬件设备。　　正在今天的那篇文章中，我们将引见往自WolframHempel开发的Photobooth.js，利用阿谁类库可以帮忙您快速的调用摄像头功能，您可以很轻易的加加摄像头功能到网站中。并且快速的帮忙您照相，您可以利用阿谁功能往实现用户的年夜头照拍摄，是没有是十分没有错?　　次要特性：　　相比度设置　　颜色设置　　亮度设置　　色调设置　　照相按钮　　支撑最新的chrome, firefox, opera等浏览器　　支撑jQuery插件体式格式战javascript代码体式格式　　　　利用Chrome打开正在线演示后，请确认许可浏览器调用您的摄像头，以下：　　　　Javascript代码：$(&#39;#webcam&#39;).photobooth().on("image",function(event, dataUrl ){$(&#39;.nopic&#39;).hide(); $( "#pictures").prepend( &#39;<img
ALT="基于HTML5实现的超酷摄像头（HTML5&webcam）照相功能&-&photoboo"
TITLE="基于HTML5实现的超酷摄像头（HTML5&webcam）照相功能&-&photoboo" />&#39;);});　　以上代码将天生的图片数据通报到id=picture的阿谁标签中。具体说明请参考相干API。　　期看大家喜好我们供给的阿谁正在线演示战demo，假如您有任何标题问题，请给我们留行，感激!　　前导发端：基于HTML5实现的超酷摄像头(HTML5 webcam)照相功能 - photobooth.js　日期： 前导发端：更多新型seo妙技，尽正在 成都网站扶植
四川联开经济专建学院
有不一样的发现
<div class="num1_b" id="commend_num_
上一篇&&&&
下一篇&&&&
欢迎您来我的凤凰博客！
博主最近发表的 10 篇博文
凤凰博报微信HTML5调用摄像头实现拍照功能（兼容各大主流浏览器）_词汇网
HTML5调用摄像头实现拍照功能（兼容各大主流浏览器）
责任编辑：词汇网 发表时间： 13:51:37
本人亲测，兼容各大主流浏览器，HTML5太强大了，需要的留下邮箱哦如果想要马上收到，则可到我的资源下载http://download.csdn.net/detail/laijieyao/8169971
上一集:没有了 下一集:
相关文章：&&&&&&
最新添加资讯
24小时热门资讯
附近好友搜索<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
您的访问请求被拒绝 403 Forbidden - ITeye技术社区
您的访问请求被拒绝
亲爱的会员，您的IP地址所在网段被ITeye拒绝服务，这可能是以下两种情况导致：
一、您所在的网段内有网络爬虫大量抓取ITeye网页，为保证其他人流畅的访问ITeye，该网段被ITeye拒绝
二、您通过某个代理服务器访问ITeye网站，该代理服务器被网络爬虫利用，大量抓取ITeye网页
请您点击按钮解除封锁&

我要回帖

更多关于 摄像头拍照软件 的文章

 

随机推荐