Add files via upload

Tetsujinfr · Oct 2, 2024 · e111899 · e111899
1 parent db43945
commit e111899
Showing 1 changed file with 114 additions and 0 deletions.
diff --git a/ip_camera.html b/ip_camera.html
@@ -0,0 +1,114 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Smartphone IP Camera</title>
+  <style>
+    body {
+      font-family: Arial, sans-serif;
+      text-align: center;
+    }
+    video {
+      width: 100%;
+      max-width: 600px;
+      height: auto;
+      margin-top: 20px;
+    }
+    #peer-id {
+      word-break: break-all;
+      font-weight: bold;
+    }
+    .section {
+      margin: 20px;
+    }
+    input, button {
+      padding: 10px;
+      font-size: 16px;
+      margin: 5px;
+    }
+  </style>
+</head>
+<body>
+  <h1>Smartphone IP Camera</h1>
+
+  <div class="section">
+    <button id="start-camera">Start Camera</button>
+    <p>Your Camera ID: <span id="peer-id">Not connected</span></p>
+    <video id="local-video" autoplay muted></video>
+  </div>
+
+  <div class="section">
+    <h2>Viewer Connection</h2>
+    <input type="text" id="remote-peer-id" placeholder="Enter Camera ID to view">
+    <button id="connect">Connect</button>
+    <video id="remote-video" autoplay controls></video>
+  </div>
+
+  <!-- Include PeerJS library -->
+  <script src="https://unpkg.com/[email protected]/dist/peerjs.min.js"></script>
+  <script>
+    let localStream;
+    let peer;
+
+    document.getElementById('start-camera').onclick = async () => {
+      try {
+        // Request access to the camera
+        localStream = await navigator.mediaDevices.getUserMedia({ video: true, audio: false });
+        document.getElementById('local-video').srcObject = localStream;
+
+        // Initialize PeerJS
+        peer = new Peer();
+
+        peer.on('open', (id) => {
+          document.getElementById('peer-id').textContent = id;
+          alert('Share this Camera ID with the viewer: ' + id);
+        });
+
+        // Answer incoming calls and stream video
+        peer.on('call', (call) => {
+          call.answer(localStream);
+        });
+
+        peer.on('error', (err) => {
+          console.error(err);
+          alert('An error occurred: ' + err);
+        });
+      } catch (err) {
+        console.error(err);
+        alert('Could not access camera: ' + err);
+      }
+    };
+
+    document.getElementById('connect').onclick = () => {
+      const remotePeerId = document.getElementById('remote-peer-id').value.trim();
+      if (!remotePeerId) {
+        alert('Please enter a valid Camera ID.');
+        return;
+      }
+
+      // Initialize PeerJS if not already initialized
+      if (!peer) {
+        peer = new Peer();
+
+        peer.on('error', (err) => {
+          console.error(err);
+          alert('An error occurred: ' + err);
+        });
+      }
+
+      // Call the remote peer
+      const call = peer.call(remotePeerId, null);
+
+      call.on('stream', (remoteStream) => {
+        document.getElementById('remote-video').srcObject = remoteStream;
+      });
+
+      call.on('error', (err) => {
+        console.error(err);
+        alert('An error occurred during the call: ' + err);
+      });
+    };
+  </script>
+</body>
+</html>
+