доступ к вебу в приложении узла очень прост, мы просто нужно использовать метод html5 GetUserMedia(), чтобы сделать это и рассверливанию части очень легко здесь полный код пожалуйста узлом я использую экспресс структуру:
Шаг 1 . Мой файл layout.jade, в котором я доступ к Web Cam
extends layout
block content
div(class="container" id="Cool" ng-app="mainApp" ng-controller="formController")
h2.blue.red#header("property"="pValue") Capture your image from webcam
div.row
div.col-md-6
video#video(autoplay='')
div.col-md-6
canvas#canvas(width='640', height='480')
div
button#snap Capture
button#new New
button(id="upload" ng-click="uploadImage()") Upload
script(type="text/javascript").
// Put event listeners into place
window.addEventListener("DOMContentLoaded", function() {
// Grab elements, create settings, etc.
var canvas = document.getElementById("canvas"),
context = canvas.getContext("2d"),
video = document.getElementById("video"),
videoObj = { "video": true },
errBack = function(error) {
console.log("Video capture error: ", error.code);
};
// Put video listeners into place
if(navigator.getUserMedia) { // Standard
navigator.getUserMedia(videoObj, function(stream) {
video.src = stream;
video.play();
}, errBack);
} else if(navigator.webkitGetUserMedia) { // WebKit-prefixed
navigator.webkitGetUserMedia(videoObj, function(stream){
video.src = window.URL.createObjectURL(stream);
video.play();
}, errBack);
} else if(navigator.mozGetUserMedia) { // WebKit-prefixed
navigator.mozGetUserMedia(videoObj, function(stream){
video.src = window.URL.createObjectURL(stream);
video.play();
}, errBack);
}
// Trigger photo take
document.getElementById("snap").addEventListener("click", function() {
context.drawImage(video, 0, 0, 640, 480);
// Littel effects
//$('#video').fadeOut('slow');
$('#canvas').fadeIn('slow');
//$('#snap').hide();
//$('#new').show();
// Allso show upload button
//$('#upload').show();
});
// Capture New Photo
document.getElementById("new").addEventListener("click", function() {
//$('#video').fadeIn('slow');
//$('#canvas').fadeOut('slow');
//$('#snap').show();
//$('#new').hide();
});
// Upload image to sever
document.getElementById("upload").addEventListener("click", function(){
var dataUrl = canvas.toDataURL();
console.log(dataUrl);
});
}, false);
var mainApp = angular.module("mainApp", []);
mainApp.controller("formController", function($scope, $http) {
$scope.uploadImage = function() {
var request = $http({
method: "post",
url: "/captureImage",
data: {
base64: document.getElementById("canvas").toDataURL()
},
headers: { 'Content-Type': 'application/json' }
});
request.success(function (data) {
console.log(data);
});
request.error(function(serverResponse, status, headers, config) {
alert("failure");
});
};
});
Шаг 2. мои маршруты файл, в котором я вручаю или сохранить свой закачанный файл
router.get('/captureImage', function(req, res, next) {
res.render('captureImage', { title: 'Capture Image and upload' });
});
router.post('/captureImage', function(req, res, next) {
//console.log("FormData "+ req.body.base64);
var base64Data = req.body.base64.replace(/^data:image\/png;base64,/, "");
fs.writeFile("uploads/out.png", base64Data, 'base64', function(err) {
if(err){
console.log(err);
}else{
res.send(JSON.stringify({'status': 1, 'msg': 'Image Uploaded'}));
}
});
});
Для полного учебника, пожалуйста, перейдите по ссылке Accessing WebCam with NodeJS and save click image - TrinityTuts
какая у вас система? если это Linux, попробуйте взглянуть на пример захвата V4L (их много, например http://v4l2spec.bytesex.org/spec/capture-example.html) и создать простой один пользовательский tcp-сервер в C и мультиплексировать/распространять данные/соединения на узле, подключаясь от узла к нему. Другой вариант - использовать телефонную камеру, доступную через wifi. –
Предпочтительно, система - это Windows. Кроме того, ваше предложение на самом деле довольно сложное и займет немного времени, чтобы реализовать, надеялся на что-то более простое :) – Steve
с веб-камерой с сетевым телефоном это действительно просто и os-agnostic –