xmlhttprequestrecordrtc

Sending audio file created with RecordRTC to my server


I am new to working with Javascript, PHP, and with servers generally. I am working on a web page that will record audio from the user and save it to my server, using RecordRTC. I'm a bit confused about the XMLHttpRequest portion - how do I alter the following code to send to my server instead of the webrtc server?

        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);
            });
        }

Via my web hosting provider, I'm using an Apache server, phpMyAdmin, and a mySQL database. Do I just replace

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

with "https://mywebsite.com" and replace

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

with the path to the file I created to hold these audio files (https://mywebsite.com/uploads)? Then set permissions for that folder to allow public write capabilities (this seems unsafe, is there a good method)?

This is the makeXMLHttpRequest function:

        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);
        }

Solution

    1. Please make sure that your PHP server is running top over SSL (HTTPs)
    2. Create a directory and name it uploadFiles
    3. Create a sub-directory and name it uploads

    Structure of the directories:

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

    index.php

    Now create or upload following index.php file on this path: 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);
        }
    }
    ?>
    

    Why sub-directory?

    Nested directory uploads will be used to store your uploaded files. You will get URLs similar to this:

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

    Longer file upload issues:

    upload_max_filesize MUST be 500MB or greater.

    max_execution_time MUST be at least 10800 (or greater).

    It is recommended to modify php.ini otherwise create .htaccess.

    How to link my own server?

    Simply replace https://webrtcweb.com/RecordRTC/ with your own URL i.e. https://server.com/uploadFiles/.