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

package/lib/index.web.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;