Issue in compressing and uploading video using javascript.,jQuery and php [closed]

Question

I am create a video upload program where we upload video, compress it using js/jquery and then upload it on server using php

I compressed the video successfully and preview the compressed video blob below and it works perfectly

<video id="videoPreview" controls="" src="blob:http://localhost/64f7b2ec-3fe0-4ede-a0eb-b655c7484cae" style="display: block;"></video>

And when i try to save the blob to server the audio inside the video is removed automatically

Here is my jquery code and PHP code

jQuery Code

$('#uploadBtn').on('click', function()
{
    if (!compressedBlob) return;
                
    const formData = new FormData();
    formData.append('compressedVideo', compressedBlob, 'compressed_' + originalFile.name.replace(/\.[^/.]+$/, '') + '.mp4');
    
    $.ajax({
        url: '',
        type: 'POST',
        data: formData,
        processData: false,
        contentType: false,
        success: function(response)
        {
            alert("Uploaded");
        },
        error: function(xhr, status, error)
        {
            alert("Error");
        }
    });
});

PHP code

<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_FILES['compressedVideo']))
{
    $uploadDir = 'uploads/';
    if (!file_exists($uploadDir)) mkdir($uploadDir, 0777, true);
    
    $fileName = uniqid() . '.mp4';
    $targetPath = $uploadDir . $fileName;
    
    if (move_uploaded_file($_FILES['compressedVideo']['tmp_name'], $targetPath))
    {
        echo json_encode(['success' => true, 'filePath' => $targetPath]);
    }
    else
    {
        echo json_encode(['success' => false, 'message' => 'Upload failed']);
    }
    exit;
}
?>

How to do this using javascript/jquery and php

Just to all you know this is my compression process using javascirpt

Compression code

$('#videoInput').on('change', function(e)
{
    preview_compress_video(e);
});
async function preview_compress_video(e)
{
    resetState();
    const file = e.target.files[0];
    if (!file) return;
    
    originalFile = file;

    // Setup video preview
    const video = $('#videoPreview')[0];
    video.src = URL.createObjectURL(file);
    video.style.display = 'block';
    
    
    video.onloadedmetadata = function()
    {
        originalDuration = video.duration;
    };
    
    // Compression handler
    if (!originalFile) return;
    
    // Use a hidden video element for processing
    const processingVideo = $('#hiddenVideo')[0];
    processingVideo.src = URL.createObjectURL(originalFile);

    // Wait for hidden video to load
    await new Promise((resolve) => {
        processingVideo.onloadedmetadata = resolve;
    });
    
    try
    {
        // Setup MediaRecorder with proper options
        const stream = processingVideo.captureStream();
        var bitrate="500000";
        const options = {
            audioBitsPerSecond: 128000,
            videoBitsPerSecond: bitrate,
            mimeType: 'video/mp4'
        };
        
        mediaRecorder = new MediaRecorder(stream, options);
        const chunks = [];
        
        // Event handlers
        mediaRecorder.ondataavailable = function(e) {
            if (e.data.size > 0) {
                chunks.push(e.data);
            }
        };
        
        mediaRecorder.onstop = function() {
            //compressedBlob = new Blob(chunks, { type: 'video/webm' });
            compressedBlob = new Blob(chunks, { type: 'video/mp4' });
            
            // Update preview with compressed version
            const compressedVideo = $('#videoPreview')[0];
            compressedVideo.src = URL.createObjectURL(compressedBlob);
            
            compressedVideo.onloadedmetadata = function()
            {
                $('#compressProgress').val(100);
            };
        };
        
        mediaRecorder.onerror = function(e) {
            $('#status').text('Compression error: ' + e.toString());
            resetState();
        };
        
        // Start recording
        mediaRecorder.start(100); // Collect data every 100ms
        
        // Progress tracking based on time
        const startTime = Date.now();
        recordingTimer = setInterval(() => {
            const elapsed = Date.now() - startTime;
            const progress = Math.min(100, (elapsed / (originalDuration * 1000)) * 100);
            $('#compressProgress').val(progress);
        }, 100);
        
        // Play the hidden video (muted)
        processingVideo.muted = true;
        processingVideo.currentTime = 0;
        await processingVideo.play();
        
        // Schedule recording stop after full duration
        setTimeout(() => {
            if (mediaRecorder && mediaRecorder.state === 'recording') {
                mediaRecorder.stop();
            }
            if (recordingTimer) clearInterval(recordingTimer);
        }, originalDuration * 1000);
        
    }
    catch (error)
    {
        $('#status').text('Error: ' + error.message);
        resetState();
    }
}