Размещение нескольких изображений на веб-странице, которые обновляются с помощью API

B.Seabrook спросил: 07 октября 2018 в 02:05 в: javascript

Я пытаюсь создать простую веб-страницу для отображения канала с моих камер, который извлекает неподвижное изображение с камеры через API камеры, а затем повторно захватывает изображение с помощью API (поэтому я могу настроить частоту кадров камер сократить мобильные данные)

Мне удалось создать простой веб-сайт только с одним из дисплеев, но я хочу иметь возможность отображать все 8 моих камер, IP-адреса 192.168.0.157 - 165

Мой текущий код:

<html>
<head>
<script type="text/JavaScript">
var refreshInterval = 1000;
var url1 = "http://192.168.0.157/api/still?passwd=pass&"
var drawDate = true;
var img1;function init() {
    var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");
    img = new Image();
    img.onload = function() {
        canvas.setAttribute("width", img.width)
        canvas.setAttribute("height", img.height)
        context.drawImage(this, 0, 0);
        if(drawDate) {
            var now = new Date();
            var text = now.toLocaleDateString() + " " + now.toLocaleTimeString();
            var maxWidth = 100;
            var x = img.width-10-maxWidth;
            var y = img.height-10;
            context.strokeStyle = 'black';
            context.lineWidth = 2;
            context.strokeText(text, x, y, maxWidth);
            context.fillStyle = 'white';
            context.fillText(text, x, y, maxWidth);
        }
    };
    refresh();
}
function refresh()
{
    img.src = img.src = url1 + "t=" + new Date().getTime();
    setTimeout("refresh()",refreshInterval);
}</script>
<title>Test4</title>
</head>
<body onload="JavaScript:init();">
<canvas id="canvas"/>
</body>
</html>

Заранее спасибо

0 ответов