将使用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/

与＆＃34; https://mywebsite.com＆＃34;并替换

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

使用我创建的文件的路径来保存这些音频文件（https://mywebsite.com/uploads）？然后设置该文件夹的权限以允许公共写入功能（这似乎不安全，是否有一个好的方法）？

这是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（HTTPs）之上
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将用于存储您上传的文件。您将获得与此类似的网址：

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。

如何链接我自己的服务器？

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