Question:

I followed this article: <a href="http://www.syntaxxx.com/accessing-user-device-photos-with-the-html5-camera-api/" rel="nofollow">http://www.syntaxxx.com/accessing-user-device-photos-with-the-html5-camera-api/</a>

Using my desktop, it works in Firefox. In Chrome it doesn't work though. It says:

Failed to load resource: the server responded with a status of 404 (Not Found) blob:http%3A//localhost/a4368515-b68f-43ff-8e11-c888bc90b93b

In the article I linked to, one of the commenters said it didn't work in Chrome (so it's not only me) but there is no solution posted.

Does anyone here know why that code won't work in Chrome?

In this case the article is releasing the Blob Object (using revokeObjectURL) before the request has been made, so when the image requests the blob it is no longer there. Chrome is <a href="http://dev.w3.org/2006/webapi/FileAPI/#dfn-revokeObjectURL" rel="nofollow">Specification compliant</a>, the sample should check that the image has loaded before revoking the Blob URL.

See <a href="https://jsbin.com/viyepa/1/edit" rel="nofollow">https://jsbin.com/viyepa/1/edit</a> for an example that works, I have commented out revokeObjectURL and it now works. If you add it back in, it will fail.