如何将音频+视频作为一个上传到服务器？

Question

如何将基于RecordRTC的音频+视频以单一文件格式上传到服务器？

RecordRTC 似乎生成了两个单独的文件：一个用于音频（作为 WAV），另一个用于视频（作为 WebM）。如何在 PHP 服务器上同时上传两个文件？

Answer 1

从 Chrome >=49 开始，RecordRTC 现在使用 MediaRecorder API 来支持将麦克风+网络摄像头录制为单一 WebM 文件格式。

这里是如何将音频+视频录制到单个 WebM 中（这适用于 Chrome >= 49 和 Firefox >= 38）

<script src="https://cdn.WebRTC-Experiment.com/gumadapter.js"></scrip>
<script>
var recorder;

function successCallback(audioVideoStream) {
    recorder = RecordRTC(audioVideoStream, {
        type: 'video',
        mimeType: 'video/webm',
        bitsPerSecond: 512 * 8 * 1024
    });
    recorder.startRecording();
}

function errorCallback(error) {
    // maybe another application is using the device
}

var mediaConstraints = {
    video: true,
    audio: true
};

navigator.mediaDevices.getUserMedia(mediaConstraints).then(successCallback).catch(errorCallback);

document.querySelector('#btn-stop-recording').onclick = function() {
    if (!recorder) return;
    recorder.stopRecording(function() {
        var audioVideoBlob = recorder.blob;

        // you can upload Blob to PHP/ASPNET server
        uploadBlob(audioVideoBlob);

        // you can even upload DataURL
        recorder.getDataURL(function(dataURL) {
            $.ajax({
                type: 'POST',
                url: '/save.php',
                data: {
                    dataURL: dataURL
                },
                contentType: 'application/json; charset=utf-8',
                success: function(msg) {
                    alert('Successfully uploaded.');
                },
                error: function(jqXHR, textStatus, errorMessage) {
                    alert('Error:' + JSON.stringify(errorMessage));
                }
            });
        });
    });
};

function uploadBlob(blob) {
    var formData = new FormData();
    formData.append('file', blob);
    $.ajax({
        url: "/save.php",
        type: "POST",
        data: formData,
        processData: false,
        contentType: false,
        success: function(response) {
            alert('Successfully uploaded.');
        },
        error: function(jqXHR, textStatus, errorMessage) {
            alert('Error:' + JSON.stringify(errorMessage));
        }
    });
}
</script>

这是一个示例 save.php 文件，它读取 video-filename 和 video-blob：

<?php
foreach(array('video', 'audio') as $type) {
    if (isset($_FILES["${type}-blob"])) {

        echo 'uploads/';

        $fileName = $_POST["${type}-filename"];
        $uploadDirectory = 'uploads/'.$fileName;

        if (!move_uploaded_file($_FILES["${type}-blob"]["tmp_name"], $uploadDirectory)) {
            echo(" problem moving uploaded file");
        }

        echo($fileName);
    }
}
?>

save.php 以上需要关注FormData：

function uploadBlob(blob) {
    var formData = new FormData();
    formData.append('video-blob', blob);
    formData.append('video-filename', 'FileName.webm');
    $.ajax({
        url: "/save.php",
        type: "POST",
        data: formData,
        processData: false,
        contentType: false,
        success: function(response) {
            alert('Successfully uploaded.');
        },
        error: function(jqXHR, textStatus, errorMessage) {
            alert('Error:' + JSON.stringify(errorMessage));
        }
    });
}