I want to write a simple web application in which image synthesis is done in the browser. I will have a server that serves procedural image information (expressions), and the clients should be able to use these messages to generate and display images. Can this sort of task be done entirely in the web browser (using GWT, preferably)?
You will have some major browser restrictions, but you can try using either HTML5 canvas or I have also noticed that the Firefox implementation of ImageResource compiles to a url containing data: followed by some sort of bitmap, so you could support non-html5 versions of FF. However I believe IE will be out of the question until IE9. I believe the thin image editing client used in Picassa web albums uses server-side rendering. Also, eventually you might want to look into the Chrome native API if you are doing any heavy image processing.
Related
I tried to take a screenshot of a movie on the Disney+ web app when I realised that the video turns black as soon as I try to take a new screenshot with Snipping Tool. When I tried to do the same thing with OBS and Discord streams, I saw the same effect.
Interestingly, this only works for Chrome on my machine (I also tried Firefox and Edge and they just let me record my screen).
When I saw this, I became really curious on how they achieved this.
Does anyone have any idea how I can recreate this for my own web projects?
I became really curious on how they achieved this.
They use Widevine.
Widevine homepage.
https://ottverse.com/widevine-drm-how-does-it-work/
https://en.wikipedia.org/wiki/Widevine
News reports:
https://www.cordcuttersnews.com/sadly-disney-wont-work-on-chromebooks-linux-some-android-devices-because-of-drm/
https://www.tomsguide.com/news/disney-plus-will-work-on-chromebooks
https://www.androidpolice.com/2019/10/22/disney-will-only-work-on-devices-that-support-the-strictest-widevine-l3-drm/
It's also used by Netflix, Hulu and others.
Widevine is Google's DRM system that's baked-in to Chrome.
All other major browsers have adopted it as well, because no-one will use a browser that can't access Netflix.
Mozilla's and Microsoft's support is less user-hostile and as you noticed.
It's just a standard HTML5 <video> element - when the browser downloads the video stream it will see that it's encrypted with Widevine and that engages the Widevine client-side code which does all the DRM biz.
Though there are HTML and DOM features that facilitate DRM, I'm unsure of the extent that any JavaScript is required to use it - as theoretically everything the browser needs to know to load the DRM system should be embedded in the raw media stream.
On Windows, I understand (though unconfirmed) that Widevine makes use of SetWindowDisplayAffinity to block screenshots.
Nothing stops you from doing this in your own native code (e.g. if you had an Electron fork), but please don't because it's a real dick-move to your users, in addition to not working at all if the user has the DWM disabled (e.g. they're running Windows 7 with Aero disabled).
Has anyone any idea how I can recreate this for my own web projects?
You'll need to license Widevine yourself. This is a complicated process intended only for large media production companies and content rightsholders, not individuals or small businesses.
Anyway, even if you could, please don't. Why would you want to make to harder for users to share and appreciate your media? Just stick it up on YouTube instead.
I am trying to build screensharing over the browser. I am trying to find the best native implementation and did some initial online research
MediaDevices.getUserMedia() - available in FF. In chrome its a little weird
WebRTC Tab Content Capture - I see its in proposal stage
Screensharing a browser tab in HTML5 - A blog explaining other methods
Researching above everything seems to be around 2012 time frame and I want to know what is the latest?
Question: Which current technologies/javascript API can i use and what is its support across browsers
Screensharing is alive and kicking in Firefox, but atm requires the user modifying about:config. See my answer to another question for how. I believe they're working on removing that obstacle.
Chrome is similar but not quite the same, and AFAIK requires the user to install an extension.
I don't believe other browsers support this natively yet.
You can save html document onto <canvas> or <foreignObject> of <svg> element, then send data URL, ArrayBuffer or Blob of <canvas> or <svg>; or alternatively, send html document as encoded string.
I have a feature that allows my client to design his own personal portal, I would like to allow my user to preview a picture from his computer prior to uploading it to the server.
is it possible?.
No docs, and no result on Google, if anyone wonders why am I asking such an allegedly stupid question.
IMPORTANT: I am using this library since it has support for some deprecated browsers such as IE 8-9, hence I need a solution that can work without file API, or a good reliable file API fallback for old IE versions.
I am designing an application, which is intended to be run in a browser. This application is generating some data, which is then to be saved to a file. In certain cases amount of this data could exceed amount of available RAM, so we can't wait until all data is created and only then write it to disk at once.
I need a random access or (at least) an incremental (i.e., appending) write to file from a browser-based application.
In my research I've found following:
HTML5 FileSystem API: Gives us exactly what we want, but as for current moment is only available in webkit-based browsers (Chrome, Opera). As this document states, Firefox is not planning to implement it in nearest versions, no information about IE11 or Safari 7 is available.
All js-based implementations of file saving procedure I've found do not support this (expectedly).
Flash has a class FileStream but it is not available in an in-browser Flash player.
Silverlight also has a FileStream class but an application using it needs to be an elevated-trust application. Browser-based Silverlight applications can only be elevated-trust applications if it is stated so in the Windows registry. This is obviously not an option for a web application. Furthermore, this is probably not possible to do on Mac OS.
Other options that I see here are ActiveX and Java.
So, am I missing something with js, Flash or Silverlight? Is it possible to do with ActiveX or Java? Are there any other options?
Is it possible writing a cross-platform desktop application with XHTML (or HTML), CSS and JavaScript?
If the answer is yes, how to run this application? Should I run it with a browser like Firefox?
Note: Currently Windows supports HTML Application.
It seems that what you're looking for is the Open Web Apps
HTA is really Old technology.
Try tools like Titanium (Appcelerator). They are tools, which render HTML content inside an APP. So, from outside, you will be running an executable but inside , it is loading a HTML file.
Same principle is being used in many apps now a days. Facebook for android is a best example
If client-side JavaScript, and/or HTML/CSS hackery accomplishes the task you wish it to, yes, and with a user agent like Firefox, indeed.
Yes. With HTML5.
The other answer's solutions are great, but generally they assume that the user is connected to the internet to have a server-side that handles the data.
But it's possible to use Open Web Apps (as ZER0 suggested) with HTML5, which has a lot of support for offline web apps.
Pay attention to it, though. Even HTML5 assumes that eventually the user will have some sort of internet connection, and offline functionalities are seen as a "cache". So, I'm not sure that this solution is enough for every requirement, because I don't know how much space HTML5 provides to offline applications