cocomantis · jakaria9001 · Oct 12, 2022
diff --git a/Webcam/README.md b/Webcam/README.md
@@ -0,0 +1,19 @@
+## WebCam :camera:
+Every one of us has a hidden to talent to click selfies. :wink:
+
+Safecamera is an online camera app to click photos and record videos online.  :blush:
+
+The landing page looks like this: 
+
+![HomePage](https://github.com/jakaria9001/WebCam/blob/main/src/assets/output_home.png)
+
+One click away to the most reliable web camera with gallery feature as well as downloadable option. :flushed:
+
+This webcam is 100% secure as it doesnot store any of your data in any remote database, rather the data are store in your [browser database](https://www.tutorialspoint.com/html5/html5_indexeddb.htm) itself, :computer: hence no security issues and no more hustling for perfect webcam. :boom:
+
+Also the images has a real-time filter option to beautify your images using varities of filters provided alogside the camera. :pager:
+
+See live here: https://safecamera.netlify.app/
+
+Lastly, do explore the webcam [here](https://safecamera.netlify.app/) and give this repo a star in case it is useful to you. :raised_hands: </br>
+To contribute to this repo, fork this repo, add your bit and make a [Pull Request](https://docs.github.com/en/github/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/creating-a-pull-request ) to merge your bit. :clap:
diff --git a/Webcam/index.html b/Webcam/index.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="Webcam, Online Webcam, Recording, Online camera, Online camera with filters, Gallery">
+    <title>Click It</title>
+    <link rel="icon" href="/src/assets/logo.png" type="image/icon type">
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+
+    <!-- <video src="C:\Users\jakar\Desktop\Extras\movie.mp4"  type="video/mp4" controls autoplay></video>  -->
+    <div id="video-container">
+        <video autoplay></video>
+    </div>
+    <div class="temp"></div>
+    <div class="filter-container">
+        <div class="filter" style="background-color: #b867dd54;"> </div>
+        <div class="filter" style="background-color: #224d9785;"> </div>
+        <div class="filter" style="background-color: #f1b91f50"> </div>
+        <div class="filter" style="background-color: #48f02e41"> </div>
+        <div class="filter" style="background-color: #0f48e454"> </div>
+        <div class="filter" style="background-color: #e7b1de44"> </div>
+        <div class="filter" > </div>
+
+    </div>
+    <button id="gallery">Gallery</button>
+    <button id="record"> <div></div> </button>
+    <button id="capture"> <div></div> </button>
+    <div class="zoom-container">
+        <div class="zoom-in">+</div>
+        <div class="zoom-out">-</div>
+    </div>
+    <script src="/other_pages/dbScript.js"></script>
+    <script src="script.js"></script>
+    <title>Document</title>
+</head>
+<body>
+    <!-- <video src="C:\Users\jakar\Desktop\Extras\movie.mp4"  type="video/mp4" controls autoplay></video>  -->
+    <video src="" controls autoplay></video>
+    <button id="start">Start</button>
+    <button id="stop">Stop</button>
+</body>
+
+
+</html>
diff --git a/Webcam/other_pages/animations.html b/Webcam/other_pages/animations.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Animate it</title>
+    <link rel="icon" href="icon.png" type="image/icon type">
+    <style>
+        *{
+            box-sizing: border-box;
+        }
+        body{
+            margin: 0;
+        }
+        div{
+            height: 10rem;
+            width: 10rem;
+            background-color: red;
+            animation: moveRight;
+            animation-duration:  5s;
+            animation-fill-mode: forwards;
+            animation-delay: 2s;
+            /* animation-iteration-count: 5; */
+        }
+        @keyframes moveRight{
+            0%{
+                transform: translateX(0);
+            }
+            50%{
+                transform: translateX(80rem);
+                /* transform: translateY(50rem);   */
+            }
+            100%{
+                transform: translateX(40rem);
+            }
+        }
+    </style>
+</head>
+<body>
+    <div></div>
+</body>
+</html>
diff --git a/Webcam/other_pages/anime_ex.html b/Webcam/other_pages/anime_ex.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Animate it</title>
+    <link rel="icon" href="icon.png" type="image/icon type">
+    <style>
+        *{
+            box-sizing: border-box;
+        }
+        body{
+            margin: 0;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            height: 100vh;
+        }
+        div{
+            /* border: 1px solid; */
+            height: 5rem;
+            width: 5rem;
+            border: none;
+            background-color: blue;
+            animation: circulate;
+            animation-duration: 3s;
+            animation-iteration-count: infinite;
+        }
+        @keyframes circulate{
+            0%{
+                transform: translate(0);
+            }
+            50%{
+                transform: translate(0) scale(8) rotate(180deg);
+                border-radius: 50%;
+                background-color: red;
+            }
+            100%{
+                transform: translate(0) scale(1);
+
+            }
+        }
+    </style>
+</head>
+<body>
+    <div></div>
+</body>
+</html>
diff --git a/Webcam/other_pages/canvas.html b/Webcam/other_pages/canvas.html
@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Canvas</title>
+<<<<<<< HEAD
+    <link rel="icon" href="icon.png" type="image/icon type">
+=======
+>>>>>>> e62d485...  Learnt basics of canvas and made a basic architecture of the camera app
+    <style>
+        *{
+            box-sizing: border-box;
+        }
+        body{
+            margin: 0;
+<<<<<<< HEAD
+            /* overflow: hidden; */
+=======
+            overflow: hidden;
+>>>>>>> e62d485...  Learnt basics of canvas and made a basic architecture of the camera app
+        }
+        canvas{
+            background-color: aqua;
+
+        }
+    </style>
+</head>
+<body>
+    <canvas></canvas>
+<<<<<<< HEAD
+    <img src="icon.PNG" alt="background">
+=======
+
+>>>>>>> e62d485...  Learnt basics of canvas and made a basic architecture of the camera app
+    <script>
+        let canvas = document.querySelector("canvas");
+        canvas.width=window.innerWidth;
+        canvas.height = window.innerHeight;
+        let tool = canvas.getContext("2d"); // tool to draw in canva
+<<<<<<< HEAD
+        let image = document.querySelector("img");
+        image.addEventListener("load", ()=>{
+            tool.drawImage(image, 0, 0);
+        })
+        // tool.moveTo(0,0);
+        // tool.lineTo(500, 400);
+        // tool.strokeStyle = "red";
+        // tool.lineWidth = 5;
+        // tool.stroke();
+        // // for new path : 
+        // tool.beginPath();
+        // tool.moveTo(500, 400);
+        // tool.lineTo(900,50)
+        // tool.strokeStyle = "blue";
+        // tool.stroke();
+        // // tool.fillRec : 
+        // tool.beginPath();
+        // // tool.moveTo(500, 500);
+        // tool.fillStyle = "green"
+        // tool.fillRect(1000,200, 300, 300); // parameters :  x, y, height, width
+
+   </script>
+=======
+        tool.moveTo(0,0);
+        tool.lineTo(500, 400);
+        tool.strokeStyle = "red";
+        tool.lineWidth = 5;
+        tool.stroke();
+        // for new path : 
+        tool.beginPath();
+        tool.moveTo(500, 400);
+        tool.lineTo(900,50)
+        tool.strokeStyle = "blue";
+        tool.stroke();
+        // tool.fillRec : 
+        tool.beginPath();
+        // tool.moveTo(500, 500);
+        tool.fillStyle = "green"
+        tool.fillRect(1000,200, 300, 300); // parameters :  x, y, height, width
+    </script>
+>>>>>>> e62d485...  Learnt basics of canvas and made a basic architecture of the camera app
+</body>
+</html>
diff --git a/Webcam/other_pages/dbScript.js b/Webcam/other_pages/dbScript.js
@@ -0,0 +1,101 @@
+
+let req = indexedDB.open("Camera", 1);
+let db;
+let gBody = document.querySelector("body");
+
+req.addEventListener("success", function(){
+    db = req.result;
+
+})
+
+req.addEventListener("upgradeneeded", function(){
+    let accessToBD = req.result;
+    accessToBD.createObjectStore("Gallery", {keyPath: "mId"});
+})
+
+req.addEventListener("error", function(){
+    alert("Error in opening DB");
+})
+
+// called in script.js from index.html
+function addMedia(media, type){ // media = dataUrl for image, blob for video
+    if(!db) return;
+    let obj = {mId: Date.now(), media, type};
+    let tx = db.transaction("Gallery", "readwrite");
+    let gallery = tx.objectStore("Gallery");
+    gallery.add(obj);
+}
+
+// called in gallery.html
+function viewMedia(){
+    if(!db) return;
+
+    let tx = db.transaction("Gallery","readonly");
+    let gallery = tx.objectStore("Gallery");
+    let cReq = gallery.openCursor();
+
+    cReq.addEventListener("success", function(){
+        let cursor = cReq.result;
+        if(cursor){
+            let mo = (cursor.value);
+
+            let div = document.createElement("div");
+            div.classList.add("media-container");
+
+            let linkForDwnload = "";
+            if(mo.type == "video"){
+
+                let url = window.URL.createObjectURL(cursor.value.media);
+                linkForDwnload = url;
+                // render a video tag
+                div.innerHTML = `<div class="media">
+                    <video src="${url}" autoplay loop controls muted></video>
+                    </div>
+                    <button class="download">Download</button>
+                    <button class="delete" data-id="${mo.mId}">Delete</button>` ;
+            }else{
+                linkForDwnload = cursor.value.media;
+                // render an image tag
+                div.innerHTML = `<div class="media">
+                    <img src="${cursor.value.media }" />
+                    </div>
+                    <button class="download">Download</button>
+                    <button class="delete" data-id="${mo.mId}">Delete</button>` ;
+            }
+
+            let dwnldBtn = div.querySelector(".download");
+            dwnldBtn.addEventListener("click", function(){
+                let a = document.createElement("a");
+                a.href = linkForDwnload;
+
+                if(mo.type == "video") 
+                    a.download = "video.mp4";
+                else 
+                    a.download = "image.png";
+                a.click();
+                a.remove(); 
+            }) 
+
+            let deleteBtn  = div.querySelector(".delete");
+            deleteBtn.addEventListener("click", function(e){
+                // removing from DB
+                let id = e.currentTarget.getAttribute("data-id");
+                deleteMedia(id);
+                // removing whole container from UI
+                e.currentTarget.parentElement.remove();
+            })
+            gBody.append(div);
+            cursor.continue();
+        }
+    })
+}
+
+function deleteMedia(id){
+
+    if(!db) return;
+
+    let tx = db.transaction("Gallery", "readwrite");
+    let gallery = tx.objectStore("Gallery");
+
+    gallery.delete(Number(id)); // the id should be in the number form
+}