将使用 RecordRTC 创建的音频文件发送到我的服务器

Question

我刚开始使用 Javascript、PHP 以及一般的服务器。我正在开发一个网页，该网页将使用 RecordRTC 录制用户的音频并将其保存到我的服务器。我对 XMLHttpRequest 部分有点困惑 - 如何更改以下代码以发送到我的服务器而不是 webrtc 服务器？

        function uploadToServer(recordRTC, callback) {
            var blob = recordRTC instanceof Blob ? recordRTC : recordRTC.blob;
            var fileType = blob.type.split('/')[0] || 'audio';
            var fileName = (Math.random() * 1000).toString().replace('.', '');

            if (fileType === 'audio') {
                fileName += '.' + (!!navigator.mozGetUserMedia ? 'ogg' : 'wav');
            } else {
                fileName += '.webm';
            }

            // create FormData
            var formData = new FormData();
            formData.append(fileType + '-filename', fileName);
            formData.append(fileType + '-blob', blob);

            callback('Uploading ' + fileType + ' recording to server.');

            makeXMLHttpRequest('https://webrtcweb.com/RecordRTC/', formData, function(progress) {
                if (progress !== 'upload-ended') {
                    callback(progress);
                    return;
                }

                var initialURL = 'https://webrtcweb.com/RecordRTC/uploads/';

                callback('ended', initialURL + fileName);

                listOfFilesUploaded.push(initialURL + fileName);
            });
        }

通过我的网络托管服务提供商，我正在使用 Apache 服务器、phpMyAdmin 和 mySQL 数据库。我只是替换

    makeXMLHttpRequest(https://webrtcweb.com/RecordRTC/

用“https://mywebsite.com”替换

    var initialURL = 'https://webrtcweb.com/RecordRTC/uploads/'; 

使用我创建的用于保存这些音频文件的文件的路径 (https://mywebsite.com/uploads)？然后对该文件夹设置权限，允许public写权限（这似乎不安全，有没有好的方法）？

这是 makeXMLHttpRequest 函数：

        function makeXMLHttpRequest(url, data, callback) {
            var request = new XMLHttpRequest();
            request.onreadystatechange = function() {
                if (request.readyState == 4 && request.status == 200) {
                    callback('upload-ended');
                }
            };

            request.upload.onloadstart = function() {
                callback('Upload started...');
            };

            request.upload.onprogress = function(event) {
                callback('Upload Progress ' + Math.round(event.loaded / event.total * 100) + "%");
            };

            request.upload.onload = function() {
                callback('progress-about-to-end');
            };

            request.upload.onload = function() {
                callback('progress-ended');
            };

            request.upload.onerror = function(error) {
                callback('Failed to upload to server');
                console.error('XMLHttpRequest failed', error);
            };

            request.upload.onabort = function(error) {
                callback('Upload aborted.');
                console.error('XMLHttpRequest aborted', error);
            };

            request.open('POST', url);
            request.send(data);
        }

Answer 1

1. 请确保您的 PHP 服务器 运行 通过 SSL (HTTP)
2. 创建目录并命名为uploadFiles
3. 创建子目录并命名为uploads

目录结构：

https://server.com/uploadFiles           -> to upload files
https://server.com/uploadFiles/uploads   -> to store files

index.php

现在在此路径上创建或上传以下 index.php 文件：https://server.com/uploadFiles

<?php
// File Name: "index.php"
// via https://github.com/muaz-khan/RecordRTC/tree/master/RecordRTC-to-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);
    }
}
?>

为什么要分目录？

嵌套目录uploads 将用于存储您上传的文件。你会得到类似这样的 URLs:

https://server.com/uploadFiles/uploads/filename.webm

较长的文件上传问题：

• https://github.com/muaz-khan/RecordRTC/wiki/PHP-Upload-Issues

upload_max_filesize 必须 500MB 或更大。

max_execution_time 必须至少 10800（或更大）。

建议修改php.ini否则创建.htaccess.

如何link自己的服务器？

只需将 https://webrtcweb.com/RecordRTC/ 替换为您自己的 URL 即 https://server.com/uploadFiles/.