Загрузите или отправьте создание файла с помощью средства записи мультимедиа в Wordpress

Question

Я новичок в wordpress и веб-разработке в целом, но я ищу решение, чтобы сделать следующее. У меня есть код javascript, который может создавать видео с помощью средства записи мультимедиа, и еще один сценарий php для загрузки файла на сервер. Вне WP это работает нормально, но мне трудно заставить его работать в WP с использованием Unlimited Element. Мне нужно использовать Unlimited Elements, чтобы его можно было легко добавить в Elementor.

window.onload = function() {
    document.getElementById('Recorded').style.display = 'none';
};

// let reset = document.getElementById('btnReset');
//     reset.addEventListener('click', function(){
//         document.getElementById("RealTime").Style.display = 'block';
//         document.getElementById("Recorded").style.display = 'none';
//     })


let constraintObj = { 
    audio: true, 
    video: { 
        //facingMode: "user", 
        // facingMode: "environment", 
        // width: { min: 640, ideal: 1280, max: 1920 },
        // height: { min: 480, ideal: 720, max: 1080 } 
        width: { min: 320, ideal: 320, max: 320 },
        height: { min: 240, ideal: 240, max: 240 } 
    } 
}; 

// width: 1280, height: 720  -- preference only
// facingMode: {exact: "user"}
// facingMode: "environment"

//handle older browsers that might implement getUserMedia in some way
if (navigator.mediaDevices === undefined) {
    navigator.mediaDevices = {};
    navigator.mediaDevices.getUserMedia = function(constraintObj) {
        let getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
        if (!getUserMedia) {
            return Promise.reject(new Error('getUserMedia is not implemented in this browser'));
        }
        return new Promise(function(resolve, reject) {
            getUserMedia.call(navigator, constraintObj, resolve, reject);
        });
    }
}else{
    navigator.mediaDevices.enumerateDevices()
    .then(devices => {
        devices.forEach(device=>{
            console.log(device.kind.toUpperCase(), device.label);
            //, device.deviceId
        })
    })
    .catch(err=>{
        console.log(err.name, err.message);
    })
}

navigator.mediaDevices.getUserMedia(constraintObj)
.then(function(mediaStreamObj) {
    //connect the media stream to the first video element
    let video = document.querySelector('video');
    if ("srcObject" in video) {
        video.srcObject = mediaStreamObj;
    } else {
        //old version
        video.src = window.URL.createObjectURL(mediaStreamObj);
    }
    
    video.onloadedmetadata = function(ev) {
        //show in the video element what LIVE is being captured by the webcam
        video.play();
    };
    
    //add listeners for saving video/audio
    let start = document.getElementById('btnStart');
    let stop = document.getElementById('btnStop');
    let vidSave = document.getElementById('vid2');

    var options;
    if (MediaRecorder.isTypeSupported('video/webm;codecs=vp9')) {
        options = {mimeType: 'video/webm; codecs=vp9'};
    } else if (MediaRecorder.isTypeSupported('video/webm;codecs=vp8')) {
        options = {mimeType: 'video/webm; codecs=vp8'};
    } else {
    // ...
    }

    let mediaRecorder = new MediaRecorder(mediaStreamObj, options);
    let chunks = [];
    let interval = 10 * 1000; // Stop recording after xx * seconds
    var refreshIntervalId;
    
    start.addEventListener('click', (ev)=>{
        mediaRecorder.start();
        console.log(mediaRecorder.state);
        if (mediaRecorder.state = 'recording') {
            start.disabled = true;
            // Stop after x seconds (1000 = 1sec)
            refreshIntervalId = setInterval(clickButton, interval);

            // force to stop recording
            function clickButton() { 
                document.querySelector('#btnStop').click(); 
            }
        }
    })
    stop.addEventListener('click', (ev)=>{
        mediaRecorder.stop(); // stop the recording
        video.pause(); // stop the real-time video object
        // clear the interval time
        clearInterval(refreshIntervalId);
        start.disabled = false;
        console.log(mediaRecorder.state);
        
        // hide the real-time video element
        var x = document.getElementById("RealTimeVideo")
        if (x.style.display = "block") {
            x.style.display = "none";
        }
        // unhide the recorded video element
        var y = document.getElementById("Recorded")
        if (y.style.display = "none") {
            y.style.display = "block";
        }
        
    });
    mediaRecorder.ondataavailable = function(ev) {
        chunks.push(ev.data);
    }
    mediaRecorder.onstop = (ev)=>{
        let blob = new Blob(chunks, { 'type' : 'video/webm;' });
        chunks = [];
        let videoURL = window.URL.createObjectURL(blob);
        vidSave.src = videoURL;
        //console.log(blob);

        // generating a random file name
        var fileName = getFileName('webm');

        // we need to upload "File" --- not "Blob"
        var fileObject = new File([blob], fileName, {
            type: 'video/webm'
        });

        // declare constants for uploading the recorded video
        const url = 'uploadVideo.php' // the url where the video needs to be uploaded
        const form = document.querySelector('form')

        form.addEventListener('submit', (e) => {
        e.preventDefault(); // prevent page refresh (we'll use fetch, an async method)

        // create the formdata object
        const formData = new FormData()
        formData.append('files[]', fileObject, fileName);

        // invoke the fetch method the post the recorded video
        fetch(url, {
            method: 'POST',
            body: formData,
            }).then((response) => {
                console.log(response)
            })
        })
    }
})
.catch(function(err) { 
    console.log(err.name, err.message); 
});

// this function is used to generate random file name
function getFileName(fileExtension) {
    var d = new Date();
    var year = d.getUTCFullYear();
    var month = d.getUTCMonth() + 1;
    var day = d.getUTCDate();
    return 'Recording-' + year + month + day + '-' + getRandomString() + '.' + fileExtension;
}

function getRandomString() {
    if (window.crypto && window.crypto.getRandomValues && navigator.userAgent.indexOf('Safari') === -1) {
        var a = window.crypto.getRandomValues(new Uint32Array(3)),
            token = '';
        for (var i = 0, l = a.length; i < l; i++) {
            token += a[i].toString(36);
        }
        return token;
    } else {
        return (Math.random() * new Date().getTime()).toString(36).replace(/\./g, '');
    }
}

Ниже приведен PHP код загрузки видео. php.

<?php 

session_start();
$uuid = $_SESSION["uuid"];

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
// if(isset($_POST['but_submit'])){
    if (isset($_FILES['files'])) {
        $errors = [];
        $path = 'uploads/';
        $extensions = ['mp4', 'webm'];

        $all_files = count($_FILES['files']['tmp_name']);

        for ($i = 0; $i < $all_files; $i++) {
            $file_name = $_FILES['files']['name'][$i];
            $file_tmp = $_FILES['files']['tmp_name'][$i];
            $file_type = $_FILES['files']['type'][$i];
            $file_size = $_FILES['files']['size'][$i];
            $file_ext = strtolower(end(explode('.', $_FILES['files']['name'][$i])));

            $file = $path . $file_name;

            if (!in_array($file_ext, $extensions)) {
                $errors[] = 'Extension not allowed: ' . $file_name . ' ' . $file_type;
            }

            if ($file_size > 2097152) {
                $errors[] = 'File size exceeds limit: ' . $file_name . ' ' . $file_type;
            }

            if (empty($errors)) {
                move_uploaded_file($file_tmp, $file);
            }
        }

        if ($errors) print_r($errors);
    }

    // Insert the created video into the DB - videos

    include_once 'dbConn.php';    

    $sql = "INSERT INTO videos (videoName, uuid) values ('$file_name', '$uuid')";

    if (mysqli_query($conn, $sql)) {
        echo mysqli_error($conn);
    }
    else
    {
        echo "Records added successfully.";
    }

    mysqli_close($conn); // Close connection
}

Кроме того, у меня есть код html для отображения кнопок.

<div class="wrapper">
    <button class="button" id="btnStart">START RECORDING</button>
    <button class="button" id="btnStop">STOP RECORDING</button>
    <button class="button" id="btnReset">Reset</button>
</div>

Заранее благодарим вас за помощь. Жорж