什么代码可以拍照,html调用摄像头拍照
演示地址:HTML5拍照演示
首先,我们看看超文本标记语言代码结构,当然,这部分的数字正射影像图内容应该是在用户允许使用其摄像头事件出发后,动态加载生成的。
注意:我们采用的是640X480的分辨率,如果采用射流研究…动态生成,那么您是可以灵活控制分辨率的。复制代码代码如下:
!-
声明:此差异应该在允许使用网络摄像头,网络摄像头之后动态生成
宽高: 640 *480,当然,可以动态控制啦!
-
!-
理想情况下,在确认
客户端支持视频/摄像机,但为了便于说明
元素,它们是用标记(而不是JavaScript)创建的
-
视频id=视频宽度=640 高度=480 自动播放/视频
按钮id=snap 快照照片/按钮
画布id=canvas 宽度=640 高度= 480 /画布
Java脚本语言
只要上面的超文本标记语言元素创建完成,那么Java脚本语言部分将简单的超乎你想象的简单:复制代码代码如下:
//设置事件监听,DOM内容加载完成,和框架的$.就绪()效果差不多。
窗户。addevent侦听器( DOMContentLoaded ,function() {
//画布元素将用于抓拍
var canvas=文档。getelementbyid( canvas )。
context=canvas.getContext(2d ),
//视频元素,将用于接收并播放摄像头的数据流
视频=文档。getelementbyid( video ),
videoObj={ video: true },
//一个出错的回调函数,在控制台打印出错信息
errBack=函数(错误){
if( object ===窗口的类型。控制台){
console.log(视频捕获错误: ,错误。码);
}
};
//将视频监听器放置到位
//针对标准的浏览器
if(navigator.getUserMedia) { //标准
领航员。getuser media(视频对象,函数(流){
video.src=流
视频。play();
},errBack);
} else if(导航员。WebKit getuser media){//WebKit-前缀
领航员。webkitgetusermedia(视频对象,函数(流){
视频。src=窗口。webkiturl。createobjecturl(流);
视频。play();
},errBack);
}
//对拍照按钮的事件监听
document.getElementById(snap ).addEventListener(click ,function() {
//画到画布上
context.drawImage(视频,0,0,640,480);
});
},假);
最后,记得讲您的网页放到网服务器下面,然后通过超文本传送协议(超文本传输协议的缩写)协议来访问哦。
另外,需要浏览器版本较新,并且支持HTML5的相关新特性才可以。
译者不算称职啦,没有按原文来翻译。使用的浏览器是铬合金28 .
最后,贴上完整的代码,比较呆板。复制代码代码如下:
!声明文档类型
超文本标记语言
头
标题浏览器网络摄像机/标题
meta name= Generator content= edit plus
meta name= Author content= renfufei @ QQ。 com
meta name= Description content=发明人:http://David Walsh . name/browser-camera
脚本
//设置事件监听,DOM内容加载完成,和框架的$.就绪()效果差不多。
窗户。addevent侦听器( DOMContentLoaded ,function() {
//画布元素将用于抓拍
var canvas=文档。getelementbyid( canvas )。
context=canvas.getContext(2d ),
//视频元素,将用于接收并播放摄像头的数据流
视频=文档。getelementbyid( video ),
videoObj={ video: true },
//一个出错的回调函数,在控制台打印出错信息
errBack=函数(错误){
if( object ===窗口的类型。控制台){
console.log(视频捕获错误: ,错误。码);
}
};
//将视频监听器放置到位
//针对标准的浏览器
if(navigator.getUserMedia) { //标准
领航员。getuser media(视频对象,函数(流){
video.src=流
视频。play();
},errBack);
} else if(导航员。WebKit getuser media){//WebKit-前缀
领航员。webkitgetusermedia(视频对象,函数(流){
视频。src=窗口。webkiturl。createobjecturl(流);
视频。play();
},errBack);
}
//对拍照按钮的事件监听
document.getElementById(snap ).addEventListener(click ,function() {
//画到画布上
context.drawImage(视频,0,0,640,480);
});
},假);
/脚本
/头
身体
差异
!-
声明:此差异应该在允许使用网络摄像头,网络摄像头之后动态生成
宽高: 640 *480,当然,可以动态控制啦!
-
!-
理想情况下,在确认
客户端支持视频/摄像机,但为了便于说明
元素,它们是用标记(而不是JavaScript)创建的
-
视频id=视频宽度=640 高度=480 自动播放/视频
按钮id=snap 快照照片/按钮
画布id=canvas 宽度=640 高度= 480 /画布
/div
/body
/html
郑重声明:本文由网友发布,不代表盛行IT的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。