first commit

asrar211 · Jan 2, 2024 · 65548ad · 65548ad
commit 65548ad
Show file tree

Hide file tree

Showing 3 changed files with 143 additions and 0 deletions.
diff --git a/css/styles.css b/css/styles.css
@@ -0,0 +1,61 @@
+*{
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+.heading{
+    text-align: center;
+    font-weight: 600;
+
+}
+
+button{
+    border: 0;
+    padding: 10px;
+    background: blue;
+    font-size: 1rem;
+    color: #fff;
+    border-radius: 10px;
+}
+.hidden{
+    display: none;
+}
+
+.btns{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+#video{
+    transform: translateX(100%);
+    width: 30%;
+    height: 50%;
+}
+
+@media  screen and (max-width:768px) {
+
+    .results{
+        display: flex;
+        flex-direction: column;
+    }
+    #video{
+        transform: translateX(40%);
+        width: 60%;
+        height: 50%;
+    }
+    #photo{
+        transform: translateX(60%);
+        width: 15rem;
+        height: 50%;
+        margin-top: 10px;
+}
+
+}
+/* #photo{
+        transform: translateX(100%);
+        width: 30%;
+        height: 50%;
+} */
+
diff --git a/index.html b/index.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Geolocation App</title>
+    <link rel="stylesheet" href="css/styles.css">
+</head>
+<body>
+    <div class="container">
+       <div class="heading">
+        <h1>Welcome to the Camera App</h1>
+        <p>Click below to access your camera</p>
+       </div>
+        <div class="btns">
+            <button id="openCameraBtn">Open Camera</button>
+        <button id="takePhotoBtn" class="hidden">Take Photo</button>
+        <canvas id="canvas" class="hidden"></canvas>
+        <button id="switchCameraBtn" class="hidden">Switch Camera</button>
+        </div>
+        <div class="results">
+            <video id="video" autoplay playsinline class="video-container"></video>
+            <img id="photo" src="" alt="Your photo will appear here" class="hidden">
+            <a id="downloadLink" class="hidden">Download Photo</a>
+        </div>
+
+      </div>
+
+    <script src="js/script.js"></script>
+</body>
+</html>
diff --git a/js/script.js b/js/script.js
@@ -0,0 +1,51 @@
+let frontCamera = true; // Flag to track the active camera
+
+const video = document.getElementById('video');
+const openCameraBtn = document.getElementById('openCameraBtn');
+const takePhotoBtn = document.getElementById('takePhotoBtn');
+const canvas = document.getElementById('canvas');
+const photo = document.getElementById('photo');
+const downloadLink = document.getElementById('downloadLink');
+const switchCameraBtn = document.getElementById('switchCameraBtn');
+
+openCameraBtn.addEventListener('click', () => {
+  const constraints = {
+    video: {
+      facingMode: frontCamera ? 'user' : 'environment'
+    }
+  };
+
+  navigator.mediaDevices.getUserMedia(constraints)
+    .then(stream => {
+      video.srcObject = stream;
+      takePhotoBtn.style.display = 'inline'; // Show the take photo button
+      switchCameraBtn.style.display = 'inline'; // Show the switch camera button
+    })
+    .catch(error => {
+      console.error('Error accessing the camera:', error);
+    });
+});
+
+takePhotoBtn.addEventListener('click', () => {
+  const context = canvas.getContext('2d');
+  const width = video.videoWidth;
+  const height = video.videoHeight;
+  canvas.width = width;
+  canvas.height = height;
+
+  context.drawImage(video, 0, 0, width, height);
+
+  // Show the captured photo
+  photo.src = canvas.toDataURL('image/png');
+  photo.style.display = 'inline';
+
+  // Create a download link for the photo
+  downloadLink.href = canvas.toDataURL('image/png');
+  downloadLink.download = 'captured_photo.png';
+  downloadLink.style.display = 'inline';
+});
+
+switchCameraBtn.addEventListener('click', () => {
+  frontCamera = !frontCamera; // Toggle between front and back cameras
+  openCameraBtn.click(); // Reopen the camera with the new facing mode
+});