I'm trying to draw a video frame on canvas. It works well on desktops, but there are issues on Chrome on Android devices.
Please see the example:
http://buildar.com/static/drawimage/minimal.html
I've tested it on various Android devices and the only that's working on is Android 5 with Crosswalk (Cordova app).
After removing the Crosswalk or trying on other Android version, the drawImage function doesn't work.
I've found several related Chromium bug reports, but according to them, the issue seems to be fixed
https://code.google.com/p/chromium/issues/detail?id=501208
What can be the reason for it to work only on Android 5 + Crosswalk - if Crosswalk fully replaces the device Webview, wouldn't it work on older Android versions as well?
Is there any other way of capturing the video frame? I'm currently researching converting the video to <img>, alternative video plugin, using Webgl, taking video screenshot, but haven't discovered anything so far that could possibly work.
Related
we have been developping a mobile application using HTML/CSS/Js. Because this was developped mostly in the Device Toolbar of chrome, it does not look good when not used in a mobile browser. Unfortunately, when I build the Project to an Android APK using Cordova it does not look like it would on a mobile browser (Firefox, Samsung Internet, etc.)
First Image was taken in firefox, the second in the Cordova Application.
Is there any way to make Cordova behave like a Mobile Browser would?
If it isn't possible to make Cordova behave like a Mobile Browser can you emulate this using css or javascript?
I have heard about and tried the zoom css tag, which in my case helped on a handful of pages, though a few other pages, which work perfectly on the Mobile Browser, didn't look good at all using zoom.
This answer assumes you've tried the <meta name="viewport" content="width=device-width, initial-scale=1"> meta tag as suggested in a comment.
Cordova uses the systems' webview. It does not have it's own webview implementation. Therefore Cordova is already using a "mobile browser" engine. But the mobile engine being used might not be of the same version as the installable browser version.
As long as you're using Android 4.4+, the system webview is a chrome-based webview and as of Android 5.0, the webview is upgradable by the use through Google Play updates. It's worth mentioning that the latest cordova versions only support Android 5.1+.
When you setup a new emulator, it will have the factory versions installed by default, which can sometimes be a really old version of the webview. If you installed a Google Play enabled emulator (the emulator image is marked as a Google Play image), you can sign into Google Play and update the device which will include the system webview updates. Older devices may still have the webview version limited. For example, I believe android 5 can only get up to System webview Chrome 70 if I recall correctly.
Using a google play enabled emulator and updating the emulator device via Google Play may fix your issue, but it also suggests that your HTML/CSS document isn't backwards compatible to older webviews versions. Perhaps your document is using CSS features that only exists in newer webview versions.
I have an angular 2 application in production environment that allows you to choose a profile picture. Recently, performing tests with safari mobile, specifically for IOS 13.3.1 version(older) and IOS 13.4.1(new) version. I noticed that the image is shown rotated depending of safari browser version used (I built a stackblitz for this that you can review):
IOS 13.3.1 version(older)
IOS 13.4.1(new)
When I take images from an iPhone's in portrait mode and upload the image to my app it is shown rotated only for IOS 13.3.1 version(older). However, I examined the EXIF meta-information images from each of my devices and found that both images have the same value in the orientation property:
IOS 13.3.1 version(older)
IOS 13.4.1(new)
My question is. Why does the image display change depending on the IOS version, knowing that in both cases the orientation EXIF is the same value (6)?
This is a subject that worries me since I had already solved this problem by rotating the image depending of EXIF orientation value for its correct display (e.g. exif.js have been created to handle this situation by detecting the exif orientation flag), but this problem now appears again with the new version of IOS. What would be an example of code that I can use to make it sustainable over time? Is there not a consensus among the browsers to manage the orientation of the images?
What is the explanation for this illogical behavior?
Thank you so much!
We also stumbled upon this when our mobile suddenly behaved differently and finally find the root cause of this.
Both WebKit (iOS) and Android (Chrome) have just recently changed the default behavior of the image-orientation CSS propterty. While it was none before, it is now from-image. This means: Before, they ignored the EXIF data of an image by default, while they are now using it to auto-correct the image. Which break our own auto-correction based on the exifreader library.
Here are some relevant links:
https://www.fxsitecompat.dev/en-CA/docs/2020/jpeg-images-are-now-rotated-by-default-according-to-exif-data/
https://bugs.webkit.org/show_bug.cgi?id=89052
Funny enough, also the Slack team seems to have run into this:
https://bugzilla.mozilla.org/show_bug.cgi?id=1634180
Fortunately, the author of the exifreader library (who just some weeks later ran into the same problems) also guided me to a way to detect the behavior. You can find his answer here:
https://github.com/mattiasw/ExifReader/issues/99#issuecomment-640217716
I also noticed that Modernizr has a test for this, so I am actually using a custom modernizr build now to detect the browser behavior.
The webkit browser is rotating the images before you upload them based on the EXIF data then it gets applied again by your app. We were able to confirm this on new (81) version of Chrome and Mobile Safari on 13.4. then the app is rotating them further and it gets twisted.
I've been using flash video for embedded videos on my site. My old 2.2.x android plays them fine but I'm noticing a lot of new android devices as well as apple devices will not play my videos because flashplayer is fading, so I'm investigating the solution - and HTML5 video seems to be the new thing.
I've just spent 2 hours searching google and read a lot of stuff but most of it is from 1, 2, or 3 years ago -- and judging from what I've read it looks like using the html5 video tag still requires each video to be converted to multiple formats, and full screen is some sort of vendor specific extension -- different on each browser which happens to support it.
So my question is whether HTML5 video tag is a full replacement for the flash player now, or is it still a kludgiferous scheme requiring browser specific hacks for half a dozen most popular browsers -- in 2013?
Does it work on PC's, Macs, Androids, and iPhones?
caniuse.com is a great resource for pretty good data to answer this question.
As of now...
~92% of web users' browsers support the HTML video tag. The main one that doesn't is Opera Mini (about 4.5%). For those users, you can use a Flash fallback, which is actually not too much work. There are a handful of very simple solutions that will handle this for you, like videoJS, jPlayer and JWPlayer.
For now, you do need to encode in two, possibly three formats. About 92% of users support MPEG-4/h.264. Opera Mini and IE8 do not support it.
Only about 71% of users can support full-screen HTML video, so for Android and iOS (mainly), all versions, the best you can do is set the video to fill 100% of the browser window. If full-screen is that important, then you'll want to use Flash.
So, in short, yes, HTML5 video does require a little extra work, but at this point, it's not that hard to get right, and it's a standard that's moving in the direction of better stability and uniformity. YouTube, for example, uses it (with fallbacks), if that's any indication that it's ready for prime time.
I'm working on an HTML5 interactive using phonegap and one of my pages involves using pinch-zoom functionality on an image. I've managed to get this working perfectly using the [iScroll][1] plugin but the zooming functionality is unacceptably slow. On the iPad however, everything runs incredibly smoothly.
I did read that the CSS 3 'translate3d' attribute can be used to force hardware acceleration (and this seems to be working on the iPad) but doesn't seem to have any effect on Android. From what I've read it seems that hardware acceleration isn't yet supported on Android browsers but I'm basically asking whether this is false and it is indeed possible or if there are any effective workarounds?[1]: http://cubiq.org/iscroll-4
depending of android version, see canius : http://caniuse.com/#feat=transforms3d
I tried looking at http://slides.html5rocks.com/#slide-orientation and it's not working in Chrome 10 (dev channel), which I thought supported that entire slideshow. I also tried loading the same slide with the Nexus One, which is the phone used for images in the specification, but that didn't work either. Does any device/browser currently support deviceorientation? Would it work on laptops that have the technology?
Also, what is that slide supposed to do when orientation is working?
I am using Chrome 11.0.696.0 on a Macbook Pro, and that device orientation link works exactly how I imagine it should.
it doesn't seem to work in either Safari 5.0.3
or Firefox 3.6
it also doesn't work on my iphone 3gs
None so far, but people in the WebKit community are implementing it. Hopefully in a couple of months it will be available. Usually timeframes for new features are not set in stone.
Does this help at all: http://www.quirksmode.org/m/table.html#t50
There's a technology preview of Opera Mobile that supports device orientation and the replacement, getUserMedia() API.