diff --git a/css/style.css b/css/style.css
index 2ff5bee..45bdb2f 100644
--- 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;
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index fadef8d..3bad355 100644
--- a/index.html
+++ b/index.html
@@ -1,6 +1,7 @@
+ PixelCorder
@@ -11,7 +12,7 @@
-
+
@@ -71,7 +72,12 @@ PixelCorder
+
+
+
diff --git a/js/main.js b/js/main.js
index bb3964d..88a8ca5 100644
--- 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);
- }
\ No newline at end of file
+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);
+}
\ No newline at end of file