您的位置：首页 > Web前端 > JavaScript

js调用本地摄像头截图并用ajax上传至后台服务器完成交互

2017-11-23 15:01 513 查看
下面我来给大家讲述一下如何用js调用本地摄像头，截图并上传，完成交互，一步到位， 我给大家做了一个小示例，亲测有效， 在Chrome 和 Firefox 还有 Edge 和 360 等多数主流浏览器中均能使用，其中经过测试， 这些浏览器在本地运行环境中都没有问题。但是上传到服务器上运行的时候，Firefox 和 Edge依旧是完美运行， 但是在新版Chrome和360中为了保护隐私安全需要为https的安全协议
4000
才能允许打开摄像头。

下面我就直接上代码了。

主要就用到自己写的一个js
videoPort.js
，我会详细说明。

html5页面如下：

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>js调用本地摄像头截图并用ajax上传至后台服务器完成交互</title>
<link rel="stylesheet" href="style.css">
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/videoPort.js"></script>
</head>
<body>
<div class="uploadimg-group">
<img src="" id="uploadimg">
<button class="loadbtn">上传图片</button>
<button class="uploadbtn">发送</button>
</div>
<div class="video_port" id="video_port">
<video id="video" width="400" height="300"></video>
<canvas id="vi_canver" width="400" height="300" hidden></canvas>
<p class="picturebtn">
<button id="screenshots" class="screenshots">截取图像</button>
<span class="myshu"></span>
<button id="close" class="closecamera">关闭摄像头</button>
</p>
</div>
</body>
</html>


videoPort.js如下：

$(document).ready(function(){
// 这里设置一个全局变量， 作为图像base64
var imgdata = null;
$('.loadbtn').click(function(){
jQuery('.video_port').show();
function $(elem) {
return document.querySelector(elem);
};

var canvas = document.getElementById("vi_canver");
var context = canvas.getContext("2d");
var video = $('#video'),
screen = $('#screenshots'),
close = $('#close'),
mediaStream;

//打开摄像头主要用到下面的getUserMedia方法，用来将获取到的媒体流传入video标签中
navigator.mediaDevices.getUserMedia({
video: true
}).then(function(stream) {
// 这里面写成功的回调函数
console.log(stream);
mediaStream = typeof stream.stop === 'function' ? stream : stream.getTracks()[1];
video.src = (window.URL || window.webkitURL).createObjectURL(stream);
video.play();
}).catch(function(error) {
// 这里是失败的回调
console.log(error);
})
// 这里截取图片的原理为截取video画面中的当前帧，然后使用canvas中drawImage方法将内容绘至canvas中
screen.addEventListener('click', function() {
context.drawImage(video, 0, 0, 400, 300);
var type = 'jpeg';
//在这里我直接将canvas中的内容转化为base64格式，传入到需要显示的img中
imgdata = canvas.toDataURL(type)
jQuery("#uploadimg").attr("src",imgdata);
}, false);
// 关闭摄像头
close.addEventListener('click', function() {
mediaStream && mediaStream.stop();
jQuery('.video_port').hide();
}, false);
});

// 这是一个转换base64的一个方法
function convertBase64UrlToBlob(urlData){

var bytes=window.atob(urlData.split(',')[1]);        //去掉url的头，并转换为byte

//处理异常,将ascii码小于0的转换为大于0
var ab = new ArrayBuffer(bytes.length);
var ia = new Uint8Array(ab);
for (var i = 0; i < bytes.length; i++) {
ia[i] = bytes.charCodeAt(i);
}

return new Blob( [ab] , {type : 'image/jpeg'});
}

$('.uploadbtn').click(function(){
//这里用formDate对象向后端传输文件完成交互
var formDate = new FormData();
formDate.append('image', convertBase64UrlToBlob(imgdata));
$.ajax({
type: 'POST',
url: 'url',
data: formDate,
contentType: false,
processData: false,
success: function(data){
alert(data.data);
},
error: function(data){
alert('error');
}
})
})

})


最后再附上最终效果图和css（害羞…..）



*{
margin: 0;
padding:0;
}
body{
background: #999;
}
.video_port{
position: absolute;
top: 0;
left: 0;
display: none;
z-index: 99999;
}
.uploadimg-group{
position: absolute;
top:0;
left: 500px;
width: 402px;
}
.uploadimg-group img{
width:400px;
height:300px;
border:1px solid #e1e1e1;
display: block;
}
.uploadimg-group button{
display: block;
width:100%;
margin-top: 0.83vw;
text-align: center;
color: #fff !important;
line-height: 2.6vw;
height: 2.6vw;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
background: #676b6b;
font-size: 1.25vw;
font-family: "Microsoft JhengHei";
font-weight:bold;
-webkit-transition: 0.3s;
-moz-transition: 0.3s;
-ms-transition: 0.3s;
-o-transition: 0.3s;
transition: 0.3s;
border: 0;
outline: none;
box-shadow: inset 0 0.3rem 0.2rem rgba(255, 255, 255, 0.2), inset 0 -0.3rem 0.2rem rgba(0, 0, 0, 0.2), 0 0.2rem 0.4rem rgba(0, 0, 0, 0.2);
text-shadow: 0 0.05rem rgba(0, 0, 0, 0.8), 0 0.3rem 0.4rem rgba(0, 0, 0, 0.2), 0 -0.2rem 0.4rem rgba(255, 255, 255, 0.2);
cursor: pointer;
}
.uploadimg-group button:hover{
*zoom: 1;
filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FF000000', endColorstr='#FF000000');
background-image: -webkit-gradient(linear, 30% 0%, 30% 100%, color-stop(0%, transparent), color-stop(100%, rgba(0, 0, 0, 0.3)));
background-image: -webkit-linear-gradient(top, transparent 0%, rgba(0, 0, 0, 0.3) 100%);
background-image: -moz-linear-gradient(top, transparent 0%, rgba(0, 0, 0, 0.3) 100%);
background-image: -o-linear-gradient(top, transparent 0%, rgba(0, 0, 0, 0.3) 100%);
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 100%);
}
.picturebtn{
width:100%;
height: 40px;
line-height: 40px;
background: #f2f2f2;
font-size:0;
}
.picturebtn button{
outline: none;
border:0;
background: transparent;
color: #000;
font-size: 0.83vw;
text-align: center;
width:199px;
height:100%;
line-height: 40px;
display: inline-block;
vertical-align: top;
}
.myshu{
display: inline-block;
vertical-align: top;
width:1px;
height: 30px;
margin-top: 5px;
background: #999999;
}
.picturebtn button.screenshots{
background: transparent url(jiequ.png)no-repeat 35px 10.5px;
-webkit-background-size: 23px 19px;
background-size: 23px 19px;
}
.picturebtn button.closecamera{
background: transparent url(closecamera.png)no-repeat 35px 11px;
-webkit-background-size: 23px 19px;
background-size: 23px 19px;
}


这篇文章希望能对大家有帮助。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  ajax 摄像头 javascript html5 canvas
相关文章推荐
新的分享
章节导航