调用摄像头 拍照
2017-06-16 10:38
183 查看
相关例子： http://www.qdfuns.com/notes/15998/b5ad46a155bf4cec6587cd4871f044c8.html
手机端，电脑端 都支持拍照。 微信端不可以，调用微信的拍照接口。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>take photo</title<
24236
/span>>
<style>
body{background: url("http://img13.360buyimg.com/cms/jfs/t868/250/648027290/292491/5c670a52/5549b7f9N7bc3afed.jpg");}
/*拍照相关组件的样式*/
video,canvas{background-color: rgba(255,255,255,0.6); border: 2px solid #333; border-radius: 10px;}
h1,h2{margin: 20px auto; color: #20cbc9; text-align: center;}
*:focus{
outline: none;
}
#video,#canvas{
margin: 20px auto;
border: 1px solid #000000;
}
#snap{
width: 200px;
height: 80px;
border-radius: 20px;
background-color: greenyellow;
border: none;
margin: 0 auto;
}
#snap,#video,#canvas{
display: block;
}
.filter0{
filter: grayscale(1);
-webkit-filter: grayscale(1);
-moz-filter: grayscale(1);
-o-filter: grayscale(1);
-ms-filter: grayscale(1);
}
.filter1{filter: blur(2px);
-webkit-filter: blur(2px);
-moz-filter: blur(2px);
-o-filter: blur(2px);
-ms-filter: blur(2px);}
.filter2{filter: saturate(3);
-webkit-filter: saturate(3);
-moz-filter: saturate(3);
-o-filter: saturate(3);
-ms-filter: saturate(3);}
.filter3{ filter: sepia(0.5);
-webkit-filter: sepia(0.5);
-moz-filter: sepia(0.5);
-o-filter: sepia(0.5);
-ms-filter: sepia(0.5);}
.filter4{filter: hue-rotate(180deg);
-webkit-filter: hue-rotate(180deg);
-moz-filter: hue-rotate(180deg);
-o-filter: hue-rotate(180deg);
-ms-filter: hue-rotate(180deg);}
.filter5{ filter: invert(1);
-webkit-filter: invert(1);
-moz-filter: invert(1);
-o-filter: invert(1);
-ms-filter: invert(1);}
.filter6{ filter: brightness(50%);
-webkit-filter: brightness(150%);
-moz-filter: brightness(150%);
-o-filter: brightness(150%);
-ms-filter: brightness(150%);}
.filter7{filter: contrast(0.8);
-webkit-filter: contrast(0.8);
-moz-filter: contrast(0.8);
-o-filter: contrast(0.8);
-ms-filter: contrast(0.8);}
.filterall{list-style: none;}
.filterlist{width: 100%; height: 200px; border: 1px solid #333;}
.filterall{width: 990px; height: 200px; list-style: none; margin: 0 auto;}
.filterall li{float: left; margin-right: 10px; cursor: pointer;}
.filterall li p{text-align: center; color: #fff; font-size: 20px;}
</style>
</head>
<body>
<h1>拍照上传</h1>
<video id="video" width="480" height="320" autoplay></video>
<button id="snap">截图</button>
<canvas id="canvas" width="480" height="320"></canvas>
<h2>滤镜列表</h2>
<div class="filterlist">
<ul class="filterall" id="currentlist">
<li><div><img src="http://img10.360buyimg.com/cms/jfs/t1285/221/79857272/6043/163bd730/5549b83fN5b6f14f0.jpg" class="filter0" style="width:100px; height:100px;"></div><p>黑白照</p></li>
<li><div><img src="http://img10.360buyimg.com/cms/jfs/t1285/221/79857272/6043/163bd730/5549b83fN5b6f14f0.jpg" class="filter1" style="width:100px; height:100px;"></div><p>朦胧</p></li>
<li><div><img src="http://img10.360buyimg.com/cms/jfs/t1285/221/79857272/6043/163bd730/5549b83fN5b6f14f0.jpg" class="filter2" style="width:100px; height:100px;"></div><p>饱和</p></li>
<li><div><img src="http://img10.360buyimg.com/cms/jfs/t1285/221/79857272/6043/163bd730/5549b83fN5b6f14f0.jpg" class="filter3" style="width:100px; height:100px;"></div><p>老照片</p></li>
<li><div><img src="http://img10.360buyimg.com/cms/jfs/t1285/221/79857272/6043/163bd730/5549b83fN5b6f14f0.jpg" class="filter4" style="width:100px; height:100px;"></div><p>色相翻转</p></li>
<li><div><img src="http://img10.360buyimg.com/cms/jfs/t1285/221/79857272/6043/163bd730/5549b83fN5b6f14f0.jpg" class="filter5" style="width:100px; height:100px;"></div><p>X光</p></li>
<li><div><img src="http://img10.360buyimg.com/cms/jfs/t1285/221/79857272/6043/163bd730/5549b83fN5b6f14f0.jpg" class="filter6" style="width:100px; height:100px;"></div><p>高亮</p></li>
<li><div><img src="http://img10.360buyimg.com/cms/jfs/t1285/221/79857272/6043/163bd730/5549b83fN5b6f14f0.jpg" class="filter7" style="width:100px; height:100px;"></div><p>均衡感</p></li>
</ul>
</div>
<img src="" width="200" height="200" id="test">
<!--拍照功能需要配合javascript使用-->
<script type="text/javascript">
/**
* Created by Rodger on 2015/2/26.
*/
/*
**这是第一种写法，下面有一种更好的写法
window.addEventListener('DOMContentLoaded',function(){
var canvas=document.getElementById('canvas'),
video=document.getElementById('video'),
context=canvas.getContext('2d'),
videoObj={'video':true},
errBack= function (error) {
console.log('Video capture error:',error.code);
};
if(navigator.getUserMedia){
navigator.getUserMedia(videoObj,function(stream){
video.src=stream;
video.play();
},errBack)
}else if(navigator.webkitGetUserMedia){
navigator.webkitGetUserMedia(videoObj,function(stream){
video.src=window.webkitURL.createObjectURL(stream);
video.play();
},errBack)
}else if(navigator.mozGetUserMedia){
navigator.mozGetUserMedia(videoObj,function(stream){
video.src=window.URL.createObjectURL(stream);
video.play();
},errBack)
};
document.getElementById('snap').addEventListener('click',function(){
context.drawImage(video,0,0,640,480);
})
},false)
*/
//下面的代码比上面的更加简洁和统一
window.addEventListener('DOMContentLoaded',function(){
//获取要控制的DOM对象
var canvas=document.getElementById('canvas'),
context=canvas.getContext('2d'),
video=document.getElementById('video'),
//这是getUserMedia的第一个参数constraints的值
videoObj={'video':true},
errBack=function(error){
console.log('video capture error:',error.code);
}
/*
**这种直接把navigator的各种getUserMedia函数直接赋值给getUserMedia是不行的
*
var getUserMedia=navigator.getUserMedia||navigator.webkitGetUserMedia||navigator.mozGetUserMedia||navigator.msGetUserMedia;
getUserMedia(videoObj,function(localMediaStream){
video.src=window.URL.createObjectURL(localMediaStream);
video.play();
},errBack);
*/
navigator.myGetUserMedia=navigator.getUserMedia||navigator.webkitGetUserMedia||navigator.mozGetUserMedia||navigator.msGetUserMedia;
navigator.myGetUserMedia(videoObj,function(localMediaStream){
/*并不是每个window都有URL对象,要加上浏览器前缀
**video.src=window.URL.createObjectURL(localMediaStream);
* */
window.URL=window.URL||window.webkitURL||window.mozURL||window.msURL;
video.src=window.URL.createObjectURL(localMediaStream);
video.play();
},errBack);
video.onloadedmetadata=function(e){
var snapBtn=document.getElementById('snap');
snapBtn.addEventListener('click',function(){
context.drawImage(video,0,0,480,320);
var image = new Image();
image.src = canvas.toDataURL("image/png");
var testimg=document.getElementById('test');
testimg.src=image.src;
})
};
})
var EventUtil={
addHandler:function(element,type,handler){
if(element.addEventListener){element.addEventListener(type,handler,false);}
else if(element.attachEvent){element.attachEvent("on"+type,handler);}else{element["on"+type]=handler;}
},
removeHandler:function(element,type,handler){
if(element.removeEventListener){element.removeEventListener(type,handler,false);}
else if(element.detachEvent){element.detachEvent("on"+type,handler);}else{element["on"+type]=null;}
},
getEvent:function(event){
return event? event:window.event;
/*获取事件对象*/
},
getTarget:function(event){
return event.target||event.srcElement;
/*获取目标元素*/
},
preventDefault:function(event){
/*取消事件的默认设置*/
if(event.preventDefault){
event.preventDefault();
}else{
event.returnValue=false;
}
},
stopPropagation:function(event){ /*取消事件冒泡*/
if(event.stopPropagation){
event.stopPropagation();
}else{
event.cancelBubble=true;
}
}
};
var currentlist=document.getElementById('currentlist');
EventUtil.addHandler(currentlist,"click",function(e){
var classnames=EventUtil.getTarget(e).className;
var videos=document.getElementById('video');
var can=document.getElementById('canvas');
videos.className=classnames;
can.className=classnames;
});
</script>
</body>
</html>
手机端，电脑端 都支持拍照。 微信端不可以，调用微信的拍照接口。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>take photo</title<
24236
/span>>
<style>
body{background: url("http://img13.360buyimg.com/cms/jfs/t868/250/648027290/292491/5c670a52/5549b7f9N7bc3afed.jpg");}
/*拍照相关组件的样式*/
video,canvas{background-color: rgba(255,255,255,0.6); border: 2px solid #333; border-radius: 10px;}
h1,h2{margin: 20px auto; color: #20cbc9; text-align: center;}
*:focus{
outline: none;
}
#video,#canvas{
margin: 20px auto;
border: 1px solid #000000;
}
#snap{
width: 200px;
height: 80px;
border-radius: 20px;
background-color: greenyellow;
border: none;
margin: 0 auto;
}
#snap,#video,#canvas{
display: block;
}
.filter0{
filter: grayscale(1);
-webkit-filter: grayscale(1);
-moz-filter: grayscale(1);
-o-filter: grayscale(1);
-ms-filter: grayscale(1);
}
.filter1{filter: blur(2px);
-webkit-filter: blur(2px);
-moz-filter: blur(2px);
-o-filter: blur(2px);
-ms-filter: blur(2px);}
.filter2{filter: saturate(3);
-webkit-filter: saturate(3);
-moz-filter: saturate(3);
-o-filter: saturate(3);
-ms-filter: saturate(3);}
.filter3{ filter: sepia(0.5);
-webkit-filter: sepia(0.5);
-moz-filter: sepia(0.5);
-o-filter: sepia(0.5);
-ms-filter: sepia(0.5);}
.filter4{filter: hue-rotate(180deg);
-webkit-filter: hue-rotate(180deg);
-moz-filter: hue-rotate(180deg);
-o-filter: hue-rotate(180deg);
-ms-filter: hue-rotate(180deg);}
.filter5{ filter: invert(1);
-webkit-filter: invert(1);
-moz-filter: invert(1);
-o-filter: invert(1);
-ms-filter: invert(1);}
.filter6{ filter: brightness(50%);
-webkit-filter: brightness(150%);
-moz-filter: brightness(150%);
-o-filter: brightness(150%);
-ms-filter: brightness(150%);}
.filter7{filter: contrast(0.8);
-webkit-filter: contrast(0.8);
-moz-filter: contrast(0.8);
-o-filter: contrast(0.8);
-ms-filter: contrast(0.8);}
.filterall{list-style: none;}
.filterlist{width: 100%; height: 200px; border: 1px solid #333;}
.filterall{width: 990px; height: 200px; list-style: none; margin: 0 auto;}
.filterall li{float: left; margin-right: 10px; cursor: pointer;}
.filterall li p{text-align: center; color: #fff; font-size: 20px;}
</style>
</head>
<body>
<h1>拍照上传</h1>
<video id="video" width="480" height="320" autoplay></video>
<button id="snap">截图</button>
<canvas id="canvas" width="480" height="320"></canvas>
<h2>滤镜列表</h2>
<div class="filterlist">
<ul class="filterall" id="currentlist">
<li><div><img src="http://img10.360buyimg.com/cms/jfs/t1285/221/79857272/6043/163bd730/5549b83fN5b6f14f0.jpg" class="filter0" style="width:100px; height:100px;"></div><p>黑白照</p></li>
<li><div><img src="http://img10.360buyimg.com/cms/jfs/t1285/221/79857272/6043/163bd730/5549b83fN5b6f14f0.jpg" class="filter1" style="width:100px; height:100px;"></div><p>朦胧</p></li>
<li><div><img src="http://img10.360buyimg.com/cms/jfs/t1285/221/79857272/6043/163bd730/5549b83fN5b6f14f0.jpg" class="filter2" style="width:100px; height:100px;"></div><p>饱和</p></li>
<li><div><img src="http://img10.360buyimg.com/cms/jfs/t1285/221/79857272/6043/163bd730/5549b83fN5b6f14f0.jpg" class="filter3" style="width:100px; height:100px;"></div><p>老照片</p></li>
<li><div><img src="http://img10.360buyimg.com/cms/jfs/t1285/221/79857272/6043/163bd730/5549b83fN5b6f14f0.jpg" class="filter4" style="width:100px; height:100px;"></div><p>色相翻转</p></li>
<li><div><img src="http://img10.360buyimg.com/cms/jfs/t1285/221/79857272/6043/163bd730/5549b83fN5b6f14f0.jpg" class="filter5" style="width:100px; height:100px;"></div><p>X光</p></li>
<li><div><img src="http://img10.360buyimg.com/cms/jfs/t1285/221/79857272/6043/163bd730/5549b83fN5b6f14f0.jpg" class="filter6" style="width:100px; height:100px;"></div><p>高亮</p></li>
<li><div><img src="http://img10.360buyimg.com/cms/jfs/t1285/221/79857272/6043/163bd730/5549b83fN5b6f14f0.jpg" class="filter7" style="width:100px; height:100px;"></div><p>均衡感</p></li>
</ul>
</div>
<img src="" width="200" height="200" id="test">
<!--拍照功能需要配合javascript使用-->
<script type="text/javascript">
/**
* Created by Rodger on 2015/2/26.
*/
/*
**这是第一种写法，下面有一种更好的写法
window.addEventListener('DOMContentLoaded',function(){
var canvas=document.getElementById('canvas'),
video=document.getElementById('video'),
context=canvas.getContext('2d'),
videoObj={'video':true},
errBack= function (error) {
console.log('Video capture error:',error.code);
};
if(navigator.getUserMedia){
navigator.getUserMedia(videoObj,function(stream){
video.src=stream;
video.play();
},errBack)
}else if(navigator.webkitGetUserMedia){
navigator.webkitGetUserMedia(videoObj,function(stream){
video.src=window.webkitURL.createObjectURL(stream);
video.play();
},errBack)
}else if(navigator.mozGetUserMedia){
navigator.mozGetUserMedia(videoObj,function(stream){
video.src=window.URL.createObjectURL(stream);
video.play();
},errBack)
};
document.getElementById('snap').addEventListener('click',function(){
context.drawImage(video,0,0,640,480);
})
},false)
*/
//下面的代码比上面的更加简洁和统一
window.addEventListener('DOMContentLoaded',function(){
//获取要控制的DOM对象
var canvas=document.getElementById('canvas'),
context=canvas.getContext('2d'),
video=document.getElementById('video'),
//这是getUserMedia的第一个参数constraints的值
videoObj={'video':true},
errBack=function(error){
console.log('video capture error:',error.code);
}
/*
**这种直接把navigator的各种getUserMedia函数直接赋值给getUserMedia是不行的
*
var getUserMedia=navigator.getUserMedia||navigator.webkitGetUserMedia||navigator.mozGetUserMedia||navigator.msGetUserMedia;
getUserMedia(videoObj,function(localMediaStream){
video.src=window.URL.createObjectURL(localMediaStream);
video.play();
},errBack);
*/
navigator.myGetUserMedia=navigator.getUserMedia||navigator.webkitGetUserMedia||navigator.mozGetUserMedia||navigator.msGetUserMedia;
navigator.myGetUserMedia(videoObj,function(localMediaStream){
/*并不是每个window都有URL对象,要加上浏览器前缀
**video.src=window.URL.createObjectURL(localMediaStream);
* */
window.URL=window.URL||window.webkitURL||window.mozURL||window.msURL;
video.src=window.URL.createObjectURL(localMediaStream);
video.play();
},errBack);
video.onloadedmetadata=function(e){
var snapBtn=document.getElementById('snap');
snapBtn.addEventListener('click',function(){
context.drawImage(video,0,0,480,320);
var image = new Image();
image.src = canvas.toDataURL("image/png");
var testimg=document.getElementById('test');
testimg.src=image.src;
})
};
})
var EventUtil={
addHandler:function(element,type,handler){
if(element.addEventListener){element.addEventListener(type,handler,false);}
else if(element.attachEvent){element.attachEvent("on"+type,handler);}else{element["on"+type]=handler;}
},
removeHandler:function(element,type,handler){
if(element.removeEventListener){element.removeEventListener(type,handler,false);}
else if(element.detachEvent){element.detachEvent("on"+type,handler);}else{element["on"+type]=null;}
},
getEvent:function(event){
return event? event:window.event;
/*获取事件对象*/
},
getTarget:function(event){
return event.target||event.srcElement;
/*获取目标元素*/
},
preventDefault:function(event){
/*取消事件的默认设置*/
if(event.preventDefault){
event.preventDefault();
}else{
event.returnValue=false;
}
},
stopPropagation:function(event){ /*取消事件冒泡*/
if(event.stopPropagation){
event.stopPropagation();
}else{
event.cancelBubble=true;
}
}
};
var currentlist=document.getElementById('currentlist');
EventUtil.addHandler(currentlist,"click",function(e){
var classnames=EventUtil.getTarget(e).className;
var videos=document.getElementById('video');
var can=document.getElementById('canvas');
videos.className=classnames;
can.className=classnames;
});
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 利用html5调用本地摄像头拍照上传图片
- HTML5调用手机摄像头拍照 - getUserMedia.js
- Android调用系统摄像头拍照并显示在ImageView上
- 教你如何用Silverlight调用摄像头和麦克风，拍照，保存照片
- 如何让HTML5调用手机摄像头拍照——实践就是一切
- 《OpenCV》Part2 OpenCV3.1.0调用摄像头显示视频并拍照
- html5调用手机摄像头，实现拍照上传功能
- Android调用系统摄像头拍照并显示在ImageView上
- html5调用摄像头实现拍照
- HTML5调用摄像头实现拍照功能（兼容各大主流浏览器）
- 调用摄像头拍照
- Android从相册选择图片和调用系统摄像头拍照
- C#实现摄像头调用、拍照
- 调用摄像头拍照，剪裁（第一行代码8.3.2）
- 第一行安卓代码——调用摄像头拍照8.3.1
- Android调用摄像头拍照（兼容7.0）
- Windows Mobile 调用摄像头拍照录像
- H5调用手机的摄像头拍照上传以及手机相册选取照片但不支持Android的分析
- Html调用摄像头并拍照
- H5调用手机的摄像头拍照上传以及手机相册选取照片