-
Notifications
You must be signed in to change notification settings - Fork 535
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
is it possible to use this library in react native project? #21
Comments
Hi, I have never try react native and this lib is firstly designed for a web context. If you succeed in bringing this lib to react-native, I would be very interested by a pull request :). Cheers, |
chiming in to mention that at least for iOS Apple has implemented WebRTC in safari but has not implemented WebRTC in webviews (PWA/iOS Chrome/iOS FF/in-app browsers). Requesting webcam access returns as undefined in those contexts. |
Yes you are right. Developing web apps for Apple products is a pain in the ass, it reminds me IE6 a decade ago... I hope they will enable it soon... They are also always slow to implement nice APIs to bring native apps capabilities to the browser like WebGL2 or CanvasRecorder API :( |
Yeah @xavierjs and the in-app webviews are something I hate. I ran into a bug that cannot be resolved on one site for a client, when viewing the link in the Instagram in-app browser. In Instagram's webview, input tags for file uploads force the webview to reload after the file selector UI disappears on iOS. Breaks every site that allows file uploads (facebook, giphy, etc) |
I close this issue because I have no feedbacks. If you do some tests using FaceFilter and a webview or react-native, you can re-open it of course :) |
Edit: It is possible to get the video into an IOS webview with a hack (video is streamed to websockets). The implementation with Apache Cordova is here: https://github.com/jeeliz/jeelizWeboji/tree/master/demos/cordova |
@xavierjs have you explored react native any further ? this is something that we would like as well |
no |
I have implemented the jeeliz glasses in react native for only in android using webview.. and its working perfectly :) i haven't uploaded it to github but if anyone interested i can share the code.. |
@nibiralpha would appreciate if you can show the code. does it work on both ios and android apps ? |
Hi @nibiralpha Good job. The main problem with webviews is with IOS: it is not possible to access to the camera video stream. Feel free to submit a PR to add link to your code and credits (your Twitter / Linkedin / company website) from the readme.md, in this section: https://github.com/jeeliz/jeelizFaceFilter#third-party It may help other users |
This solution is only for android. To implement this the main problem was to get the camera permission from webview and the default react native webview library does not take permission of camera and microphone from webview. To solve this you will have to make a custom webview module in native java code. I am not a native android or ios developer so i have used the following solution for custom webview... https://stackoverflow.com/a/49029414 i am gonna put a google drive link down below for all the files of webview module but you can also take them from the stackoverflow answer they are exactly same. Create a folder 'permissionwebview' in the following location and put these files in.. /android/app/src/main/java/com/appname/permissionwebview and in /android/app/src/main/java/com/appname/MainApplication.java file add this lines import com.digicom.permissionwebview.PermissionWebviewPackage; protected List getPackages() { You can find all these steps in the stackoverflow answer. After this you will need a ReactNative component export.. [react-native-project]/app/components/PermissionWebView/index.android.js import PropTypes from 'prop-types'; // The 'name' property is not important, the important one is below module.exports = requireNativeComponent('PermissionWebviewViewManager', mcs); [react-native-project]/app/components/PermissionWebView/index.js import {WebView, Platform} from 'react-native'; After these steps all you will have to do is import the package and use the webview component. import PermissionWebview from './PermissionWebView'; class YourClass extends Component { render() { Even though this webview module take camera permission from source url you will also have to take camera permission from the app too. For this you can use react native PermissionsAndroid library. |
plaease share the code. |
Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
Describe the solution you'd like
A clear and concise description of what you want to happen.
Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.
Additional context
Add any other context or screenshots about the feature request here.
The text was updated successfully, but these errors were encountered: