From f1ce033d5976ccb7ef9d9ed6d69aff02a1d171fc Mon Sep 17 00:00:00 2001
From: Jon <git@jonstarkey.co.uk>
Date: Wed, 29 Apr 2026 22:12:19 +0100
Subject: [PATCH] Single camera PoC

---
 README.md    |  4 +++
 dashcam.html | 72 ++++++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 76 insertions(+)
 create mode 100644 dashcam.html

diff --git a/README.md b/README.md
index e69de29..bb0d5a6 100644
--- a/README.md
+++ b/README.md
@@ -0,0 +1,4 @@
+### WEB DASHCAM
+
+Using web browser extentions its possible to access enough sensor information from an android device to make a rudamentary Dashboard Camera for a motor vehicle. 
+
diff --git a/dashcam.html b/dashcam.html
new file mode 100644
index 0000000..f338ef7
--- /dev/null
+++ b/dashcam.html
@@ -0,0 +1,72 @@
+
+<style>
+* { box-sizing: border-box; margin: 0; padding: 0; }
+body { background: transparent; }
+#app { font-family: var(--font-sans); padding: 1rem 0; }
+#viewfinder { position: relative; width: 100%; aspect-ratio: 16/9; background: #000; border-radius: var(--border-radius-lg); overflow: hidden; }
+video { width: 100%; height: 100%; object-fit: cover; display: block; }
+#overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 8px; }
+#rec-badge { position: absolute; top: 12px; left: 12px; display: flex; align-items: center; gap: 6px; background: rgba(0,0,0,0.5); border-radius: 20px; padding: 4px 10px; color: #fff; font-size: 12px; font-weight: 500; display: none; }
+#rec-dot { width: 8px; height: 8px; border-radius: 50%; background: #e24b4a; animation: blink 1s infinite; }
+@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0.2} }
+#cam-label { position: absolute; bottom: 12px; left: 12px; background: rgba(0,0,0,0.5); border-radius: 20px; padding: 4px 10px; color: #fff; font-size: 12px; }
+#controls { display: flex; align-items: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
+#start-btn { flex: 1; padding: 10px; border-radius: var(--border-radius-md); border: none; background: #1D9E75; color: #fff; font-size: 14px; font-weight: 500; cursor: pointer; }
+#start-btn:hover { background: #0F6E56; }
+#switch-btn { padding: 10px 16px; border-radius: var(--border-radius-md); border: 0.5px solid var(--color-border-secondary); background: var(--color-background-secondary); color: var(--color-text-primary); font-size: 14px; cursor: pointer; }
+#switch-btn:hover { background: var(--color-background-tertiary); }
+#status { font-size: 13px; color: var(--color-text-secondary); margin-top: 8px; }
+#placeholder { color: #888; font-size: 14px; text-align: center; }
+#placeholder-icon { font-size: 36px; margin-bottom: 8px; }
+</style>
+
+<div id="app">
+  <div id="viewfinder">
+    <video id="video" autoplay playsinline muted></video>
+    <div id="overlay">
+      <div id="placeholder">
+        <div id="placeholder-icon">&#128247;</div>
+        <div>Tap "Start camera" to begin</div>
+      </div>
+    </div>
+    <div id="rec-badge"><div id="rec-dot"></div> REC</div>
+    <div id="cam-label" style="display:none"></div>
+  </div>
+
+  <div id="controls">
+    <button id="start-btn" onclick="startCamera()">Start camera</button>
+    <button id="switch-btn" onclick="switchCamera()" disabled>Switch camera</button>
+  </div>
+  <div id="status">No camera active</div>
+</div>
+
+<script>
+let stream = null;
+let facingMode = 'environment';
+
+async function startCamera() {
+  try {
+    if (stream) { stream.getTracks().forEach(t => t.stop()); }
+    stream = await navigator.mediaDevices.getUserMedia({
+      video: { facingMode: facingMode, width: { ideal: 1280 }, height: { ideal: 720 } },
+      audio: false
+    });
+    const video = document.getElementById('video');
+    video.srcObject = stream;
+    document.getElementById('overlay').style.display = 'none';
+    document.getElementById('rec-badge').style.display = 'flex';
+    document.getElementById('cam-label').style.display = 'block';
+    document.getElementById('cam-label').textContent = facingMode === 'environment' ? 'Rear camera' : 'Front camera';
+    document.getElementById('start-btn').textContent = 'Restart';
+    document.getElementById('switch-btn').disabled = false;
+    document.getElementById('status').textContent = facingMode === 'environment' ? 'Rear camera active' : 'Front camera active';
+  } catch(e) {
+    document.getElementById('status').textContent = 'Camera error: ' + e.message;
+  }
+}
+
+function switchCamera() {
+  facingMode = facingMode === 'environment' ? 'user' : 'environment';
+  startCamera();
+}
+</script>