Is there a lightweight, free, and reliable way to display MJPEG in a cross-browser environment? I'm trying to display an MJPEG stream from an Axis 2120 IP camera on a site that I'm developing, and I've found that this is quite reliable in current versions of Firefox. However, after some testing I've found that IE, Opera and Chrome all have varying degrees of trouble doing this (no Mac access, so I'm not sure about Safari). Internet Explorer has no support for MJPEG and doesn't work at all. Opera takes literally 10-15 seconds to display anything after the initial GET was sent. Chrome works perfectly until the <div> that contains the <img> tag is hidden and then shown again.
For reference, I'm using an <img> tag to display the stream like so:
<img src="http://my.ip.addr/axis-cgi/mjpg/video.cgi/?resolution=352x240" alt="real-time video feed" />
I've considered using a re-broadcasting server to collect the MJPEG stream and transcode it on-the-fly, but this solution seems too ugly. Are there any better suggestions out there?
I've just came out with a solution a couple of months ago. It's cross-platform, and doesn't need third-party plugins such as Flash or Java.
Basically, it's a node.js proxy which parses m-jpeg boundaries and delivers images in a defined interval.
Fork it at https://github.com/rodowi/Paparazzo.js
Here is a Java applet based solution that you can use for any browser (or just the ones that don't support MJPEG): http://www.charliemouse.com/code/cambozola/
As far as other bugs go with MJPEG, I have found that you should set the 'src' attribute of the 'img' tag to something besides the MJPEG before you try to remove 'img' tag. Example:
<img src="#" />
If you don't do that, Firefox will continue to download MJPEG stream even though it shouldn't.
Related
I've been developing a pretty complicated HTML5 web app for the past month. Last night my iPhone suddenly decided to cache all JS, CSS, and images and not load any updated copies. This happened on my partner's iPhone too, so I'm going to assume it's affecting all users of our app.
Needless to say, clearing the browser cache, deleting the web app, restarting the phone, & restarting the wireless connection do nothing to fix the problem.
Removing <meta name="apple-mobile-web-app-capable" content="yes"> solves the problem, but creates a new problem since we need the app to run like...an app.
We're not going to go around appending the old trick ?number to the end of all our scripts, stylesheets, and images either. That's ridiculous. Also -- if we were to implement something like this, it would have to be some sort of dynamic JS implementation. Our app is one HTML page that loads most scripts, and additional pages are AJAXed in, additional data is also obtained via AJAX. I guess this could be done, but I'm hoping for a more elegant solution. Ya know, I feel like I shouldn't have to do anything since this all worked without a hitch for an entire month.
Using the cache-control, expires, and pragma <meta> tags doesn't do us any good either, as this is purely an iOS web app problem. Caching works normally in mobile Safari, mobile Chrome, and all desktop browsers. It appears that iOS has a separate cache for apps, including web apps, that the user can not clear.
It seems that many SO users have encountered this problem, but I can't find any satisfactory solutions. Has anyone out there in a similar situation solved this problem? Could I use a manifest file to specify not to cache several files? It seems like manifest files are used to do the opposite.
For what it's worth, and it's not a perfect solution, we had to settle with appending query strings. I've written a shell script to make this and a few other tasks bit more automated, you can look at the source on GitHub. A few details:
It's designed for JS but can easily be edited to handle CSS too.
It takes all files listed in script_order.txt and compiles them with Google's Closure Compiler
Groups them into chunks under 25kb when possible (iPhone won't cache anything over 25kb pre-gzip, although apparently this extends only to browsers and not standalone webapps)
Outputs a PHP file with <script> tags that have a ?v=timestamp appended to the script filenames. If you're working with static HTML and can't include a PHP file, you could rewrite the output to append the script tags to your index.html file.
Another pretty hacky solution would be to save your JS/CSS with a .php file extension, and in those files set the headers to something like this:
<?php
header("content-type: application/javascript");
header('Cache-Control: no-cache');
header('Pragma: no-cache');
?>
window.alert('hello world');
EDIT:
Setting the date to 2, 3 or 4 days in the future, start the app from homescreen and then set the date back to normal also can do the trick.
I am currently creating a form that involves a file uploader. Currently
my form is fine just using multipart and post but later on in future iterations
it will be necessary for the form to be posted with ajax in order to edit the
image before submitting the form.
I have seen a lot of things about multiple files like jquery-file-upload and swf
and php with uploadify and a whole host of non IE 7+ solutions. However those are
not going to work for this specific project and I am really just looking for the bare
bones nothing fancy to have to deal with just sends the image data to an endpoint.
What is the best way to do this in a way that can support all browsers.
=====EDIT=====
I havent tested this completely yet but this solution seems good to me
https://github.com/francois2metz/html5-formdata
Fine Uploader is a library that provides the ability to support cross-browser uploading. Ajax/xhr post requests are used for all browsers that support the file api. Otherwise, a form-based upload method is used. No flash is used or needed. This is all transparent to the user. Check out fineuploader.com for more details.
You can't send file through AJAX request this is just impossible. If you use HTML5 File API that would work but as you stated in your question you need to support old browsers. So I think you either have to use flash (uploadify uses flash as well) or you don't have any other option.
You can have a look at this question/answer:
jQuery Ajax File Upload
I am not able to render a simple SVG rectangle on an iPhone running iOS 4.2.1. The code is directly taken from the w3schools tutorial here or you can try it from my server here. I understand that iOS supported SVG starting from version 2.1, so this should work! What am I missing?
Needless to say that the exact same document is rendered correctly on my desktop browsers and also on an iPad.
I'm afraid you need to set the content type as xml in older versions of Safari and Firefox to serve inline SVG (you can, however, use it in an img tag is you don't need to access its DOM). If you don't want change the doctype or the extension you can let the web server handle it. In Apache you would place an .htaccess file in your document root and put...
AddType application/xhtml+xml .html
I'm not sure if this causes any side effects elsewhere. You could only serve it to older versions of Safari with some rewrite conditions, but I'm not too familiar with the syntax to give you a straight answer.
You can see your file served as xhtml here:
http://duopixel.com/stack/svg.html
We're currently working with Filepicker.io to allow users the ability to upload both images and videos. It appears that if we specify image conversions in the Javascript API options, video uploads don't process and instead get stuck at 99.30%. If I remove the 'conversions' option, video uploads process without issue. Is it not possible to specify image conversion options and accept both type of uploads? If so, this should really be specified in the docs.
I attached a JSFiddle with the code in question. http://jsfiddle.net/BYkD4/
It might be an issue on our end, taking a look now. For large files (+1Mb) we split the file into chunks, upload them in parallel, and then reassemble them on the server side. We use browser progress up to the 90% mark, after which we have to "best guess" what the server-side progress looks like, for now at least. That's the reason why it's hanging at 99.30% - it may actually be able to complete if you give it enough time.
In any case, looking into it
Edit: looks like this was an issue on our end. Fix deployed, everything should be working fine. Sorry about the issue
What I'd like to be able to do is download any web page, and be able to view it offline.
It seems like html WebKit views cannot be converted to PDFs (on the Mac, you could 'print' a PDF, but that isn't possible on iPhone?).
So, the only way is to save the actual resources - save the html, the step thru each image, css, js file and save it locally. Then maybe alter the urls within the code so they point to the right place...etc ...etc...
Is there a standard way to do this?
Or, is there an open source project (in any programming lang) which does this kind of thing?
There's an excellent webkit html to pdf converter appropriately called wkhtmltopdf. Given the reources available on the iphone and its toolkits, I think it'd be easy to compile a version for the i-Phone ('think' being the operative word). We've managed to use the tool in a Windows, Linux and Solaris environment with absolutely no bugs. Here's the link:
http://code.google.com/p/wkhtmltopdf/