Key Interactive Data Points

Detailed usage of TYSdk

How to use？

import { TYSdk } from 'tuya-panel-kit';

Classification and application

TYSdk contains the following 6 attributes

• Mobile
• apiRequest
• Navigator
• event
• native
• device

Mobile (to obtain information about mobile devices, panel development is not commonly used)

const TYMobile = TYSdk.Mobile;

TYMobile = {
  verSupported: ƒ (e),
  getNetworkState: ƒ (),
  is24Hour: ƒ (),          // Whether the system time is 24 hours
  getMobileInfo: ƒ (),     // Get mobile device information, App version number, etc.
  jumpTo: ƒ (e),
  disablePopGesture: ƒ (),
  enablePopGesture: ƒ (),
  showPromptDialog: ƒ (e, t, i, n, a, o, s)
}

apiRequest (request cloud interface)

TYSdk.apiRnRequest();

// Encapsulate common request body api

const sucStyle = 'background: green; color: #fff;';
const errStyle = 'background: red; color: #fff;';

const api = (a, postData, v = '1.0') => {
  return TYSdk.apiRequest({
    a,
    postData,
    v,
  })
    .then(d => {
      const data = typeof d === 'string' ? JSON.parse(d) : d;
      console.log(`API Success: %c${a}%o`, sucStyle, data);
      return data;
    })
    .catch(err => {
      const e = typeof err === 'string' ? JSON.parse(err) : err;
      console.log(`API Failed: %c${a}%o`, errStyle, e.message || e.errorMsg || e, postData);
      return err;
    });
};

// eg: Get preset point list interface Mount the getMemoryPointList method on TYSdK, or you can define your own objects to mount
TYSdk.getMemoryPointList = devId => {
  return api(
    'tuya.m.ipc.memory.point.list',
    {
      devId,
    },
    '1.0'
  );
};

Navigator (Rn page routing related operation API)

const TYNavigator = TYSdk.Navigator;

TYNavigator = {
    jumpBack: ƒ (),
    push: ƒ (),     // Commonly used, jump to a fixed page
    popN: ƒ (),
    pop: ƒ (),     //  Commonly used, return to the previous page
    replaceAtIndex: ƒ (),
    replace: ƒ (),
    ...
}

// In addition, be careful not to define it globally in advance, because Navigator has not been mounted on TYSdk at this time.

// Therefore, it is more recommended to use this.props.navigator to use related APIs instead of directly calling TYNavigator, which needs to be used as needed

More Navigator knowledge

Event (relevant operations to encapsulate events)

const TYEvent = TYSdk.event;

TYEvent = {
    on: ƒ (),  // monitor
    once: ƒ (),
    emit: ƒ (),  // Distribute events
    fire: ƒ (),
    remove: ƒ (),
    off: ƒ (t)   // Remove event
}

//  eg: Monitoring device information changes
TYEvent.on('deviceDataChange', (data) => {console.log(data)});
//  eg: Remove device information monitoring
TYEvent.off('deviceDataChange');
//  eg: Distribute events backLiveView
TYEvent.emit('backLiveView');

Native (native provides encapsulated API)

const TYNative = TYSdk.native;

TYNative = {
    showLoading: f(), // Native loading box
    hideLoading: f(), // Hide loading box
    simpleConfirmDialog: f(), // Native confirmation dialog
    back: f(), // Exit the Rn panel and return to the device list
    setDevProperty: f(), // Temporarily store data to the device, similar to the role of local storage
    getDevProperty: f(), // Get data to the device, similar to the role of local storage
    ...
}

// eg:

TYNative.hideLoading();
TYNative.showLoading({title: ""});

Device (package api related to device operation)

const TYDevice = TYSdk.device;

TYDevice = {
    getDpIdByCode: f(e), // Get id according to dpCode
    getDpCodeById: f(e), // Get dpCode based on id
    putDeviceData: f(e), // Issue dp points (commonly used)
    ...
}

TYDevice.getDpIdByCode('cruse_status');
TYDevice.putDeviceData({cruse_status: '2'});

Video preview interaction

1. First determine whether the video is offline or in privacy mode, display the video mask layer in offline or privacy

// Get the value of deviceOnline, basic_private under the devInfo object from redux
 // Get device offline
 const { deviceOnline } = this.props;
 // Get the status of privacy mode
 const { basic_private } = this.props;

2. After non-offline and non-privacy mode, the non-low-power device performs P2P connection and video preview after successful; the low-power device first wakes up three times, then performs P2P connection, video preview.

// Low power device wake up
  CameraManager.wakeUpDoorBell();
  console.log('---->Wake up once');
  CameraManager.wakeUpDoorBell();
  console.log('---->Wake up twice');
  CameraManager.wakeUpDoorBell();
  console.log('---->Wake up three times');

// First determine whether P2P is connected
CameraManager.isConnected(msg => {});
// P2P is not connected, msg returns false, connect p2p
 CameraManager.connect(
      res => {},
      err => {}
    )
// msg returns true or p2p connection is successful, call video preview
// 4: High-definition, 2: Standard-definition, 1: Stream-saving 8: Super-clear 10: Super-clear (currently only HD and SD are supported)
 CameraManager.startPreviewWithDefinition(
      4,
      res => {},
      err => {}
   );

Intercom instructions

- One-way intercom: Press and hold to turn on the intercom, the speaker turns off during the intercom, and the speaker turns on after the intercom.
- Two-way intercom: Click to talk or pause, the speaker is turned on during and after the intercom.

// Start intercom
CameraManager.startTalk(
    res => {},
    err => {}
);
// Stop intercom
CameraManager.stopTalk(
    res => {},
    err => {}
);
// Speaker off or on
CameraManager.enableMute(
        true/false,
        () => { },
        () => { }
);

Obtain cloud platform camera configuration information

Camera panel cloud platform configurable information:

• Mic (with or without intercom, intercom method)
• Speaker
• Default video stream (the type of video stream acquired for the first time on the network, HD or SD)
• Cloud storage

The above four configuration acquisitions can only be accurately obtained after the p2p is successfully established

 // 1. Mic (with or without intercom)
  // Is there any intercom
  CameraManager.isSupportedTalk(result => {});
  // Intercom Mode   result: 1 One-way Intercom result: 2 Two-way Intercom
  CameraManager.supportedAudioMode(result =>{})
  // 2.Speaker    result: true Has result: false No
  CameraManager.isSupportedSound(result => {});
  // 3.Default video stream
  CameraManager.obtainCameraConfigInfo(result => {
      // vedioClarity is the default video stream value obtained
      const { vedioClarity } = result;
    });
// 2.Cloud storage result: true Has result: false No
  CameraManager.isSupportedCloudStorage(result => {});

Enter the foreground and background

• Enter the background (refers to entering the native interface except the preview interface (such as photo albums, cloud storage, playback, alarms and other natively packaged pages) or entering the system background) need to stop intercom, stop recording, stop preview, and mute the video.
• Enter the foreground (It must be entered from the background to enter the foreground). Use the mask and text to prompt the video loading process, and then restart the video preview interaction process

// Whether to record
CameraManager.isRecording(msg => {
   if (msg) {
     CameraManager.stopRecord(
       () => { },
       () => { }
     );
   }
 });

 // Whether to talk
CameraManager.isTalkBacking(msg => {
   if (msg) {
     CameraManager.stopTalk(
       () => { },
       () => { }
     );
   }
 });

 // Mute
 CameraManager.isMuting(msg => {
   if (!msg) {
     CameraManager.enableMute(
       true,
       () => { },
       () => { }
     );
   }
 ）

 // Stop preview
 CameraManager.stopPreview(
   () => { },
   () => { }
 );

Module expansion

The expansion of the module has three main parts:

• List all functions in order and configure initial content
• List the menus that need to be filtered according to Dp
• List the menus that require cloud platform configuration filtering

Configuration file

• 1.panelBasicFeatureInitData.js(Basic storage function menu configuration)
• 2.panelMoreFeatureInitData.js(More function menu configuration)
• 3.panelTableFeatureInitData.js(Tab menu configuration)

Basic function module

Full screen, screenshot, intercom function, video, close/more

// Basic module initialization menu
export const liveBottomBasicMenuArr = {
  basicArr: [
    {
      hasMic: true, // Is there a mic configuration
      key: 'fullScreen',
      test: 'tuya_ipc_fullscreen',
      imgSource: Res.publicImage.basicFullScreen,
      imgTitle: Strings.getLang('bottom_fullScreen'),
    },
    {
      test: 'tuya_ipc_snap',
      key: 'capture',
      imgSource: Res.publicImage.basicCutScreen,
      imgTitle: Strings.getLang('bottom_capture'),
    },
    {
      test: 'tuya_ipc_record_on',
      key: 'video',
      imgSource: Res.publicImage.basicVideo,
      imgTitle: Strings.getLang('bottom_video'),
    },
    {
      test: 'tuya_ipc_basic_expand',
      key: 'more',
      imgSource: Res.publicImage.basicFeatureClose,
      imgTitle: Strings.getLang('bottom_more_close'),
    },
  ],
   // List the need to control whether a function menu exists through Dp point
  needFilterDp: [],
  // List the menus that need to be filtered by obtaining cloud configuration Intercom function
  needFilterCloudConfig: [
    {
      configName: 'mic',
      iconKey: 'mic',
      test: 'tuya_ipc_full_talk_on',
      key: 'mic',
      imgSource: Res.publicImage.basicOneWayTalk,
      imgTitle: Strings.getLang('bottom_oneway_talk'),
    },
  ],
};

Tab function module

tab function module: message, collection point, cloud platform, function and other modules

export const liveBottomTabMenuArr = {
  tabArr: [
    {
      key: 'notify',
      imgSource: Res.tabPanel.tabNotify,
      imgTitle: Strings.getLang('tabNotify'),
      component: <Notify />,  // Message component
    },
    {
      key: 'ptzZoom',
      imgSource: Res.tabPanel.tabPtz,
      imgTitle: Strings.getLang('tabPtz'),
      component: <PtzModules />, // Ptz component
    },
    {
      key: 'point',
      imgSource: Res.tabPanel.tabPoint,
      imgTitle: Strings.getLang('tabPoint'),
      component: <CollectPoint />, // Collection point component
    },
    {
      key: 'feature',
      imgSource: Res.tabPanel.tabFeature,
      imgTitle: Strings.getLang('tabFeature'),
      component: <PanelView />,  // Functional component
    },
  ],
  needFilterDp: [
    { dpCode: 'ptz_control', iconKey: 'ptzZoom' },
    { dpCode: 'zoom_control', iconKey: 'ptzZoom' },
    { dpCode: 'memory_point_set', iconKey: 'point' },
  ],
  needFilterCloudConfig: [],
};

Custom function module

type: ‘basic’, ‘switch’, ‘switchDialog’, 'switchPage’

• basic type: Such as: playback, cloud storage, multi-screen preview, album call native API method
• switch type: For example: move the tracking switch, click to directly trigger the delivery of dp points
• switchDialog type: For example: infrared night vision, dp is an enumerated value, select a certain value in the pop-up window to issue dp
• customDialog type: Such as: device volume control, pop-up window custom content
• switchPage type：Such as: cruise function, click to jump directly to the page

// Preview interface Tab menu more function point configuration
export const moreFeatureMenu = {
  allMenu: [
    {
      // SD card playback 110
      key: 'sd_status',
      // imgSource: Res.morePanel.sd_status,
      imgSource: Res.customFeature.dpSdStatus,
      imgTitle: Strings.getLang('ipc_panel_button_playBack'),
      type: 'basic',
    },
    // Server configuration, call native interface
    {
      key: 'cloudStorage',
      imgSource: Res.customFeature.serveCloudStorage,
      imgTitle: Strings.getLang('ipc_panel_button_cloudStorage'),
      type: 'basic',
    },
    // Forever Universal Album
    {
      key: 'generalAlbum',
      imgSource: Res.customFeature.dpGeneralAlbum,
      imgTitle: Strings.getLang('ipc_panel_button_generalAlbum'),
      type: 'basic',
    },
    {
      // private mode 105
      key: 'basic_private',
      imgSource: Res.customFeature.dpPrivate,
      imgTitle: Strings.getLang('ipc_panel_button_private'),
      type: 'switch',
    },
    {
      // Infrared night vision switch 108
      key: 'basic_nightvision',
      imgSource: Res.customFeature.dpNightVision,
      imgTitle: Strings.getLang('ipc_nightvision_button'),
      type: 'switchDialog',
    },
    {
      // Device volume control 160
      key: 'basic_device_volume',
      imgSource: Res.customFeature.serveVolume,
      imgTitle: Strings.getLang('ipc_panel_button_device_volume'),
      type: 'customDialog',
    },
    {
      // Mobile tracking switch 161
      key: 'motion_tracking',
      imgSource: Res.customFeature.dpTracking,
      imgTitle: Strings.getLang('ipc_panel_button_motion_tracking'),
      type: 'switch',
    },
    {
      // cruise 179
      key: 'cruise_status',
      imgSource: Res.customFeature.dpCruise,
      imgTitle: Strings.getLang('ipc_panel_button_cruise'),
      type: 'switchPage',
    },
  ],
  needFilterDp: [
    { dpCode: 'sd_status', iconKey: 'sd_status' },
    { dpCode: 'basic_private', iconKey: 'basic_private' },
  ],
  needFilterCloudConfig: [{ configName: 'cloudStorage', iconKey: 'cloudStorage' }],
};

Return video preview interface from Rn interface

Returning to the Rn interface will not trigger the native enterForegroundEvent event (that is, entering the foreground). Distribute the event on the Rn interface TYSdk.emit(‘backLivePreview’), monitor the video preview interface TYSdk.on(‘backLivePreview’), and perform video preview interaction again.

import RCTDeviceEventEmitter from 'RCTDeviceEventEmitter';

 componentWillMount() {
   this.foregroundListener = RCTDeviceEventEmitter.addListener('enterForegroundEvent', value        => {
    console.log('Enter the front desk');
    console.log('Return to the foreground from the background, the video preview loading process needs to be re-run');
   })
}
componentWillUnmount() {
    // Component destruction must remove listening events
    this.foregroundListener.remove();
}

// Rn Page
componentWillUnmount() {
    // Component destruction must remove listening events
    TYSdk.emit('backLivePreview');
}
// Video preview interface
 componentWillMount() {
    TYSdk.on('backLivePreview', () => {
      // Video preview
      this.connecP2PAndStartPreview();
    });
}
componentWillUnmount() {
    // Component destruction must remove listening events
    TYSdk.off('backLivePreview');
}

Exit panel

To exit to the device list, you need to call the method to enter the background and disconnect the P2P connection

// Disconnect P2P connection
CameraManager.disconnect();