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?

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>

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.

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