Help with Upload functionality

[Chrisj]

Thanks for all of your previous help.

<button id="btn-start-recording">Start <br/>Recording</button>
<button id="btn-stop-recording" disabled>Stop <br/>Recording</button>
<button id="reset" onclick="resetCamera()">Reset <br/>Camera</button>
<button id="upload-to-server">Upload Recording</button>
<button id="save-to-disk">Save To Disk</button>
<button id="open-new-tab">Open New Tab</button>

I am testing this code, where a video is recorded, started, stopped & replayed successfully. However, I don’t have the upload part correct. Nothing happens upon selecting the upload button, and no issues in Console.

var video = document.querySelector('video');
    var recordingDIV = document.querySelector('.recordrtc');

    function captureCamera(callback) {
        navigator.mediaDevices.getUserMedia({ audio: true, video: true }).then(function(camera) {
            callback(camera);
        }).catch(function(error) {
            alert('Unable to capture your camera. Please check console logs.');
            console.error(error);
        });
    }

    function stopRecordingCallback() {
        video.src = video.srcObject = null;
        video.muted = false;
        video.volume = 1;
        video.src = URL.createObjectURL(recorder.getBlob());

        recorder.camera.stop();
        recorder.destroy();
        recorder = null;
    }

    var recorder; // globally accessible

    document.getElementById('btn-start-recording').onclick = function() {
        this.disabled = true;
        captureCamera(function(camera) {
            video.muted = true;
            video.volume = 0;
            video.srcObject = camera;

            recorder = RecordRTC(camera, {
                type: 'video'
            });

            recorder.startRecording();

            // release camera on stopRecording
            recorder.camera = camera;

            document.getElementById('btn-stop-recording').disabled = false;
        });
    };

    document.getElementById('btn-stop-recording').onclick = function() {
        this.disabled = true;
        recorder.stopRecording(stopRecordingCallback);
    };

               ///////////////////////////////////////////////////
                        //Reset the Camera
                                   function resetCamera(){
                                      location.reload();
                                    }
/////////////////////////////////////////////////////////


  var MY_DOMAIN = 'a.domain-name.com';

            function isMyOwnDomain() {
                // replace "webrtc-experiment.com" with your own domain name
                return document.domain.indexOf(MY_DOMAIN) !== -1;
            }

            function saveToDiskOrOpenNewTab(recordRTC) {
                recordingDIV.querySelector('#save-to-disk').parentNode.style.display = 'block';
                recordingDIV.querySelector('#save-to-disk').onclick = function() {
                    if(!recordRTC) return alert('No recording found.');

                    recordRTC.save();
                };

                recordingDIV.querySelector('#open-new-tab').onclick = function() {
                    if(!recordRTC) return alert('No recording found.');

                    window.open(recordRTC.toURL());
                };

                if(isMyOwnDomain()) {
                    recordingDIV.querySelector('#upload-to-server').disabled = true;
                    recordingDIV.querySelector('#upload-to-server').style.display = 'none';
                }
                else {
                    recordingDIV.querySelector('#upload-to-server').disabled = false;
                }

                recordingDIV.querySelector('#upload-to-server').onclick = function() {
                    if(isMyOwnDomain()) {
                        alert('PHP Upload is not available on this domain.');
                        return;
                    }

                    if(!recordRTC) return alert('No recording found.');
                    this.disabled = true;

                    var button = this;
                    uploadToServer(recordRTC, function(progress, fileURL) {
                        if(progress === 'ended') {
                            button.disabled = false;
                            button.innerHTML = 'Click to download from server';
                            button.onclick = function() {
                                window.open(fileURL);
                            };
                            return;
                        }
                        button.innerHTML = progress;
                    });
                };
            }

            var listOfFilesUploaded = [];

            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.');

                // var upload_url = 'https://your-domain.com/files-uploader/';
                var upload_url = 'save.php';

                // var upload_directory = upload_url;
                var upload_directory = 'uploads/';

                makeXMLHttpRequest(upload_url, formData, function(progress) {
                    if (progress !== 'upload-ended') {
                        callback(progress);
                        return;
                    }

                    callback('ended', upload_directory + fileName);

                    // to make sure we can delete as soon as visitor leaves
                    listOfFilesUploaded.push(upload_directory + fileName);
                });
            }

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

            window.onbeforeunload = function() {
                recordingDIV.querySelector('button').disabled = false;
                recordingMedia.disabled = false;
                mediaContainerFormat.disabled = false;

                if(!listOfFilesUploaded.length) return;

                var delete_url = 'https://webrtcweb.com/f/delete.php';
                // var delete_url = 'RecordRTC-to-PHP/delete.php';

                listOfFilesUploaded.forEach(function(fileURL) {
                    var request = new XMLHttpRequest();
                    request.onreadystatechange = function() {
                        if (request.readyState == 4 && request.status == 200) {
                            if(this.responseText === ' problem deleting files.') {
                                alert('Failed to delete ' + fileURL + ' from the server.');
                                return;
                            }

                            listOfFilesUploaded = [];
                            alert('You can leave now. Your files are removed from the server.');
                        }
                    };
                    request.open('POST', delete_url);

                    var formData = new FormData();
                    formData.append('delete-file', fileURL.split('/').pop());
                    request.send(formData);
                });


                return 'Please wait few seconds before your recordings are deleted from the server.';
            };

Any assistance is appreciated.

[requinix]

How much debugging have you done? Verified that the onclick function has been assigned (which is poor practice, by the way)? Is uploadToServer even executing?

[Chrisj]

Thanks for your reply. Regarding executing, I'm not sure, any guidance is appreciated.

[requinix]

Well, okay, I would suggest doing some debugging. You know, like verifying that the onclick function has been assigned and that uploadToServer is executing.

If you need tips on how to do that, a simple console.log at relevant location(s) to let you know code has been hit is easy to add.

[Chrisj]

Can you show me an example of "console.log at relevant location"?

[Barand]

Something like adding a line of code inside your resetCamera() fuction eg

console.log("resetting camera now")

so you can see in the log that it was called OK

[Chrisj]

Thanks you for your example.

I tried this, ran the script, but nothing appeared in the console log:

 

                if(isMyOwnDomain()) {
                console.log("upload-to-server");
                    recordingDIV.querySelector('#upload-to-server').disabled = true;
                    recordingDIV.querySelector('#upload-to-server').style.display = 'none';
                }

any additional guidance is welcomed

 

[requinix]

Sigh.

Keep adding console.log()s in assorted places here and there until you can discover where the underlying problem is. It might be helpful to try logging relevant variables and values instead of just strings so that you don't have to guess at what they are.

[Chrisj]

Than ks for your reply.

Can you give me an example of logging a relevant variable or value pertaining to the code I've provided?

[requinix]

So I strongly suggest that if you're going to maintain someone's code then you should really become familiar with the basics of programming. Learn about what variables are and where their values come from and how they get used. Spending a few hours going through some tutorials should be enough to grasp most of the basics, especially if you have some code you can look at and run to see how it works, but trying your hand with a couple simple applications (and more than just Hello World, such as a number guessing game) will help too.

When you understand more about variables and what happens to them as PHP goes through your code will hopefully make it much easier to understand what your code here is doing.

Because while I can read and understand the code, I'm not the one who has to maintain it.