1

我正在尝试通过 HTML 表单传递 MediaRecorder 文件，但它不起作用。代码如下：

这是记录音频的代码 

function hasGetUserMedia() {
    return !!( navigator.mediaDevices && navigator.mediaDevices.getUserMedia );
}

function audioPlay(){
    if ( hasGetUserMedia() ) {
        audioRunner();
    }else{
        console.log('UserMedia not supported');
    }
}

function audioRunner(){
    var audio = document.getElementById('audio');

    let audioButtons = {
        start: document.getElementById('audio_recorder'),
        stop: document.getElementById('audio_stop'),
    }

    let boxAudio = {
        input: document.getElementById('input_audio')
    }
    
    let chunks = [];

    let constraintObj = {
        audio: true
    }

    if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
    navigator.mediaDevices.getUserMedia(constraintObj).then(function(stream) {
    
    let mediaRecorder = new MediaRecorder(stream);

    //BUTTONS
    audioButtons.start.addEventListener('click', (ev) => {
        mediaRecorder.start();
        startAnimation();
        console.log(mediaRecorder.state);
    });
    audioButtons.stop.addEventListener('click', (ev) => {
        mediaRecorder.stop();
        stopAnimation();
        console.log(mediaRecorder.state);
    })

    mediaRecorder.ondataavailable = function(ev){
        chunks.push(ev.data);
    }
    mediaRecorder.onstop = (ev) => {
        let blob = new Blob(chunks, { 'type' : 'audio/mpeg-3' });
        
        let videoURL = window.URL.createObjectURL(blob);
        audio.src = videoURL;
        audio.style.display = 'block';
        fr = new FormData();
        fr.append('blob', videoURL);
        boxAudio.input.value = fr;
        console.log(fr);
        
        chunks = [];

    }
<form enctype="multipart/form-data" action="views/send_message_form.php" method="post">

<div class="card bg-light message_ctn" id="audio_message_ctn">
    <div class="card-header">Header</div>
    <div class="card-body">
        <div id="microphone-icon">
            <span data-color="red"><i class="fas fa-microphone-alt"></i></span>
        </div>
        <audio id="audio" controls></audio>
        <input type="text" name="audio_message" id="input_audio">
        <div id="audio_buttons" class="box_buttons">
            <button type="button" id="audio_recorder" class="btn btn-outline-primary">Registra</button>
            <button type="button" id="audio_stop" class="btn btn-outline-info">Stop</button>
            <button type="submit" id="audio_send" class="btn btn-outline-success">Invia</button>
        </div>
    </div>
</div>

</form>
这是通过表单接收数据的代码PHP 
var_dump($_POST);

?>

<video src="<?=$_POST['audio_message'] ?>"></video>

当我提交表单时，变量 $_POST 为空，如何将视频传递给 send_message_form.php 然后将其保存到 htdocs 子文件夹中？

4

0 回答 0