Assign image to object gives a interpreted warning - javascript

I have created an image in my object so i can draw it to my canvas... I did it like this:
item[id].img = new Image();
item[id].img.src = './image_folder/'+data[i][j].image;
Then my canvas draws on this line:
canvas[2].ctx.drawImage(item[theID].imge, px, py);
It works fine but in Chrome console it says:
Resource interpreted as Image but transferred with MIME type text/html
I'm curious what this actually means and how to correct it ?

When you request things from servers, they will send "headers" with whatever is being sent.
It's how browsers can figure out how to use video or music, or know what to do with JS or CSS.
Modern browsers are pretty intelligent about dealing with these things, but if you tried to send an .mp3 to a browser that doesn't know how to use .mp3s, it might try loading the file as text, and you'd get a lot of funny characters.
MIME types can avoid that, mostly. If you ask to download an .mp3, the server might send a header that looks like "Content-Type: audio/mpeg codecs=mp3".
A regular web-page, in comparison, would be sent as "Content-Type: text/html", while a .png image would be sent as "Content-Type: image/png".
If you're playing around on a test-server that you installed using a WAMP installer, or EasyPHP or whatever, your server probably doesn't know about serving .png files with the "image/png" MIME-type.
Intelligent browsers will read the contents of the file and try to figure out what they're supposed to be, if they're given the wrong MIME-type for the file (which is why your images work in the first place).
This particular error probably isn't going to hurt anyone (because browsers that can't figure out you've got a .png file are probably browsers that don't have <canvas>).
But to fix it in other cases (like .ogg files for <audio> and <video> support, which IS important), you should figure out what kind of server you're running (my money's on Apache), and figure out how to add mime-type and file-type declarations.
You could find that through a Google search like "add mime-types to apache".
If this is a server that's live on the internet, and you're paying for hosting, then you'll need to set it through your hosted site.

Related

Unable to play video or music in Javascript/HTML file preview system

I am building a web app that contains a file preview system.
It works fine on PDFs, text files, pictures of all type, and so forth. But what it can't do is play videos or audio files (.mp4, .mp3, etc; I don't have any other formats handy).
I am suspecting that it's because an image or text is loaded all at once, but audio and video tend to stream, which isn't behaving here. Interestingly, it does work in Firefox... but not Chrome.
Here is the relevant code:
function loadFile(){
var pvurl = URL.createObjectURL(document.getElementById('file').files[0]);
if (source_name.substring(".mp4")>1){
pw.createElement("video");
}
pw.src=pvurl;
pw.onload=function () {URL.revokeObjectURL(pvurl);};
URL.revokeObjectURL(pvurl);
}
<input type="file" class="file" id="file" onchange="source_name=this.value;">
<iframe id="preview" class="hidden mainWindow" style="height:100%;"></iframe>
I get two error messages from this. Meanwhile, the iframe at least appears to start loading the video or audio (and I get the video loading screen and spinner), but just stops trying after a second or two.
Resource interpreted as Document but transferred with MIME type video/mp4: "blob:null/895c8ed2-49f1-4160-b2f4-b6904068d5ad".
blob:null/895c8ed2-49f1-4160-b2f4-b6904068d5ad:1 Not allowed to load local resource: blob:null/895c8ed2-49f1-4160-b2f4-b6904068d5ad
I have tried removing the revokeObjectURL line (in case it revokes it before it's loaded or something--and does that actually save any memory? Is it loading from file or buffering?), but that doesn't seem to actually fix the problem, and I get the same errors. What is going on here? It also seems to be seeing the MIME type, but I can't find a guide on how to get the code to see it. I'd like to get rid of the warning or perhaps find a way to handle audio or video types differently, if it can't work in an iframe (I don't see why that would make a difference, but...).
If you also have any information on exactly how this works, I'd also appreciate it.
The app does all its processing clientside in Javascript, so I'm rather interested in how this URL access method compares to the FileReader.readAsArrayBuffer() method I'm using for everything else (I do need to read the source file at a byte level several times, so if the URL method is a pipe that's a no-go).

Partial download of mp4 file with rn-fetch-blob, react-native-video throwing unrecognized error

I'm trying to implement local video caching into my video-streaming application.
I'm using:
react-native-video for video playback
rn-fetch-blob for downloading files
I've managed to start the download at the beginning, replace the original URL with the local one and continue with the playback from my local file (it works as expected) - even with partial file (as long as I start from 0).
The main problem is seek function. If a user wants to start watching at e.g. 120s - download will still start at 0B. I've implemented Range header in the Fetch API looking something like this:
"Range": "bytes: {oneSecondInBytes * whereYouWantToStartWatchingInSeconds}-{fileSizeInBytes}"
to overcome this problem. Now download starts at desired Bytes and downloads only desired part of the video file.
The download works normally but video playback throws Unrecognized media format error. Also tried adding some bytes for headers at the beginning (0-10000B) - to try and recognize the video file, no luck.
So I'm wondering if it's possible to implement partial video file download with rn-fetch-blob and be able to play the file back using react-native-video (not starting at the beginning of the file), later also add other pieces to the file (until the whole download is complete). How could I convince react-native-video that my partial download is indeed proper mp4 file?
UPDATE
I've messed around with HTTP GET headers for a while and actually got somewhere. Not a complete solution but might help someone:
"Content-Type": "video/mp4",
"Range": `bytes=0-1000, 45111150-`,
"Accept-Ranges": "bytes",
"Content-Length": "89024062"
^^ these are my test headers. Had to add two value to Range. The first one just downloads the first part of the file to get headers and to recognize the file type. The second one is from the "seek point" owards. Video now plays and file type is recognized.

Intermittent failure to load images - ERR_CONTENT_LENGTH_MISMATCH

The problem
My website fails to load random images at random times.
Intermittent failure to load image with the following error in console:
"GET example.com/image.jpg net::ERR_CONTENT_LENGTH_MISMATCH"
Image either doesn't load at all and gives the broken image icon with alt tag, or it loads halfway and the rest is corrupted (e.g. colors all screwed up or half the image will be greyed out).
Setup
Litespeed server, PHP/mySQL website, with HTML, CSS, Javascript, and JQuery.
Important Notes
Problem occurs on all major web browsers - intermittently and with various images.
I am forcing UTF-8 encoding and HTTPS on all pages via htaccess.
Hosting provider states that all permissions are set correctly.
In my access log, when an image fails to load, it gives a '200 OK' response for the image and lists the bytes transferred as '0' (zero).
It is almost always images that fail to load but maybe 5% of the time it will be a CSS file or Javascript file.
Problem occurred immediately after moving servers from Apache to Litespeed and has been persistent over several weeks.
Gzip and caching enabled.
This error is definite mismatch between the data that is advertised in the HTTP Headers and the data transferred over the wire.
It could come from the following:
Server : If a server has a bug with certain modules that changes the content but don't update the content-length in the header or just doesn't work properly.
Proxy : Any proxy between you and your server could be modifying the request and not update the content-length header.
This could also happens if setting wrong content-type.
As far as I know, I haven't see those problem in IIS/apache/tomcat but mostly with custom written code. (Writing image yourself on the response stream)
It could be even caused by your ad blocker.
Try to disable it or adding an exception for the domain from which the images come from.
Suggest accessing the image as a discrete url using cURL, eg
php testCurlimg >image.log 2>&1 to see exactly what is being returned by the server. Then you can move upon level to test the webpage
php testCurlpg >page.log 2>&1 to see the context for mixed data
I just ran into this same ERR_CONTENT_LENGTH_MISMATCH error. I optimized the image and that fixed it. I did the image optimization using ImageOptim but I'm guessing that any image optimization tool would work.
Had this problem today retrieving images from Apache 2.4 when using a proxy I wrote in php to provide a JWT auth gateway for accessing a couchdb backend. The proxy uses php fsockopen and the fread() buffer was set relatively low (30 bytes) because I had seen this value used in other peoples work and I never thought to change it. In all my failing JPG (JFIF) images I found the discrepancy in the original versus the image served was a series of crlf that matched the size of the fread buffer. Increased the byte length for the buffer and the problem no longer exists.
In short, if your fread buffer streaming the image is completely full of carriage returns and line feeds, the data gets truncated. This possibly also relates to the post from Collin Krawll as to why image optimization resolved that problem.

How to get browser to download browser generated data?

have a browser program that lets the user play chess - move pieces etc. trying to let the user download the resultant pgn (Content-Type: PGN) directly from browser.
does it have something to do with data:URI? is there some example somewhere?
only interested in modern browsers
I am not quite sure if I understand your question correctly. Do you mean you generate an image in PNG format but the browser does not offer download, instead shows the image directly?
If so, the solution is to indicate a file for download by setting the appriopriate MIME type as HTTP header "content type".
In PHP you do it like this:
header("Content-Type: application/force-download");
or
header("Content-Type: application/octet-stream");
When the browser receives this MIME type it will not try to display the content itself.
You can use a Data URI but there are some limitations. Here's an example, based on my answer to an earlier question. The first thing you'll note is that you can't really control the filename, but it works OK in Firefox and Chrome other than that, but probably not so well in IE (I've not tried it).
Assuming you can already generate the PGN as a string, the code to create a Data URI is quite straightforward:
function exportData(data, target) {
var exportLink = document.createElement('a');
exportLink.setAttribute('href', 'data:application/x-chess-pgn;base64,' + window.btoa(data));
exportLink.appendChild(document.createTextNode('sample.pgn'));
document.getElementById(target).appendChild(exportLink);
}
Just set data with whatever you're generating and set up an element to hold the link once it's created.
In the future we'll have better solutions for this sort of issue, but there's no browser support for it yet.

Force download through markup or JS

Lets assume I have a file on a CDN (Cloud Files from Rackspace) and a static html page with a link to that file. Is there any way I can force download this file (to prevent it from opening in the browser -- for mp3s for example)?
We could make our server read the file and set the corresponding header to:
header("Content-Type: application/force-download")
but we have about 5 million downloads per month so we would rather let the CDN take care of that.
Any ideas?
There’s no way to do this in HTML or JavaScript. There is now! (Ish. See #BruceAldrige’s answer below.)
The HTTP Content-Disposition header is what tells browsers to download the files, and that’s sent by the server. You have to configure the CDN to send that header with whichever files you want to browser to download instead of display.
Unhelpfully, I’m entirely unfamiliar with Rackspace’s Cloud Files service, so I don’t know if they allow this, nor how to do it. Just found a page from December 2009 that suggests not thought, sadly:
Cloud Files cannot serve a file with the 'Content-Disposition: attachment' HTTP header. Therefore, a download link that would work perfectly in any other service may result in the browser rendering the file directly. This was confirmed by Rackspace engineers. :-(
http://drupal.org/node/656714
I know that you can with Amazon’s CloudFront service, as it’s backed by S3 (see e.g. http://blog.cloudberrylab.com/2009/06/how-to-set-custom-http-headers-for.html)
You can use the download attribute:
<a href="http..." download></a>
https://stackoverflow.com/a/11024735/21460
However, it’s not currently supported by Safari (7) or IE (11).
Yes, you can do this through the cloudfiles API. Using the method stream allows you to stream the contents of files in - setting your own headers etc.
A crazy idea: download via XMLHttpRequest and serve a data: URL with the content type you want? :P

Categories