get live image from nikon or canon camera to mobile through usb (Android only)
npm install @consolecodea/react-native-mtp-camera
To integrate react-native-mtp-camera into your Android project, follow these steps to configure your Android manifest:
- Open Your Android Manifest File: Navigate to your Android project's android/app/src/main/AndroidManifest.xml file.
- Add Permissions: Ensure the following permissions are included within the tag:
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.POST_NOTIFICATIONS" />
<uses-permission android:name="android.permission.FOREGROUND_SERVICE" />
These permissions are required for network communication, notifications, and running services in the foreground.
- Declare USB Host Feature: Add the USB host feature declaration. This is essential for communicating with USB devices:
<uses-feature android:name="android.hardware.usb.host" android:required="true" />- Configure MainActivity: Update your tag for the MainActivity to handle USB device attachments and set launch configuration:
<activity
android:name=".MainActivity"
android:label="@string/app_name"
android:configChanges="keyboard|keyboardHidden|orientation|screenLayout|screenSize|smallestScreenSize|uiMode"
android:launchMode="singleTask"
android:windowSoftInputMode="adjustResize"
android:exported="true">
<!-- Main launcher intent filter -->
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
<!-- Intent filter for USB device attached -->
<intent-filter>
<action android:name="android.hardware.usb.action.USB_DEVICE_ATTACHED" />
</intent-filter>
<!-- Metadata for USB device filter -->
<meta-data android:name="android.hardware.usb.action.USB_DEVICE_ATTACHED"
android:resource="@xml/device_filter" />
</activity>- Create a new file named device_filter.xml under android/app/src/main/res/xml/ (if it doesn't exist already), and paste the following content:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<usb-device class="6" />
</resources>- Add ImageLoadingService: If your package includes a service (e.g., ImageLoadingService), declare it within the tag:
<service
android:name="com.mtpcamera.ImageLoadingService"
android:foregroundServiceType="dataSync" />
- Permissions: Make sure to explain any critical permissions required by your package, such as
INTERNET,POST_NOTIFICATIONS, andFOREGROUND_SERVICE. These are already included in your manifest. - Manifest Updates: Provide a clear overview of how to integrate your package into an existing Android project, highlighting key aspects like
MainActivitysetup, USB device attachment handling, and theImageLoadingService.
This updated README will help users understand how to configure their Android projects to work with your react-native-mtp-camera package effectively.
import {
startService,
stopService,
cameraEventLister,
type cameraEventProps,
} from '@consolecodea/react-native-mtp-camera';
import { NativeEventEmitter } from 'react-native';
const eventEmitter = new NativeEventEmitter();
// Start the image loading service
startService()
.then(() => {
console.log('Service started');
})
.catch((error) => {
console.error('Failed to start service:', error);
});
// Stop the image loading service
stopService()
.then(() => {
console.log('Service stopped');
})
.catch((error) => {
console.error('Failed to stop service:', error);
});
// Listen for new images
eventEmitter.addListener(
cameraEventLister.onNewImage,
(event: cameraEventProps) => {
setImage(event.imagePath);
}
);
// Remember to remove the listener when it's no longer needed
return () => {
eventEmitter.removeAllListeners(cameraEventLister.onNewImage);
};| Method | Description |
|---|---|
startService() |
Starts the image loading service. |
stopService() |
Stops the image loading service. |
| Listener | Description |
|---|---|
cameraEventLister.onNewImage |
Triggered when a new image is received. |
| Property | Description |
|---|---|
cameraEventProps.imagePath |
Image file uri. |
cameraEventProps.imageBase64 |
Image base64. |
See the contributing guide to learn how to contribute to the repository and the development workflow.
MIT