always select "Take Photo" when running vue project on IOS (Safari) - javascript

I'm working with BootstrapVue. I have a b-form-file in my template which I'm using to upload photos - it should run on a Webbroswer and it's, for now, always used by an iPhone-User.
Now I want to know if there is a possibility that my project notice that I have opened it on Safari (it's possible that it will run on Android too later because of that it should check that first) and than if this is known it should select always Take Photo or Video.
Normally you can choose between these 3 on iPhone after clicking on b-form-file
Photo Libarry
Take Photo or Video
Browse
and it should always use Take Photo or Video after detecting that it's running on Safari..
Is it possible to achieve that ?
Thanks in advance!

Related

"Click to use Flash" button doesn't always show on Safari

I'm working on a site that uses a video recorded via the user's webcam. The recorder library is not my code, but at a high level, it tries to use HTML5 (Media Recorder API) where possible and falls back onto Flash where not. On Safari, this means Flash. Basically, I supply the library with a div where I want the recorder to appear and it inserts it there.
However, some of my users were reporting confusion on Safari (the video recorder was not showing up) and I was able to reproduce this confusing situation. With Safari 12.0 on Mac OS 10.13.6 with Adobe Flash installed and enabled in Safari:
when I navigate to the page with the video recorder, I expect to see a "Click to use Flash" button on the video recorder area. But, when I first load the page, the area is complete blank. Strangely, it appears that the button is indeed there, but just not showing:
When I click on the area where the button should be, it responds (and prompts me to enable flash)
When I open the Web Inspector tool, the button appears (you can also see the code for the Flash object here that gets inserted dynamically)
When I simply resize the window, the button appears
I don't use Safari as my regular browser, so it's not like I have a highly customized configuration. Unless I'm missing something, this feels like a bug in Safari (I filed a bug report, but they specifically say they do not respond).
I've tried some javascript tricks to "re-draw" the element (e.g. hide then show) to try and get the button to show up right away, but without any luck. Obviously I can't tell users "resize the window" or "click in the middle where there is supposed to be a button".
Any ideas what could be causing this and how to fix it?

How to check that an image comes from the devices camera HTML5

I'm having an issue which could be an edge case.
The thing is that I'm developing a web site that is acting as a mobile app (something like a mobile first website) and to do this, I found a method to open the camera of the device when the user click on a file input.
Until there every works fine. The problem is that when I open the website on my laptop, when I click the input file, it opens a file selector, instead of open the camera of the device.
Also when I click the input file on some mobile devices, sometimes happens some of the following: 1. select photo from the gallery 2. open the camera
Which aren't accepted in my project, due to it only can accept recent photos(which are taken at that moment).
Anybody knows how to control this?
Really thanks!!!
Okay, I see you are using PHP server-side... If you don't mind uploading the image without checking first, you can build in a check server-side.
With exif_read_data() you can read metadata from an image. See documentation for all details
The FileDateTime will hold the date of when the image was created. Thus you could check if the image is a recent image.
Another possible way is to check which camera was used. It depends on which device was used to take the picture if these values are set.
$exif_ifd0 = exif_read_data($tempImagePath ,'IFD0' , 0);
// $exif_ifd0 will be an array.
The last method is illustrated in this comment at php.net

Should JavaScript/jQuery objects disappear when download hyperlink is clicked

We use Atalasoft's web image viewing SDK to display TIF images in a web page. We recently upgraded to their client-side, JavaScript/jQuery based component and discovered some odd behavior. After initializing the control, if a link is clicked to a resource that should be downloaded, the control(s) clear themselves out. The issue exists in Chrome and IE 11 that I have tested.
Since it is a paid SDK, the easiest way to test this is to go to their demo at:
http://www.atalasoft.com/demos/dotimagewebdemo/
Once the page finishes loading, open a developer console and paste in the following (simply adds a download link to a file on their site):
$("body").append($("<div style='position:absolute;right:5px;top:5px;'><a href='/Gallery/WebViewingDemo.zip'>DOWNLOAD</a></div>"))
Clicking the download link will wipe out their controls on the page.
Adding download to the anchor tag resolves the issue in Chrome, but not IE.
Adding target='_blank' resolves the issue in both, but creates an ugly blank window first (that in my experience does not always close).
I am setting headers server-side to tell the browser to download the file rather than displaying it.
I guess my questions are two-fold:
Is it normal for JavaScript/jQuery based objects to disappear/destroy/whatever when a link is clicked to download a file or is this a problem with their implementation?
and
What is the best solution for this (preferably without the blank page showing up)? We need to support mainly Chrome, FF, and IE (most popular desktop versions).
Thanks in advance!

How to get JS code running on mobile while it minimized or sleep

I'm getting a trouble while running JS code in a browser.
I've got a small web page which uses HTML5 location API for tracking a user.
User opens my website, logs in, and goes to a certain page on which I'm using location API to track user's location. Everything works fine until user's phone goes to sleep or user presses "home" button to minimize browser. The same thing happens on both Android and iPhone.
Is there any way to prevent the phone from going to sleep and let JS code work while browser is minimized?
one of the way I found is using video on a page where all JS located. but another problem is - screen became always ON, which can cause battery to discharge too fast (if I turn off screen manually using power button everything stops working)..
still looking for some ideas...

Check iOS Homepage Install - HTML5

I recently bought an iPod so that I could test my own HTML5 games on iOS, and while looking around I found this HTML5 app:
http://www.apple.com/webapps/games/goldnuggets.html
If you load that page from an iPod or iPhone, you'll be able to play the game.
What I found memorable about this app is that when you try to load it, it forces you to 'install' (save) it to your homepage before you can play. The benefit of this is that the HTML5 app gets the full screen area to work with when launched from the homepage, just like a normal iOS app (as opposed to being covered up with the address bar and that command bar at the bottom).
I was wondering how I can check if the app has been added to the homepage (not the actual "add to homepage" function - which according to this thread is not possible Javascript for "Add to Home Screen" on iPhone?).
I could certainly use an extra 100px, and it would allow me to easily create an iOS version and HTML5 version with matching interfaces, and a better user experience.
Any ideas? Google search turned up nothing for me.
TL;DR window.navigator.standalone
And everything you need at http://www.bennadel.com/blog/1950-Detecting-iPhone-s-App-Mode-Full-Screen-Mode-For-Web-Applications.htm
Good luck!
One thought is to add a bookmark/favorite via JavaScript (called from an onclick event):
window.external.AddFavorite( url + "?somevariablethatsaysitisok=true", "MyGameName");
which I assume would work for iOS Safari as well.
On the URL part of it you can pass an argument that, when set, would allow the game to be played. If not set then only show the book mark link
You can either browser detect serverside or, if I remember correctly use javascript's navigator.userAgent or navigator.appVersion to see if it contains iPhone / iOS. Of course I would do some testing to to make sure you get the exact string, but that's the general idea.

Categories

Resources