How would one go about drawing the output of a program running outside the browser onto a canvas? I was thinking along the lines of using a virtual frame buffer, but am unsure of how one would proceed with the process. I figure that there would have to be some intermediate processing or mapping of the pixel data with JavaScript as an intermediary.
Does anyone have any recommendations or insight that they could offer?
Thanks
I know this thread is a bit old...
As an alternative to Guacamole (Linux/Apache/Java), you may have a look to Myrtille, (Windows/IIS/C#). It works for both HTML4 (using divs and xhr) and HTML5 (using canvas and websockets).
HTML5 canvas is not designed to do that. Its designed to read image (or video) data from the web and display it, either as normal http download or as xmlHttpRequest. When you need to get image data generated by an external application into the javascript engine of the web browser, you need to expose that image data as a webservice.
Thanks to MarkE's and Philipp's nudging I found what seems to be the beginnings of a suitable solution.
Although it does't involve a framebuffer directly, I found Guacamole an HTML5 remote desktop gateway, http://guac-dev.org/ it only uses Ajax and HTML5 to render on the desktop of a remote system using vnc or RDP protocols in the browser. Its open source and is a suitable starting point in my view.
Related
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
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
I'm trying to convert an the contents of an HTML5 canvas to a png image.
Problem is that the canvas contains an image that isn't hosted locally so I get the security error.
I don't have the option to host the image locally, is there any other way to capture what is inside the canvas element?
Thanks!
Unless you can make your image resource CORS friendly, then no.
https://developer.mozilla.org/en-US/docs/CORS_Enabled_Image#What_is_a_.22tainted.22_canvas.3F
Although you can use images without CORS approval in your canvas,
doing so taints the canvas. Once a canvas has been tainted, you can no
longer pull data back out of the canvas. For example, you can no
longer use the canvas toBlob(), toDataURL(), or getImageData()
methods; doing so will throw a security error.
Edit: Of course, if you aren't limited to pure HTML5 methods, there are some Flash/Crossdomain.xml tricks you could use, but that still assumes you have some control over the server which serves the images.
If you're not opposed to using jQuery this plugin my do the trick.
http://www.maxnov.com/getimagedata/
Guess there is no way around that on the client-side otherwise what would be the point of blocking toDataURL anyway right?
Maybe you could have a server side script forwarding external images to the client so the browser won't know it's from another domain. (Not that it need to anyway since you can't use the browser's credentials from the server side)
Just send the image url as a get parameter, have the content-type header modified according to the image file, of course, and just spread all those bytes on the response content.
I'm working on an image mashup web app.
I want to avoid flash or other client hassles and just do it pure HTML+javascript.
To keep it light, I'd like to do the work on the client side in Javascript, and have it just push a final saved image to the server.
I thought after reading about the wonders of HTML5 and Canvas I'd be able to use that.
Trouble is though:
If I use the new drag and drop feature of HTML5 for the user to pass a local image to the app and then paint it to the canvas, then ... the canvas get's dirty and it throws a security exception if I try to save the image data.
If I use an API like Bing Image search to find images for the user and paint them to the canvas, then ... the canvas gets dirty and it throws a security exception if I try to save the image data.
The only work around I can think is to have the server act as a kind of proxy and have it relay every image that is worked with to the client - but that defeats the purpose of going client side.
Is there any other method I'm not thinking of, or is pure HTML5 + JS at the client side just not an option for this use case?
The security exception is thrown because you are using images from different domain (local or Bing in your case), you should give to the user the ability to upload the selected images on your server and then work with them in canvas. For images from internet storages you can make something like a proxy to show them on the frontend, images from user's pc should always be uploaded. There is no other way to avoid XSS exceptions as far as I know.
P.S. there is a good article about HTML5 canvas image restrictions here: http://simonsarris.com/blog/480-understanding-the-html5-canvas-image-security-rules
Is it possible to live stream video (& audio) without using the RTSP protocol? Today I tried out Adobe's Flash Media Server and the free alternative Red5. Both seemed like a bit of an overkill (plus had issues with Red5 not supporting AAC audio).
Basically I'm looking for a way to upload live video to my server so it can be viewed using jwplayer, and then stored so it can be viewed later. Does MP4 support live streaming? So that I can record it client-side then upload it for viewing?
I've been experimenting with uploading jpg images and using a HTML5 canvas to display them so it appears like a video.
Here's my code: (using only a few images)
http://jsfiddle.net/QM5EV/
There's several things wrong with it. For one, it's not efficient because it requires mass amounts of jpg's to be uploaded. And most importantly there's no audio.
What would be best to do? Is RTSP the only sensible choice? Thanks. :)
Live via HTTP servers is, for the most part, not an option. But there is "Apple Live Streaming" aka MPEG-TS, although that limits your clients to iOS devices. It uses a plain ol'web server. (This seems to be changing, increasingly desktop browsers are supporting MPEG-TS, but will probably take some time before it is common place.)
For online streaming, rtsp is the best solution. Other protocols such as RTMP ( http://en.wikipedia.org/wiki/Real_Time_Messaging_Protocol) but transmit to any multimedia content using RTSP.
Another thing is that you can make a specific streaming server accepts HTTP redirect requests. Thus, instead of URL's as rtsp://mydomain.com:554/myfile.mp4 can have URL's like http://mydomain.com/myfile.mp4
Regards!