Taking a photo from the browser on an Android or iOS device isn't hard, as we all know. Just use a file input field and add a parameter called capture. However, as far as I know, not a single browser for Windows 10 does support that tag.
The requirement is to take high-res photos on a Surface Pro tablet and annotate them immediately from within a website. Right now, I'm using getVideoTracks as a halfhearted fallback for Windows devices. This, though, has some serious drawbacks, namely a significantly reduced image resolution (only 2 MP) and a great loss in color depth and control over the camera, just to name two of them. Switching between the native camera app and the website and uploading the pictures through a regular file input is also not an option in our productive environment.
Is there any way to trigger the native camera app on a Surface Pro from JavaScript and use the captured photos immediately? Or a browser which already supports the ImageCapture API? Chrome crashes with the error message "DOMException: setOptions failed", even when running the official samples, which seems to be a known bug for ages. Or is there a Windows browser which supports the capture attribute on input fields?
Thank you in advance for your help!
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'm working on a project with kinetic typography where the user can write something and download it on a video format but I'm having trouble generating the (video) file.
I thought of screen capturing but most browsers are blocking those features due to security concerns (and I wanted to add audio later on).
I've looked into https://www.w3.org/TR/screen-capture/ but its documentation doesn't say much nor gives examples.
I've seen https://mgechev.github.io/jscapture/ but it only works with versions bellow Chrome 37.
I've seen https://github.com/spite/ccapture.js but it only records canvases and I'm working with text.
How can I generate a video client-side (preferably) on a browser?
HTML5 has an onboard volume detection.
<video controls width="320" height="176" onvolumechange="alert('The volume has been changed')">
This is for the player only.
Is it possible to detect volume from the system? Say a phone. Can I get volume readings of my phone from the mobile browser?
Or can I use JS to detect if the audio jack is plugged in?
Can Volume level be detected for audio out using GetUserMedia?
Short answer for this is no!
This is how web-browsers have been made for a very long time now, and Microsoft/Google/Apple/Mozilla/Opera have done this to avoid exploits through File.IO and such. Actually, we should be thankful for this - as it isolates you computer (with all your personal stuff) from the web-application (which might be hosted on a server with hostile intentions).
Actually, there is one way you could do this, but it would only work for IE users - and the answer is activeX plugins. Now, you could make your javascript create such a plugin and communicate with it - but who knows if activeX will be supported by IE in the future.
So per se, there is no way this is achievable with HTML5/Javascript alone - just think of the browser as the OS on which your web-app is running. So Google, Microsoft etc + the rest of the people who decides the HTML5 standards are the ones who decides how much access the developer gets. Camera hardware, GPS hardware etc. we do get to access, but we are not allowed to do whatever we want with that hardware - its not always the developers choice.
I have a website that receives files from the user, using the "Choose file" interface for the OS they're on. This worked for me on Windows, Mac and Linux, but not on iOS. When I click the button that should load the interface, nothing happens. I guess I have to do it in a specific way for iOS. We're using the ZK framework to develop the website, but if you know how to do the upload in some other way, please tell me.
Up to iOS version 5.X, there is no possibility to upload a file via an html input tag. You would have to create a native App based on PhoneGap/Cordova to have the ability to create images/videos to be uploaded. But that's quite some effort to do. You should definitely think about the following option:
Since iOS version 6.0 Apple has added support for input type file elements. See more details on that here: http://www.mobilexweb.com/blog/iphone-5-ios-6-html5-developers
This way seems to be appropriate, since the adoption rate of iOS 6 is quite high right now (nearly 80%): http://david-smith.org/iosversionstats/
I am having some problems with Phonegap and the Android Camera API. I can get it to work on one device, but not another.. I have heard of many others facing similar issues with no image data being returned to javascript from a device's camera.
I am attempting to use the sample app code from here: http://docs.phonegap.com/en/1.3.0/phonegap_media_capture_capture.md.html#capture.captureImage
I have two physical devices I am testing on, an original Motorola Droid, and a Motorola Droid 3.
On the Motorola Droid, the app works perfectly and the image is captured and returned to my app without a hitch.
Using the Droid 3 however, is a different story. I can launch the camera no problem, take the picture, and then click "Done" and return to the app. The only issue is, the image data never shows up with it.
I have heard/read many things in the past day concerning this issue that I think may be related to the problem:
Motorola included a really poor stock phone app with the Droid 3, and this could be causing performance issues.
The image attempting to be returned by the Droid 3 is too high quality (and as a result too big of a file) for javascript to handle. (There is no way to set the resolution of images on the Droid 3's stock camera.)
The app is "reloading" itself instantaneously after receiving the image data (perhaps because it is too big?) and as a result, when it loads again, the image data from just a second ago no longer exists.
For now I will just push onward with development and continue to test on the old device, but this is really something that I am not feeling good about. I know that the Droid 3 is not the only device to face these issues, and because I am interested in developing simple but commercial apps with Phonegap, this is very important to me that my application will work seamlessly across devices.
Are you able to use the Camera API (versus the Capture API) and adjust the quality parameter lower?
Apparently the answer is that it's an issue with several Motorola devices due to some bloatware that is built into the phone, maybe moto-blur.
The camera app never fires an event returning the image data back to the app after the user captures it (in these devices).
I'm setting this as the correct answer for now, if someone finds this later on and has updated information or a workaround, I will gladly update it, just message me :)