‘壹’ javaWeb开发中怎么调用局域网中的摄像头监控图像
这是一个积极的解决方案。 。 。 。
监控系统要与网页打开操作兼容。
如果不兼容，打我也没办法，您使用该软件，如果他们支持这一呼吁，应该把它写下来。并写出详细的方法调用，提供一个直接来源或网页。
你监视哪些端口？摄像头么。 。
制造商并不傻X，有一种方法来调用网页时，他们一定会立即释放。 。 。
LZ，甚至束手无策。 。 。 。
‘贰’ HTML5怎样在网页中使用摄像头功能
HTML5技术支持WebApp在手机上拍照，显示在页面上并上传到服务器。这是手机微博应用中常见的功能，当然你也可以在其它类型应用中适当使用此技术。 1、 视频流 HTML5 的 The Media Capture（媒体捕捉） API 提供了对摄像头的可编程访问，用户可以
‘叁’ html5或者JS怎样调用手机摄像头或者相册
你给的网页用的是 <input accept="image/*" type="file">，在IOS端点击时会提示选择图片或相机，安卓端要看浏览器对这两个属性的优化，部分浏览器会直接跳转到资源管理器，优化做得好的可以直接提示选择相册或相机。
‘肆’ 如何使用jquery webcam 调用摄像头
jQueryWebcam这个插件为直接在JavaScript中与摄像头通信提供了一个透明的访问层。它通一个SW文件与摄像头交互，可以显示Webcam输出和捕捉图象。如果有多个摄像头，它可以显示可用的摄像头列表，然后供用户选择其中任意一个。
一、jQuery Webcam介绍
jQuery的摄像头插件是一个透明层，用相机直接在JavaScript中的沟通。
这个插件提供了三种不同的模式，通过一个小的接入网络摄像头应用程序接口直接与JavaScript
-或者更准确地说是jQuery。因此，它是可能带来的图像在画布上（回调模式），存储图像在服务器（保存模式）和流的Flash元素的实况图像画布上（流模式）。
二、jQuery Webcam使用方法
简单调用
$("#camera").webcam({
width: 320,
height: 240,
mode: "callback",
swffile: "/download/jscam_canvas_only.swf",
onTick: function() {},
onSave: function() {},
onCapture: function() {},
debug: function() {},
onLoad: function() {}
});
参数说明
windth：flash文件的宽度
height：flash文件的高度
mode：储存模式：callback, save, stream
swffile：flash文件的地址
拍照
调用webcam.capture();方法实现拍照。
保存照片
webcam.save();方法实现保存照片，简单调用里面的onSave参数是保存照片的方法，接收一个函数为照片
var canvas = document.createElement("canvas");
canvas.setAttribute('width', 320);
canvas.setAttribute('height', 240);
if (canvas.toDataURL) {
ctx = canvas.getContext("2d");
image = ctx.getImageData(0, 0, 320, 240);
saveCB = function(data) {
var col = data.split(";");
var img = image;
for(var i = 0; i < 320; i++) {
var tmp = parseInt(col[i]);
img.data[pos + 0] = (tmp >> 16) & 0xff;
img.data[pos + 1] = (tmp >> 8) & 0xff;
img.data[pos + 2] = tmp & 0xff;
img.data[pos + 3] = 0xff;
pos+= 4;
}
if (pos >= 4 * 320 * 240) {
ctx.putImageData(img, 0, 0);
$.post("/author/uedsc?page=avatar", {type: "data", image: canvas.toDataURL("image/jpeg")}, function(){
location.reload();
});
pos = 0;
}
};
} else {
saveCB = function(data) {
image.push(data);
pos+= 4 * 320;
if (pos >= 4 * 320 * 240) {
$.post("/author/uedsc?page=avatar", {type: "data", image: image.join('|')}, function(){
location.reload();
});
pos = 0;
}
};
}
以上是官方的例子，创建一个canvas来保存图片，然后上传到服务端。
‘伍’ 手机网页（html5） 如何调用手机的摄像头和相册
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>web RTC 测试</title>
<style>
.booth {
width:400px;
background:#ccc;
border: 10px solid #ddd;
margin: 0 auto;
}
</style>
</head>
<body>
<div>
<video id="video" width="400" height="300"></video>
<button id='tack'> snap shot</button>
<canvas id='canvas' width='400' height='300'></canvas>
<img id='img' src=''>
</div>
<script>
var video = document.getElementById('video'),
canvas = document.getElementById('canvas'),
snap = document.getElementById('tack'),
img = document.getElementById('img'),
vendorUrl = window.URL || window.webkitURL;
//媒体对象
navigator.getMedia = navigator.getUserMedia ||
navagator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia;
navigator.getMedia({
video: true, //使用摄像头对象
audio: false //不适用音频
}, function(strem){
console.log(strem);
video.src = vendorUrl.createObjectURL(strem);
video.play();
}, function(error) {
//error.code
console.log(error);
});
snap.addEventListener('click', function(){
//绘制canvas图形
canvas.getContext('2d').drawImage(video, 0, 0, 400, 300);
//把canvas图像转为img图片
img.src = canvas.toDataURL("image/png");
})
</script>
</body>
</html>
‘陆’ 如何在网页中调用摄像头进行摄像
使用Applet
摄像头需要客户端有JMF(Java Media Frame Work)
录音的话使用javax.sound.sampled包
‘柒’ 如何通过html5调用摄像头拍照
1. 项目背景
网站项目基于HTML5+AngularJs开发，正在做一个由HTML5调用摄像头拍照，从而实现修改头像的功能。起初觉得HTML5拍照很简单，但是做的时候才发现HTML5获取摄像头并不是那么容易。
2. 如何调用摄像头
$scope.photoErr = false;
$scope.photoBtnDiable = true;
var mediaStream = null,track = null;
navigator.getMedia = (navigator.getUserMedia ||
navigator.webkitGetUserMedia || navigator.mozGetUserMedia ||
navigator.msGetUserMedia);
if (navigator.getMedia) {
navigator.getMedia(
{
video: true
},
// successCallback
function (stream) {
var s = window.URL.createObjectURL(stream);
var video = document.getElementById('video');
video.src = window.URL.createObjectURL(stream);
mediaStream = stream;
track = stream.getTracks()[0];
$scope.photoBtnDiable = false; $scope.$apply();
},
// errorCallback
function (err) {
$scope.errorPhoto();
console.log("The following error occured:" + err);
});
} else {
$scope.errorPhoto();
}
代码解析：
navigator为浏览器对象，包含浏览器的信息，这里就是用这个对象打开摄像头。$scope为AnlarJs语法。第一步声明navigator.getMedia来调用浏览器不同的打开摄像头函数，目前仅有getUserMedia、webkitGetUserMedia、mozGetUserMedia、msGetUserMedia四种方式分别对应通用浏览器、Google浏览器、火狐浏览器和IE浏览器，浏览器会自动判断调用哪一个函数。第二步是调用打开浏览器，包含三个参数，分别为需要使用的多媒体类型、获取成功返回的流数据处理函数以及操作失败返回错误消息处理函数。其中，使用时不仅可以设置视频还能设置使用麦克风，设置方式为：
{
video: true，
audio: true
}
调用成功即打开摄像头后返回视频流数据，我们可以将流数据设置到video标签在界面上实时显示图像。mediaStream用来记录获取到的流数据，track在Chrome浏览器中用来跟踪摄像头状态，这两个变量都能用来关闭摄像头。
3. 拍照
$scope.snap = function () {
var canvas = document.createElement('canvas');
canvas.width = "400";
canvas.height = "304";
var ctx = canvas.getContext('2d');
ctx.drawImage(video, 0, 0, 400, 304);
$scope.closeCamera();
$uibModalInstance.close(canvas.toDataURL("image/png"));
};
拍照时需要使用到canvas标签，创建一个canvas标签，设置我们需要拍照的尺寸大小，通过drawImage函数将video当前的图像保存到canvas标签，最后将图像数据转换为base64数据返回并关闭摄像头，这样就完成了我们的拍照功能。这里的$uibModalInstance对象是我们项目中打开弹出层的一个对象，用来控制弹出层的显示。
4. 如何关闭摄像头
$scope.closeCamera = function () {
if (mediaStream != null) {
if (mediaStream.stop) {
mediaStream.stop();
}
$scope.videosrc = "";
}
if (track != null) {
if (track.stop) {
track.stop();
}
}
}
正如前面所说，关闭摄像头的方式是通过mediaStream和track变量，只不过，track只能关闭Chrome浏览器中的摄像头，这也是Chrome 45版本以上关闭摄像头的方式。
5. 集成到AnlarJs
事实上，前面所说的都是在AnlarJs中实现的，当然，这里只是实现了拍照并返回拍照数据，我们想要在其他地方也使用，就需要将这部分独立出来，这里我们用到了AngularJs中的service机制，将这部分单独做成一个service并在项目中注入，然后就可以在其他地方调用了。
service注册:
app().registerService("h5TakePhotoService", function ($q, $uibModal) {
this.photo = function () {
var deferred = $q.defer();
require([config.server + "/com/controllers/photo.js"], function () {
$uibModal.open({
templateUrl: config.server + "/com/views/modal_take_photo.html",
controller: "photoModalController",
windowClass: "modal-photo"
}).result.then(function (e) {
deferred.resolve(e);
});
});
return deferred.promise;
}
});
调用方式：
$scope.takePhoto = function () {
h5TakePhotoService.photo().then(function (res) {
if (res != null && res != "") {
$scope.myImage = res;
}
});
}
h5TakePhotoService为控制器中注入的拍照service对象，最后处理返回的图像数据，设置数据显示到界面上。
6. 兼容问题
主要存在Chrome浏览器中，本地测试时，Chrome浏览器中能够正常使用，但是部署到服务器后就不能正常使用，报错消息为 [object NavigatorUserMediaError]，这是因为Chrome浏览器在使用摄像头时只支持安全源访问，所以只能通过https访问才能正常使用。
最后需要说一下，测试时只能通过http://url访问才能使用，不能通过file://url方式访问，即我们需要将代码部署才能访问，可以在Visual Studio、 java web、php中完成。
‘捌’ 手机web页面怎么调用摄像头执行扫描，获取数据
HTML5技术支持WebApp在手机上拍照，显示在页面上并上传到服务器。这是手机微博应用中常见的功能，当然你也可以在其它类型应用中适当使用此技术。
1、 视频流
HTML5 的 The Media Capture（媒体捕捉） API 提供了对摄像头的可编程访问，用户可以直接用 getUserMedia（请注意目前仅Chrome和Opera支持）获得摄像头提供的视频流。我们需要做的是添加一个HTML5 的 Video 标签，并将从摄像头获得的视频作为这个标签的输入来源。
<video id=”video” autoplay=”"></video>
<script>
var video_element=document.getElementById(‘video’);
if(navigator.getUserMedia){ // opera应使用opera.getUserMedianow
navigator.getUserMedia(‘video’,success,error); //success是回调函数,当然你也可以直接在此写一个匿名函数
}
function success(stream){
video_element.src=stream;
}
</script>
此时，video 标签内将显示动态的摄像视频流。下面需要进行拍照了。
2、 拍照
拍照是采用HTML5的Canvas功能，实时捕获Video标签的内容，因为Video元素可以作为Canvas图像的输入，所以这一点很好实现。主要代码如下：
var canvas=document.createElement(‘canvas’); //动态创建画布对象
var ctx=canvas.getContext(’2d’);
var cw=vw,ch=vh;
ctx.fillStyle=”#ffffff”;
ctx.fillRect(0,0,cw,ch);
ctx.drawImage(video_element,0,0,cw,ch,0,0,vw,vh); //将video对象内指定的区域捕捉绘制到画布上指定的区域，可进行不等大不等位的绘制。
document.body.append(canvas);
3、 图片获取
从Canvas获取图片数据的核心思路是用canvas的toDataURL将Canvas的数据转换为base64位编码的PNG图像，类似于“data:image/png;base64,xxxxx”的格式。
var imgData=canvas.toDataURL(“image/png”);
这样，imgData变量就存储了一长串的字符数据内容，表示的就是一个PNG图像的base64编码。因为真正的图像数据是base64编码逗号之后的部分，所以要让实际服务器接收的图像数据应该是这部分，我们可以用两种办法来获取。
第一种：是在前端截取22位以后的字符串作为图像数据，例如：
var data=imgData.substr(22);
如果要在上传前获取图片的大小，可以使用：
var length=atob(data).length; //atob 可解码用base-64解码的字串
第二种：是在后端获取传输的数据后用后台语言截取22位以后的字符串（也就是在前台略过上面这步直接上传）。例如PHP里：
$image=base64_decode(str_replace(‘data:image/jpeg;base64,’,”,$data);
4、 图片上传
在前端可以使用Ajax将上面获得的图片数据上传到后台脚本。例如使用jQuery时可以用：
$.post(‘upload.php’,{‘data’:data});
在后台我们用PHP脚本接收数据并存储为图片。
function convert_data($data){
$image=base64_decode(str_replace(‘data:image/jpeg;base64,’,”,$data);
save_to_file($image);
}
function save_to_file($image){
$fp=fopen($filename,’w');
fwrite($fp,$image);
fclose($fp);
}
‘玖’ 如何通过WEB来控制摄像头
监控系统？
现在很多硬盘录像机都是带网络功能的，云台可以通过网络来调角度。
有些视频采集卡也有带网络功能。
监控设备上一般都有教你怎么安装设置的，很简单的。
别人有杀毒软件的，你就别想了。这么容易你可以非法调用别人的摄像头，那么别人是不是可以更容易的找到破解方法？这么容易的破解方法杀毒会做不到？
‘拾’ Hbuilder web页面在手机里能调用摄像头吗
如果是在手机端用浏览器运行的那种，那还是web只不过是在移动端运行，这种不能调用摄像头。
如果开发的的webApp打包成的APP，是可以调用的。
Hbuilder打包有两种，一种源生APP一种webApp