Scribd Logo
Upload

Welcome to Scribd!

  • 2000

    Uploaded by

    Patel Gaurang
    7 views2 pages
    code

    Copyright

    © © All Rights Reserved

    Available Formats

    TXT, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    code

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    7 views2 pages

    2000

    Uploaded by

    Patel Gaurang
    code

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 2

    <!

    DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Video Processing</title>
    </head>
    <body>
    <input type="file" id="videoInput" accept="video/*">
    <br>
    <button onclick="startProcessing()">Start Video Processing</button>
    <button onclick="stopProcessing()">Stop Video Processing</button>

    <div id="videoContainer">
    <video id="videoElement" controls></video>
    <div id="frameContainer"></div>
    </div>

    <script>
    let videoProcessing = false;
    let frameInterval;

    function startProcessing() {
    // Get the selected video file
    var videoInput = document.getElementById('videoInput');
    var videoFile = videoInput.files[0];

    if (!videoFile) {
    alert('Please select a video file');
    return;
    }

    // Create a video element and set its source to the selected video file
    var video = document.getElementById('videoElement');
    video.src = URL.createObjectURL(videoFile);

    // On video load, extract frames


    video.addEventListener('loadeddata', function() {
    videoProcessing = true;
    frameInterval = setInterval(function() {
    extractFrame(video);
    }, 1000); // Capture one frame per second
    });
    }

    function stopProcessing() {
    videoProcessing = false;
    clearInterval(frameInterval);
    }

    function extractFrame(video) {
    // Get the current date and time for folder naming
    var now = new Date();
    var folderName = now.toISOString().replace(/[:.]/g, '-');

    // Set the canvas dimensions to match the video


    var canvas = document.createElement('canvas');
    canvas.width = video.videoWidth;
    canvas.height = video.videoHeight;
    var ctx = canvas.getContext('2d');

    // Capture the current frame


    ctx.drawImage(video, 0, 0, canvas.width, canvas.height);

    // Convert canvas to data URL


    var dataURL = canvas.toDataURL('image/jpeg');

    // Create an image element for the frame


    var frameImage = document.createElement('img');
    frameImage.src = dataURL;

    // Get the frame container


    var frameContainer = document.getElementById('frameContainer');

    // Append the frame image to the frame container


    frameContainer.appendChild(frameImage);

    // Convert canvas to data URL and trigger download


    var link = document.createElement('a');
    link.download = folderName + '/frame_' + Date.now() + '.jpg';
    link.href = dataURL;
    link.click();
    }
    </script>
    </body>
    </html>

    You might also like