first commit

lilruwu · Jun 26, 2024 · 96297ad · 96297ad
commit 96297ad
Show file tree

Hide file tree

Showing 4 changed files with 137 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -0,0 +1,8 @@
+# Wolf Xtreme
+
+<p align="center">
+  <img src="./assets/wolfstream.jpg" alt="OpenDike" width="400">
+</p>
+
+Wolf-Xtreme is a personal project aimed at creating a web application that enables easy video recording without the need for any installations. It's accessible, free, and open-source!
+
diff --git a/app.js b/app.js
@@ -0,0 +1,96 @@
+const video = document.getElementById('video');
+const cameraSelect = document.getElementById('cameraSelect');
+const microphoneSelect = document.getElementById('microphoneSelect');
+const startButton = document.getElementById('start');
+const stopButton = document.getElementById('stop');
+const screenButton = document.getElementById('screen');
+const downloadLink = document.getElementById('download');
+
+let mediaRecorder;
+let recordedChunks = [];
+let currentStream;
+
+navigator.mediaDevices.enumerateDevices().then(devices => {
+    devices.forEach(device => {
+        let option = document.createElement('option');
+        option.value = device.deviceId;
+        if (device.kind === 'videoinput') {
+            option.text = device.label || `Cámara ${cameraSelect.length + 1}`;
+            cameraSelect.appendChild(option);
+        } else if (device.kind === 'audioinput') {
+            option.text = device.label || `Micrófono ${microphoneSelect.length + 1}`;
+            microphoneSelect.appendChild(option);
+        }
+    });
+});
+
+cameraSelect.addEventListener('change', () => {
+    startStream();
+});
+
+microphoneSelect.addEventListener('change', () => {
+    startStream();
+});
+
+function startStream() {
+    if (currentStream) {
+        currentStream.getTracks().forEach(track => track.stop());
+    }
+    const videoSource = cameraSelect.value;
+    const audioSource = microphoneSelect.value;
+    const constraints = {
+        video: { deviceId: videoSource ? { exact: videoSource } : undefined },
+        audio: { deviceId: audioSource ? { exact: audioSource } : undefined }
+    };
+    navigator.mediaDevices.getUserMedia(constraints)
+        .then(stream => {
+            currentStream = stream;
+            video.srcObject = stream;
+        })
+        .catch(error => {
+            console.error('Error al acceder a los dispositivos de medios: ', error);
+        });
+}
+
+screenButton.addEventListener('click', async () => {
+    try {
+        const screenStream = await navigator.mediaDevices.getDisplayMedia({ video: true });
+        const audioStream = await navigator.mediaDevices.getUserMedia({ audio: true });
+        const combinedStream = new MediaStream([
+            ...screenStream.getVideoTracks(),
+            ...audioStream.getAudioTracks()
+        ]);
+        currentStream = combinedStream;
+        video.srcObject = combinedStream;
+    } catch (error) {
+        console.error('Error al compartir la pantalla: ', error);
+    }
+});
+
+startButton.addEventListener('click', () => {
+    recordedChunks = [];
+    mediaRecorder = new MediaRecorder(currentStream);
+    mediaRecorder.ondataavailable = function(event) {
+        if (event.data.size > 0) {
+            recordedChunks.push(event.data);
+        }
+    };
+    mediaRecorder.onstop = function() {
+        const blob = new Blob(recordedChunks, { type: 'video/webm' });
+        const url = URL.createObjectURL(blob);
+        downloadLink.href = url;
+        downloadLink.download = 'recording.webm';
+        downloadLink.style.display = 'block';
+    };
+    mediaRecorder.start();
+    startButton.disabled = true;
+    stopButton.disabled = false;
+    screenButton.disabled = true;
+});
+
+stopButton.addEventListener('click', () => {
+    mediaRecorder.stop();
+    startButton.disabled = false;
+    stopButton.disabled = true;
+    screenButton.disabled = false;
+});
diff --git a/assets/wolfstream.jpg b/assets/wolfstream.jpg
diff --git a/index.html b/index.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Grabador de Video</title>
+    <style>
+        #video {
+            width: 80%;
+            margin: 0 auto;
+            display: block;
+        }
+        #controls {
+            text-align: center;
+            margin-top: 20px;
+        }
+    </style>
+</head>
+<body>
+    <video id="video" autoplay></video>
+    <div id="controls">
+        <label for="cameraSelect">Camera:</label>
+        <select id="cameraSelect"></select>
+        <label for="microphoneSelect">Microphone:</label>
+        <select id="microphoneSelect"></select>
+        <button id="start">Start Recording</button>
+        <button id="stop" disabled>Stop Recording</button>
+        <button id="screen">Share Screen</button>
+        <a id="download" style="display: none;">Stop Recording</a>
+    </div>
+    <script src="app.js"></script>
+</body>
+</html>