{"id":46,"date":"2026-10-10T21:23:51","date_gmt":"2026-10-10T21:23:51","guid":{"rendered":"https:\/\/ferrycam.c2a.com.au\/?page_id=46"},"modified":"2026-10-10T22:29:18","modified_gmt":"2026-10-10T22:29:18","slug":"46-2","status":"publish","type":"page","link":"https:\/\/ferrycam.c2a.com.au\/?page_id=46","title":{"rendered":"Cams"},"content":{"rendered":"\n<div id=\"ferry-cameras\">\n  <h2>Ferry &amp; Queue Live Cameras<\/h2>\n  <p class=\"fc-subtitle\">Settlement and Hibbard live views<\/p>\n\n  <div class=\"fc-grid\">\n    <div class=\"fc-camera\">\n      <h3>Settlement Ferry<\/h3>\n      <video controls=\"\" autoplay=\"\" muted=\"\" playsinline=\"\"><\/video>\n    <\/div>\n    <div class=\"fc-camera\">\n      <h3>Hibbard Ferry<\/h3>\n      <video controls=\"\" autoplay=\"\" muted=\"\" playsinline=\"\"><\/video>\n    <\/div>\n    <div class=\"fc-camera\">\n      <h3>Settlement Queue<\/h3>\n      <video controls=\"\" autoplay=\"\" muted=\"\" playsinline=\"\"><\/video>\n    <\/div>\n    <div class=\"fc-camera\">\n      <h3>Hibbard Queue<\/h3>\n      <video controls=\"\" autoplay=\"\" muted=\"\" playsinline=\"\"><\/video>\n    <\/div>\n  <\/div>\n\n  <p id=\"fc-status\">Connecting to cameras&#8230;<\/p>\n  <button type=\"button\" id=\"fc-reload\">Reload cameras<\/button>\n<\/div>\n\n<style>\n#ferry-cameras {\n  max-width: 1400px;\n  margin: auto;\n  color: #fff;\n  background: #101820;\n  padding: 20px;\n  border-radius: 12px;\n  font-family: system-ui, sans-serif;\n}\n#ferry-cameras h2 { margin: 0; color: #fff; }\n#ferry-cameras .fc-subtitle { color: #c2ced8; }\n#ferry-cameras .fc-grid {\n  display: grid;\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n  gap: 16px;\n}\n#ferry-cameras .fc-camera {\n  min-width: 0;\n  padding: 10px;\n  background: #1b2a36;\n  border-radius: 9px;\n}\n#ferry-cameras h3 {\n  color: #fff;\n  font-size: 17px;\n  margin: 4px 0 12px;\n}\n#ferry-cameras video {\n  display: block;\n  width: 100%;\n  aspect-ratio: 16 \/ 9;\n  object-fit: contain;\n  background: #000;\n}\n#ferry-cameras #fc-status {\n  color: #c2ced8;\n  font-size: 14px;\n}\n#ferry-cameras button {\n  padding: 10px 16px;\n  border: 0;\n  border-radius: 6px;\n  background: #087f8c;\n  color: white;\n  cursor: pointer;\n}\n@media (max-width: 650px) {\n  #ferry-cameras { padding: 12px; }\n  #ferry-cameras .fc-grid { grid-template-columns: 1fr; }\n}\n<\/style>\n\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/hls.js@1\/dist\/hls.min.js\"><\/script>\n<script>\n(function () {\n  const root = document.getElementById('ferry-cameras');\n  if (!root || root.dataset.initialized) return;\n  root.dataset.initialized = '1';\n\n  const urls = [\n  '\/camera-proxy.php?cam=0&file=index.m3u8',\n  '\/camera-proxy.php?cam=1&file=index.m3u8',\n  '\/camera-proxy.php?cam=2&file=index.m3u8',\n  '\/camera-proxy.php?cam=3&file=index.m3u8'\n];\n\n  const videos = root.querySelectorAll('video');\n  const status = root.querySelector('#fc-status');\n  const players = [];\n\n  function loadCameras() {\n    players.forEach(p => { if (p) p.destroy(); });\n    players.length = 0;\n    status.textContent = 'Connecting to cameras...';\n\n    let playing = 0;\n    let failed = 0;\n\n    function update() {\n      status.textContent =\n        playing + ' of 4 cameras playing' +\n        (failed ? ' \u00b7 ' + failed + ' unavailable' : '');\n    }\n\n    videos.forEach((video, i) => {\n      video.pause();\n      video.removeAttribute('src');\n      video.load();\n      video.muted = true;\n      video.onplaying = () => {\n        playing = Array.from(videos).filter(v => !v.paused).length;\n        update();\n      };\n      video.onerror = () => {\n        failed++;\n        status.textContent =\n          'A stream could not load. Check the stream server and browser HTTPS restrictions.';\n      };\n\n      if (video.canPlayType('application\/vnd.apple.mpegurl')) {\n        video.src = urls[i];\n        video.play().catch(() => {});\n      } else if (window.Hls && Hls.isSupported()) {\n        const hls = new Hls();\n        players[i] = hls;\n        hls.loadSource(urls[i]);\n        hls.attachMedia(video);\n        hls.on(Hls.Events.MANIFEST_PARSED, () => {\n          video.play().catch(() => {});\n        });\n        hls.on(Hls.Events.ERROR, (_, data) => {\n          if (data.fatal) {\n            status.textContent =\n              'Stream unavailable. Check HTTPS, CORS and camera server access.';\n          }\n        });\n      } else {\n        status.textContent = 'HLS playback is not supported by this browser.';\n      }\n    });\n  }\n\n  root.querySelector('#fc-reload').addEventListener('click', loadCameras);\n  loadCameras();\n})();\n<\/script>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Ferry &amp; Queue Live Cameras Settlement and Hibbard live views Settlement Ferry Hibbard Ferry Settlement Queue Hibbard Queue Connecting to cameras&#8230; Reload cameras<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-46","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/ferrycam.c2a.com.au\/index.php?rest_route=\/wp\/v2\/pages\/46","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ferrycam.c2a.com.au\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ferrycam.c2a.com.au\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ferrycam.c2a.com.au\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ferrycam.c2a.com.au\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=46"}],"version-history":[{"count":4,"href":"https:\/\/ferrycam.c2a.com.au\/index.php?rest_route=\/wp\/v2\/pages\/46\/revisions"}],"predecessor-version":[{"id":50,"href":"https:\/\/ferrycam.c2a.com.au\/index.php?rest_route=\/wp\/v2\/pages\/46\/revisions\/50"}],"wp:attachment":[{"href":"https:\/\/ferrycam.c2a.com.au\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=46"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}