IPC UI BizBundle

Last Updated on : 2024-05-07 08:48:08download

IPC UI BizBundle is the panel SDK that provides a series of IPC features developed based on Tuya IPC SDK. The following features are supported:

  • Preview panel
  • Playback panel
  • Cloud storage panel
  • Message center panel
  • Photo album panel
  • Setting panel

Things to note

  • The IPC UI BizBundle already includes the IPC SDK of the same version. You do not need to add SDK dependencies again. Otherwise, conflicts might occur between different versions.
  • We recommend that you integrate the whole IPC UI BizBundle into your project. If you access the entry to a specific panel only, a logical conflict might occur in the context.
  • Before you use the IPC RN Panel BizBundle, you must integrate the Device Control UI BizBundle into your project.

Integrate with the UI BizBundle

  1. Integrate with the framework of the UI BizBundle.

  2. Add dependencies to the build.gradle file of the Android project.

    dependencies{
        implementation ('com.thingclips.smart:thingsmart-bizbundle-camera:2.0.0-cube.2'){
        exclude group: 'com.thingclips.smart', module: 'thingsmart-ipc-camera-sdk-api'
        exclude group: 'com.thingclips.smart', module: 'thingsmart-ipc-camera-base'
        exclude group: 'com.thingclips.smart', module: 'thingsmart-ipc-yuv-monitor'
        exclude group: 'com.thingclips.smart', module: 'thingsmart-p2p-sdk'
        exclude group: 'com.thingclips.smart', module: 'thingsmart-video-codec-sdk'
        exclude group: 'com.thingclips.smart', module: 'thingsmart-p2p-sdk-api'
    }
        api 'com.thingclips.smart:thingsmart-ipcsdk:2.0.0-cube.3'
        //... Other configurations.
    }
    

Implement features

IPC UI BizBundle provides the API methods to access different panels of Tuya-enabled IPCs. This helps you implement navigation between panels and custom features.
Follow the instructions on IPCs in ui-bizbundle-sample on GitHub to configure an IPC and perform tasks with the IPC panel.

Native preview panel

An IPC native preview panel supports a bunch of features. For example, you can implement live video preview, switching between video definition modes, audio switch control, screenshots, video recording, video talk, motion detection, PTZ control, preset point addition or deletion, and auto-patrol control.

API description

Navigation between panels is implemented through routes specified by camera_panel_2.

Parameters

Parameter Description
extra_camera_uuid The device ID. You can query the list of devices of the home to get the value.

Example

  Bundle bundle = new Bundle();
  bundle.putString("extra_camera_uuid", devId);
  UrlBuilder urlBuilder = new UrlBuilder(context, "camera_panel_2").putExtras(bundle);
  UrlRouter.execute(urlBuilder);

RN preview panel

Before the React Native (RN) preview panel is implemented, the Device Control UI BizBundle must be integrated.

API description

Navigates to the RN panel based on the service API method AbsPanelCallerService.goPanelWithCheckAndTip().

AbsPanelCallerService service = MicroContext.getServiceManager().findServiceByInterface(AbsPanelCallerService.class.getName());
 service.goPanelWithCheckAndTip(IPCPanelActivity.this, bean.getDevId());

Playback panel

The playback panel is used to play back video footage stored on an SD card. Multiple features can be implemented, for example, video playback, playback time selection, video seeking along the timeline, play and pause, audio control, screenshots, and video recording.

API description

Navigation between panels is implemented through routes specified by camera_playback_panel.

Parameters

Parameter Description
extra_camera_uuid The device ID.
destroyCamera Specifies whether to close the connection after the playback panel is exited. Default value: false.

Example

Bundle bundle = new Bundle();
bundle.putExtra("extra_camera_uuid", deviceId);
UrlBuilder urlBuilder = new UrlBuilder(context,"camera_playback_panel").putExtras(bundle);
UrlRouter.execute(urlBuilder);

Cloud storage panel

The cloud storage panel is used to view and play back cloud-stored video footage. Multiple features can be implemented, for example, cloud-stored video playback, cloud storage time selection, video seeking along the timeline, play and pause, audio control, screenshots, video recording, and display of the motion detection list.

API description

Navigation between panels is implemented through routes specified by camera_cloud_panel.

Parameters

Parameter Description
extra_camera_uuid The device ID.
extra_position The timestamp when a certain motion detection video clip was stored in the cloud on the most recent date. Unit: seconds. This parameter is optional.

Example

Bundle bundle = new Bundle();
bundle.putExtra("extra_camera_uuid", deviceId);
UrlBuilder urlBuilder = new UrlBuilder(context,"camera_cloud_panel").putExtras(bundle);
UrlRouter.execute(urlBuilder);

Message center panel

The message center panel is used to display messages that are generated during video recording. The messages are sorted by date and message type and classified by images, video, audio, or other types. Users can preview the messages and delete one or all messages.

API description

Navigation between panels is implemented through routes specified by camera_message_panel.

Parameters

Parameter Description
extra_camera_uuid The device ID.
extra_album_theme Theme color

Example

Bundle bundle = new Bundle();
bundle.putExtra("extra_camera_uuid", deviceId);
UrlBuilder urlBuilder = new UrlBuilder(context,"camera_message_panel").putExtras(bundle);
UrlRouter.execute(urlBuilder);

Photo album panel

The photo album panel is used to display the files saved by device ID. These files are local screenshots and video footage generated during video preview, playback, and cloud-stored video playback. Users can preview the files and delete one or all files.

API description

Navigation between panels is implemented through routes specified by ipc_album_panel.

Parameters

Parameter Description
extra_camera_uuid The device ID.

Example

Bundle bundle = new Bundle();
bundle.putExtra("extra_camera_uuid", deviceId);
UrlBuilder urlBuilder = new UrlBuilder(context,"ipc_album_panel").putExtras(bundle);
UrlRouter.execute(urlBuilder);

Doorbell panel

The doorbell panel is used to display notifications in the case of doorbell calls. Multiple features are supported, for example, basic doorbell information, real-time screenshots, and answering or hanging up a call. After a call is answered, users are navigated to the IPC preview panel.

API description

Navigation between panels is implemented through routes specified by camera_door_bell.

Parameters

Parameter Description
devId The device ID. You can get the value from the doorbell notification.

Example

Bundle bundle = new Bundle();
bundle.putString("devId", deviceId);
UrlBuilder urlBuilder = new UrlBuilder(MicroContext.getApplication(), "camera_door_bell").putExtras(bundle);
UrlRouter.execute(urlBuilder);

Live video doorbell panel

The live video doorbell panel is used to display notifications in the case of live video doorbell calls. Multiple features are supported, for example, doorbell status, and answering or hanging up a call. A doorbell call is valid for less than 25 seconds. After it is answered within this validity period, a live video talk is implemented.

API description

Navigation between panels is implemented through routes specified by camera_action_doorbell.

Parameters

Parameter Description
extra_camera_uuid The device ID. You can get the value from the doorbell notification.
doorbell_start_time The start time of long type when the doorbell is pressed. The live video doorbell panel counts down for 25 seconds from this time point. In actual scenarios, a doorbell call might last for less than 25 seconds.

Example

Bundle bundle = new Bundle();
bundle.putString("extra_camera_uuid", deviceId);
bundle.putLong("doorbell_start_time", startTime);
UrlBuilder urlBuilder = new UrlBuilder(MicroContext.getApplication(),  "camera_action_doorbell").putExtras(bundle);
UrlRouter.execute(urlBuilder);

Setting panel

The setting panel is used to display data point (DP) settings. For more information, see IPC Control. The following features are supported:

  • Set the device icon and name.
  • Set device information, such as the owner, IP address, device ID, time zone, and signal strength.
  • Set basic options, such as the privacy switch, basic features, infrared night vision, image quality adjustment (brightness and contrast), and working mode.
  • Set advanced options, such as the detection alert settings, passive infrared (PIR) switch, power management, bell settings, buzzer adjustment, video layout, and preset settings.
  • Set storage options, such as SD card capacity management and formatting.
  • Configure value-added services, such as the subscription to cloud storage.
  • Device offline notification
  • Set other options such as FAQ and feedback.
  • Restart a device
  • Remove a device

API description

Navigation between panels is implemented through routes specified by camera_panel_more.

Parameters

Parameter Description
extra_camera_uuid The device ID.

Example

Bundle bundle = new Bundle();
bundle.putString("extra_camera_uuid", deviceId);
UrlBuilder urlBuilder = new UrlBuilder(context, panel).putExtras(bundle);
UrlRouter.execute(urlBuilder);

If navigation to the setting panel through the configured route failed, contact Tuya’s account manager or submit a ticket to check whether the pane is newly created.

Theme settings

Dark and light themes are supported. Multiple features can be implemented: IPC video playback, cloud storage, message center, settings, and local albums.

API description

You can call the method CameraUIThemeUtils.setCurrentThemeId(@ThemeIDs int themeIDs) to set themes.

CameraUIThemeUtils.setCurrentThemeId(@ThemeIDs int themeIDs);

Parameters

Parameter Description
themeId The theme color ID. Valid values:
  • BLACK_THEME_ID: dark theme
  • WHITE_THEME_ID: light theme

Example

CameraUIThemeUtils.setCurrentThemeId(Constants.BLACK_THEME_ID);

This API method is called to enter the panel and the result takes effect globally. This panel cannot be previewed.

Custom panel

The IPC UI BizBundle supports custom panels. You can implement panel features by yourself. For more information, see IPC SDK.

The UI BizBundle has integrated with the SDK. The SDK versions must be consistent between the UI BizBundle and those mentioned in the SDK documents.

Implement the panel

Go to app > assets > module_app.json, find and delete the undesired route, capture the deleted route, and then customize the navigation. Perform the following steps:

  1. Find and delete the undesired route camera_panel_more.

    IPC UI BizBundle
  2. Follow the instructions in Integrate with Framework to get the unimplemented route and navigate to the target page.

    ThingWrapper.init(this, new RouteEventListener() {
            @Override
            public void onFaild(int errorCode, UrlBuilder urlBuilder) {
                // The original route specified by `urlBuilder.originUrl`.
                ToastUtil.shortToast(ThingPanelSDK.getCurrentActivity(), urlBuilder.originUrl);
            }
        },new ServiceEventListener() {
                @Override
                public void onFaild(String serviceName) {
                    Log.e("service not implement", serviceName);
                }
        });
    

Panel route table

Route target Feature
camera_panel_2 Dark preview panel
camera_playback_panel Playback panel
camera_cloud_panel Cloud storage panel
camera_message_panel Message center panel
camera_door_bell Doorbell call panel
doorbell_camera_panel Doorbell preview panel
doorbell_camera_playback_panel Doorbell playback panel
camera_action_doorbell Mains-powered doorbell panel
camera_panel_more Setting panel
dev_base_info Setting > Rename a device
camera_panel_info Setting > Device information
ipc_alarm_detected_feature_list Setting > Motion detection setting
dev_share_edit Setting > Device sharing, not supported currently
not_share_support_help Setting > Sharing help, not supported currently

Currently, sharing is not supported. For device sharing (dev_share_edit) and sharing help (not_share_support_help), you can capture and implement the required route, or follow the instructions on the setting panel to delete this route.

Rename a device

API description

Call the API method renameDevice() of Smart Life App SDK to rename an IPC.

ThingHomeSdk.newDeviceInstance(deviceId).renameDevice(String deviceName, IResultCallback callback);

Parameters

Parameter Description
deviceId The device ID.
deviceName The new name.
callback The success or failure callback implemented by IResultCallback.

Example

/**
* Renames a device.
* @param context
* @param deviceId      The device ID.
* @param deviceName    The new name.
*/
public void renameDevice(final Context context, String deviceId, String deviceName) {
    IThingDevice mDevice = ThingHomeSdk.newDeviceInstance(deviceId);
    mDevice.renameDevice(deviceName, new IResultCallback() {
        @Override
        public void onError(String code, String error) {

        }

        @Override
        public void onSuccess() {

        }
    });
}

Modify a device icon

API description

Call the API method modifyDeviceImg() of Smart Life App SDK to modify the icon of an IPC.

DeviceInfoRepository deviceInfoRepository = new DeviceInfoRepositoryImpl(context);
ModifyDevInfoInteractor mModifyDevInfoInteractor = new ModifyDevInfoInteractorImpl(deviceInfoRepository);
mModifyDevInfoInteractor.modifyDeviceImg( deviceId, deviceName, imageFile, callback);

Parameters

Parameter Description
deviceId The device ID.
imageFile The type of image file to be uploaded.
deviceName The name of the device. You can call DeviceBean of Smart Life App SDK to get the name.
callback The success or failure callback implemented by ModifyDevInfoInteractor.ModifyDeviceImgCallback.

Example

/**
* Modify a device icon
*
* @param context
* @param deviceId     The device ID.
* @param iconFilePath The URL of the device icon to be uploaded.
*/
public void uploadIcon(final Context context, String deviceId, String iconFilePath) {
    DeviceBean deviceBean = ThingHomeSdk.getDataInstance().getDeviceBean(deviceId);
    String panelName = "";
    if (deviceBean != null) {
        panelName = deviceBean.getName();
    }
    DeviceInfoRepository deviceInfoRepository = new DeviceInfoRepositoryImpl(context);
    ModifyDevInfoInteractor mModifyDevInfoInteractor = new ModifyDevInfoInteractorImpl(deviceInfoRepository);

    mModifyDevInfoInteractor.modifyDeviceImg(deviceId, panelName, new File(iconFilePath),
            new ModifyDevInfoInteractor.ModifyDeviceImgCallback() {
                @Override
                public void onModifyDeviceImgSuccess(String url) {

                }

                @Override
                public void onModifyDeviceImgFailure() {

                }
            });
}

Auxiliary protocol of push notifications

To improve the timeliness and success rate of push notifications sent through active app processes, Tuya has opened an auxiliary protocol of push notifications for IP cameras (IPCs).

  • You can implement access to the push notification channel by yourself. For more information, see Message Center.

  • Register a listener for push notifications and query and process push notifications returned by the callback.

    Sample message body

    {
        "a": "view",
        "c": "action",
        "cc": "Low-power IPC, someone is ringing the bell.",
        "ct": "fcm You have a visitor",
        "devId": "6cfaf335a8d6e752e0wrpy",
        "msgId": "4da4dcf61573555995",
        "p": {
        "media": 13
    },
        "specialChannel": false,
        "ts": "1573555995000",
        "type": "doorbell"
    }
    

Register and unregister a listener

You must register a listener after login and unregister the listener after logout.

API description

Tuya’s push notification auxiliary protocol requires you to register a listener after login and unregister the listener after logout.

// Registers a listener for push notifications.
ThingHomeSdk.getCameraInstance().registerCameraPushListener(IThingGetBeanCallback<CameraPushDataBean> callback)

// Unregisters a listener for push notifications.
ThingHomeSdk.getCameraInstance().unRegisterCameraPushListener(IThingGetBeanCallback<CameraPushDataBean> callback);

Parameters

Parameter Description
callback The callback returned by IThingGetBeanCallback to listen for push notifications. CameraPushDataBean encapsulates push notifications.

Data model of CameraPushDataBean

Field Type Description
devId String The device ID.
timestamp Integer The message timestamp.
etype String The type of message.
edata String The message ID.

Example

private IThingHomeCamera homeCamera;
private static IThingGetBeanCallback<CameraPushDataBean> mThingGetBeanCallback = new IThingGetBeanCallback<CameraPushDataBean>() {
    @Override
    public void onResult(CameraPushDataBean o) {
        L.d(TAG, "onMqtt_43_Result on callback");
        L.d(TAG, "Message timestamp: timestamp=" + o.getTimestamp());
        L.d(TAG, "Device ID: devid=" + o.getDevId());
        L.d(TAG, "Message ID: msgid=" + o.getEdata());
        L.d(TAG, "Message type: etype=" + o.getEtype());
    }
};

/**
* Registers a listener after login.
*/
public void registerCameraPushListener() {
    homeCamera = ThingHomeSdk.getCameraInstance();
    if (homeCamera != null) {
        homeCamera.registerCameraPushListener(mThingGetBeanCallback);
    }
}

/**
* Unregisters a listener after logout.
*/
public void unRegisterCameraPushListener() {
    if (homeCamera != null) {
        homeCamera.unRegisterCameraPushListener(mThingGetBeanCallback);
    }
}
  • If an app process is unregistered, the associated listener is invalid. A listener is registered after login. The listener is unregistered after logout.
  • To avoid repeated push notifications by your own channel and Tuya’s auxiliary protocol, the push notifications can be filtered by message ID, message type, and message arrival time.

Options on setting page

You can customize each feature on the setting page. For example, display or hide a feature, and capture tap events.

API description

Passes in settings by using the service API method AbsCameraUiService.configCameraSettingCustomItem.

public abstract void configCameraSettingCustomItem(List<ThingCameraSettingConfigBean> items);

Example

AbsCameraUiService service = MicroServiceManager.getInstance().findServiceByInterface(AbsCameraUiService.class.getName());
if (service != null) {
    List<ThingCameraSettingConfigBean> configs = new ArrayList<>();
    configs.add(new ThingCameraSettingConfigBean("cameraSetting_iconInfoItem", false));
    service.configCameraSettingCustomItem(configs);
}

Data model of ThingCameraSettingConfigBean

Parameter Description
visible Specifies whether to display a feature.
operateCallback The captured event of tapping a button.
tag Each setting page is assigned a unique name specified by name as listed in the following table.

Values of tag

Value of tag Feature
cameraSetting_iconInfoItem Device icon and name
cameraSetting_infoItem Device information
cameraSetting_autoItem Tap-to-run and automation scenes
cameraSetting_networkItem Device network information
cameraSetting_thirdPartyItem Third-party services supported
cameraSetting_privateModeCfgItem Privacy mode switch
cameraSetting_basicSectionHeaderCfgItem Title of basic setting
cameraSetting_basicFuncCfgItem Basic settings
cameraSetting_nightvisionCfgItem Night vision mode
cameraSetting_irNightCfgItem Infrared night vision
cameraSetting_displaySettingCfgItem Display settings
cameraSetting_soundCfgItem Audio adjustment
cameraSetting_workModeCfgItem Working mode
cameraSetting_advanceSectionHeaderCfgItem Title of advanced setting
cameraSetting_detectCfgItem Detection alerts
cameraSetting_pirFuncCfgItem PIR
cameraSetting_powerCfgItem Battery management
cameraSetting_bellCfgItem Bell settings
cameraSetting_sirenSettingCfgItem Siren adjustment
cameraSetting_videoLayoutCfgItem Video layout
cameraSetting_presentPointCfgItem Preset point setting
cameraSetting_onvifCfgItem Open Network Video Interface Forum (ONVIF) protocol
cameraSetting_gatewaySectionHeaderCfgItem Gateway title
cameraSetting_gatewayCfgItem Gateway
cameraSetting_storageSectionHeaderCfgItem Title of storage setting
cameraSetting_storageCfgItem Storage settings
cameraSetting_valueAddedSectionHeaderCfgItem Value-added service title
cameraSetting_valueAddedCfgItem Value-added services
cameraSetting_offlineSectionHeaderCfgItem Title of a device offline notification
cameraSetting_offlineCfgItem Device offline notification
cameraSetting_otherSectionHeaderCfgItem Other titles
cameraSetting_feedbackCfgItem FAQ & feedback
cameraSetting_addToHomeCfgItem Added to the home screen
cameraSetting_firmwareCfgItem Device update
cameraSetting_restartCfgItem Restart a device
CameraSetting_removeCfgItem Remove a device
CameraSetting_indicatorLightItem Status indicator
CameraSetting_besharedItem Device source
CameraSetting_soundDetectedItem Sound detection
CameraSetting_apModeItem AP mode
CameraSetting_unlockItem Remote unlocking
CameraSetting_cloudDisk Pages of cloud disks managed on a base station
CameraSetting_privacyZone Privacy area setting
CameraSetting_recording_time Time setting of a single video clip
CameraSetting_parking_mode Parking mode setting
CameraSetting_collision_alert Collision alert
CameraSetting_antiDismantle Anti-pry alert switch
CameraSetting_notification Push notification settings
cameraSetting_carInspection Vehicle model detection switch
cameraSetting_nonCarInspection Non-motor vehicle detection switch
cameraSetting_thirdPartyHeaderItem Third-party title supported
cameraSetting_pirSetItem PIR setting
cameraSetting_stationDoorbellItem Setting of base station bell
cameraSetting_stationDetectionItem Base station detection alert

Panel multilingual settings

For more information, see Configuration files.