XMLHttpRequest Status of 404 With Blob URL - javascript

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?

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>

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.

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

Related

Javascrip service worker blob

I am trying to download a file in a service worker. The file came from a blob.
I already know that i can download a blob by doing this
var urlCreator = window.URL || window.webkitURL;
var blobURL = urlCreator.createObjectURL(blob, { type: "octet/stream" });
or by using something like FileSaver.js
But today, i am trying to "render" the bytes array of the blob in the page and force the browser to download the document.
Why ?
I am trying to do that because, some browser that i am trying to reach do not support url like "blob:https:......"
So i try to find a way to render the bytearrays of my blob directly in javascript.
I know that i can push headers with worker, but not sure that is the right strategie.
I also try something like that
var xhr = new XMLHttpRequest();
xhr.open('GET', obj.URL, false);
xhr.overrideMimeType("application/octet-stream");
//xhr.setRequestHeader("Accept", "application/octet-stream");
xhr.responseType = "arraybuffer";
xhr.onload = function (e) {
self.Response(xhr.response);
//if (this.status == 200) {
// var myBlob = this.response;
// // myBlob is now the blob that the object URL pointed to.
//}
};
xhr.send();
In my worker.js
ps: Please avoid to told me, send you base64 blob content to your server and send back the file to the browser, i would like to find a pure javascript solution.
Is it possible ?

reading an object URL produced in a worker with IE

I have a webworker that is producing a CSV for downloading, and to conserve memory I only have it return the URL it produces from teh blob..
My worker code looks something like::
var blob = new Blob([ResultOfSomeWork()],{type:'text/csv'});
URL.createObjectURL(blob);
self.postMessage({url:blob.url});
My goal is to just be able to download it in firefox and chrome this is very easy as I can just set up an invisible <a> and have it be clicked to download it.
For IE10 I want to use msSaveBlob but I need a blob which I don't want to transfer.
How can I download a object dataurl in IE10?
So I found a solution that works. Apparently, I can XHR and read the content back in my main thread.
worker.onmessage = function(event){
var url = event.data.url;
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.responseType='blob';
xhr.onload = function(){
msSaveBlob(xhr.response, fileName +'.csv');
};
xhr.send();
}
While this feels extremely complicated it works well in practice and is really fast.

'Access is denied' exception trying to download binary file stream

I am receiving an XmlHttpRequest's response in my code, which is a binary stream of a file. The response has the correct size and mimetype. I would like to download this file to disk, by issuing the typical browser prompt for saving files. I have the following script in place which works perfectly fine in Chrome. It fails for IE though.
var url = /my_rest_url/;
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.responseType = "blob";
xhr.onreadystatechange = function (e) {
if (xhr.readyState == xhr.DONE) {
var blob = xhr.response;
var objectUrl = URL.createObjectURL(blob);
window.open(objectUrl);
}
}
xhr.send();
The failure happens on the window.open() call, where IE fails with an exception that says "access is denied". I have researched for hours on end without finding a solution which works for me. I have seen some recommendations to use a 'hidden iframe' to start the download, but it hasn't worked out for me. Has anyone ever made something like this work in IE? Would be glad to get some ideas.
ps/ I know blob and createObjectURL are relatively new. And even though they are supported by IE10 and above, I would really feel better to get rid of these and achieve this an 'old-school' way, if there is any.

Get JSON in a Google Chrome Extension

I would like to make a google chrome extension, however I have been rubbing my head on a problem all night. I have the following code giving me a problem:
var xhr = new XMLHttpRequest();
var resp;
xhr.open("GET", "http://www.roblox.com/catalog/json?Subcategory=16&SortType=3&ResultsPerPage=10", true);
xhr.onload = function () {
resp = JSON.parse(xhr.responseText);
}
xhr.send();
I'm attempting to obtain some JSON data. If I replace this section of code with var resp = //(The actual JSON data itself), then the extension works just fine.
How can I fetch this JSON data correctly, and still have it compactable with anyone who downloads my extension?
Sorry if there's an obvious answer, I'm still new to Javascript.
Thanks!
Try setting the content type. Not all browsers use the same default.
xhr.setRequestHeader("Content-Type", "*/*");

save blob audio file on server with xmlhttprequest

I'm working on an audio web application where you can play along with music and record yourself. I'm working with a recorder plugin and I'm trying to save what has been recorded in a folder on a server. I get a blob file from the plugin via this javascript code:
recorder.exportWAV(function(blob) {
var xhr = new XMLHttpRequest();
var url = '../../audio/recordings/test.wav';
xhr.open('POST',url,true);
xhr.onload = function(e) {
if (this.status == 200) {
console.log(this.responseText);
}
};
xhr.send(blob);
},'audio/wav');
I have never worked with this before so I'm not sure if my code is right. But I get no errors my file is just not saved. I have been searching the internet for this and what I have found is that a lot of people use a php file as url. Why? What php file are they using?
Thanks!

Categories