XMLHttpRequest Status of 404 With Blob URL

Question

I'm trying to upload a blob URL generated by getUserMedia to the server. Someone else wanted to do the same thing, and that question has been answered.

I am using the same code for the XHR request as the person who answered that question, but I'm getting a 404. I made a fiddle, and the same thing happens when you look at the console. I have a live example on my site as well, and the same thing happens.

Here is the piece of code that needs some TLC:

function XHR(){
var xhr = new XMLHttpRequest();
xhr.open('GET',record.src); //404 ???
xhr.responseType = 'blob';
xhr.onload = function(e) {
    if (this.status == 200){
        //do some stuff
        result.innerText = this.response;
    }
};
xhr.send();
}

Everybody else seems to be able to do this, because this has been discussed before.

Exhibit A

Exhibit B

I'm using ChromeOS, 41.0.2252.2 dev. What exactly is going on, and why can't I get the blob?

Aurar

You are trying to use the XMLHttpRequest to load a blob??? Why? What is the blob? – Centonze

Well, the first link I put in the body of my post shows someone who wanted to upload a getUserMedia BLOB to the server. That's what I want to do as well. – Aurar

Well your code is not uploading it to a server.... You are making a request to that src...unless I am reading the code wrong. PLUS you probably want to be using a POST and not a get due to file size. – Centonze

I know. But you can't put the carriage before the horse. I need to know why I get a status of 404 when trying to get a BLOB URL before I can even think of uploading to server. – Aurar

I'm not sure. The code I saw used GET to retrieve the contents of the BLOB, and then POST to upload to the server. – Aurar

I don't believe you understand what I am asking. I know how to get/send data with AJAX. My question is why am I getting a 404 not found error for a BLOB URL? – Aurar

Can you show us what record.src is? I cannot try your code in Firefox. – Fricassee

If you try the Fiddle I have in my post, the source is a BLOB URL. (blob://). The source is generated using window.URL.createObjectURL(mediaStream); – Aurar

Answer 1

I'm almost certain the media in a MediaStream isn't saved anywhere, just thrown away after use.
There is a API in the works to record streams, MediaRecorder .
Only Firefox has the most basic implementation of this so it isn't usable as yet.
If you're implementing this on a mobile device you can use a file input with the capture attribute.

<input type="file" accept="video/*" capture>

Translucid

But then I don't understand. What about the first link in my post? What browser were they referring to? – Aurar

Another thing I'd like to add: They DO seem to be thrown away after use, but that doesn't make any sense. BLOB URLs are supposed to be "in-memory". Kinda like false advertising--a BLOB that's just tossed instead of kept! – Aurar

Answer 2

function XHR(){
var xhr = new XMLHttpRequest();
xhr.open("GET","record.src",true); // adding true will make it work asynchronously
xhr.responseType = 'blob';
xhr.onload = function(e) {
    if (this.status == 200){
        //do some stuff
        result.innerText = this.response;
    }
};
xhr.send();
}

Try now! it should work.

Denomination

Sorry I took so long to get back to this question. This still does not work. I honestly don't understand why this has been talked about before when it doesn't even work! – Aurar

Answer 3

look at this post: Html5 video recording and upload?

What you are missing is the declaration of what "blob" is. First thing this person does inside the .onload function() is var blob = new Blob([this.response], {type: 'video/webm'});

Phocine