I have a React web app and I want that the user click a button an open the camera if it's in mobile device, in order to select pictures from the gallery or take photos directly with the camera. With React Native is quit easy, but I need to do it in web, with browers.
I have test the npm library https://www.npmjs.com/package/react-webcam but that library display the webcam in the web, I want to open the mobile interface, any idea?
You cannot access native android libraries with reactJS(that's why we use React-Native or Android SDK), someone is still to create a library for this.
You can always ask the user to upload an image instead.
Code:
https://codesandbox.io/s/elated-shannon-5yg9x?file=/src/index.js
Related
Facebook has this Sharing to Stories functionality fro native iOS and Android. I am not sure possible or not but I would to do the same, open Instagram, and profile with custom content.
Seems open Instagram works, but profile data not. Do you know why?
Image is copied programmatically, put on pasteboard, and url loads this instagram-stories://share?source_application=2773133082797983 but till content, the mp4 is not loaded. What do I miss? Is it even doable from a React app??
I want to make a react-native app having the capability of video streaming from a mobile app to a connected browser user. On top of that, I want to overlay some application components so connected users can see video streaming as well as some of the application UI.
For an example take a reference of the below-given image. Here, video streaming is running in the car showroom and there are a few app components shown as an overlay of the video like an app menu and a car image.
I want to achive same functionality and using VideoSDK platform for video streaming service.
So far I have created react-native app and able to stream video through camera to the connected browser user.
Next, I want to add my app menu on top of the video as per the image and therefore i am thinking screenshare with combination of video sharing is way to go.
The above image is the actual implementation using video SDK in the browser but as you can see screen share window is opening in a totally different context which is not the expected implementation.
Can someone suggest how can I achieve the functionality of video streaming having the capability of app overlay components?
I have reviewed your requirement and I am glad to inform you that we do have application with same requirements, for further discussion and demos can we connect over mail i.e. karan10010#gmail.com
I want to embed or just redirect to a website I made which uses a webcam. I can redirect to the website with webView however the camera doesn't work.
This is the website I want to embed. https://chinmaymhatre.github.io/currency_detector
I don't think you can permit camera access inside a webview in a react native or expo app because of security concerns, neither could I find anything like that.
I think it would be easier to just implement this right into the react native app(if the app you want to show in the webview is written in javascript)
I have tried something similar. So, sometime ago I was making a video streaming app using React Native for a website that I made using WebRTC which was using camera and other medias(Video, Audio and Screen). I tried to be smart and tried to embed the webpage directly into the React Native App. My Idea was that I could access the Camera and other user media in Mobile Browser So, it should work with React Native as well. But this is not how the react-native works, React Native doesn't uses iframe to work or in other words react-native develops Native Apps for both IOS and Android. You can always implement an iframe in expo, but this is against the Device Security to provide such level of access to user-media. The device doesn't allow such functionality via iframe (here's the link to a live example how to implement iframe in expo). So, to understand it better You should use react-native-cli to make a simple app not expo. Now for using camera in expo there's a package called expo-camera (here's link) Which helps you develop camera oriented apps using Expo. If this doesn't answer your questions then let me know. Happy Coding :)
I would like to have a camera view, which uses device's camera and detects barcodes' data. How can it be done in a React app?
Not for React Native. It has to work both on desktop and mobile using browser.
As long as you use a barcode library implemented in JavaScript, you can make your web apps work on both desktop and mobile.
I've written an article - How to Build Web Barcode Scanner Using React and Webcam which shows you how to build such an app from scratch using Dynamsoft JavaScript Barcode SDK.
Dynamsoft JavaScript Barcode SDK is commercial software. If you want to use open-source SDK for free, you can use ZXing as the substitution.
Here is the source code:
https://github.com/yushulx/zxing-cpp-emscripten
I want to manually allow user to save the the data from app directly to google drive or iCloud. Suppose, I have an image and when user clicks save button he need to get option to save to icloud or google drive anyone of these in the iOS device. How can i achieve this in codenameone are there any plugin, api or library avaliable? As goggle provided google-api-services for android application. How I achieve this in iOS.
Thanks for your help.
Doing this with an image should be easy. Just use the share feature in Codename One:
// will return false on the simulator but work in iOS/Android
if(Display.getInstance().isNativeShareSupported()) {
Display.getInstance().share("", fileSystemPathToImage, imageMimeType);
}
Suggestions of where to save should be based on the things available in your device e.g. Facebook, iCloud, Drive, Dropbox etc.