重新加载大量网络摄像头的图片
Reload lot of pictures of webcam
我有一个新的网站项目,我有很多网络摄像头,原始源加载所有秒。
我已经制作了一个网站来收集一个网站上的所有网络摄像头。
我发布了源代码,但没有重新加载,或者没有图片。如果使用时间戳(带有"*.jpg"=XXXXX)、img标记、reload.jpg img而不是时间戳重新加载。
<!DOCTYPE html>
<html lang="fr">
<head>
=D
</head>
<body>
<h1>Cam</h1>
<div id="grille" .col-xs-12 .col-sm-12 .col-md-12>
<ul>
<?php
try {
$bdd = new PDO('mysqlXXXXXXXXXXXX);
}
catch(Exception $e) {
die('Erreur : '.$e->getMessage());
}
$reponse = $bdd->query('SELECT * FROM XXXXXX');
while ($donnees = $reponse->fetch()) {
?>
<li class="img_cams col-xs-12 col-sm-6 col-md-4 col-lg-2">
<img id="<?php echo $donnees['num_cam']; ?>" src="<?php echo $donnees['src']; ?>" alt="<?php echo $donnees['title']; ?>" title="<?php echo $donnees['title']; ?>" />
</li>
<?php
}
$reponse->closeCursor();
?>
</ul>
</div>
<div class="clear"></div>
<script src="bootstrap/jquery.js"></script>
<script src="bootstrap/bootstrap.min.js"></script>
<script type="text/javascript">
<?php
try {
$bdd = new PDO('mysqlXXXXXXXXXXXX);
}
catch(Exception $e) {
die('Erreur : '.$e->getMessage());
}
$reponse = $bdd->query('SELECT * FROM XXXXXX');
while ($donnees = $reponse->fetch()) {
?>
function loadImage(imgID, address) {
document.getElementById(imgID).src=''+address;
}
setInterval(function() {
loadImage("<?php echo $donnees['num_cam']; ?>", "<?php echo $donnees['src']; ?>");
}, 1000);
<?php
}
$reponse->closeCursor();
?>
/* OLD SOURCS OF JS IN EXEMPLE */
/* OK mais pas de refresh
setInterval(function() {
var imgCam = document.getElementById('706'); imgCam.src = 'http://XXXX/rt706/snap_c1.jpg';
var imgCam = document.getElementById('709'); imgCam.src = 'http://XXXX/rt709.jpg';
}, 2000);
*/
/* OK mais blanc
setInterval(function() {
var imgCam = document.getElementById('img_cams');
imgCam.src = 'rt709.jpg?' + Math.random();
}, 2000);
*/
/* OK mais blanc
function refresh() {
var imgCam = document.getElementById("img_cams");
imgCam.src = imgCam.src + 'rt709.jpg?rand=' + Math.random();
}
window.onload = function() {
setInterval(refresh,2000);
};
*/
</script>
</body>
<div id="grille" .col-xs-12 .col-sm-12 .col-md-12>
我相信您打算将其他属性封装在class=""
属性中。
此外,你的问题也不清楚。你是否将网络摄像头的图片(应该被视为与常规图片文件相同)存储在其他地方,或者你是否希望加载用户的网络摄像头(在他们的许可下)并允许他们拍照?
如果你想访问用户的网络摄像头,请查看以下网址:https://www.kirupa.com/html5/accessing_your_webcam_in_html5.htm
以下是他们在网站上提供的代码片段,从根本上讲:
<!DOCTYPE html>
<html>
<body>
<div id="container">
<video autoplay="true" id="videoElement">
</video>
</div>
<script>
var video = document.querySelector("#videoElement");
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia || navigator.oGetUserMedia;
if (navigator.getUserMedia) {
navigator.getUserMedia({video: true}, handleVideo, videoError);
}
function handleVideo(stream) {
video.src = window.URL.createObjectURL(stream);
}
function videoError(e) {
// do something
}
</script>
</body>
</html>
作者:
添加此代码后,请保存HTML文档并预览页面。如果你在支持的浏览器上,你应该在授予浏览器访问权限后看到你的网络摄像头视频流。
相关文章:
- ASP.NET网络摄像头显示
- 如何在OpenERP中实现网络摄像头
- 如何使用默认的网络摄像头拍摄照片并将其保存在我的c#.net web应用程序中
- 获取网络摄像头的纵横比
- 使用网络摄像头或设备摄像头拍摄照片
- 网络摄像头支持野生动物浏览器
- 如何检查用户是否有网络摄像头
- 我的Javascript项目正在访问网络摄像头,但没有显示任何内容
- 使用带有javascript的网络摄像头
- 无法使用我的代码(html/js/css)初始化网络摄像头
- 有没有办法通过网络摄像头直接将二维码扫描到网页中
- 网络摄像头图片作为背景每60秒更新一次
- 重新加载大量网络摄像头的图片
- 如何使用AngularJS获得网络摄像头
- 允许用户通过网络摄像头广播实时流
- 网络摄像头权限请求不适用于本地文件
- 如何从网络摄像头捕获视频并将其上传到服务器
- 网络摄像头未显示在主页上
- 使用getUserMedia后关闭网络摄像头/相机
- 如何使用jpeg_camera JavaScript库时停止网络摄像头