Explorer & Editor

📁 Folder Navigator

Position: Root / faith / vpnp1 / network / clients / studio

Folders

📁 socialmedia

📁 uploads

Files

📄 record.html

📄 script.js

📄 upload.php

📝 File Editor

Editing: record.html

<!DOCTYPE html>
<html lang="en">

<head>
    <link rel="icon" type="image/x-icon" href="uploads/n4slogo.ico">
    <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=2.0">
    <title>Video Studio</title>
    <style>
        body {
            font-family: sans-serif;
            text-align: center;
        }

.control-panel {
            background-color: black;
            color: white;
            padding: 15px;
            border: 2px solid red;
            display: inline-block;
            position: relative;
        }

.input-group {
            margin: 5px 0;
        }

input,
        button {
            margin: 5px;
        }

#statusAlert {
            display: none;
            background: yellow;
            color: black;
            font-weight: bold;
            padding: 8px;
            margin: 10px auto;
            width: 60%;
            border-radius: 4px;
        }
    </style>
</head>

<body>
    <div class="control-panel">
        <h6>CONTENT RECORDING STUDIO</h6>

<video id="webcamVideo" width="140px" height="140px" controls autoplay playsinline muted></video>
        <br>

<div class="input-group">
            <label for="videoNameInput">Name:</label><br>
            <input type="text" id="videoNameInput" placeholder="Enter video name">
        </div>

<button id="startButton">Start Camera</button>
        <button id="recordButton" disabled>Start Recording</button>
        <button id="stopButton" disabled>Stop Recording</button>
    </div>

const startButton = document.getElementById('startButton');
        const recordButton = document.getElementById('recordButton');
        const stopButton = document.getElementById('stopButton');
        const webcamVideo = document.getElementById('webcamVideo');
        const videoNameInput = document.getElementById('videoNameInput');
        const statusAlert = document.getElementById('statusAlert');

function showBanner(message) {
            statusAlert.innerText = message;
            statusAlert.style.display = 'block';
        }

function hideBanner() {
            statusAlert.style.display = 'none';
        }

// 1. Start Webcam Stream
        startButton.addEventListener('click', async () => {
            try {
                mediaStream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
                webcamVideo.srcObject = mediaStream;
                recordButton.disabled = false;
                startButton.disabled = true;
                hideBanner();
            } catch (error) {
                console.error('Error accessing media devices:', error);
                showBanner('Could not access camera or microphone. Make sure you are using localhost or HTTPS.');
            }
        });

// 2. Start Video Recorder (With Universally Supported Format Rules)
        recordButton.addEventListener('click', () => {
            recordedChunks = [];

// Check priorities: Force MP4 variations first so standard desktop players can read them
            const types = [
                'video/mp4;codecs=h264,aac',
                'video/mp4;codecs=h264',
                'video/mp4',
                'video/webm;codecs=vp9,opus',
                'video/webm'
            ];

chosenMimeType = 'video/webm'; // Default system fallback
            for (const type of types) {
                if (MediaRecorder.isTypeSupported(type)) {
                    chosenMimeType = type;
                    break;
                }
            }

try {
                mediaRecorder = new MediaRecorder(mediaStream, { mimeType: chosenMimeType });
            } catch (e) {
                console.error('Exception while creating MediaRecorder:', e);
                showBanner('MediaRecorder is not supported by your browser.');
                return;
            }

mediaRecorder.ondataavailable = (event) => {
                if (event.data && event.data.size > 0) {
                    recordedChunks.push(event.data);
                }
            };

mediaRecorder.start();
            recordButton.disabled = true;
            stopButton.disabled = false;
            hideBanner();
        });

// 3. Stop Recorder & Open Save Dialog Window
        stopButton.addEventListener('click', async () => {
            if (!mediaRecorder || mediaRecorder.state === 'inactive') return;

// Map file suffix extension automatically based on active container payload format type
            const isMp4 = chosenMimeType.includes('mp4');
            const extension = isMp4 ? 'mp4' : 'webm';
            const fileDesc = isMp4 ? 'MP4 Video File' : 'WebM Video File';

const inputName = videoNameInput.value.trim();
            const defaultName = inputName ? `${inputName}.${extension}` : `recording-${Date.now()}.${extension}`;

let fileWritableStream = null;

if ('showSaveFilePicker' in window) {
                try {
                    showBanner('Opening file window... Select save location.');

const handle = await window.showSaveFilePicker({
                        suggestedName: defaultName,
                        types: [{
                            description: fileDesc,
                            accept: { [isMp4 ? 'video/mp4' : 'video/webm']: [`.${extension}`] }
                        }],
                    });

fileWritableStream = await handle.createWritable();
                } catch (err) {
                    console.log('User cancelled or browser blocked the save window picker:', err);
                    showBanner('Save cancelled.');
                    return;
                }
            }

mediaRecorder.onstop = async () => {
                const blob = new Blob(recordedChunks, { type: chosenMimeType });

if (fileWritableStream) {
                    try {
                        showBanner('Saving video to file system...');
                        await fileWritableStream.write(blob);
                        await fileWritableStream.close();
                        showBanner('Video saved successfully!');
                    } catch (e) {
                        console.error(e);
                        showBanner('Failed to write file contents.');
                    }
                } else {
                    showBanner('Using download fallback...');
                    const url = URL.createObjectURL(blob);
                    const a = document.createElement('a');
                    a.href = url;
                    a.download = defaultName;
                    document.body.appendChild(a);
                    a.click();
                    setTimeout(() => {
                        window.URL.revokeObjectURL(url);
                        document.body.removeChild(a);
                    }, 100);
                }

recordButton.disabled = false;
                stopButton.disabled = true;
            };

mediaRecorder.stop();
        });
    </script>
</body>

</html>