Add files via upload

fl2on · Jan 13, 2024 · 491e6e7 · 491e6e7
1 parent 7c8c7b4
commit 491e6e7
Show file tree

Hide file tree

Showing 3 changed files with 157 additions and 83 deletions.
diff --git a/css/style.css b/css/style.css
@@ -17,6 +17,7 @@ body {
     width: 100%;
     height: 100%;
     background-color: rgba(0, 0, 0, 0.4);
+    -webkit-backdrop-filter: blur(5px);
     backdrop-filter: blur(5px);
 }
 
@@ -83,8 +84,41 @@ button:hover {
 
 video {
     width: 100%;
-    border-radius: 5px;
-    margin-top: 20px;
     max-width: 100%;
     height: auto;
+    max-height: calc(100vh - 150px);
+    border-radius: 5px;
+    margin-top: 20px;
 }
+
+.video-container {
+    position: relative;
+    overflow: hidden;
+    width: 100%;
+    padding-top: 53%;
+}
+
+.video-container video {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.form-group {
+    margin-bottom: 10px;
+}
+
+.notification {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    padding: 5px;
+    background-color: rgba(0, 0, 0, 0.6);
+    color: #ffffff;
+    border-radius: 3px;
+    box-shadow: 0 1px 2px rgba(255, 255, 255, 0.1);
+    font-size: 0.8rem;
+}
diff --git a/index.html b/index.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
    <head>
+      <title>PixelCorder</title>
       <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap">
       <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
       <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css">
@@ -11,7 +12,7 @@
       <meta name="description" content="Capture and download your screen recording with ease.">
       <!-- Open Graph (OG) meta tags -->
       <meta property="og:title" content="PixelCorder">
-      <meta property="og:description" content="Capture and download your screen recording with ease. Copyright © 2024 qzxtu">
+      <meta property="og:description" content="Capture and download your screen recording with ease.">
       <meta property="og:type" content="website">
       <meta property="og:url" content="https://qzxtu.github.io/PixelCorder/">
       <meta property="og:image" content="images/icon.png">
@@ -71,7 +72,12 @@ <h1>PixelCorder</h1>
             <button id="stopButton" disabled>Stop</button>
             <button id="downloadButton" disabled>Download</button>
          </div>
+		 <div class="video-container">
          <video id="recordedVideo" controls></video>
+		 </div>
+		 <div id="notification" class="notification hidden">
+            <p id="notificationText"></p>
+         </div>
       </div>
       <!-- Main JS -->
       <script src="js/main.js"></script>

diff --git a/js/main.js b/js/main.js
@@ -1,62 +1,80 @@
-    const $startButton = document.getElementById('startButton');
-    const $pauseButton = document.getElementById('pauseButton');
-    const $stopButton = document.getElementById('stopButton');
-    const $downloadButton = document.getElementById('downloadButton');
-    const $resolutionSelect = document.getElementById('resolution');
-    const $formatSelect = document.getElementById('format');
-    const $qualitySelect = document.getElementById('quality');
-    const $recordedVideo = document.getElementById('recordedVideo');
-
-    let mediaRecorder;
-    let recordedChunks = [];
-
-    $startButton.addEventListener('click', startRecording);
-    $pauseButton.addEventListener('click', pauseRecording);
-    $stopButton.addEventListener('click', stopRecording);
-    $downloadButton.addEventListener('click', downloadVideo);
-
-    async function startRecording() {
-        try {
-            const resolution = $resolutionSelect.value.split('x');
-            const media = await navigator.mediaDevices.getDisplayMedia({
-                video: {
-                    width: {
-                        ideal: resolution[0]
-                    },
-                    height: {
-                        ideal: resolution[1]
-                    },
-                    frameRate: {
-                        ideal: parseInt($qualitySelect.value, 10)
-                    }
+const $startButton = document.getElementById('startButton');
+const $pauseButton = document.getElementById('pauseButton');
+const $stopButton = document.getElementById('stopButton');
+const $downloadButton = document.getElementById('downloadButton');
+const $resolutionSelect = document.getElementById('resolution');
+const $formatSelect = document.getElementById('format');
+const $qualitySelect = document.getElementById('quality');
+const $recordedVideo = document.getElementById('recordedVideo');
+const $notification = document.getElementById('notification');
+const $notificationText = document.getElementById('notificationText');
+
+let mediaRecorder;
+let recordedChunks = [];
+let isRecording = false;
+
+$startButton.addEventListener('click', startRecording);
+$pauseButton.addEventListener('click', pauseRecording);
+$stopButton.addEventListener('click', stopRecording);
+$downloadButton.addEventListener('click', downloadVideo);
+
+let isFirstTime = true;
+
+async function startRecording() {
+    try {
+        const resolution = $resolutionSelect.value.split('x');
+        const media = await navigator.mediaDevices.getDisplayMedia({
+            video: {
+                width: {
+                    ideal: parseInt(resolution[0], 10)
                 },
-                audio: {
-                    echoCancellation: true
+                height: {
+                    ideal: parseInt(resolution[1], 10)
+                },
+                frameRate: {
+                    ideal: parseInt($qualitySelect.value, 10)
                 }
-            });
+            },
+            audio: {
+                echoCancellation: true
+            }
+        });
 
-            mediaRecorder = new MediaRecorder(media, {
-                mimeType: $formatSelect.value
-            });
-            recordedChunks = [];
+        mediaRecorder = new MediaRecorder(media, {
+            mimeType: $formatSelect.value
+        });
+        recordedChunks = [];
 
-            mediaRecorder.ondataavailable = handleDataAvailable;
-            mediaRecorder.onstop = handleStop;
+        mediaRecorder.ondataavailable = handleDataAvailable;
+        mediaRecorder.onstop = handleRecordingStop;
 
-            const [videoTrack] = media.getVideoTracks();
-            videoTrack.addEventListener("ended", () => handleRecordingEnd(mediaRecorder));
+        const [videoTrack] = media.getVideoTracks();
+        videoTrack.addEventListener("ended", handleRecordingEnd);
 
-            $pauseButton.disabled = false;
-            $stopButton.disabled = false;
-            $downloadButton.disabled = true;
+        $pauseButton.disabled = false;
+        $stopButton.disabled = false;
+        $downloadButton.disabled = true;
 
-            mediaRecorder.start();
-        } catch (error) {
-            console.error('Error obtaining screen:', error);
+        mediaRecorder.start();
+
+        await new Promise(resolve => setTimeout(resolve, 1000));
+
+        if (isFirstTime) {
+            if ($notification) {
+                $notificationText.textContent = 'Press the Stop button on the interface to view the video.';
+                $notification.classList.remove('hidden');
+            }
+            isFirstTime = false;
         }
+
+        isRecording = true;
+    } catch (error) {
+        console.error('Error obtaining screen:', error);
     }
+}
 
-    function pauseRecording() {
+function pauseRecording() {
+    if (mediaRecorder && (mediaRecorder.state === 'recording' || mediaRecorder.state === 'paused')) {
         if (mediaRecorder.state === 'recording') {
             mediaRecorder.pause();
             $pauseButton.textContent = 'Resume';
@@ -65,45 +83,61 @@
             $pauseButton.textContent = 'Pause';
         }
     }
+}
 
-    function stopRecording() {
-        if (mediaRecorder && mediaRecorder.state !== 'inactive') {
-            mediaRecorder.stop();
-        }
-    }
-
-    function handleRecordingEnd() {
-        $pauseButton.disabled = true;
-        $stopButton.disabled = true;
-        $downloadButton.disabled = false;
+function stopRecording() {
+    if (mediaRecorder && mediaRecorder.state !== 'inactive') {
+        mediaRecorder.stop();
+        handleRecordingStop();
+        $notification.classList.add('hidden');
     }
+}
 
-    function handleDataAvailable(event) {
-        if (event.data.size > 0) {
-            recordedChunks.push(event.data);
-        }
+function handleRecordingEnd() {
+    if (mediaRecorder && mediaRecorder.state === 'recording' && recordedChunks.length > 0) {
+        handleRecordingStop();
     }
+}
 
-    function handleStop() {
+function handleRecordingStop() {
+    if (recordedChunks.length > 0) {
         const blob = new Blob(recordedChunks, {
             type: $formatSelect.value
         });
-        $recordedVideo.src = URL.createObjectURL(blob);
+
+        const url = URL.createObjectURL(blob);
+        $recordedVideo.src = url;
         $recordedVideo.controls = true;
+        $downloadButton.disabled = false;
+        $stopButton.click();
     }
+}
 
-    function downloadVideo() {
-        const blob = new Blob(recordedChunks, {
-            type: $formatSelect.value
-        });
-        const fileType = $formatSelect.value.split(';')[0].split('/')[1];
-        const url = URL.createObjectURL(blob);
-        const a = document.createElement('a');
-
-        a.href = url;
-        a.download = `screen_recording.${fileType}`;
-        document.body.appendChild(a);
-        a.click();
-        document.body.removeChild(a);
-        URL.revokeObjectURL(url);
-    }
+function handleDataAvailable(event) {
+    if (event.data && event.data.size > 0) {
+        recordedChunks.push(event.data);
+    }
+}
+
+function downloadVideo() {
+    if (recordedChunks.length === 0) {
+        $stopButton.click();
+        return;
+    }
+
+    const blob = new Blob(recordedChunks, {
+        type: $formatSelect.value
+    });
+    const fileType = $formatSelect.value.split(';')[0].split('/')[1];
+    const currentDate = new Date().toLocaleString().replace(/[/:\s]/g, '_');
+    const randomFileName = `PixelCorder_${currentDate}.${fileType}`;
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+
+    a.href = url;
+    a.download = randomFileName;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+}