JSFiddle - React, Tailwind, and code Playground

by ckissi

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Video Recorder</title>
</head>
<body>
    <video id="video" width="640" height="480" autoplay></video>
    <button id="record">Start Recording</button>
    <button id="stop" disabled>Stop Recording</button>
    <video id="recorded" width="640" height="480" controls></video>

    <script>
        // Access the webcam and stream it to the video element
        const videoElement = document.getElementById('video');
        const recordButton = document.getElementById('record');
        const stopButton = document.getElementById('stop');
        const recordedVideo = document.getElementById('recorded');

        let mediaRecorder;
        let recordedChunks = [];

        navigator.mediaDevices.getUserMedia({ video: true, audio: true })
            .then(stream => {
                videoElement.srcObject = stream;

                mediaRecorder = new MediaRecorder(stream);

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

                mediaRecorder.onstop = function() {
                    const blob = new Blob(recordedChunks, { type: 'video/webm' });
                    recordedChunks = [];

                    const url = URL.createObjectURL(blob);
                    recordedVideo.src = url;

                    // Send the video to the server
                    const formData = new FormData();
                    formData.append('video', blob, 'recorded-video.webm');

                    fetch('/upload', {
                        method: 'POST',
                        body: formData,
                        headers: {
                            'X-CSRF-TOKEN': '{{ csrf_token() }}'
                        }
                    }).then(response =>...