Help with Upload functionality

[ChrisjChrisj]

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:

<div class="nowrap">
 <button id="btn-start-recording">Start <br/>Recording</button>
 <button id="btn-stop-recording" disabled>Stop <br/>Recording</button>
 <button id="upload-to-server" disabled>Upload <br/>Recording</button>
 <button id="reset" onclick="resetCamera()">Reset <br/>Camera</button>
</div>
	<video controls autoplay playsinline></video>

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

	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);
	};
		                 if(recordingMedia.value === 'record-screen') {
		                     captureScreen(commonConfig);

		                     button.mediaCapturedCallback = function() {
		                         button.recordRTC = RecordRTC(button.stream, {
		                             type: mediaContainerFormat.value === 'Gif' ? 'gif' : 'video',
		                             disableLogs: params.disableLogs || false,
		                             canvas: {
		                                 width: params.canvas_width || 320,
		                                 height: params.canvas_height || 240
		                             }
		                         });

		                         button.recordingEndedCallback = function(url) {
		                             recordingPlayer.src = null;
		                             recordingPlayer.srcObject = null;

		                             if(mediaContainerFormat.value === 'Gif') {
		                                 recordingPlayer.pause();
		                                 recordingPlayer.poster = url;
		                                 recordingPlayer.onended = function() {
		                                     recordingPlayer.pause();
		                                     recordingPlayer.poster = URL.createObjectURL(button.recordRTC.blob);
		                                 };
		                                 return;
		                             }

		                             recordingPlayer.src = url;
		                         };

		                         button.recordRTC.startRecording();
		                     };
                }


            function captureVideo(config) {
                captureUserMedia({video: true}, function(videoStream) {
                    recordingPlayer.srcObject = videoStream;

                    config.onMediaCaptured(videoStream);

                    videoStream.onended = function() {
                        config.onMediaStopped();
                    };
                }, function(error) {
                    config.onMediaCapturingFailed(error);
                });
            }

		             function captureUserMedia(mediaConstraints, successCallback, errorCallback) {
		                 navigator.mediaDevices.getUserMedia(mediaConstraints).then(successCallback).catch(errorCallback);
		             }

		             function setMediaContainerFormat(arrayOfOptionsSupported) {
		                 var options = Array.prototype.slice.call(
		                     mediaContainerFormat.querySelectorAll('option')
		                 );

		                 var selectedItem;
		                 options.forEach(function(option) {
		                     option.disabled = true;

		                     if(arrayOfOptionsSupported.indexOf(option.value) !== -1) {
		                         option.disabled = false;

		                         if(!selectedItem) {
		                             option.selected = true;
		                             selectedItem = option;
		                         }
		                     }
		                 });
		             }

		             recordingMedia.onchange = function() {
		                 if(this.value === 'record-audio') {
		                     setMediaContainerFormat(['WAV', 'Ogg']);
		                     return;
		                 }
		                 setMediaContainerFormat(['Mp4']);
		             };

		             if(DetectRTC.browser.name === 'Edge') {
		                 // webp isn't supported in Microsoft Edge
		                 // neither MediaRecorder API
		                 // so lets disable both video/screen recording options

		                 console.warn('Neither MediaRecorder API nor webp is supported in Microsoft Edge. You cam merely record audio.');

		                 recordingMedia.innerHTML = '<option value="record-audio">Audio</option>';
		                 setMediaContainerFormat(['WAV']);
		             }

		             if(DetectRTC.browser.name === 'Firefox') {
		                 // Firefox implemented both MediaRecorder API as well as WebAudio API
		                 // Their MediaRecorder implementation supports both audio/video recording in single container format
		                 // Remember, we can't currently pass bit-rates or frame-rates values over MediaRecorder API (their implementation lakes these features)

		                 recordingMedia.innerHTML = '<option value="record-audio-plus-video">Audio+Video</option>'
		                                             + '<option value="record-audio-plus-screen">Audio+Screen</option>'
		                                             + recordingMedia.innerHTML;
		             }

		             // disabling this option because currently this demo
		             // doesn't supports publishing two blobs.
		             // todo: add support of uploading both WAV/WebM to server.
		             if(false && DetectRTC.browser.name === 'Chrome') {
		                 recordingMedia.innerHTML = '<option value="record-audio-plus-video">Audio+Video</option>'
		                                             + recordingMedia.innerHTML;
		                 console.info('This RecordRTC demo merely tries to playback recorded audio/video sync inside the browser. It still generates two separate files (WAV/WebM).');
            }
                     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();
		                 };

		                 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.';
		             };
			           ///////////////////////////////////////////////////
			  		    //Reset the Camera
			  		             function resetCamera(){
			  		                location.reload();
			  		              }
						/////////////////////////////////////////////////////////

Any assitance is appreciated.

[m_hutley]

	if(!RecordRTC) return alert('No recording found.');

I’d put my money on that being what hole your code’s falling down.

Have you done caveman debugging on it yet?

[m_hutley]

Nope, i was wrong.

What is calling saveToDiskOrOpenNewTab ? Nothing, as far as my notepad is telling me.

[Paul_Wilkins]

Caveman debugging? Oh yes - logs all over the place

[m_hutley]

Yup.
console.log before and after every line until you figure out which line is screwing the code up and what path through the if/elses it’s taking.
Then you can figure out why that line may be A) being called when you dont expect it to, or B) failing silently, if the console isnt reporting an error.

In this particular case, I would start with a console.log at the start of saveToDiskOrOpenNewTab, one before the line that assigns the button its onclick listener, one in both of the if/else clauses for enabling the button, and one inside the onclick listener.
That way you can be sure that the function was called, that it enabled the button, and that when you click the button, you know if the listener was properly attached.

[ChrisjChrisj]

Thanks for your replies.
I have no issues in Console. Can you suggest something as to why the upload-to-server button isn’t triggering the upload action, by looking at the code. Can you tell if the upload-to-server coordinates with the upload JS code?

<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>

and the JS:

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

I look forward to any assistance.

[m_hutley]

I still can’t see anything that calls the function saveToDiskOrOpenNewTab in your code, so I don’t know how you’re actually invoking that function.

Show me somewhere in your code that calls that function, or describe how it it gets called.

If that function doesnt get called, your upload-to-server button is never enabled, and never has a listener attached to it.

[Paul_Wilkins]

Ancient techniques are to use inline HTML event attributes to call functions. That might be how it’s called. Other ancient techniques are where undefined JavaScript variables such as recordingPlayer and recordingDIV gain access to HTML id elements instead.

[m_hutley]

@Paul_Wilkins

Ancient techniques are to use inline HTML event attributes to call functions.

@ChrisjChrisj

<button id="upload-to-server">Upload Recording</button>

@ChrisjChrisj

<button id="save-to-disk">Save To Disk</button>

Again, I see NO mechanism in the code provided that calls the function. The camelCase word “saveToDiskOrOpenNewTab” appears exactly once in the code we have been provided, and it’s the function definition. If i’m blind, do feel free to point it out to me.

I’m certainly aware that there may be bits of the code we’re not being shown, which is why I said

@m_hutley

Show me somewhere in your code that calls that function, or describe how it it gets called.