Question

我有一个新的网站项目，我有很多网络摄像头，原始资源重新加载所有秒。

我已经建立了一个网站，可以在一个网站上收集所有网络摄像头。

我发布了源代码，但没有重新加载，或者没有图片。如果使用时间戳重新加载（使用＆＃34; *。jpg？= XXXXX），img标记，重新加载.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>

Answer 1

<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文档并预览页面。如果您使用的是受支持的浏览器，则在您获得浏览器访问权限后，您应该会看到您的网络摄像头视频流。

重新加载很多网络摄像头的照片

1 个答案: