Node.js调用本地摄像头拍摄上传

时间:2023-01-28 14:41:51

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("图片上传成功...");
}
});
}