I have a URL, for example this:
https://r6---sn-vgqsrn76.googlevideo.com/videoplayback?expire=1566535969&ei=wRxfXezPAoORV-3ogpgK&ip=185.27.134.50&id=o-ALFdSvuvmX_bqDsm4oRW7q9c4igbKlBmECWdISuA4Jxe&itag=22&source=youtube&requiressl=yes&mime=video%2Fmp4&ratebypass=yes&dur=624.175&lmt=1529213992430932&fvip=6&c=WEB&sparams=expire%2Cei%2Cip%2Cid%2Citag%2Csource%2Crequiressl%2Cmime%2Cratebypass%2Cdur%2Clmt&sig=ALgxI2wwRAIgZzTTsBPpVznwCvzArBFuSF7Bm3yhcO0rwQdfOjBibnsCIBqf8iHuAwahqi0T6qZ3MNbj8BfLgGo2Y3fPOi96RgEV&redirect_counter=1&cm2rm=sn-aigeey7d&req_id=8f890b1c72fda3ee&cms_redirect=yes&mip=2607:fea8:4d9f:fa68:40a2:35d0:8863:2d17&mm=34&mn=sn-vgqsrn76&ms=ltu&mt=1566514280&mv=m&mvi=5&pl=41&lsparams=mip,mm,mn,ms,mv,mvi,pl&lsig=AHylml4wRQIgSCcxaGd_IpVykCuglJtHwewUuZZIyKKr1FBbNP5MvqsCIQCYQEUoM9SpfpySHA_13lB6SvevIuMvhyFDEcrsX0y0ig==
How can I download the video in this URL programmatically through JavaScript? I cannot use PHP, Apache, JQuery etc, only Pure JavaScript and HTML.
I have tried using download.js, but I do not think that is the right approach to download videos. I have also looked/tried at various other websites and Stack Overflow answers, but none of them fixed this issue.
EDIT: The other SO answer that someone suggested will not work since the video is on a different baseurl than my own, which means that
<a href="file" download="filename">
will not work on Chrome. Doing this just opens the video.
function downloadImage() {
var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://via.placeholder.com/150', true);
xhr.responseType = 'blob';
xhr.onload = function () {
var urlCreator = window.URL || window.webkitURL;
var imageUrl = urlCreator.createObjectURL(this.response);
var tag = document.createElement('a');
tag.href = imageUrl;
tag.target = '_blank';
tag.download = 'sample.png';
document.body.appendChild(tag);
tag.click();
document.body.removeChild(tag);
};
xhr.onerror = err => {
alert('Failed to download picture');
};
xhr.send();
}
I found the solution to the problem. The link was a YouTube source video link that I was trying to download, and on all videos (except the ones with music or the music genre) all you needed to do was to add
&title=[NAME OF FILE HERE]
which would download the video.
Edit: Downloading these videos worked with download.js. You need to make a XMLHTTP request to the video to get the data, and then use the function
download(data, name, mime)
For more documentation, look on the download.js GitHub page.
Related
First of all, hello everyone.
I need to archive videos on Crunchyroll for a project, but no matter how much I reverse engineer, I can't find the main source file.
First of all, i have Blob sourced player like that.
<video id="player0" playsinline="" src="blob:https://static.crunchyroll.com/3740...db01b2" style="display: flex; width: 100%; height: 100%;"></video>
The first problem starts with the fact that the video is streamed instead of being sent directly.
So this solution doesn't work for this case.
<a href="blob:https://static.crunchyroll.com/3740...db01b2" download>Download</a>
After that I realized that Crunchyroll has developed even stronger protection than YouTube because on YouTube I could get the source video by playing with the range parameter.
Then I tried to pull the content with javascript, but I still couldn't get a result.
var xhr = new XMLHttpRequest;
xhr.responseType = 'blob';
xhr.onload = function () {
var recoveredBlob = xhr.response;
var reader = new FileReader;
reader.onload = function () {
var BlobAsDataURL = reader.result;
window.location = BlobAsDataURL;
}
reader.readAsDataURL(recoveredBlob);
}
xhr.open('GET', 'blob:https://static.crunchyroll.com/893...2960');
xhr.send();
When I try to use it, I get either the Cross-Origin error or the file not available error when I try it on the Crunchyroll page.
Then I thought of trying to stream it via VLC player. But when I came to the Network tab, I saw that the broadcast was made in an extremely complex way, not in m3u8 format, so it rotted without trying.
Does anyone know what I can do?
I'm using file-saver in my angular application to download a PDF generated in my backend. The library generally works fine on desktop and android. But I don't seem to be able to download a file on IOS. file-saver doesn't, as stated in on the GitHub page, open the blob in a new Page either. it jus opens on the same page (not wanted). Funnily enough it works fine in safari (it opens a dialog that asks me to download and then downloads it without opening it). In any other browser (opera, firefox and chrome) it doesn't seem to work.
I've tried file-saver, downloadJ, creating an anchor tag myself together with the download attribute, using the application/octet-stream mime-type and several other solutions posted on the internet. All of these methods in most browsers just doe nothing or open the PDF blob in the same page instead of downloading it or opening it in a new tab (as file-saver states it would do on IOS).
I'm generating the PDF in a Google Cloud Function. Is there maybe a way to skip the whole client side of things and make the browser download the file directly from there?
Does anyone have another idea on how to download PDF's on mobile IOS (e.g. with a service worker or something)?
Thanks in advance
Best solution as per new chrome specification https://developers.google.com/web/updates/2018/02/chrome-65-deprecations
Vanilla JavaScript
public static downloadFile(url: string): void {
const xmlHttp = new XMLHttpRequest();
xmlHttp.onreadystatechange = () => {
if (xmlHttp.readyState === 4 && xmlHttp.status === 200) {
const blobUrl = window.URL.createObjectURL(xmlHttp.response);
const e = document.createElement('a');
e.href = blobUrl;
e.download = blobUrl.substr(blobUrl.lastIndexOf('/') + 1);
document.body.appendChild(e);
e.click();
document.body.removeChild(e);
}
};
xmlHttp.responseType = 'blob';
xmlHttp.open('GET', url, true);
xmlHttp.send(null);
}
If you're using angular try this.
async downloadBrochure(url: string) {
try {
const res = await this.httpClient.get(url, { responseType: 'blob' }).toPromise();
this.downloadFile(res);
} catch (e) {
console.log(e.body.message);
}
}
downloadFile(data) {
const url = window.URL.createObjectURL(data);
const e = document.createElement('a');
e.href = url;
e.download = url.substr(url.lastIndexOf('/') + 1);
document.body.appendChild(e);
e.click();
document.body.removeChild(e);
}
I want to show tiff/tif images inside an HTML5 canvas. Following this doc I´ve accomplished to do it with uploaded images but when I need to dynamically reference external images by URL the browser always force the download.
var xhr = new XMLHttpRequest();
xhr.responseType = 'arraybuffer';
xhr.open('GET', "url/of/a/tiff/image/file.tiff");
xhr.onload = function (e) {
var tiff = new Tiff({buffer: xhr.response});
var canvas = tiff.toCanvas();
document.body.append(canvas);
};
xhr.send();
At the begining I had CORS issues but I solved that problem, now the uploaded images are display correctly but URL are not.
How can I do this for both cases uploaded images and URL
Thanks in advance!
UPDATE!
Working on later I noticed that when load .tiff files there is no problem. The download is forced when is a .tif file. Are these mime types differents?
I am reprogramming a Google Chrome extension, it was able to download an image using the src attribute, but now, the page change the way it shows the image, it use in the src attribute some kind of script that in background changes the image, getting a different image that web page is showing. I can see the image that I need but using "ChromeCacheView" of NIRSOFT, but it's a desktop solution, so it can't help to do it in the Chrome extension.
Someone could help me, please!
This code below is what I'm using now, but as I said already, it can't show me the web page image is showing.
var xhr = new XMLHttpRequest();
// I think here is where I need the change Getting this ID from cache
var kima = $(frame1).contents().find("#ccontrol1");
xhr.open('GET',kima[0].src,true);
//
xhr.responseType = 'blob';
xhr.onload = function(e) {
if (this.status == 200) {
var blob = new Blob([this.response], {type: 'image/png'});
kym_send_image(blob);
kym_process01();
}
};
xhr.onerror = function (e) {
window.location.href = url1;
return;
};
xhr.send();
Well you need to use request.fetch,
You could replace your code with this one below
fetch(kima[0].src,{cache : "force-cache"}).then(r => r.blob({type: 'image/jpg'})).then(blob => function_to_catch_blob(blob));
Hope this could help you!
I am writing a chrome extension. I want to send an image on some webpage to my site.
Using chrome contextMenus, I can get the source url of that image. I want to know how to use that source to download it or to send it somewhere else. ( similar to save-as functionality provided by browser)
Here's what I would to to upload the URL of an image through context menus:
chrome.contextMenus.onClicked.addListener(function (info) {
var data = new FormData();
data.append('url', info.srcUrl);
var xhr = new XMLHttpRequest();
xhr.open('POST', 'http://mywebsite.com', true);
xhr.onload = function(e) { console.log(e); }
xhr.send(data);
});
Hope it helps.