We need to build a mobile app that works in offline mode. We can do everything we need to except we need to be able to take pictures (on a phone) and upload them later. It would be cool to add them to the datastore, but most cameras take big pictures now days.
Is it possible to save a picture in the datastore? (javascript?)
Can it be a link to the phone that is uploaded later?
Has anyone done something like this?
Access camera on device requires special API. You cannot do it on standard browser (i.e. Mobile Safari/Webkit on iPhone/Android). The API is however is available on frameworks/webView wrappers such as PhoneGap.
Depend on the implementation of such custom API, you might be able to save the output of camera as a file directly, or you might need to save the data as a variable (blob, base64 string, typed array, whatever) in LocalStorage. Need to figure out how to do (1) first.
Related
I would like to store images and configuration data on a device in a persistent manor.
Previously I have seen LocalStorage and IndexedDB being inexplicably wiped so I don't trust them as persistent, perhaps more like long term temporary storage.
I also can't really store images there without converting the images to base64 and storing them as text, which is a little cumbersome.
I would like the user to be prompted that my web app would like to access the filesystem so they are cognizant of that, but I would not like to have access to everything and I would like the prompt to appear once on first launch.
I am reading through the FileSystem API and it looks like there might be a solution there but I haven't found it yet.
Any suggestions to point me in the right direction?
I was wondering how streaming service providers like Netflix, Hulu, Sling.. et identify my device when I login using web Browser on my labtop.
I couldn't find any Javascript APIs to get a GUID or so.
You can use the fingerprintJS2 library for your project too.
https://fingerprintjs.com/
How this library gets fingerprints
Fingerprint.js collects all the unique features from a device/browser passing them through a hash function to provide a unique identifier.
Example
There are many other ways to get unique browser fingerprint.
The newest method to obtain browser information is called “Canvas Fingerprinting.” Simply put, websites are written in HTML5 code, and inside that code, there is a little piece of code that takes your browser’s fingerprint.
So, how are websites doing that, exactly? Let me explain.
This new tracking method that websites employ to obtain your browser fingerprint is enabled by new coding features in HTML5.
HTML5 is the coding language used to build websites. It’s the core fundamentals of every website. Within the HTML5 coding language, there’s an element which is called “canvas.”
Originally, the HTML element was used to draw graphics on a web page.
Wikipedia provides the following explanation on how exploiting the HTML5 canvas element generates browser fingerprinting:
“When a user visits a page, the fingerprinting script first draws text with the font and size of its choice and adds background colors. Next, the script calls Canvas API’s ToDataURL method to get the canvas pixel data in dataURL format, which is basically a Base64 encoded representation of the binary pixel data. Finally, the script takes the hash of the text-encoded pixel data, which serves as the fingerprint."
In plain English, what this means is that the HTML5 canvas element generates certain data, such as the font size and active background color settings of the visitor’s browser, on a website. This information serves as the unique fingerprint of every visitor.
In contrast to how cookies work, canvas fingerprinting doesn’t load anything onto your computer, so you won’t be able to delete any data, since it’s not stored on your computer or device, but elsewhere.
Source and further reading: https://pixelprivacy.com/resources/browser-fingerprinting/
https://multilogin.com/everything-you-need-to-know-about-canvas-fingerprinting/
By the way you can get much more information from Googling yourself.
I am using fingerprintjs.library for creating a browser fingerprint it works well with all device but when i test fingerprint in exact configuration device like laptop with exact configuration it generate same fingerprint.
Before implementation i read many blogs says canvas fingerprint generate unique base64 string but when i tested in device with same configuration it generate same canvas fingerprint. The canvas fingerprint is not unique in exact or similar device.
While using fingerprint.Js libary, i made some option disable like plugins, enumerate device, browser version because this are dynamic in nature on adding headphone in device fingerprint will read headphone information or generate fingerprint accordingly or same with browser version. fingerprint will vary if any of this thing change in future.
My requirement was to create a unique & constant fingerprint that donot change even after opening browser after somedays.
I suggest using localStorage and store a unique white-listed ID that gets verified on every login attempt.
localStorage.setItem('laazaz_id', '4587ff526d');
localStorage.getItem('laazaz_id'); //returns 4587ff526d
docs: https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage
We have an offline web app written with js/jquery/HTML5 that uses local storage to store multiple MB of data in json format that gets edited when the app is in use. This data eventually gets uploaded to our server via ajax. It works very well on both iOS and Android devices. We now want to allow users to repeatedly select an item in their data and take a picture to later be associated with that item. Pictures would be uploaded to our server along with the data. Pictures would also be reduced to 50kb or less in size with a canvas element either at the time they're taken or when they're uploaded. For any given upload, they're may a hundred or more pictures.
We had planned to store a reference to pictures as they're taken to later use for uploading. We now know, in a browser, without using native app code or frameworks such as PhoneGap, that there's no way to store such a reference or path when pictures are stored in the iOS camera roll or Android gallery. We can get the picture's file name by using an input control, but that's of no use without a full path. Also, all image filenames on iOS devices are "image.jpg". We could access the pictures' image data using data URLs, but we can't reliably store it because there' not enough space in local storage for both our json-formatted data and potentially hundreds of data URLs.
So the question is, is there a way using js/jquery/html5 (not PhoneGap or native app code) to take a picture, get a reference to it for later resizing with a canvas element and then uploading via ajax?
If you want to know if is there a way to resize image in Client-side using canvas to reduce them to 50kb then yes, there is.
Here is the link : http://blog.liip.ch/archive/2013/05/28/resizing-images-with-javascript.html
Here is a DEMO
And here is the CODE
I have tested it and it is really good.
PD. I dont like how this CODE resize the image, i changed it using another algorithm, let me know if you want it
Now i am looking for a way to listen the event when the mobile devise use the camera to take a photo and upload them. Because they are automatically rotated to left 90 grades.
I'm currently working on some web script based on a game (to port a game to the web).
The scripts download data from my web host so the loading is slow (have to download each files : maps, models, textures, ...).
To correct this, I added an option that allow users to select their local game data in their computer (using the File API - drag and drop) to parse content directly from local and avoid downloading multiple megas from the web, the result is incredibly fast.
Here the problem : each time they reload the browser, they have to re-select their files, again and again. It's not user-friendly.
So, is there a way to keep a reference from this game archive to avoid the user to re-do the drag and drop each time ? I know about security concern, just want to know if there is something like a persistent URL.createObjectURL().
Note: the game data is about ~2Go, so it's not possible to store it in the FileSystem API (and I don't want to copy it, it's waste space to copy data when you can just keep a reference to it).
Thank you :)
You have to have an input from the user
It is not possible to access the files on a client's computer without the user confirming it. Once the user chooses a file (You can listen to it with the change event), you can then use the FileReader API for example to read the file.
document.getElementById("input").addEventListener("change", function() {
const fs = new FileReader();
fs.readAsText(this.files[0]);
fs.onloadend = function() {
document.getElementById("output").innerText = fs.result;
}
});
<input id="input" type="file" />
<div id="output"></div>
Using localStorage to store a fraction of your files
You could use the localStorage API to store some of your files, but the capacity is very limited, especially for a project like yours (maximum of 5 to 10 MB on current most popular browsers).
This would make your coding much harder, as you would have to check every time what was stored or not, and load what is not saved.
Caching
By using caching, you basically fall into the same problem as you are with localStorage: each browser has its own maximum capacity.
The advantage of this method is that you do not have to worry about what has been loaded or not, as the browser will do this by itself.
Using Flash
Now if you really do not care at all about security, you could use a Flash plugin to store and load the files, and then use ExternalInterface to load the data in your JavaScript code.
ExternalInterface.call("loaded", filename, data);
// And then in JavaScript:
// function loaded(filename, data)
// ...
You could use SharedObject to save and load your data.
I am not an AS3 expert, please excuse any clumsiness.
A Desktop application?
Last option would be converting and bundling your game into a desktop application, for example by bundling it through electron, and then using for example NeDB, which is currently the suggested tool by electron for persistant storage.
You may want to consider using IndexedDB. It is supported in recent browsers including Chrome, Firefox, and Safari (macOS and iOS). IndexedDB allows you to save Blob, File or ArrayBuffer as values in an IndexedDB object store.
Check this IndexedDB: Store file as File or Blob or ArrayBuffer. What is the best option?.
We want to make a website that has kind of a 'photocamera' on it. The ideas is that the user can place this camera somewhere on the website and create a 'screenshot' of it and store it in a database, or send it to the website owner.
Is there any chance to realize this with JavaScript or Flash for all browsers?
Well this is not cross browser, but there is a Chrome Plugin at
Screen Capture (by Google)
You can rename the .crx to .zip. Then extract it and check out how they did the trick.
I'm afraid you have to create custom solutions for the different browsers which is hard. but it sounds not impossible!