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
MainActivity
setup, 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