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?

You are trying to use the XMLHttpRequest to load a blob??? Why? What is the blob? — epascarello
– epascarello, Commented Dec 30, 2014 at 14:39
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. — RickyAYoder
– RickyAYoder, Commented Dec 30, 2014 at 14:41
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. — epascarello
– epascarello, Commented Dec 30, 2014 at 14:44
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. — RickyAYoder
– RickyAYoder, Commented Dec 30, 2014 at 14:45
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. — RickyAYoder
– RickyAYoder, Commented Dec 30, 2014 at 14:48

Musa · Accepted Answer · 2015-01-01 21:59:34Z

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>

answered Jan 1, 2015 at 21:59

Musa

97.9k17 gold badges123 silver badges144 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

RickyAYoder Over a year ago

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

RickyAYoder Over a year ago

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!

Er. ßridy · Accepted Answer · 2015-01-08 12:33:22Z

0

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.

answered Jan 8, 2015 at 12:33

Er. ßridy

5632 gold badges6 silver badges20 bronze badges

1 Comment

RickyAYoder Over a year ago

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!

Community · Accepted Answer · 2017-05-23 12:33:39Z

0

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

edited May 23, 2017 at 12:33

CommunityBot

11 silver badge

answered Feb 28, 2015 at 13:30

RAEC

3321 silver badge8 bronze badges

Collectives™ on Stack Overflow

XMLHttpRequest Status of 404 With Blob URL

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related