Help with Console error

JavaScript
1

Thanks for all of your previous help.
I am testing this new code, where video is captured/recorded successfully. However, I don’t have the upload part correct. It’s showing this error:

“Uncaught TypeError: Cannot read property ‘name’ of undefined
at uploadFile (index.html:166)
at HTMLButtonElement.onclick (index.html:76)”

Line 166 is:
formData.append('video-filename', blob.name);
Line 76 is:
<button id="uploadFile" onclick="uploadFile()">Upload</button>

Here’s the pertinent html:

<button id="button1" onclick="startRecording()">Start</button>
<button id="button2" onclick="endRecording()">Stop</button>
<button id="uploadFile" onclick="uploadFile()">Upload</button>
<video id="video" autoplay="autoplay" controls="controls" poster="/thumbnail.jpg"
type="video/mp4" muted playsInline></video>

And the JS:

function supportsRecording(mimeType)
{
    if (!window.MediaRecorder)
        return false;
    if (!MediaRecorder.isTypeSupported)
        return mimeType.startsWith("audio/mp4") || mimeType.startsWith("video/mp4");
    return MediaRecorder.isTypeSupported(mimeType);
}

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

let blobs = [];
let stream;
let mediaRecorder;
async function startRecording()
{
    stream = await navigator.mediaDevices.getUserMedia({ audio: true, video: true });
    mediaRecorder = new MediaRecorder(stream);
    mediaRecorder.ondataavailable = (event) => {
       // Let's append blobs for now, we could also upload them to the network.
       if (event.data)
            blobs.push(event.data);
    }
    mediaRecorder.onstop = doPreview;
    // Let's receive 1 second blobs
    mediaRecorder.start(1000);
}
function endRecording()
{
    // Let's stop capture and recording
    mediaRecorder.stop();
    stream.getTracks().forEach(track => track.stop());
}
function doPreview()
{
    if (!blobs.length)
        return;
    // Let's concatenate blobs to preview the recorded content
    video.src = URL.createObjectURL(new Blob(blobs, { type: mediaRecorder.mimeType }));
}

///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

function uploadFile() {
    let formData = new FormData();
}

var blob, fileName, fileObject;
              function uploadBlob(blob) {
                  prepareBlob(blob);
            			InitUploading();
              }

 function prepareBlob(blob){
            	    	// generating a random file name
            			 fileName = getFileName('mp4');
            			 // we need to upload "File" --- not "Blob"
            			 fileObject = new File([blob], fileName, {
            			 type: 'video/mp4'
            		 });
            }
function InitUploading()
            			 {
uploadFile(fileObject, function (response, fileDownloadURL) {
if (response !== 'ended') {
            									 document.getElementById('header').innerHTML = response; // upload progress
return;
          }
            							 document.getElementById('header').innerHTML = '<a href="' + fileDownloadURL +
            									 '" target="_blank">' +
            									 fileDownloadURL + '</a>';
 //alert('Successfully uploaded recorded blob.');
            							 // preview uploaded file
            							 video.src = fileDownloadURL;
            							 // open uploaded file in a new tab
            							 window.open(fileDownloadURL);
            					 });
            			 }

function uploadFile(blob, callback) {
 // create FormData
 var formData = new FormData();
      formData.append('video-filename', blob.name);
        formData.append('video-blob', blob);
           callback('Uploading recorded-file to server.');
            makeXMLHttpRequest('save1.php', formData, function (progress) {
  if (progress !== 'Upload Complete') {
  callback(progress);
 return;
          }
// var initialURL = 'uploads/' + blob.name;
            							 callback('ended', initialURL);
            					 });
            			 }

Everything works successfully up to the ///////////////////////////////////////////////////////////

Ultimately, I’m trying to successfully upload upon upload click, but I first need to resolve those errors. Any help with solving those errors is greatly appreciated.

Any comments/guidance with the upload code portion is equally welcomed.

2

So, let’s be instructful.

So here, the console is telling you WHAT went wrong. Something was undefined, and you tried to access “name” property of it.

so we look at this line, and we see that “blob.name” is the thing that you were trying to reference the name of. so Javascript thinks “blob” is undefined.

So obvious next step is… what defines ‘blob’?

Well that makes blob an undefined variable. So there’s a good start…

but here’s where the problem comes from. The line is referring to a LOCAL variable, blob, that is the first parameter of the function. So whatever was put into uploadfile, the first argument was undefined.

Well yup. Given that there are no parameters there, BOTH of the arguments to uploadFile are undefined.

Did you accidentally reuse the function name uploadFile?

3 Likes
3

Thanks for your great reply. Much appreciated.
I didn’t write the upload portion, and am not very knowledgeable in javascript. Although I’m learning, but currently I don’t know how to come up with a solution based on your instructions. Any example of a solution would be welcomed.

4

I’m… going to be honest and say i’m guessing a bit here, because I didnt write the code either.

From what I can see in your code, uploadFile should be being called by InitUploading, which in turn should be being called by uploadBlob.

uploadBlob expects a blob to be passed to it.
doPreivew creates a blob, and sets video.src as that blob.

So my instinct is to suggest the upload button instead be calling uploadBlob(video.src)

5

Thanks for the replies. This works to record/capture, stop & play, but only uploads successfully via chrome-desktop, the file never arrives when uploaded from safari-iPhone:

function uploadFile() {
            // create FormData
          var fileType = 'video'; // or "audio"
         var fileName = 'vid-.webm';
           var formData = new FormData();
           var request = new XMLHttpRequest;
          formData.append(fileType + '-filename', fileName);
          formData.append(fileType + '-blob', blob);
         request.open("POST", "/save1.php");

         request.onreadystatechange = function() {
		 if(request.readyState==4) {
		 alert(request.responseText);
		 }
		}

            request.send(formData);
       }

any ideas/suggestion are appreciated

6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.