关键交互功能点说明

Ⅰ.TYSdk 使用详解

1.引入

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

2.分类及应用

TYSdk 共包含以下 6 个属性

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

2.1 Mobile(获取移动设备相关信息,面板开发不常用)

const TYMobile = TYSdk.Mobile;

TYMobile = {
  verSupported: ƒ (e),
  getNetworkState: ƒ (),
  is24Hour: ƒ (),          // 系统时间是否为24小时制
  getMobileInfo: ƒ (),     // 获取移动设备信息, App版本号等
  jumpTo: ƒ (e),
  disablePopGesture: ƒ (),
  enablePopGesture: ƒ (),
  showPromptDialog: ƒ (e, t, i, n, a, o, s)
}

2.2 apiRequest(请求云端接口)

TYSdk.apiRnRequest();

// 封装公用请求体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: 获取预设点列表接口  将getMemoryPointList方法挂载到TYSdK上, 也可自己定义对象进行挂载
TYSdk.getMemoryPointList = devId => {
  return api(
    'tuya.m.ipc.memory.point.list',
    {
      devId,
    },
    '1.0'
  );
};

2.3 Navigator(Rn 页面路由相关操作 api)

const TYNavigator = TYSdk.Navigator;

TYNavigator = {
    jumpBack: ƒ (),
    push: ƒ (),     // 常用,跳转到固定api
    popN: ƒ (),
    pop: ƒ (),     //  常用,返回上一页面
    replaceAtIndex: ƒ (),
    replace: ƒ (),
    ...
}

// 此外注意不要预先在全局定义，因为此时 Navigator 还没挂载到 TYSdk 上去，

// 所以更建议通过 this.props.navigator 来使用相关api, 而不是直接 TYNavigator调用,需随取随用

更多 Navigator 知识

2.4 event(封装事件的相关操作)

const TYEvent = TYSdk.event;

TYEvent = {
    on: ƒ (),  // 监听
    once: ƒ (),
    emit: ƒ (),  // 分发事件
    fire: ƒ (),
    remove: ƒ (),
    off: ƒ (t)   // 移除事件
}

//  eg: 监听设备信息的变更
TYEvent.on('deviceDataChange', (data) => {console.log(data)});
//  eg: 移除设备信息监听
TYEvent.off('deviceDataChange');
//  eg: 分发事件backLiveView
TYEvent.emit('backLiveView');

2.5 native(native 提供封装的 api)

const TYNative = TYSdk.native;

TYNative = {
    showLoading: f(), // 原生loading加载框
    hideLoading: f(), // 隐藏loading加载框
    simpleConfirmDialog: f(), // 原生确认对话框
    back: f(), // 退出Rn面板,返回设备列表
    setDevProperty: f(), // 暂存数据到设备，类似本地存储的作用
    getDevProperty: f(), // 获取数据到设备，类似本地存储的作用
    ...
}

// eg:

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

2.6 device(与设备操作相关的封装 api)

const TYDevice = TYSdk.device;

TYDevice = {
    getDpIdByCode: f(e), // 根据dpCode获取id
    getDpCodeById: f(e), // 根据id获取dpCode
    putDeviceData: f(e), // 下发dp点(常用)
    ...
}

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

II.视频预览交互

(1). 首先判断视频是否处于离线或处于隐私模式,处于离线或隐私显示视频遮罩层

// 从redux获取devInfo对象下deviceOnline, basic_private的值
 // 获取设备是否离线
 const { deviceOnline } = this.props;
 // 获取隐私模式的状态
 const { basic_private } = this.props;

(2). 非离线且非隐私模式后, 非低功耗设备进行 P2P 的连接，成功后进行视频预览；低功耗设备先进行唤醒三次，再进行 P2P 的连接，视频预览。

// 低功耗设备唤醒
  CameraManager.wakeUpDoorBell();
  console.log('---->wake 1次');
  CameraManager.wakeUpDoorBell();
  console.log('---->wake 2次');
  CameraManager.wakeUpDoorBell();
  console.log('---->wake 3次');

// 先进行判断P2P是否连接
CameraManager.isConnected(msg => {});
// P2P未连接，msg返回false,连接p2p
 CameraManager.connect(
      res => {},
      err => {}
    )
// msg返回true或p2p连接成功,调用视频预览
// 4: 高清, 2:标清, 1:省流量 8: 超清 10：超超清（目前暂时只支持高清和标清）
 CameraManager.startPreviewWithDefinition(
      4,
      res => {},
      err => {}
   );

Ⅲ.对讲交互说明

1.单向对讲: 长按开启对讲，对讲时喇叭关闭，对讲完喇叭打开 2.双向对讲: 点击通话或暂停, 对讲时和对讲完喇叭均打开

// 开始对讲
CameraManager.startTalk(
    res => {},
    err => {}
);
// 停止对讲
CameraManager.stopTalk(
    res => {},
    err => {}
);
// 喇叭关闭或开启
CameraManager.enableMute(
        true/false,
        () => { },
        () => { }
);

Ⅳ.获取云平台的摄像头配置信息

摄像头面板云平台可配置信息:

• 1. 麦克风(有无对讲,对讲方式)
• 1. 喇叭
• 1. 默认视频流(首次配网获取的视频流类型, 高清或标清)
• 1. 云存储

以上四种配置获取均需在 p2p 建立成功之后才能准确获取

 // 1.麦克风(有无对讲)
  // 有无对讲
  CameraManager.isSupportedTalk(result => {});
  // 对讲方式  result: 1 单向对讲 result: 2 双向对讲
  CameraManager.supportedAudioMode(result =>{})
  // 2.喇叭有无    result: true 有 result: false 无
  CameraManager.isSupportedSound(result => {});
  // 3.默认视频流
  CameraManager.obtainCameraConfigInfo(result => {
      // vedioClarity为获取的默认视频流值
      const { vedioClarity } = result;
    });
// 2.云存储有无 result: true 有 result: false 无
  CameraManager.isSupportedCloudStorage(result => {});

Ⅴ.进入前台和后台

• 1.进入后台 (指进入除预览界面的原生界面(如相册,云存储,回放,告警等原生封装的页面)或进入系统后台) 需停止对讲,停止录像,停止预览,视频静音
• 2.进入前台 **(判定必须是从后台进入前台)**使用遮罩和文字提示视频加载过程, 重新走视频预览交互的过程

// 是否录像
CameraManager.isRecording(msg => {
   if (msg) {
     CameraManager.stopRecord(
       () => { },
       () => { }
     );
   }
 });

 // 是否对讲
CameraManager.isTalkBacking(msg => {
   if (msg) {
     CameraManager.stopTalk(
       () => { },
       () => { }
     );
   }
 });

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

 // 停止预览
 CameraManager.stopPreview(
   () => { },
   () => { }
 );

Ⅵ.模块扩展

模块的扩展主要有三大部分:

• 1.按顺序列举所有的功能,配置初始文字
• 2.列举需要根据 Dp 过滤的菜单
• 3.列举需要云平台配置过滤的菜单

配置文件

• 1.panelBasicFeatureInitData.js(基储功能菜单配置)
• 2.panelMoreFeatureInitData.js(更多功能菜单配置)
• 3.panelTableFeatureInitData.js(Tab 菜单配置)

1. 基础功能模块

全屏、截屏、对讲功能、录像、关闭/更多

// 基础模块初始化菜单
export const liveBottomBasicMenuArr = {
  basicArr: [
    {
      hasMic: true, // 是否有mic配置
      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'),
    },
  ],
   // 列举需要通过Dp点控制某功能菜单是否存在
  needFilterDp: [],
  // 列举需要通过获取云端配置进行过滤的菜单 对讲功能
  needFilterCloudConfig: [
    {
      configName: 'mic',
      iconKey: 'mic',
      test: 'tuya_ipc_full_talk_on',
      key: 'mic',
      imgSource: Res.publicImage.basicOneWayTalk,
      imgTitle: Strings.getLang('bottom_oneway_talk'),
    },
  ],
};

2.tab 功能模块

tab 功能模块: 消息、收藏点、云平台、功能等模块

export const liveBottomTabMenuArr = {
  tabArr: [
    {
      key: 'notify',
      imgSource: Res.tabPanel.tabNotify,
      imgTitle: Strings.getLang('tabNotify'),
      component: <Notify />,  // 消息组件
    },
    {
      key: 'ptzZoom',
      imgSource: Res.tabPanel.tabPtz,
      imgTitle: Strings.getLang('tabPtz'),
      component: <PtzModules />, // Ptz组件
    },
    {
      key: 'point',
      imgSource: Res.tabPanel.tabPoint,
      imgTitle: Strings.getLang('tabPoint'),
      component: <CollectPoint />, // 收藏点组件
    },
    {
      key: 'feature',
      imgSource: Res.tabPanel.tabFeature,
      imgTitle: Strings.getLang('tabFeature'),
      component: <PanelView />,  // 功能组件
    },
  ],
  needFilterDp: [
    { dpCode: 'ptz_control', iconKey: 'ptzZoom' },
    { dpCode: 'zoom_control', iconKey: 'ptzZoom' },
    { dpCode: 'memory_point_set', iconKey: 'point' },
  ],
  needFilterCloudConfig: [],
};

3.自定义功能模块

type 分类：'basic', 'switch', 'switchDialog', 'switchPage'

• basic 类: 如:回放，云存储，多屏预览，相册调用原生 Api 方法
• switch 类: 如: 移动追踪开关,点击直接触发下发 dp 点
• switchDialog 类: 如: 红外夜视,dp 为枚举值，弹窗选择某一值进行 dp 下发
• customDialog 类: 如: 设备音量控制，弹窗自定义内容
• switchPage 类：如：巡航功能, 点击直接跳转页面

// 预览界面Tab菜单更多功能点配置
export const moreFeatureMenu = {
  allMenu: [
    {
      // SD卡回放 110
      key: 'sd_status',
      // imgSource: Res.morePanel.sd_status,
      imgSource: Res.customFeature.dpSdStatus,
      imgTitle: Strings.getLang('ipc_panel_button_playBack'),
      type: 'basic',
    },
    // 服务端配置，调取原生接口
    {
      key: 'cloudStorage',
      imgSource: Res.customFeature.serveCloudStorage,
      imgTitle: Strings.getLang('ipc_panel_button_cloudStorage'),
      type: 'basic',
    },
    // 永远存在的 通用相册
    {
      key: 'generalAlbum',
      imgSource: Res.customFeature.dpGeneralAlbum,
      imgTitle: Strings.getLang('ipc_panel_button_generalAlbum'),
      type: 'basic',
    },
    {
      // 隐私模式 105
      key: 'basic_private',
      imgSource: Res.customFeature.dpPrivate,
      imgTitle: Strings.getLang('ipc_panel_button_private'),
      type: 'switch',
    },
    {
      // 红外夜视开关 108
      key: 'basic_nightvision',
      imgSource: Res.customFeature.dpNightVision,
      imgTitle: Strings.getLang('ipc_nightvision_button'),
      type: 'switchDialog',
    },
    {
      // 设备音量控制 160
      key: 'basic_device_volume',
      imgSource: Res.customFeature.serveVolume,
      imgTitle: Strings.getLang('ipc_panel_button_device_volume'),
      type: 'customDialog',
    },
    {
      // 移动追踪开关 161
      key: 'motion_tracking',
      imgSource: Res.customFeature.dpTracking,
      imgTitle: Strings.getLang('ipc_panel_button_motion_tracking'),
      type: 'switch',
    },
    {
      // 巡航 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' }],
};

Ⅶ.由 Rn 界面返回视频预览界面

Rn 界面返回不会触发原生 enterForegroundEvent 事件(即进入前台), 在 Rn 界面 TYSdk.emit(‘backLivePreview’)分发事件，视频预览界面 TYSdk.on(‘backLivePreview’)进行监听，重新进行视频预览交互。

import RCTDeviceEventEmitter from 'RCTDeviceEventEmitter';

 componentWillMount() {
   this.foregroundListener = RCTDeviceEventEmitter.addListener('enterForegroundEvent', value        => {
    console.log('进入前台');
    console.log('从后台返回前台,需重新进行第1条视频加载流程')
   })
}
componentWillUnmount() {
    // 组件销毁必须移除监听事件
    this.foregroundListener.remove();
}

// Rn界面
componentWillUnmount() {
    // 组件销毁必须移除监听事件
    TYSdk.emit('backLivePreview');
}
// 视频预览界面
 componentWillMount() {
    TYSdk.on('backLivePreview', () => {
      // 视频预览
      this.connecP2PAndStartPreview();
    });
}
componentWillUnmount() {
    // 组件销毁必须移除监听事件
    TYSdk.off('backLivePreview');
}

Ⅶ.退出面板

退出到设备列表需调用进入后台的方法以及断开 P2P 连接

// 断开P2P连接
CameraManager.disconnect();