i am currently developing an Ionic/vuejs App and i need to display the position of the user on a map. I am using Mapbox gl js to display a map and i use the GeolocateController of mapbox. On Android it is working fine but on ios/safari its not working and i get this error message:
access to geolocation was blocked over insecure connection to http://localhost:3000
Apparently the GeolocateController uses the Geolocation API of JavaScript under the hood and safari doesn't allow to locate the user on an unsecure connection. But when developing, i'm on http://localhost:3000 and even when i build the app and deploy on devices, it's still using http://localhost.
Am i missing something important? Or how can i solve this issue?
When i use the Capacitor Plugin Geolocation, i receive the correct data. Is it somehow possible to "overwrite" the GeolocateController of Mapbox to instead use Capacitor Geolocation when trying to locate the user?
"#ionic/vue": "^5.4.0"
"vue": "^3.0.0-0",
Related
AWS Cognito Federated sign in with Google setup correctly and it works perfectly on Android devices (phones, tablets). But on Android TV Web Browsers can't redirect to custom url scheme (web browsers don't understand that the app should be opened). The error says "can't open scheme myapp://oauth/?iod=..." with the error code Net::ERR_UNKNOWN_URL_SCHEME.
React Native version is 0.66, with not the latest aws-amplify, but the issue mainly related to the behavior that browser doesn't open the app with custom url scheme.
Does anybody encountered such an issue and if yes, then what solution could be here?
Appreciate your help.
I've tried to use redirectSignIn url as App link instead of custom url scheme, but that didn't work (when you open app link from another app android opens proper app, but if redirecting/opening within the browser, then it redirects to the web page).
We are trying to create a React Native mobile app for Jitsi from scratch using the lib-jitsi-meet API, and we have a self-hosted jitsi-meet on AWS server and we followed quick-install guide. For the purpose of this post, the URL is https://jitsimeet.example.com.
In the React Native app, we are able to join a conference called test1 using JitsiMeetJS.initJitsiConference. Once joined, the user is visible as "Fellow Jitster" on the browser at jitsimeet.example.com/test1, but the tracks (video/audio) we are adding to the conference (from React Native mobile app) are not visible and in the browser, it just says "Participant has stopped the camera" and "Participant is muted".
We have tried meet.jit.si & beta.meet.jit.si in our React Native app to see if the problem is related to our backend installation. But these were also not working.
We have also tried the same conference jitsimeet.example.com/test1 on the browser and in jitsi-meet mobile app and they are both working fine without any issues.
We have also set up the jitsi-meet repository locally. On running the React Native part on the Android emulator, it is working fine (both joining the conference and rendering the audio/video tracks).
From the above observations, it seems to be that the issue is coming from our implementation of React Native app.
Our code for the component that initiates the conference can be found here. Here you can find the link to our repository. To run it, just do npm i and npx react-native run-android. We are using polyfills in our react-native code as given in the jitsi-meet repository.
In the logs of jicofo on our server, we were able to see that when users join via web or jitsi-meet mobile app, we are getting:
org.jitsi.jicofo.ParticipantChannelAllocator.log() Sending session-initiate to: test1#conference.jitsimeet.example.com/2502e6ad
org.jitsi.jicofo.JitsiMeetConferenceImpl.log() Got session-accept from: test1#conference.jitsimeet.example.com/2502e6ad
org.jitsi.jicofo.JitsiMeetConferenceImpl.log() Received session-accept from test1#conference.jitsimeet.example.com/2502e6ad with accepted sources:Sources{ video: [ssrc=467278592 ssrc=2301072636 ssrc=839807103 ssrc=3616291734 ssrc=2331517151 ssrc=3181098946 ] audio: [ssrc=2795704819 ] }#2129717334
Whereas when we join via our React Native app, we are only getting:
org.jitsi.jicofo.ParticipantChannelAllocator.log() Sending session-initiate to: test1#conference.jitsimeet.example.com/946022e6
More information which might be relevant
On the client side, we are adding tracks after CONFERENCE_JOINED event is fired, then, we are getting the following logs
[JitsiConference.js] _doReplaceTrack - no JVB JingleSession
[JitsiConference.js] _doReplaceTrack - no P2P JingleSession
As mentioned above, we can join the conference from our react native app and we are getting CONFERENCE_JOINED, USER_JOINED, USER_LEFT events.
The TRACK_ADDED event is also firing locally right after adding local tracks. But it is not firing for any video/desktop-sharing/audio changes occurring on other remote clients (web browser or jitsi-meet mobile app).
How can we fix this?
Having the error running on android:
The method or property WebBrowser.dismissBrowser is not available on
android, are you sure you've linked all the native dependencies
properly?]
- node_modules/#babel/runtime/helpers/construct.js:30:26 in _construct
- node_modules/#babel/runtime/helpers/wrapNativeSuper.js:26:23 in Wrapper
- ... 19 more stack frames from framework internals
I can open a browser. Once inside the browser if I quit the browser and went back to the application, the above message show up.
I tried look at WebBrowser from expo documentation
WebBrowser.openAuthSessionAsync(url, redirectUrl)
Opens the url with Safari in a modal on iOS using SFAuthenticationSession. The user will be asked whether to allow the app to authenticate using the given url. Unavailable on Android.
What does the line mean? does that mean android don't work etc.
The user will be asked whether to allow the app to authenticate using
the given url. Unavailable on Android.
I'm trying to use proxy with my react-native app (build with CRNA and Expo).
So in my package.json file I put : "proxy": "192.168.1.27:8080" and then make simple get request with fetch with the/users` path and react call me network error (he don't see the proxy param, just /users when I'm debugging).
The fetch request work well if I put the full url.
In react (for website) I do the same thing and that's work to.
Thank's for your help.
In Reactjs proxies are mainly used to avoid cors issues. Since React Native connects to iOS & Android natively, there is no browser issue so you don't need a proxy.
The approach I use is to call http:127.0.0.1:nnnn/api/route (not localhost) in the React Native app when testing the backend, and the deployed url in production. So you can deploy your server separately and reach it directly in the app.
My app accesses the camera for purposes of webrtc, and works correctly.
I'm using pwacompat from Google Labs to add pwa features to my web app.
When running the app as a pwa, everything works fine until I access the camera. Then I get this console.log error:
getUserMedia failedObject {type: "error", msg: "undefined is not an object (evaluating 'navigat…"}
getUserMedia failed type: error msg: undefined is not an object (evaluating 'navigator.mediaDevices.getUserMedia')
What am I missing?
Update - 19/11/2020
WKWebView can use getUserMedia in iOS 14.3 beta 1.
https://bugs.webkit.org/show_bug.cgi?id=208667
https://bugs.chromium.org/p/chromium/issues/detail?id=752458
Update - 14/09/2019
There are changes to Safari on iOS 13 & Safari 13: https://developer.apple.com/documentation/safari_release_notes/safari_13_release_notes
SFSafariViewController has gained getUserMedia functionality (!!!, however I need to confirm this, please see below for reports of it working)
https://bugs.webkit.org/show_bug.cgi?id=183201
However WKWebView does not seem to gain getUserMedia functionality:
https://bugs.chromium.org/p/chromium/issues/detail?id=752458
https://bugs.webkit.org/show_bug.cgi?id=185448
iOS 13 and Safari 13 release notes:
https://developer.apple.com/documentation/ios_ipados_release_notes/ios_13_release_notes
https://developer.apple.com/documentation/safari_release_notes/safari_13_release_notes
Edit
In short: A PWA or any website being used on iOS outside of the native Safari app will not be allowed access to getUserMedia as Apple is deliberately blocking access for "Security concerns". This includes any websites saved to the homescreen and/or viewed inside another application such as Facebook. The same restrictions apply to Android however on Android the app developer can ask for Camera permissions and get around this. (This means if you are a website developer and you need camera functionality, you will need to ask Facebook, etc, to rebuild their app to allow this on Android).
See their bug tracker here: http://www.openradar.me/33571214 and https://forums.developer.apple.com/thread/88052
From web based Safari experiences to Native Android, etc. I make crossplatform Apps in web and native for a living. There are several potential problems you will encounter with getUserMedia. To workout what is causing potential problems you should follow this list in order to create a successful application.
Your problem is specifically 1. because you are not successfully querying the API. Nevertheless the MediaCapture from getUserMedia should fail because after fixing 1. you will encounter 2. and 3.
API Polyfil - Always make sure you include the latest getUserMedia adapter to stop any cross-platform inconsistencies in the getUserMedia API. Some browsers might use the old getUserMedia API (via 'navigator.getUserMedia) and have not been updated (to use navigator.mediaDevices.getUserMedia). You should also check this link for other needed polyfills.
Support - Check CanIUse for getUserMedia support for your target audience and make sure you have the necessary fallbacks. Your fallback for if (navigator && navigator.mediaDevices && navigator.mediaDevices.getUserMedia) { return true; } else return false; returns false, and if getUserMedia throws and error ideally should be the same.
Permissions - Even though you include pwacompat it does not mean the browser window has the permissions to access the camera. This is because not all browsers are equal! iOS 11 allows getUserMedia access inside of the native Safari app only. However you cannot access getUserMedia on iOS 11 WKWebView or UIWebViews. When you save an app to the homepage it is hosted inside a WKWebView. Thus an experience which works inside of Safari will not work when saved to the homescreen or inside another application. Confusing eh?..! Thus if you want your experience to work you need to tell the user when they open upside another app that they must open the website in safari for real-time camera access. There is no way around this. On Android an app maker can override this permission and allow access to getUserMedia. If you use macOS or Windows you need to make sure the browser shell also has getUserMedia compatibility (e.g. Edge+, Chrome, Firefox, etc)
Security - HTTPS websites can only access the camera (unless on localhost). Check the location prototcol '(location.protocol === 'https:') ? true : false;' to see if you are allowed to get a successful MediaCapture request
The following is a test link I use for platform support:
https://github.com/marcusbelcher/wasm-asm-camera-webgl-test
In my GitHub there are also Android and React-native getUserMedia solutions