Comments (13)
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..
from jeelizfacefilter.
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 :(
from jeelizfacefilter.
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)
from jeelizfacefilter.
Edit: It is possible to get the video into an IOS webview with a hack (video is streamed to websockets).
Jeeliz Weboji ( https://github.com/jeeliz/jeelizWeboji ), which is similar to this library has been ported successfully in a native IOS app ( https://youtu.be/yx9uA1g6-rA ).
The implementation with Apache Cordova is here: https://github.com/jeeliz/jeelizWeboji/tree/master/demos/cordova
from jeelizfacefilter.
Hi,
I have never try react native and this lib is firstly designed for a web context.
I think you should try it in a webview. There are some modules to bring WebRTC or WebGL to react native but I have not tested them.
We mainly focus on web programming because there are already libraries or APIs to implement face detection and tracking for iOS or Android apps. And we strongly believe in web programming for the futur (I think progressive web apps is a wonderful approach).
If you succeed in bringing this lib to react-native, I would be very interested by a pull request :).
Cheers,
Xavier
from jeelizfacefilter.
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.
from jeelizfacefilter.
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 :)
from jeelizfacefilter.
@xavierjs have you explored react native any further ? this is something that we would like as well
from jeelizfacefilter.
no
from jeelizfacefilter.
@nibiralpha would appreciate if you can show the code.
does it work on both ios and android apps ?
from jeelizfacefilter.
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
and this one: https://github.com/jeeliz/jeelizFaceFilter#native
It may help other users
from jeelizfacefilter.
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.
https://drive.google.com/drive/folders/11Dwkoql_iBMY2W_0usalEoKZ4s8NrGaQ?usp=sharing
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() {
List packages = new PackageList(this).getPackages();
..........
packages.add(new PermissionWebviewPackage());
return packages;
}
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';
import {requireNativeComponent, ViewPropTypes} from 'react-native';
// The 'name' property is not important, the important one is below
var mcs = {
name: 'PermissionWebview',
propTypes: {
sourceUri: PropTypes.string,
...ViewPropTypes
}
};
module.exports = requireNativeComponent('PermissionWebviewViewManager', mcs);
[react-native-project]/app/components/PermissionWebView/index.js
import {WebView, Platform} from 'react-native';
export default WebView;
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() {
<PermissionWebview
style={{ flex: 1 }}
mediaPlaybackRequiresUserAction={false}
domStorageEnabled={true}
allowsInlineMediaPlayback={true}
source={{ uri: "https://url" }}
sourceUri={"https://url"}
allowFileAccessFromFileURLs={true}
allowUniversalAccessFromFileURLs={true}
/>
}
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.
from jeelizfacefilter.
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..
plaease share the code.
from jeelizfacefilter.
Related Issues (20)
- toggle_pause can't clear last face detection data HOT 3
- Refactor the dependency HOT 10
- With the latest version of threeJS library , camera video is not rendering HOT 2
- when adding NN_DEFAULT I am getting TypeError: c.toUpperCase is not a function error HOT 1
- FaceFilter face model transparency issue HOT 3
- can i use navigator.mediaDevices.getUserMedia instead of the camera HOT 1
- how to have a delay before filter is removed HOT 2
- Not working with NextJS HOT 6
- Too much jittering when using fact filter HOT 3
- [feature request] Camera feed on an HTMLVideoElement HOT 3
- Stretched face on Android Chrome HOT 11
- Custom Image not working in facereplacement HOT 1
- README not updated for Three.js JSON HOT 1
- GlassesVTO cannot be demonstrated on Chrome HOT 4
- How could I apply face detection to still images? HOT 1
- small license question- sorry :(
- The camera can't recognize the face at a little distance HOT 2
- I have a few questions about this library HOT 16
- toggle_pause doesn't work with a specific sequence HOT 1
- Changing the neural net throws error at runtime HOT 5
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from jeelizfacefilter.