Develop Reference

How to identify unique devices using javascript?

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

Extracting EXIF data with JavaScript

I'm evaluating image upload techniques using Canvas for a mobile web app. The sticking point is reading EXIF data client-side. Other discussions on this site point towards the excellent Blueimp JavaScript Image Load. I particularly want to extract from EXIF:
date & time of photo taken
Geopositioning - latitude & longitude of photo taken
Testing the Blueimp script on Firefox v.33.1 on Windows Vista using a photo taken on an iPhone (with geo data), it successfully extracts all the EXIF data including date, time & geocoords. Running the same test with the same photo on iOS and it only extracts a tiny amount of EXIF data - just the dimensions and orientation (I'm using iPhone 5, iOS 8.1), nothing else. Why is this? Is there a fix or an alternative JavaScript EXIF extraction tool to recommend?
Suggestions very gratefully received as this is doing my head in!! Thanks in advance.
Please note: I don't want to do it server-side with PHP because this requires uploading the full image, which can be slow on mobile bandwidth, hence going for the canvas option to resize images client-side.

After more reading around on this issue, a similar question was asked here a year ago, with no satisfactory responses. According to one commenter, uploaded files on iOS devices only get access to a sanitized version of the file for privacy reasons. This means what useful stuff like time/date and GPS is stripped out of a file before it is made available to the browser.
Which kind of scuppers this idea. :(

Is it possible to load an image inline from camera in JS?

Is it possible, using javascript, to allow a user to take a picture with their device and embed it into a svg for further processing without uploading image to a server? I'd like to allow a user to take a picture with their device, display it in an svg element so they can add annotations. Once they are done, they could push the whole svg, including the embedded image to the server.

It depends where the javascript is running. With HTML5 you can grab a files contents prior to it being uploaded using the FileAPI and there are libraries available that will convert an image to SVG, the problem you have is with gaining access to the camera.
In a users browser? No, you don't have access to their camera without utilizing Flash/Java
In a Cordova mobile app? Yes, you can gain access to the users camera.
In a Chrome App? Yes, you can get access to a lot of low-level APIs via Javascript.

What you need is the new JavaScript API getUserMedia/Stream API:
http://caniuse.com/#feat=stream1

How can I generate and download a large file clientside using Javascript?

I have an application that displays a large set of data using Slickgrid. The dataset may be 30-50MB in size. I would like users to be able to download the current view of the data displayed. What is the best way to set this up?
I have considered the approach described here using data URIs, but the maximum size of a URI is much too small.
I have also considered the approach described here where the client posts arbitrary data to the server, which the server echos back as a download. I worry that the documents may exceed the maximum POST size.

Since you want to do this on client side and If HTML5 is an option why not HTML5 File System API

One option is to use the HTML5 FileWriter API. As of today it's only supported in Chrome (and the BlackBerry browser of all things).

Is there a way to save images in offline mode and HTML5?

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.