<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Monitoramento de Câmeras</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            background-color: #f0f0f0;
        }
        .camera-container {
            margin: 10px;
            border: 1px solid #ccc;
            background-color: #fff;
            border-radius: 5px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            overflow: hidden;
        }
        iframe {
            width: 400px;
            height: 300px;
            border: none;
        }
        h3 {
            text-align: center;
            font-size: 16px;
            margin: 0;
            padding: 5px;
            background-color: #007bff;
            color: white;
        }
    </style>
</head>
<body>
    <script>
       const cameras = [
    { id: "072", url: "https://cameras.santoandre.sp.gov.br/coi02/ID_072", title: "72 - Av. Itamarati, 2000" },
    { id: "074", url: "https://cameras.santoandre.sp.gov.br/coi02/ID_074", title: "74 - Av. dos estados ( Craisa)" },
    { id: "075", url: "https://cameras.santoandre.sp.gov.br/coi02/ID_075", title: "75 - Praça 14 Bis" },
    { id: "081", url: "https://cameras.santoandre.sp.gov.br/coi02/ID_081", title: "81 - Rua Carijós x Av. São Bernardo" },
    { id: "085", url: "https://cameras.santoandre.sp.gov.br/coi02/ID_085", title: "85 - Cesa - Vila Floresta Câm. 03" },
    { id: "086", url: "https://cameras.santoandre.sp.gov.br/coi02/ID_086", title: "86 - Cesa - Vila Floresta Câm. 04" },
    { id: "088", url: "https://cameras.santoandre.sp.gov.br/coi02/ID_088", title: "88 - Rua Oratório X Pres. Costa e Silva" },
    { id: "093", url: "https://cameras.santoandre.sp.gov.br/coi02/ID_093", title: "93 - Av. Preste Maia X FSA" },
    { id: "095", url: "https://cameras.santoandre.sp.gov.br/coi02/ID_095", title: "95 - Rua das Figueiras x Rua Marina" },
    { id: "097", url: "https://cameras.santoandre.sp.gov.br/coi02/ID_097", title: "97 - Av. Atlântica x Av. Lauro Gomes" },
    { id: "100", url: "https://cameras.santoandre.sp.gov.br/coi02/ID_100", title: "100 - Av. Valentim Magalhães 1758" },
    { id: "102", url: "https://cameras.santoandre.sp.gov.br/coi02/ID_102", title: "102 - Av. Itamarati x Av. Antonio Cardoso" },
    { id: "121", url: "https://cameras.santoandre.sp.gov.br/coi02/ID_121", title: "121 - Av. Tietê x Alameda São Caetano" },
    { id: "132", url: "https://cameras.santoandre.sp.gov.br/coi02/ID_132", title: "132 - Rua Antônio Cubas x Rua Catequese" },
    { id: "139", url: "https://cameras.santoandre.sp.gov.br/coi02/ID_139", title: "139 - Av. Dos Estados X Rua Caraguatatuba Câm. 02" },
    { id: "145", url: "https://cameras.santoandre.sp.gov.br/coi02/ID_145", title: "145 - Cesa - Via Sá Câm. 05" },
    { id: "146", url: "https://cameras.santoandre.sp.gov.br/coi02/ID_146", title: "146 - Cesa - Via Sá Câm. 06" },
    { id: "147", url: "https://cameras.santoandre.sp.gov.br/coi02/ID_147", title: "147 - Rua das Figueiras nº 2756" },
    // Cameras do coi02 (já fornecidas antes)
    // Começando do coi03
    { id: "168", url: "https://cameras.santoandre.sp.gov.br/coi03/ID_168", title: "168 - Av. Itamarati, 1150" },
    { id: "187", url: "https://cameras.santoandre.sp.gov.br/coi03/ID_187", title: "187 - Rua Catequese x Rua José Lins do Rego" },
    { id: "188", url: "https://cameras.santoandre.sp.gov.br/coi03/ID_188", title: "188 - Av. Utinga X Rua Itatiba" },
    { id: "189", url: "https://cameras.santoandre.sp.gov.br/coi03/ID_189", title: "189 - Av. Cap. Mário Toledo Camargo x Av. Dom Pedro I" },
    { id: "190", url: "https://cameras.santoandre.sp.gov.br/coi03/ID_190", title: "190 - Av. Brasília 725" },
    { id: "194", url: "https://cameras.santoandre.sp.gov.br/coi03/ID_194", title: "194 - Estrada do Pedroso x Estrada Montanhão" },
    { id: "197", url: "https://cameras.santoandre.sp.gov.br/coi03/ID_197", title: "197 - Av. Dos Estados ( Igreja Bola de Neve)" },
    { id: "198", url: "https://cameras.santoandre.sp.gov.br/coi03/ID_198", title: "198 - Av. Cap. Mario Toledo Frente Estádio Bruno Daniel" },
    { id: "200", url: "https://cameras.santoandre.sp.gov.br/coi03/ID_200", title: "200 - Av. Prof. Luís Ignácio A Mello X Rua João Caetano" },
    { id: "227", url: "https://cameras.santoandre.sp.gov.br/coi03/ID_227", title: "227 - Av. Inconfidência Mineira" },
    { id: "256", url: "https://cameras.santoandre.sp.gov.br/coi03/ID_256", title: "256 - Av. Mico Leão Dourado" },
    { id: "257", url: "https://cameras.santoandre.sp.gov.br/coi03/ID_257", title: "257 - Av. Eduardo Prado X Av. das Nações" },
    { id: "258", url: "https://cameras.santoandre.sp.gov.br/coi03/ID_258", title: "258 - Rua Joaquim Távora x R. Guilherme Marconi" },
    { id: "259", url: "https://cameras.santoandre.sp.gov.br/coi03/ID_259", title: "259 - Rua São Pedro, 333" },
    { id: "261", url: "https://cameras.santoandre.sp.gov.br/coi03/ID_261", title: "261 - Rua André Ramalho X Av. Dos Estados" },
    { id: "271", url: "https://cameras.santoandre.sp.gov.br/coi03/ID_271", title: "271 - Viaduto Antônio Adib Chammas" },
    { id: "272", url: "https://cameras.santoandre.sp.gov.br/coi03/ID_272", title: "272 - Us Pq. Miami" },
    { id: "297", url: "https://cameras.santoandre.sp.gov.br/coi03/ID_297", title: "297 - Cemitério Vertical" },
    { id: "307", url: "https://cameras.santoandre.sp.gov.br/coi03/ID_307", title: "307 - Av. João Ramalho x Tv Nilo" },
    // Começando do coi04
    { id: "551", url: "https://cameras.santoandre.sp.gov.br/coi04/ID_551", title: "551 - TV - 1  Guarará" },
    { id: "552", url: "https://cameras.santoandre.sp.gov.br/coi04/ID_552", title: "552 - TV - 2 Av. Dos Estados" },
    { id: "553", url: "https://cameras.santoandre.sp.gov.br/coi04/ID_553", title: "553 - TV - 3 Rhodia" },
    { id: "554", url: "https://cameras.santoandre.sp.gov.br/coi04/ID_554", title: "554 - TV - 4 Vila América" },
    { id: "555", url: "https://cameras.santoandre.sp.gov.br/coi04/ID_555", title: "555 - Av Lauro Gomes x Rua Grá Bretanha" },
    { id: "556", url: "https://cameras.santoandre.sp.gov.br/coi04/ID_556", title: "556 - TV - 6 Guaixaia" },
    { id: "557", url: "https://cameras.santoandre.sp.gov.br/coi04/ID_557", title: "557 - TV - 7 Mario Toledo" },
    { id: "558", url: "https://cameras.santoandre.sp.gov.br/coi04/ID_558", title: "558 - TV - 8 Rua Erato" },
    { id: "559", url: "https://cameras.santoandre.sp.gov.br/coi04/ID_559", title: "559 - TV - 9 Craisa" },
    { id: "560", url: "https://cameras.santoandre.sp.gov.br/coi04/ID_560", title: "560 - TV - 10 Pirelli" },
    { id: "561", url: "https://cameras.santoandre.sp.gov.br/coi04/ID_561", title: "561 - TV - 11 Bom Pastor I" },
    { id: "562", url: "https://cameras.santoandre.sp.gov.br/coi04/ID_562", title: "562 - TV - 12 Bom Pastor II" },
    { id: "563", url: "https://cameras.santoandre.sp.gov.br/coi04/ID_563", title: "563 - TV - 13 Cassaquera" },
    { id: "564", url: "https://cameras.santoandre.sp.gov.br/coi04/ID_564", title: "564 - TV - 14 Lauro Gomes" },
    { id: "565", url: "https://cameras.santoandre.sp.gov.br/coi04/ID_565", title: "565 - TV - 15 Estádio" },
    { id: "566", url: "https://cameras.santoandre.sp.gov.br/coi04/ID_566", title: "566 - TV - 16 Piscinão Jd. Irene" },
    { id: "567", url: "https://cameras.santoandre.sp.gov.br/coi04/ID_567", title: "567 - TV - 17 AV. DA Paz" },
    { id: "568", url: "https://cameras.santoandre.sp.gov.br/coi04/ID_568", title: "568 - Viaduto Acisa" },
    { id: "570", url: "https://cameras.santoandre.sp.gov.br/coi04/ID_570", title: "570 - Rua Catequese x Av. Dom Pedro II." },
    { id: "571", url: "https://cameras.santoandre.sp.gov.br/coi04/ID_571", title: "571 - Rua das Figueiras x Rua Amazonas" },
    { id: "574", url: "https://cameras.santoandre.sp.gov.br/coi04/ID_574", title: "574 - Praça dos Imigrantes" },
    { id: "576", url: "https://cameras.santoandre.sp.gov.br/coi04/ID_576", title: "576 - Rua Itambé" },
    { id: "578", url: "https://cameras.santoandre.sp.gov.br/coi04/ID_578", title: "578 - Rua Cel. Seabra x Rua Equador" },
    { id: "582", url: "https://cameras.santoandre.sp.gov.br/coi04/ID_582", title: "582 - Av. Dom Pedro II x Av. Prestes Maia" },
    { id: "592", url: "https://cameras.santoandre.sp.gov.br/coi04/ID_592", title: "592 - Av. Giovanni Batista Pirelli, 2050" },
    { id: "596", url: "https://cameras.santoandre.sp.gov.br/coi04/ID_596", title: "596 - Paço Municipal" },
    { id: "597", url: "https://cameras.santoandre.sp.gov.br/coi04/ID_597", title: "597 - Estrada João Ducin x Rua Juquiá" },
    { id: "598", url: "https://cameras.santoandre.sp.gov.br/coi04/ID_598", title: "598 - Praça Quatorze Bis" },
    { id: "599", url: "https://cameras.santoandre.sp.gov.br/coi04/ID_599", title: "599 - Av. dos Estados x Rua Felipe Camarão" },
    { id: "606", url: "https://cameras.santoandre.sp.gov.br/coi04/ID_606", title: "606 - Cel Alfredo Fláquer x Rua Siqueira Campos" },
    { id: "612", url: "https://cameras.santoandre.sp.gov.br/coi04/ID_612", title: "612 - Av. Dom Pedro II x Porto Carrero" },
    { id: "615", url: "https://cameras.santoandre.sp.gov.br/coi04/ID_615", title: "615 - Av.Dom Pedro II X Moncoes" },
    { id: "616", url: "https://cameras.santoandre.sp.gov.br/coi04/ID_616", title: "616 - Rua Oratorio X Suica" },
    { id: "623", url: "https://cameras.santoandre.sp.gov.br/coi04/ID_623", title: "623 - Rua Gertrudes Lima x Av Santos Dumont" },
    { id: "626", url: "https://cameras.santoandre.sp.gov.br/coi04/ID_626", title: "626 - Av.Portugal X Rua Elisa Flaquer" },
    { id: "633", url: "https://cameras.santoandre.sp.gov.br/coi04/ID_633", title: "633 - Av. Dom Pedro II X Av.Tiete" },
    { id: "634", url: "https://cameras.santoandre.sp.gov.br/coi04/ID_634", title: "634 - Praça Eng Roldão x Av. Gilda" },
    { id: "638", url: "https://cameras.santoandre.sp.gov.br/coi04/ID_638", title: "638 - Praça Rui Barbosa" },
    { id: "645", url: "https://cameras.santoandre.sp.gov.br/coi04/ID_645", title: "645 - Av. Portugal X Praca Allan Kardec" },
    { id: "647", url: "https://cameras.santoandre.sp.gov.br/coi04/ID_647", title: "647 - Estrada Pedroso X Rua Missionarios" },
    { id: "648", url: "https://cameras.santoandre.sp.gov.br/coi04/ID_648", title: "648 - Av. Itamarati, nº 2674" },
    { id: "649", url: "https://cameras.santoandre.sp.gov.br/coi04/ID_649", title: "649 - Av. Queiroz Filho X Av. Giovanni Batista Pirelli" },
    { id: "650", url: "https://cameras.santoandre.sp.gov.br/coi04/ID_650", title: "650 - Rua Afonsina x Rua Lauro Muller" },
    { id: "651", url: "https://cameras.santoandre.sp.gov.br/coi04/ID_651", title: "651 - Rua Carijos X Av. Brasilia" },
    { id: "655", url: "https://cameras.santoandre.sp.gov.br/coi04/ID_655", title: "655 - Av. dos Estados x Rua Antonio Cardoso" },
    { id: "657", url: "https://cameras.santoandre.sp.gov.br/coi04/ID_657", title: "657 - Av. Pereira Barreto x Av. Lauro Gomes" },
    { id: "658", url: "https://cameras.santoandre.sp.gov.br/coi04/ID_658", title: "658 - Av. Santos Dumont x Av.Firestone" },
    { id: "659", url: "https://cameras.santoandre.sp.gov.br/coi04/ID_659", title: "659 - Av. Prestes Maia x Fundação Santo André" },
    { id: "663", url: "https://cameras.santoandre.sp.gov.br/coi04/ID_663", title: "663 - Av. XV de Novembro x Av. José Amazonas" },
];

     function getRandomCamera(excludeIds = []) {
    const availableCameras = cameras.filter(camera => !excludeIds.includes(camera.id));
    return availableCameras[Math.floor(Math.random() * availableCameras.length)];
}

function renderCamera(container, camera) {
    container.innerHTML = ""; // Limpa o conteúdo atual do container

    const title = document.createElement("h3");
    title.textContent = camera.title;

    const iframe = document.createElement("iframe");
    iframe.src = camera.url;

    let loaded = false;

    // Detecta quando o iframe é carregado
    iframe.onload = () => {
        loaded = true;
    };

    // Substitui a câmera se o iframe não carregar em 5 segundos
    setTimeout(() => {
        if (!loaded) {
            console.log(`Câmera ${camera.id} não carregou. Substituindo...`);
            const index = cameras.findIndex(cam => cam.id === camera.id);
            if (index !== -1) cameras.splice(index, 1); // Remove da lista de câmeras
            const newCamera = getRandomCamera([camera.id]);
            renderCamera(container, newCamera);
        }
    }, 6000);

    container.appendChild(title);
    container.appendChild(iframe);
}

function renderCameras() {
    document.body.innerHTML = ""; // Limpa o conteúdo atual da página
    const containers = [];

    for (let i = 0; i < 6; i++) {
        const container = document.createElement("div");
        container.className = "camera-container";
        containers.push(container);
        document.body.appendChild(container);
    }

    const randomCameras = [];
    containers.forEach(container => {
        const camera = getRandomCamera(randomCameras.map(c => c.id));
        randomCameras.push(camera);
        renderCamera(container, camera);
    });
}

renderCameras(); // Renderiza as câmeras pela primeira vez
setInterval(renderCameras, 12000); // Atualiza as câmeras a cada 10 segundos
    </script>
</body>
</html>
