server.js
var express=require('express');
var fs=require('fs'); //文件操作
var bodyParser = require('body-parser');
var app=express(); //创建web应用程序
app.use(bodyParser.urlencoded({extended:false}));
app.use(bodyParser.json());
//获取所有数据
app.post("/uploadPics",function(req,res){
var bitmap=new Buffer(req.body.imageData,'base64');
fs.writeFile("./images/"+new Date().getTime()+".jpg",bitmap,function(err){
if(err){
res.send("0");
}else {
res.send("1");
}
res.end();
});
});
//获取user下面的静态文件
app.get("/*",function(req,res){
res.sendFile(__dirname+req.url);
});
app.listen(6666);
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>调用摄像头</title>
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/camera.js"></script>
<style type="text/css">
#camera_errbox {
width: 320px;
height: auto;
border: 1px solid #333333;
padding: 10px;
color: #fff;
text-align: left;
margin: 20px auto;
font-size: 14px;
}
#camera_errbox b {
padding-bottom: 15px;
}
.borderstyle{
-webkit-box-shadow:0 0 5px 3px rgba(255,0,0,.6),0 0 5px 6px rgba(0,182,0,.6),0 0 5px 10px rgba(255,255,0,.6);
-moz-box-shadow:0 0 5px 3px rgba(255,0,0,.6),0 0 5px 6px rgba(0,182,0,.6),0 0 5px 10px rgba(255,255,0,.6);
-ms-box-shadow:0 0 5px 3px rgba(255,0,0,.6),0 0 5px 6px rgba(0,182,0,.6),0 0 5px 10px rgba(255,255,0,.6);
-o-box-shadow:0 0 5px 3px rgba(255,0,0,.6),0 0 5px 6px rgba(0,182,0,.6),0 0 5px 10px rgba(255,255,0,.6);
box-shadow:0 0 5px 3px rgba(255,0,0,.6),0 0 5px 6px rgba(0,182,0,.6),0 0 5px 10px rgba(255,255,0,.6);
}
#navy_video{
float:left;
}
#canvas{
float:left;
margin-left:20px;
}
</style>
</head>
<body onLoad="init(this)" oncontextmenu="return false" onselectstart="return false">
<center>
<video id="navy_video" width="320px" height="240px" autoplay class="borderstyle"></video>
<input id="snap" type="button" value="拍照"/>
<button onclick="convertCanvasToImage()">保存</button>
<div id="camera_errbox">
<b>请点击“允许”按钮，授权网页访问您的摄像头！</b>
<div>若您并未看到任何授权提示，则表示您的浏览器不支持Media Capture或您的机器没有连接摄像头设备。</div>
</div>
<canvas id="canvas" width="160px" height="120px" class="borderstyle"></canvas>
</center>
</body>
</html>
camera.js
function init(t) {
accessLocalWebCam("navy_video");
}
window.URL = window.URL || window.webkitURL || window.msURL || window.oURL;
navigator.getUserMedia = navigator.getUserMedia|| navigator.webkitGetUserMedia || navigator.mozGetUserMedia|| navigator.msGetUserMedia;
function isChromiumVersionLower() {
var ua = navigator.userAgent;
var testChromium = ua
.match(/AppleWebKit\/.* Chrome\/([\d.]+).* Safari\//);
return (testChromium && (parseInt(testChromium[1].split('.')[0]) < 19));
}
function successsCallback(stream) {
document.getElementById('camera_errbox').style.display = 'none';
document.getElementById('navy_video').src = (window.URL && window.URL.createObjectURL) ? window.URL.createObjectURL(stream): stream;
}
function errorCallback(err) {
}
function accessLocalWebCam(id) {
try {
navigator.getUserMedia({
video : true
}, successsCallback, errorCallback);
} catch (err) {
navigator.getUserMedia('video', successsCallback, errorCallback);
}
}
window.addEventListener("DOMContentLoaded", function() {
var canvas = document.getElementById("canvas"), context = canvas
.getContext("2d"), video = document
.getElementById("navy_video"), videoObj = {
"video" : true
}, errBack = function(error) {
console.log("相机调用失败...", 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);
}
document.getElementById("snap").addEventListener("click", function() {
context.drawImage(video, 0, 0,$("#canvas").width(), $("#canvas").height());
});
}, false);
function convertCanvasToImage() {
var pic = document.getElementById("canvas").toDataURL("image/png");
pic = pic.replace(/^data:image\/(png|jpg);base64,/, "")
$.post('uploadPics',{imageData:pic},function(data){
data=parseInt($.trim(data));
if(data==0){
alert("图片上传失败...");
}else{
alert("图片上传成功...");
}
});
}