如何使用 PHP 上传使用 MediaRecorder API 录制的视频？

问题描述

我正在使用 MediaRecorder API 处理视频录制任务。从前端我可以启动网络摄像头，录制视频，播放录制的视频并下载视频。

但是当我尝试将视频上传到 PHP 服务器时，它根本不起作用。我真的不明白为什么会发生这种情况，我也尝试过使用这么多方法，但都没有奏效。请检查下面附上的代码。

JS:-

let mediaRecorder
let recordedBlobs

const errorMsgElement = document.querySelector('span#errorMsg');
const recordedVideo = document.querySelector('video#recorded');
const recordButton = document.querySelector('button#record');
const playButton = document.querySelector('button#play');
const downloadButton = document.querySelector('button#download');

document.querySelector("button#start").addEventListener("click",async function() {
    const hasEchoCancellation = document.querySelector("#echoCancellation").checked

    const constraints = {
        audio: {
            echoCancellation:{
                exact: hasEchoCancellation
            }
        },video: {
            width: 1280,height: 720
        }
    }

    await init(constraints)
})

async function init(constraints) {
    try {
        const stream  = await navigator.mediaDevices.getUserMedia(constraints)
        handleSuccess(stream)
    } catch(e) {
        console.log(e)
    }
}

function handleSuccess(stream) {
    recordButton.disabled = false

    window.stream = stream

    const gumVideo = document.querySelector("video#gum")

    gumVideo.srcObject = stream
}

recordButton.addEventListener("click",() => {
    if(recordButton.textContent === "Record") {
        startRecording()
    } else {
        stopRecording()
        recordButton.textContent = 'Record'
        playButton.disabled = false
        downloadButton.disabled = false
    }
})

function startRecording() {
    recordedBlobs = []

    let options = {
        mimeType: "video/webm;codecs=vp9,opus"
    }

    try {
        mediaRecorder = new MediaRecorder(window.stream,options)
    } catch(e) {
        console.log(e)
    }

    recordButton.textContent = "Stop Recording"
    playButton.disabled = true
    downloadButton.disabled = true

    mediaRecorder.onstop = (event) => {
        console.log('Recording Stopped')
    }
    mediaRecorder.ondataavailable = handleDataAvailable
    mediaRecorder.start()
}

function handleDataAvailable(event) {
    if(event.data && event.data.size > 0) {
        recordedBlobs.push(event.data)
    }
}

function stopRecording() {
    mediaRecorder.stop()
}

playButton.addEventListener('click',function() {
    const superBuffer = new Blob(recordedBlobs,{
        type: 'video/webm'
    })
    var file = new File([superBuffer],'test.webm')
    var url = window.URL.createObjectURL(superBuffer)
    // var video = blobToFile(superBuffer,'test.webm')
    sendToServer(file)
    recordedVideo.src = null
    recordedVideo.srcObject = null
    recordedVideo.src = url
    recordedVideo.controls = true
    recordedVideo.play()
})

downloadButton.addEventListener('click',() => {
    const blob = new Blob(recordedBlobs,{type: 'video/mp4'});
    const url = window.URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.style.display = 'none';
    a.href = url;
    a.download = 'test.mp4';
    document.body.appendChild(a);
    a.click();
    setTimeout(() => {
        document.body.removeChild(a);
        window.URL.revokeObjectURL(url);
    },100);
});

function sendToServer(file) {
    let url = 'send.PHP'
    let headers = {
        'Content-Type': 'multipart/form-data'
    }
    var formData = new FormData()
    formData.append("file",file)
    axios.post(url,formData,headers)
        .then((response) => {
            console.log(response.data)
        })
        .catch((error) => {
            console.log(error.response)
        })
}

function blobToFile(theBlob,fileName){
    //A Blob() is almost a File() - it's just missing the two properties below which we will add
    theBlob.lastModifiedDate = new Date();
    theBlob.name = fileName;
    return theBlob;
}

PHP:-

$target_dir = "uploads/";
$target_file = $target_dir . 'test.webm';
if(move_uploaded_file($_FILES["file"]["tmp_name"],$target_file)) {
    echo "File uploaded successfully";
} else {
    echo "File not uploaded";
}
print_r($_FILES['file']['error']);

无论我尝试了多少，我都无法弄清楚为什么它不起作用。它显示“文件未上传”就像它无法从 tmp_name 读取文件一样。请帮我解决问题。 对这个问题的任何帮助将不胜感激。 谢谢。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）