Camera scanning with SocketCam¶

Support¶

The React Native CaptureSDK has support for both SocketCam C820 and C860.

Requirements¶

In order to use SocketCam in your React Native app, you will need to install or upgrade the React Native CaptureSDK to version 2.0 or higher.

iOS Requirements

Use pod install --repo-update to be updated of the latest version of iOS CaptureSDK.

In your Info.plist, you need to add the key to allow access to the camera. You also need to add the sktcompanion scheme to the LSApplicationQueriesSchemes array.

<key>NSCameraUsageDescription</key>
        <string>Need to enable camera access for SocketCam products such as C820</string>
<key>UIViewControllerBasedStatusBarAppearance</key>
<key>LSApplicationQueriesSchemes</key>
<array>
  <string>sktcompanion</string>
</array>

Android Requirements

In AndroidManifest.xml you will need to add the below code.

<activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
<meta-data android:name="com.socketmobile.capture.APP_KEY" android:value="{YOUR_APP_KEY}"/>
<meta-data android:name="com.socketmobile.capture.DEVELOPER_ID" android:value="{YOUR_DEVELOPER_ID}"/>

Using SocketCam with CaptureHelper (recommended)¶

With CaptureHelper, enabling SocketCam and handling the camera view is straightforward.

Enabling SocketCam¶

Toggle SocketCam via the helper instance. This triggers a DeviceArrival callback for the SocketCam virtual device:

// Enable SocketCam
await helper.setSocketCamEnabled(true);

// The SocketCam device appears in your devices list via onDeviceArrival
const socketCamDevice = devices.find(d => SocketCamTypes.indexOf(d.type) > -1);

Handling SocketCam events¶

In your CaptureHelper callbacks:

const helper = new CaptureHelper({
    appInfo,

    onDecodedData: (data, device) => {
        if (SocketCamTypes.indexOf(device.type) > -1) {
            // Close the view after a single scan (not in continuous mode)
            if (!isContinuousScan) {
                setOpenSocketCamView(false);
            }
        }
        setDecodedData(data);
    },

    // Called when user presses close button on SocketCam view (result -91 / ESKT_CANCEL)
    onSocketCamCanceled: () => {
        setOpenSocketCamView(false);
    },

    // ...other callbacks
});

SocketCamViewContainer¶

Import and use the SocketCamViewContainer component to display the camera view. The rootCapture property from CaptureHelper provides the underlying CaptureRn instance needed by this component:

import { SocketCamViewContainer, Trigger, SocketCamTypes } from 'react-native-capture';

<SocketCamViewContainer
    openSocketCamView={openSocketCamView}
    handleSetSocketCamEnabled={() => {}}
    clientOrDeviceHandle={helper.rootCapture?.clientOrDeviceHandle}
    triggerType={Trigger.Start}
    socketCamCapture={helper.rootCapture}
    socketCamDevice={socketCamDevice}
    handleSetStatus={setStatus}
    handleSetSocketCamExtensionStatus={setExtensionStatus}
    socketCamCustomModalStyle={{
        presentationStyle: 'overFullScreen',
        animationType: 'fade',
        transparent: true,
    }}
    socketCamCustomStyle={customStyles}
    androidSocketCamCustomView={<MyCustomAndroidView />}
/>

Important

Android: Mount SocketCamViewContainer as soon as helper.rootCapture is available (right after helper.open() resolves), not gated on socketCamEnabled. This starts the SocketCam extension process in the background. Without this early mount, calling setSocketCamEnabled(true) returns error -32 (ESKT_NOTAVAILABLE) because the extension isn’t up yet.

On Android, set openSocketCamView={false} for this early mount. The camera UI is controlled separately (e.g. by a trigger button).

// Android: mount early, before socketCamEnabled
{isAndroid && helper.rootCapture && (
    <SocketCamViewContainer
        openSocketCamView={false}
        handleSetSocketCamEnabled={() => {}}
        clientOrDeviceHandle={helper.rootCapture.clientOrDeviceHandle}
        triggerType={Trigger.Start}
        socketCamCapture={helper.rootCapture}
        socketCamDevice={socketCamDevice}
        handleSetStatus={setStatus}
        handleSetSocketCamExtensionStatus={setExtensionStatus}
    />
)}

Required Props¶

clientOrDeviceHandle: number;
triggerType: number;              // Trigger.Start or Trigger.ContinuousScan
openSocketCamView: boolean;
socketCamCapture: CaptureRn;      // helper.rootCapture
socketCamDevice: CaptureDeviceInfo | null | undefined;
handleSetSocketCamEnabled: Function;

Optional Props¶

myLogger?: SocketLogger;
handleSetStatus?: Function;
handleSetSocketCamExtensionStatus?: Function;
socketCamCustomModalStyle?: SocketCamModalStyleProps;
socketCamCustomStyle?: StyleProp<ViewStyle>;
androidSocketCamCustomView?: React.ReactElement;

Note

The props socketCamCustomModalStyle, socketCamCustomStyle, and androidSocketCamCustomView are related to creating a custom view for SocketCam. Read more in SocketCam Custom Views.

socketCamDevice can be null or undefined initially because on Android, SocketCamViewContainer needs to start the extension before the SocketCam device arrives. It must eventually be defined for the camera view to open.

Differentiating SocketCam from other devices¶

With CaptureHelper, the SocketCamTypes array is exported to help identify SocketCam devices:

import { SocketCamTypes } from 'react-native-capture';

// In onDeviceArrival callback
if (SocketCamTypes.indexOf(device.type) > -1) {
    // This is a SocketCam device (C820 or C860)
    setSocketCamDevice(device);
}

SocketCamTypes includes CaptureDeviceType.SocketCamC820 and CaptureDeviceType.SocketCamC860.