React: Capture image in messenger webview - javascript

I have a small react app (for mobile only) with image capture tag to click image from camera only (block file picker dialog)
<input type="file" accept="image/*" capture="camera" onChange={this.handleUploadImage} />
I'm using it to capture image from android and ios browsers.
This tag works fine in chrome for android and safari for ios, but when it opens up in facebook messenger's webview then it doesnot open the camera, instead it opens up file picker dialog in android.
So is there any way to open up camera in facebook messenger's webview and block access to file picker dialog?
Any help would be appreciated

From what I can see, you are trying to access camera with input type "file". While it works good in a browser, any webview of an application treats it as a tag for file input/upload.
What you need is to create a module which allows access to camera even in webview, and use that where you want it to. A camera module can be created using getUserMedia() api, also you can checkout webrtc and webkit for this.
Please check the support for getUserMedia() api in different browsers for better understanding. As it dont work in chrome/firefox for ios as of now.
You can also use open source dependencies available, some of which are:
react html 5 camera
react-camera

Related

How to show Pdf document in reactNative using webview?

By using webview, I am able to show pdf in iOS, but in android it always shows white screen.
I am using webview to show pdf in my mobile app. In iOS it works fine but in android, it keep on showing white screen. I know there are some packages like react-native-pdf which can do this, but I want to do it through webview. Is it possible if yes then how?
<WebView
source={require('./android/app/src/main/myPdf.pdf')}
/>
It should show pdf in android app, but it is showing white screen everytime.
Via Webview (Android) is not possible to embed a "./...pdf" URL directly.
You can load the PDF in an external PDF manager (ex. Google Docs) and use that URL.

Alternative to webkit-playsinline for Safari

I have a tool (Articulate Storyline) that generates interactive videos embedded into web pages. When opening from mobile devices or from Safari, the interaction doesn't work. I found that the attribute webkit-playsinline could solve my issue, but it works on the video tag, not on the object tag (which is the one being generated by my tool.
I have a similar issue with Cordova: my hybrid app for iOS is not interactive, while the one for Android is.
Is there a way I can force the same behavior on the object tag (or in its containing iframe tag)?
I don't think this is possible with an iFrame tag, but I do believe it is possible in a Cordova application. In the Cordova settings for your webview, set AllowInlineMediaPlayback to YES and MediaPlaybackRequiresUserAction to NO. I don't know too much about Cordova applications, but I do know that these keys map to the UIWebView allowInlineMediaPlayback and mediaPlaybackRequiresUserAction properties, which protect against automatic video playback in a webview.

Ionic + Cordova InappBrowser - Input type=file not working

The app simply shows a webpage using Cordova InAppBrowser. The webpage uses
<input type=file> to upload files.
When I open the webpage in chrome on my android device, the tap on input opens a menu that displays camera and documents options. But when same webpage is opened using InAppBrowser it does not show the menu.
I have tried _self and _blank options with InAppBrowser. I have also tried using crosswalk browser but no luck.
Cordova version 6.0.0, Android version 5.1.1 and I am using this ngCordova plugin
Has anyone managed to get this working?
This is a known issue with Cordova InAppBrowser plugin.
https://issues.apache.org/jira/browse/CB-9148

How can I default to front-facing camera when using strictly the HTML5 input field with video on iOS and Android?

When using the <input type="file" accept="video/*" capture="camcorder"> tag in a web page on a mobile browser, Mobile Safari & Chrome on Android correctly prompt to take or upload video.
This is unrelated to getUserMedia, which doesn't work on Safari on iOS anyhow. See more about the current state of video capture in a mobile browser here: https://plus.google.com/+ThomasQuintana/posts/SuFgtvCyQxv
Is there a way to default the Take Video popup action in iOS or Android to the front-facing camera?
You cannot default the action sheet to record from the front-facing camera by default.
On iOS, this would require the use of the constant UIImagePickerControllerCameraDeviceFront somewhere when initializing the UIImagePickerController. Since this constant does not appear anywhere in the WebKit codebase, it must be unsupported.

Pop camera or video capture options from Android HTML5 based app used with Cordova

I have an android app I developed using the cordova framework using HTML5 for the interface. I have a form with a file input tag used to grab photos or videos from the device. In the Ios version, clicking this button pops a dialogue where you can select to capture a pic or video, which is then used by the app.
However, in the android version, the file browser dialogue pops with no options to capture direct. This is my problem. I want to be able to have the pic and video capture options displayed.
I subsequently use uploadifive to send some text and the selected media(video or pic) to a server.
When I do this from the web version of this form, using the android browser, both video and picture capture options appear and work great.
In the app I have tried using the capture options in the file input tag as follows:
<input type="file" name="image" id="image" accept="image/*; capture=camera" />
But this is not working either.
You will have to use cordova's capture event for camera to work. Check cordova documentation.

Categories