react-native-clio-bridge

React Native CliO Bridge Native Module

Installation

npm install react-native-clio-bridge

Usage

import { ClioBridgeVideo } from 'react-native-clio-bridge';


ClioBridgeVideo.IsPasswordSet(QR_CODE); /// return 1 if set, 0 if not set, -1 if error.
ClioBridgeVideo.SetPassword(QR_CODE, PASSWORD); /// return 1 if success, fails otherwise.

export default function App(this: any) {
  return (
    <View style={styles.container}>
      <ClioBridgeVideo
        onError={(error) => {
          console.log(JSON.stringify(error));
        }}
        onLoadStart={() => {
          console.log('loading...');
        }}
        onReadyForDisplay={() => {
          console.log('first frame decoded for display');
        }}
        src='p2p://host/camera-id'
        style={styles.video}
      />
    </View>
  );
}

Terminology

Connection String (CS): any string that identifies a device including rtsp://..., http://..., or [email protected]. BUT CS does not include QR code.

QR Code: When a field explicitly holds a QR code, let's call it QR code. QR code is saved for user interaction. If there is QR code, user interacts with QR code.

URL/URI: deprecated.

Peer ID: identifying string for LILIN/Bronci devices. Should only exist in the following classes: BronciBaseClient, LilinBaseClient, LilinIpcamClient and LilinNvrClient.

Troubleshooting development environment

Issue: Cannot find module metro-runtime/require.js.js (iOS)

• Solution: Update the Xcode build phase for bundling React Native code and images.
  1. Open Xcode → Build Phases → Bundle React Native Code and Images.
  2. Modify the Shell command to set the NODE_BINARY path.

  - export NODE_BINARY=node
  + export NODE_BINARY=/Users/{user_name}/.nvm/versions/node/v20.18.0/bin/node

  Tip: You can copy the correct NODE_BINARY value from react-native-clio-bridge/example/ios/.xcode.env.local.