MediaSource fetching/downloading - javascript

When I try to fetch MediaSource object via blob link or send GET XMLHttpRequest I'm getting the error net::ERR_FILE_NOT_FOUND.
This happened for youtube or instagram MediaSource links.
eg
var xhr = new XMLHttpRequest;
xhr.open('get', url);
xhr.responseType = 'arraybuffer';
xhr.onload = function () {
some_Further_CallBack(xhr.response);
};
xhr.send();
I'm completelly stuck, please say me what I'm doing wrong.

The blob: URL when created from a MediaSource can not be fetched from that URL. Note that even when it's created from a Blob, it's not the same Blob object that you fetch.
The best is to keep your MediaSource instance available in a variable, but in cases you can't (e.g because you're not the author of the page), you can add some hooks on the URL methods to save the original object and retrieve it later as exposed in this answer of mine. But note that you'd need this script to be ran BEFORE the page's use of URL.creatObjectURL(), which means that in your case you will probably need an user-script to inject it as soon as possible.

Try get error after send
https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/error_event
But i think is not possible get content from youtube by XMLHttpRequest

Related

Javascript delete blobs from xmlhttprequest

I have a web app that pre-loads videos by requesting blobs and creating blob urls.
// Get video Blob URL
const url = 'https://www.some-video-url.com/video.mp4';
const xhr = new XMLHttpRequest();
xhr.open('GET', sourceUrl, true);
xhr.responseType = 'blob';
xhr.onprogress = () => {console.log('downloading')};
const blobUrl;
xhr.onload = () => {
blobUrl = URL.createObjectURL(req.response);
console.log('done');
};
xhr.send();
...
// After using video
URL.revokeObjectURL(blobUrl);
I would send such requests multiple times. It work fine in the beginning, however, when I send too many of these requests I get this error.
VM1853:10 GET https://www.some-video-url.com/video.mp4 net::ERR_FAILED 200
I am running this on Chrome and it here is my hypothesis.
According to this documentation it seems like Blob storage limit for chrome is 10% of total disk space. I confirmed this by sending xhr request to GET a 2 GB file until I hit the error. It got an error when I sent request for 20 of the 2GB files. It seems like the blobs are not garbage collected because it is not properly de-referenced. This mysterious reference seems to be related to the xhr.
In my application, I would like to
1. Start downloading videos in the background
2. Client watches a video
3. When the video playback is done, remove the video
Is there a reliable way to execute step 3? I would like the Blob to be deleted after its use.

send a file with a form, but replacing the FormData api work

For learning purposes, I'd like to know how to create a FormData object.
Using the FormData api, I can send a file like this :
let data = new FormData();
data.append('avatar', avatar);
var xhr = new XMLHttpRequest();
xhr.open('POST', '/api_enpoint', true);
xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
xhr.setRequestHeader('X-CSRF-TOKEN', document.head.querySelector('meta[name="csrf-token"]').content);
xhr.send(data);
"avatar", appended to the FormObject, is a "File" object.
How can I perform the "FormData" work manually ?
That is, creating the full object, and send it with xhr.send(data)
Is there an example somewhere ? I can't find code that works.
I've read the RFC, but it does not help me that much.
Edit:
My question is different than How to manually create multipart/form-data
My case is specifically for sending a file. And the other question does not handle that. There's no working solution at all for both questions.

Rename or Download File from Firebase Storage in JavaScript

Is there any way to rename or download the file from the firebase storage?
I don't see the rename method nor download method.
I tried to download the file by the url and it doesn't work at all
var blob = null;
var xhr = new XMLHttpRequest();
xhr.open("GET", "downloadURL");
xhr.responseType = "blob";
xhr.onload = function()
{
blob = xhr.response;//xhr.response is now a blob object
console.log(blob);
}
xhr.send();
It returns
No 'Access-Control-Allow-Origin' header is present on the requested resource.
Two things here:
1) you want to use the getDownloadURL() method (docs) to get a public download URL, that way you can simply drop your item in an <img> tag, allow users to click on it to download it, or use an XMLHttpRequest to get the bytes.
2) you'll want to enable CORS on your objects, see: Firebase Storage and Access-Control-Allow-Origin
Trigger click with javascript...
download filename.txt

Get image data from another domain with AJAX request

I am trying to get binary data of an image from another domain with an AJAX request. I tried various methods, but there was no working solution. I found some code on the internet that looked good, but even with this calls I get errors.
What do I wrong? Is there a standardized way to do this?
Here is what I tried until now:
var request = this.createCORSRequest('GET', 'http://url/to/image.png');
request.onload = function () {
var text = request.response;
};
request.onerror = function (error) {
alert('Woops, there was an error making the request.');
};
request.send();
private createCORSRequest(method, url) {
var xhr: XMLHttpRequest = new XMLHttpRequest();
if ("withCredentials" in xhr) {
// Check if the XMLHttpRequest object has a "withCredentials" property.
// "withCredentials" only exists on XMLHTTPRequest2 objects.
xhr.open(method, url, true);
} else if (typeof XDomainRequest != "undefined") {
// Otherwise, check if XDomainRequest.
// XDomainRequest only exists in IE, and is IE's way of making CORS requests.
var xdhr = new XDomainRequest();
xdhr.open(method, url);
} else {
// Otherwise, CORS is not supported by the browser.
xhr = null;
}
return xhr;
}
I even found this solution without ajax here on stackoverflow, but it does not work for me:
Asynchronously load images with jQuery
Here a screen of the properties the error event contains:
My goal is to get the binary of an image from a url which I get from an atom feed . I need the binaries to copy the picture to MS SharePoint.
You cannot get data from another domain unless :
the remote server allows it using CORS
you run your browser in an unsafe mode.
Reason : otherwise site A would be able to (maliciously) read the user data from site B
You must add headers to the method to allow cross domain request.
For example, if you are trying to get data from www.example.com/main.php , then you must add headers to allow those method to be called from different domain.

XMLHTTPRequest returns null in response [duplicate]

This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Getting BLOB data from XHR request
I try to get an image from my server dynamically, but the XMLHTTPRequest returns null in the response. The Google Chrome network tool tells me that he loaded the day1.jpg, but the blob variable is null...
var xhr = new XMLHttpRequest(), blob;
xhr.open("GET", "day1.jpg", true);
// Set the responseType to blob
xhr.responseType = "blob";
xhr.addEventListener("load", function () {
if (xhr.status === 200) {
console.log("Image retrieved");
blob = xhr.response;
console.log("blob: " + blob);
}
}, false);
// Send XHR
xhr.send();
The output is:
Image retrieved
blob: null
The reason is a bug on the Chrome side (also available on v18). Reported here
why use ajax to load the image (as far as I know you can't http://www.mail-archive.com/discuss#jquery.com/msg00377.html)? You can just dynamically generate an image element and set the src attribute to the image on your server.
var i = new Image();
i.onload = function()
{
//do the stuff you need to do once it loads here
}
i.src = "day1.jpg";
Use the console to inspect the xhr object and see if it's being populated at all
I doubt that you can load images from the server dynamically, instead what you can do is update the image source dynamically and tell from whci location shoul the image be fetched/loaded

Categories