@ray-js/ray-ipc-player 0.0.13-beta-1

package/lib/index.wechat.js

@@ -0,0 +1,497 @@
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import "core-js/modules/es.object.to-string.js";
+import "core-js/modules/es.promise.js";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import React, { useEffect, useRef, useCallback } from 'react';
+import { useImmer } from 'use-immer';
+import { IpcPlayer, View, Text, CoverView } from '@ray-js/components';
+import cx from 'classnames';
+import { usePageEvent } from 'ray';
+import locals from './i18n';
+import Styles from './index.module.less';
+import { IpcFailCode } from './constant';
+import { putDpData } from './utils';
+
+var Player = function (props) {
+  var _props$updateLayout = props.updateLayout,
+      updateLayout = _props$updateLayout === void 0 ? '' : _props$updateLayout,
+      _props$devId = props.devId,
+      devId = _props$devId === void 0 ? '' : _props$devId,
+      _props$devName = props.devName,
+      devName = _props$devName === void 0 ? '' : _props$devName,
+      onChangeStreamStatus = props.onChangeStreamStatus,
+      onPlayerTap = props.onPlayerTap,
+      onInitPreview = props.onInitPreview,
+      _props$defaultMute = props.defaultMute,
+      defaultMute = _props$defaultMute === void 0 ? true : _props$defaultMute,
+      _props$onlineStatus = props.onlineStatus,
+      onlineStatus = _props$onlineStatus === void 0 ? true : _props$onlineStatus,
+      _props$loadDes = props.loadDes,
+      loadDes = _props$loadDes === void 0 ? '' : _props$loadDes,
+      _props$rotateZ = props.rotateZ,
+      rotateZ = _props$rotateZ === void 0 ? 0 : _props$rotateZ,
+      _props$scalable = props.scalable,
+      scalable = _props$scalable === void 0 ? true : _props$scalable,
+      _props$scaleMultiple = props.scaleMultiple,
+      scaleMultiple = _props$scaleMultiple === void 0 ? 0 : _props$scaleMultiple,
+      _props$ptzControllabl = props.ptzControllable,
+      ptzControllable = _props$ptzControllabl === void 0 ? true : _props$ptzControllabl,
+      _props$isOnPlayerPage = props.isOnPlayerPage,
+      isOnPlayerPage = _props$isOnPlayerPage === void 0 ? true : _props$isOnPlayerPage,
+      _props$clarity = props.clarity,
+      clarity = _props$clarity === void 0 ? 'normal' : _props$clarity,
+      _props$soundMode = props.soundMode,
+      soundMode = _props$soundMode === void 0 ? 'speaker' : _props$soundMode,
+      _props$orientation = props.orientation,
+      orientation = _props$orientation === void 0 ? 'vertical' : _props$orientation,
+      onCtx = props.onCtx,
+      _props$borderRadius = props.borderRadius,
+      borderRadius = _props$borderRadius === void 0 ? 0 : _props$borderRadius,
+      _props$bgColor = props.bgColor,
+      bgColor = _props$bgColor === void 0 ? '#000000' : _props$bgColor,
+      _props$borderStyle = props.borderStyle,
+      borderStyle = _props$borderStyle === void 0 ? 'solid' : _props$borderStyle,
+      _props$borderColor = props.borderColor,
+      borderColor = _props$borderColor === void 0 ? '' : _props$borderColor,
+      _props$borderWidth = props.borderWidth,
+      borderWidth = _props$borderWidth === void 0 ? 0 : _props$borderWidth,
+      _props$privateState = props.privateState,
+      privateState = _props$privateState === void 0 ? false : _props$privateState;
+
+  var _useImmer = useImmer({
+    connectState: false,
+    // 连接状态
+    loadingState: false,
+    // 加载状态
+    errorState: false,
+    // 异常状态
+    errorMsg: '',
+    // 异常信息
+    updateLy: '',
+    devlineState: true,
+    initLy: false
+  }),
+      _useImmer2 = _slicedToArray(_useImmer, 2),
+      playState = _useImmer2[0],
+      setPlayState = _useImmer2[1];
+
+  var ipcCtx = useRef(null); // ipc实例
+
+  var retryCount = useRef(0); // 重试次数
+
+  var muteRef = useRef(defaultMute); // 静音
+
+  usePageEvent('onShow', useCallback(function () {
+    // console.log('show');
+    if (ipcCtx.current && playState.connectState) {
+      startPreview('');
+    }
+  }, [playState.connectState]));
+  usePageEvent('onHide', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+    return _regeneratorRuntime.wrap(function (_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            // console.log('hide');
+            setPlayState(function (d) {
+              d.loadingState = true;
+            });
+            _context.next = 3;
+            return getCurMute();
+
+          case 3:
+            stopPreview();
+
+          case 4:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  }))); // 隐私模式
+
+  useEffect(function () {
+    setPlayState(function (d) {
+      d.errorState = privateState;
+    });
+
+    if (!privateState) {
+      retry();
+    }
+  }, [privateState]);
+  useEffect(function () {
+    muteRef.current = defaultMute;
+  }, [defaultMute]);
+  useEffect(function () {
+    setPlayState(function (d) {
+      d.updateLy = updateLayout;
+    });
+  }, [updateLayout]); // 设备离线
+
+  useEffect(function () {
+    setPlayState(function (d) {
+      d.devlineState = onlineStatus;
+    });
+
+    if (!onlineStatus) {
+      setPlayState(function (d) {
+        d.errorState = true;
+        d.errorMsg = locals.getLang('ipc_player_no_line');
+      });
+    } else if (playState.initLy) {
+      retry();
+    }
+  }, [onlineStatus, playState.initLy]);
+  useEffect(function () {
+    if (!isOnPlayerPage) {
+      disconnect();
+    }
+  }, [isOnPlayerPage]); // 重试
+
+  var _retry = /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+      return _regeneratorRuntime.wrap(function (_context2) {
+        while (1) {
+          switch (_context2.prev = _context2.next) {
+            case 0:
+              setPlayState(function (d) {
+                d.connectState = false;
+                d.errorMsg = '';
+                d.errorState = false;
+              });
+              _context2.t0 = playState.connectState;
+
+              if (!_context2.t0) {
+                _context2.next = 5;
+                break;
+              }
+
+              _context2.next = 5;
+              return disconnect();
+
+            case 5:
+              createConnect();
+
+            case 6:
+            case "end":
+              return _context2.stop();
+          }
+        }
+      }, _callee2);
+    }));
+
+    return function () {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+
+  var retry = useCallback(function () {
+    // console.log('retry:', muteRef.current);
+    !privateState && _retry();
+  }, [playState.connectState, privateState]); // 创建ipc实例
+
+  var createIpcCtx = function (id) {
+    var _ty;
+
+    // @ts-ignore
+    ipcCtx.current = (_ty = ty) === null || _ty === void 0 ? void 0 : _ty.createIpcPlayerContext(id); // console.log('创建实例:', devId);
+
+    onCtx && onCtx({
+      ctx: ipcCtx.current,
+      retry: retry
+    });
+  };
+
+  useEffect(function () {
+    onlineStatus && createIpcCtx(devId);
+    return function () {
+      disconnect();
+      ipcCtx.current = null;
+    };
+  }, [devId, onlineStatus]); // 建立连接
+
+  var createConnect = function (params) {
+    var _ipcCtx$current;
+
+    // console.log('建立连接:', devId);
+    setPlayState(function (d) {
+      d.loadingState = true;
+    });
+    (_ipcCtx$current = ipcCtx.current) === null || _ipcCtx$current === void 0 ? void 0 : _ipcCtx$current.connect({
+      success: function success() {
+        // console.log('建立连接成功:', devId);
+        setPlayState(function (d) {
+          d.connectState = true;
+          d.errorState = false;
+          d.errorMsg = '';
+        });
+        onChangeStreamStatus && onChangeStreamStatus(1001);
+        startPreview(params);
+      },
+      fail: function fail() {
+        // console.log('建立连接失败:', devId);
+        setPlayState(function (d) {
+          d.connectState = false;
+          d.errorState = true;
+          d.errorMsg = locals.getLang('ipc_player_connect_fail');
+          d.loadingState = false;
+        });
+        onChangeStreamStatus && onChangeStreamStatus(-1001);
+      }
+    });
+  }; // 视图层准备就绪，开始建立连接
+
+
+  // 开启预览
+  var startPreview = function (params) {
+    var _ipcCtx$current2;
+
+    (_ipcCtx$current2 = ipcCtx.current) === null || _ipcCtx$current2 === void 0 ? void 0 : _ipcCtx$current2.startPreview({
+      success: function success() {
+        // console.log('开启预览：', devId);
+        setPlayState(function (d) {
+          d.loadingState = false;
+          d.errorState = false;
+          d.errorMsg = '';
+        });
+        params && onInitPreview && onInitPreview(devId);
+        onChangeStreamStatus && onChangeStreamStatus(1002);
+      },
+      fail: function fail() {
+        // console.log('开启失败：', devId);
+        setPlayState(function (d) {
+          d.errorState = true;
+          d.loadingState = false;
+          d.errorMsg = locals.getLang('ipc_player_preview_fail');
+        });
+        onChangeStreamStatus && onChangeStreamStatus(-1002);
+      },
+      complete: function complete() {
+        // console.log('startPreview:', muteRef.current);
+        setMuted(muteRef.current);
+      }
+    });
+  }; // 暂停预览
+
+
+  var stopPreview = function () {
+    var _ipcCtx$current3;
+
+    (_ipcCtx$current3 = ipcCtx.current) === null || _ipcCtx$current3 === void 0 ? void 0 : _ipcCtx$current3.stopPreview({
+      success: function success() {
+        return null;
+      },
+      fail: function fail() {
+        return null;
+      },
+      complete: function complete() {
+        return setMuted(true);
+      }
+    });
+  }; // 设置静音
+
+
+  var setMuted = function (val) {
+    var _ipcCtx$current4;
+
+    (_ipcCtx$current4 = ipcCtx.current) === null || _ipcCtx$current4 === void 0 ? void 0 : _ipcCtx$current4.setMuted({
+      mute: val,
+      success: function success() {// console.log('设置声音成功', val);
+      },
+      fail: function fail() {// console.log('设置声音失败');
+      }
+    });
+  }; // 获取当前是否静音
+
+
+  var getCurMute = function () {
+    return new Promise(function (resolve, reject) {
+      var _ipcCtx$current5;
+
+      (_ipcCtx$current5 = ipcCtx.current) === null || _ipcCtx$current5 === void 0 ? void 0 : _ipcCtx$current5.isMuted({
+        success: function success(res) {
+          muteRef.current = res;
+        },
+        fail: function fail(e) {
+          reject(e); // console.log(e);
+        },
+        complete: function complete(d) {
+          resolve(d);
+        }
+      });
+    });
+  }; // 异常事件
+
+
+  var onError = useCallback(function (e) {
+    var _e$detail;
+
+    if (playState.errorState) {
+      return;
+    } // console.error('发生错误：', e);
+
+
+    var type = e === null || e === void 0 ? void 0 : (_e$detail = e.detail) === null || _e$detail === void 0 ? void 0 : _e$detail.errCode;
+
+    if (IpcFailCode[type]) {
+      onChangeStreamStatus && onChangeStreamStatus(type);
+      setPlayState(function (d) {
+        d.loadingState = false;
+        d.errorState = true;
+        d.errorMsg = locals.getLang(IpcFailCode[type]);
+        d.connectState = false;
+      });
+    }
+  }, [playState.errorState]); // 连接状态发生变化
+
+  // 断开连接
+  var disconnect = function () {
+    return new Promise(function (resolve, reject) {
+      var _ipcCtx$current6;
+
+      (_ipcCtx$current6 = ipcCtx.current) === null || _ipcCtx$current6 === void 0 ? void 0 : _ipcCtx$current6.disconnect({
+        success: function success(res) {
+          // console.log('断开连接成功：', devId);
+          resolve(res);
+          setPlayState(function (d) {
+            d.connectState = false;
+          });
+          onChangeStreamStatus && onChangeStreamStatus(1009);
+        },
+        fail: function fail(e) {
+          // console.log('断开连接失败：', devId);
+          reject(e);
+          onChangeStreamStatus && onChangeStreamStatus(-1009);
+        }
+      });
+    });
+  };
+
+  // 关闭隐私模式，重新拉流
+  var handleReWakeCamera = /*#__PURE__*/function () {
+    var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
+      return _regeneratorRuntime.wrap(function (_context3) {
+        while (1) {
+          switch (_context3.prev = _context3.next) {
+            case 0:
+              _context3.next = 2;
+              return putDpData({
+                105: false
+              }, devId);
+
+            case 2:
+            case "end":
+              return _context3.stop();
+          }
+        }
+      }, _callee3);
+    }));
+
+    return function () {
+      return _ref3.apply(this, arguments);
+    };
+  }();
+
+  return /*#__PURE__*/React.createElement(View, {
+    className: Styles.ipc_player
+  }, isOnPlayerPage && /*#__PURE__*/React.createElement(IpcPlayer, {
+    className: Styles.player,
+    onVideotap: function handlePlayerClick() {
+      // console.log("videoTap:", devId);
+      onPlayerTap && onPlayerTap(devId);
+    },
+    onInitdone: function initdone() {
+      // console.log('视图层准备就绪:', devId);
+      setPlayState(function (d) {
+        d.updateLy = Math.random();
+        d.initLy = true;
+      });
+    },
+    onError: onError,
+    onConnectchange: function connectchange(e) {
+      var _e$detail2;
+
+      // console.log('连接状态发生变化', e);
+      var code = e === null || e === void 0 ? void 0 : (_e$detail2 = e.detail) === null || _e$detail2 === void 0 ? void 0 : _e$detail2.state;
+      onChangeStreamStatus && onChangeStreamStatus(code === 0 ? 1001 : -1001);
+
+      if (code === 0) {
+        setPlayState(function (d) {
+          d.connectState = true;
+        });
+      } else if ((code === -3 || code === -105) && retryCount.current < 1) {
+        // 连接超时或鉴权失败重试一次
+        retryCount.current++;
+        retry();
+      } else {
+        setPlayState(function (d) {
+          d.connectState = false;
+          d.loadingState = false;
+          d.errorState = true;
+          d.errorMsg = locals.getLang(IpcFailCode[-1001]);
+        });
+      }
+    },
+    deviceId: devId,
+    autoPauseIfNavigate: false,
+    autoPauseIfOpenNative: false,
+    muted: defaultMute,
+    objectFit: "fillCrop",
+    clarity: clarity,
+    soundMode: soundMode,
+    orientation: orientation,
+    rotateZ: rotateZ,
+    scalable: scalable,
+    scaleMultiple: scaleMultiple,
+    ptzControllable: ptzControllable,
+    borderRadius: borderRadius,
+    borderStyle: borderStyle,
+    borderColor: borderColor,
+    borderWidth: borderWidth,
+    updateLayout: playState.updateLy,
+    backgroundColor: bgColor
+  }), /*#__PURE__*/React.createElement(View, {
+    style: {
+      borderRadius: "".concat(borderRadius)
+    },
+    className: cx(Styles.load_box, Styles.bg_center, !playState.loadingState && Styles.hide)
+  }, /*#__PURE__*/React.createElement(View, {
+    className: Styles.load_icon
+  }), /*#__PURE__*/React.createElement(View, {
+    className: Styles.load_des
+  }, loadDes || locals.getLang('get_video_stream'))), /*#__PURE__*/React.createElement(CoverView, {
+    style: {
+      borderRadius: "".concat(borderRadius)
+    },
+    className: cx(Styles.bg_center, Styles.state_label, !playState.errorState && Styles.hide)
+  }, privateState ? /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(View, {
+    className: Styles.device_sleep
+  }, locals.getLang('device_sleep')), /*#__PURE__*/React.createElement(View, {
+    className: Styles.re_wake_camera // @ts-ignore
+    ,
+    onClick: handleReWakeCamera
+  }, locals.getLang('re_wake_camera'))) : /*#__PURE__*/React.createElement(View, {
+    style: {
+      width: '95%',
+      textAlign: 'center'
+    }
+  }, /*#__PURE__*/React.createElement(View, {
+    className: cx(Styles.iconfont, Styles.icon_tishi, !playState.devlineState && Styles.hide)
+  }), /*#__PURE__*/React.createElement(View, {
+    className: Styles.err_msg
+  }, /*#__PURE__*/React.createElement(View, {
+    className: cx(Styles.msg, Styles.ellipsis)
+  }, playState.errorMsg), /*#__PURE__*/React.createElement(Text, {
+    style: {
+      color: '#fff'
+    },
+    className: !playState.devlineState && Styles.hide
+  }, "\uFF0C"), /*#__PURE__*/React.createElement(View // @ts-ignore
+  , {
+    onClick: retry,
+    className: cx(Styles.retry, !playState.devlineState && Styles.hide)
+  }, locals.getLang('ipc_player_retry'))))));
+};
+
+export default Player;

package/lib/typings/index.d.ts

@@ -0,0 +1,153 @@
+declare module '*.module.less' {
+  const classes: {
+    readonly [key: string]: string;
+  };
+  export default classes;
+  declare module '*.less';
+}
+export type IProps = {
+  /**
+   * @description.en updateLayout
+   * @description.zh 主动触发视图更新
+   * @default ""
+   */
+  updateLayout?: any;
+  /**
+   * @description.en devId
+   * @description.zh 设备id
+   * @default ""
+   */
+  devId: string;
+  /**
+   * @description.en devName
+   * @description.zh 设备名称
+   * @default ""
+   */
+  devName?: string;
+  /**
+   * @description.en onInitPreview
+   * @description.zh 初始化预览成功通知
+   * @default (data) => void
+   */
+  onInitPreview?: (data) => void;
+  /**
+   * @description.en onPlayerTap
+   * @description.zh videoTap点击事件
+   * @default (data) => void
+   */
+  onPlayerTap?: (data) => void;
+  /**
+   * @description.en onChangeStreamStatus
+   * @description.zh 通知视频流状态发生变化
+   * @default (data) => void
+   */
+  onChangeStreamStatus?: (data) => void;
+  /**
+   * @description.en onlineStatus
+   * @description.zh 设备默认在离线状态,true:在线、false:离线
+   * @default true
+   */
+  onlineStatus?: boolean;
+  /**
+   * @description.en loadDes
+   * @description.zh 加载文案
+   * @default "正在获取视频流..."
+   */
+  loadDes?: string;
+  /**
+   * @description.en rotateZ
+   * @description.zh 摄像头旋转角度
+   * @default 0
+   */
+  rotateZ?: number;
+  /**
+   * @description.en scalable
+   * @description.zh 是否可缩放
+   * @default true
+   */
+  scalable?: boolean;
+  /**
+   * @description.en scaleMultiple
+   * @description.zh 缩放比例
+   * @default 0
+   */
+  scaleMultiple?: number;
+  /**
+   * @description.en ptzControllable
+   * @description.zh 是否开启视频区云平台控制
+   * @default true
+   */
+  ptzControllable?: boolean;
+  /**
+   * @description.en isOnPlayerPage
+   * @description.zh 当前是否在预览页
+   * @default true
+   */
+  isOnPlayerPage?: boolean;
+  /**
+   * @description.en onCtx
+   * @description.zh 获取ipcPlayer实例ctx以及重试方法retry
+   * @default (playerRef) => void
+   */
+  onCtx?: (playerRef) => void;
+  /**
+   * @description.en defaultMute
+   * @description.zh 是否静音
+   * @default true
+   */
+  defaultMute?: boolean;
+  /**
+   * @description.en clarity
+   * @description.zh 清晰度 normal：标清，hd：高清
+   * @default "normal"
+   */
+  clarity?: 'normal' | 'hd';
+  /**
+   * @description.en soundMode
+   * @description.zh 声音输出方式 speaker：扬声器，ear：听筒
+   * @default "speaker"
+   */
+  soundMode?: 'speaker' | 'ear';
+  /**
+   * @description.en orientation
+   * @description.zh 画面方向 vertical：竖直，horizontal：水平
+   * @default "vertical"
+   */
+  orientation?: 'vertical' | 'horizontal';
+  /**
+   * @description.en borderRadius
+   * @description.zh player边框圆角
+   * @default 0
+   */
+  borderRadius?: number | string;
+  /**
+  * @description.en bgColor
+  * @description.zh 背景底色
+  * @default "#000000"
+  */
+  bgColor?: string;
+  /**
+   * @description.en borderStyle
+   * @description.zh 边框样式
+   * @default "solid"
+   */
+  borderStyle?: 'solid' | 'dashed';
+  /**
+   * @description.en borderColor
+   * @description.zh 边框颜色
+   * @default ""
+   */
+  borderColor?: string;
+  /**
+   * @description.en borderWidth
+   * @description.zh 边框宽度
+   * @default ""
+   */
+  borderWidth?: string | number;
+  /**
+   * @description.en privateState
+   * @description.zh 隐私模式
+   * @default false
+   */
+  privateState?: boolean;
+};

package/lib/utils.android.js

@@ -0,0 +1 @@
+Object.defineProperty(exports,"__esModule",{value:true});exports.putDpData=void 0;var putDpData=function(dpIds,deviceId){return new Promise(function(resolve,reject){ty.device.publishDps({deviceId:deviceId,mode:2,pipelines:[],options:{},dps:dpIds,success:function success(res){return resolve(res);},fail:function fail(e){return reject(e);}});});};exports.putDpData=putDpData;

package/lib/utils.d.ts

@@ -0,0 +1 @@
+export declare const putDpData: (dpIds: Record<number, boolean>, deviceId?: string) => Promise<unknown>;

package/lib/utils.ios.js

@@ -0,0 +1 @@
+Object.defineProperty(exports,"__esModule",{value:true});exports.putDpData=void 0;var putDpData=function(dpIds,deviceId){return new Promise(function(resolve,reject){ty.device.publishDps({deviceId:deviceId,mode:2,pipelines:[],options:{},dps:dpIds,success:function success(res){return resolve(res);},fail:function fail(e){return reject(e);}});});};exports.putDpData=putDpData;

package/lib/utils.js

@@ -0,0 +1,19 @@
+import "core-js/modules/es.object.to-string.js";
+import "core-js/modules/es.promise.js";
+export var putDpData = function (dpIds, deviceId) {
+  return new Promise(function (resolve, reject) {
+    ty.device.publishDps({
+      deviceId: deviceId,
+      mode: 2,
+      pipelines: [],
+      options: {},
+      dps: dpIds,
+      success: function success(res) {
+        return resolve(res);
+      },
+      fail: function fail(e) {
+        return reject(e);
+      }
+    });
+  });
+};

package/lib/utils.tuya.js

@@ -0,0 +1,19 @@
+import "core-js/modules/es.object.to-string.js";
+import "core-js/modules/es.promise.js";
+export var putDpData = function (dpIds, deviceId) {
+  return new Promise(function (resolve, reject) {
+    ty.device.publishDps({
+      deviceId: deviceId,
+      mode: 2,
+      pipelines: [],
+      options: {},
+      dps: dpIds,
+      success: function success(res) {
+        return resolve(res);
+      },
+      fail: function fail(e) {
+        return reject(e);
+      }
+    });
+  });
+};