is it possible to use this library in react native project?

[ankushdec1993]

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.

[xavierjs]

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

[tetreault]

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.

[xavierjs]

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 :(

[tetreault]

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)

[xavierjs]

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 :)

[xavierjs]

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

[sandys]

@xavierjs have you explored react native any further ? this is something that we would like as well

[xavierjs]

no

[nibiralpha]

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..

[sandys]

@nibiralpha would appreciate if you can show the code.

does it work on both ios and android apps ?

[xavierjs]

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

[nibiralpha]

@sandys

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.

[jawadkodextech]

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.