yootd 0.0.63 → 0.0.65

package/dist/department/index.d.ts

@@ -1,3 +1,4 @@
 import React from 'react';
+import './index.scss';
 import { DepartmentProps } from './types/types';
 export declare const Department: React.FC<DepartmentProps>;

package/dist/department/index.js

@@ -4,8 +4,11 @@ import { useQuery } from '@tanstack/react-query';
 import React, { useMemo } from 'react';
 import { TreeSelect } from "./..";
 import { useRequest } from "../hooks/useRequest";
+import { useBem } from "../hooks/useBem";
+import "./index.scss";
 export var Department = function Department(_ref) {
   var rest = Object.assign({}, (_objectDestructuringEmpty(_ref), _ref));
+  var mb = useBem('department');
   var request = useRequest();
   // 查询所有部门
   var _useQuery = useQuery({
@@ -43,6 +46,7 @@ export var Department = function Department(_ref) {
     return treeNode === null || treeNode === void 0 || (_treeNode$title = treeNode.title) === null || _treeNode$title === void 0 ? void 0 : _treeNode$title.includes(inputValue);
   };
   return /*#__PURE__*/React.createElement(TreeSelect, _extends({}, rest, {
+    popupClassName: "".concat(mb),
     showSearch: true,
     treeData: deptTreeData,
     filterTreeNode: filterTreeNode

package/dist/department/index.scss

@@ -0,0 +1,6 @@
+.yot-department {
+  .ant-select-tree-treenode {
+    margin-bottom: 0 !important;
+    padding-bottom: calc(var(--ant-padding-xs) / 2) !important;
+  }
+}

package/dist/upload/components/imageUpload.js

@@ -97,71 +97,104 @@ var InternalUpload = function InternalUpload(props, ref) {
         void messageApi.info('请上传5M以内的图片');
         return false;
       }
+      // 校验图片尺寸
+      var reader = new FileReader();
+      reader.readAsDataURL(file);
+      reader.onload = function (e) {
+        var _e$target;
+        var image = new Image();
+        image.src = (_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.result;
+        // 上传图片
+        image.onload = function () {
+          if (widthPixels != null && heightPixels != null) {
+            if (image.width !== widthPixels || image.height !== heightPixels) {
+              void messageApi.warning("\u8BF7\u4E0A\u4F20\u5C3A\u5BF8\u4E3A".concat(widthPixels, "*").concat(heightPixels, "\u7684\u56FE\u7247"));
+              return;
+            }
+          } else if (widthPixels != null && heightPixels == null) {
+            if (image.width !== widthPixels) {
+              void messageApi.warning("\u8BF7\u4E0A\u4F20\u5BBD\u5EA6\u4E3A".concat(widthPixels, "\u7684\u56FE\u7247"));
+              return;
+            }
+          } else if (widthPixels == null && heightPixels != null) {
+            if (image.height !== heightPixels) {
+              void messageApi.warning("\u8BF7\u4E0A\u4F20\u9AD8\u5EA6\u4E3A".concat(heightPixels, "\u7684\u56FE\u7247"));
+              return;
+            }
+          }
+          // 图片尺寸符合要求，上传图片
+          var formData = new FormData();
+          if (folder != null) {
+            formData.append('folder', folder);
+          }
+          formData.append('files', file);
+          formData.append('user_origin_name', 'true');
+          void request({
+            url: "/v1/file/multi-upload1",
+            method: 'post',
+            data: formData,
+            headers: {
+              'Content-Type': 'multipart/form-data'
+            }
+          }).then(function (res) {
+            var _fileList = Array.from([]);
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-expect-error
+            res === null || res === void 0 || res.forEach(function (item) {
+              _fileList.push({
+                name: file.name,
+                url: item.filename,
+                uid: file.uid,
+                preview: item.filename,
+                status: 'done'
+              });
+            });
+            onChange === null || onChange === void 0 || onChange([].concat(_toConsumableArray(fileList), _fileList));
+            // setFileList([...fileList, ..._fileList]);
+          }).catch(function () {
+            var msg = '上传失败！';
+            void messageApi.error(msg);
+          });
+        };
+      };
     } else if (/\.(mp4)$/i.test(file.name)) {
       if ((file === null || file === void 0 ? void 0 : file.size) / 1024 / 1024 > 200) {
         void messageApi.info('请上传200M以内的视频');
         return false;
       }
-    }
-    // 校验图片尺寸
-    var reader = new FileReader();
-    reader.readAsDataURL(file);
-    reader.onload = function (e) {
-      var _e$target;
-      var image = new Image();
-      image.src = (_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.result;
-      image.onload = function () {
-        if (widthPixels != null && heightPixels != null) {
-          if (image.width !== widthPixels || image.height !== heightPixels) {
-            void messageApi.warning("\u8BF7\u4E0A\u4F20\u5C3A\u5BF8\u4E3A".concat(widthPixels, "*").concat(heightPixels, "\u7684\u56FE\u7247"));
-            return;
-          }
-        } else if (widthPixels != null && heightPixels == null) {
-          if (image.width !== widthPixels) {
-            void messageApi.warning("\u8BF7\u4E0A\u4F20\u5BBD\u5EA6\u4E3A".concat(widthPixels, "\u7684\u56FE\u7247"));
-            return;
-          }
-        } else if (widthPixels == null && heightPixels != null) {
-          if (image.height !== heightPixels) {
-            void messageApi.warning("\u8BF7\u4E0A\u4F20\u9AD8\u5EA6\u4E3A".concat(heightPixels, "\u7684\u56FE\u7247"));
-            return;
-          }
-        }
-        // 图片尺寸符合要求，上传图片
-        var formData = new FormData();
-        if (folder != null) {
-          formData.append('folder', folder);
+      var formData = new FormData();
+      if (folder != null) {
+        formData.append('folder', folder);
+      }
+      formData.append('files', file);
+      formData.append('user_origin_name', 'true');
+      void request({
+        url: "/v1/file/multi-upload1",
+        method: 'post',
+        data: formData,
+        headers: {
+          'Content-Type': 'multipart/form-data'
         }
-        formData.append('files', file);
-        formData.append('user_origin_name', 'true');
-        void request({
-          url: "/v1/file/multi-upload1",
-          method: 'post',
-          data: formData,
-          headers: {
-            'Content-Type': 'multipart/form-data'
-          }
-        }).then(function (res) {
-          var _fileList = Array.from([]);
-          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-          // @ts-expect-error
-          res === null || res === void 0 || res.forEach(function (item) {
-            _fileList.push({
-              name: file.name,
-              url: item.filename,
-              uid: file.uid,
-              preview: item.filename,
-              status: 'done'
-            });
+      }).then(function (res) {
+        var _fileList = Array.from([]);
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-expect-error
+        res === null || res === void 0 || res.forEach(function (item) {
+          _fileList.push({
+            name: file.name,
+            url: item.filename,
+            uid: file.uid,
+            preview: item.filename,
+            status: 'done'
           });
-          onChange === null || onChange === void 0 || onChange([].concat(_toConsumableArray(fileList), _fileList));
-          // setFileList([...fileList, ..._fileList]);
-        }).catch(function () {
-          var msg = '上传失败！';
-          void messageApi.error(msg);
         });
-      };
-    };
+        onChange === null || onChange === void 0 || onChange([].concat(_toConsumableArray(fileList), _fileList));
+        // setFileList([...fileList, ..._fileList]);
+      }).catch(function () {
+        var msg = '上传失败！';
+        void messageApi.error(msg);
+      });
+    }
     return false;
   }
   var onRemove = function onRemove(file) {

package/dist/video-player/index.js

@@ -15,11 +15,14 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import * as faceapi from '@vladmandic/face-api';
+import * as posedetection from '@tensorflow-models/pose-detection';
+import * as tf from '@tensorflow/tfjs';
 import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
 import { EndPoint } from 'yootd-webrtc-sdk';
 import { useBem } from "../hooks/useBem";
 import "./index.scss";
 import { throttle } from 'lodash';
+import { message } from "./..";
 import { useOSS } from "../hooks/useOSS";
 import controlBottomBg from "./assets/control-background.png";
 var PROGRESS_BAR_HEIGHT = 63;
@@ -52,89 +55,95 @@ export var VideoPlayer = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var containerRef = useRef(null);
   var videoRef = useRef(null);
   var canvasRef = useRef(null);
+  var poseCanvasRef = useRef(null);
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    poseDetector = _useState2[0],
+    setPoseDetector = _useState2[1];
   var OSS = useOSS();
   var bem = useBem('video-player');
-  var _useState = useState(true),
-    _useState2 = _slicedToArray(_useState, 1),
-    show = _useState2[0];
-  var _useState3 = useState(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    isFullScreen = _useState4[0],
-    setIsFullScreen = _useState4[1];
+  var _useState3 = useState(true),
+    _useState4 = _slicedToArray(_useState3, 1),
+    show = _useState4[0];
   var _useState5 = useState(false),
     _useState6 = _slicedToArray(_useState5, 2),
-    isPlaying = _useState6[0],
-    setIsPlaying = _useState6[1];
-  var _useState7 = useState(0),
+    isFullScreen = _useState6[0],
+    setIsFullScreen = _useState6[1];
+  var _useState7 = useState(false),
     _useState8 = _slicedToArray(_useState7, 2),
-    volume = _useState8[0],
-    setVolume = _useState8[1];
-  var _useState9 = useState(false),
+    isPlaying = _useState8[0],
+    setIsPlaying = _useState8[1];
+  var _useState9 = useState(0),
     _useState10 = _slicedToArray(_useState9, 2),
-    hasAudio = _useState10[0],
-    setHasAudio = _useState10[1];
-  var _useState11 = useState(0),
+    volume = _useState10[0],
+    setVolume = _useState10[1];
+  var _useState11 = useState(false),
     _useState12 = _slicedToArray(_useState11, 2),
-    currentTime = _useState12[0],
-    setCurrentTime = _useState12[1];
-  var _useState13 = useState(Number.MAX_SAFE_INTEGER),
+    hasAudio = _useState12[0],
+    setHasAudio = _useState12[1];
+  var _useState13 = useState(0),
     _useState14 = _slicedToArray(_useState13, 2),
-    duration = _useState14[0],
-    setDuration = _useState14[1];
-  var _useState15 = useState(false),
+    currentTime = _useState14[0],
+    setCurrentTime = _useState14[1];
+  var _useState15 = useState(Number.MAX_SAFE_INTEGER),
     _useState16 = _slicedToArray(_useState15, 2),
-    showSpeedPicker = _useState16[0],
-    setShowSpeedPicker = _useState16[1];
-  var _useState17 = useState('1.0'),
+    duration = _useState16[0],
+    setDuration = _useState16[1];
+  var _useState17 = useState(false),
     _useState18 = _slicedToArray(_useState17, 2),
-    speed = _useState18[0],
-    setSpeed = _useState18[1];
-  var _useState19 = useState(false),
+    showSpeedPicker = _useState18[0],
+    setShowSpeedPicker = _useState18[1];
+  var _useState19 = useState('1.0'),
     _useState20 = _slicedToArray(_useState19, 2),
-    showVolumeSlider = _useState20[0],
-    setShowVolumeSlider = _useState20[1];
+    speed = _useState20[0],
+    setSpeed = _useState20[1];
   var _useState21 = useState(false),
     _useState22 = _slicedToArray(_useState21, 2),
-    mouseDown = _useState22[0],
-    setMouseDown = _useState22[1];
-  var _useState23 = useState(0),
+    showVolumeSlider = _useState22[0],
+    setShowVolumeSlider = _useState22[1];
+  var _useState23 = useState(false),
     _useState24 = _slicedToArray(_useState23, 2),
-    buffered = _useState24[0],
-    setBuffered = _useState24[1];
-  var _useState25 = useState(false),
+    mouseDown = _useState24[0],
+    setMouseDown = _useState24[1];
+  var _useState25 = useState(0),
     _useState26 = _slicedToArray(_useState25, 2),
-    showSettingPanel = _useState26[0],
-    setShowSettingPanel = _useState26[1];
-  var _useState27 = useState({
+    buffered = _useState26[0],
+    setBuffered = _useState26[1];
+  var _useState27 = useState(false),
+    _useState28 = _slicedToArray(_useState27, 2),
+    showSettingPanel = _useState28[0],
+    setShowSettingPanel = _useState28[1];
+  var _useState29 = useState({
       emotion: false,
       character: false,
-      anchor: false
+      anchor: false,
+      pose: false
     }),
-    _useState28 = _slicedToArray(_useState27, 2),
-    faceFeature = _useState28[0],
-    setFaceFeature = _useState28[1];
-  var _useState29 = useState(null),
     _useState30 = _slicedToArray(_useState29, 2),
-    options = _useState30[0],
-    setOptions = _useState30[1];
-  var _useState31 = useState(false),
+    aiFeature = _useState30[0],
+    setAIFeature = _useState30[1];
+  var _useState31 = useState(null),
     _useState32 = _slicedToArray(_useState31, 2),
-    faceApiInited = _useState32[0],
-    setFaceApiInited = _useState32[1];
-  var _useState33 = useState({
-      width: 0,
-      height: 0
-    }),
+    options = _useState32[0],
+    setOptions = _useState32[1];
+  var _useState33 = useState(false),
     _useState34 = _slicedToArray(_useState33, 2),
-    canvasSize = _useState34[0],
-    setCanvasSize = _useState34[1];
+    faceApiInited = _useState34[0],
+    setFaceApiInited = _useState34[1];
   var _useState35 = useState({
       width: 0,
       height: 0
     }),
     _useState36 = _slicedToArray(_useState35, 2),
-    videoEleSize = _useState36[0],
-    setVideoEleSize = _useState36[1];
+    canvasSize = _useState36[0],
+    setCanvasSize = _useState36[1];
+  var _useState37 = useState({
+      width: 0,
+      height: 0
+    }),
+    _useState38 = _slicedToArray(_useState37, 2),
+    videoEleSize = _useState38[0],
+    setVideoEleSize = _useState38[1];
   useImperativeHandle(ref, function () {
     return {
       play: function play() {
@@ -257,7 +266,6 @@ export var VideoPlayer = /*#__PURE__*/forwardRef(function (_ref, ref) {
     }
   };
   var handleHideVolumeSlider = function handleHideVolumeSlider() {
-    console.log('hide');
     setShowVolumeSlider(false);
     setMouseDown(false);
   };
@@ -304,22 +312,22 @@ export var VideoPlayer = /*#__PURE__*/forwardRef(function (_ref, ref) {
           case 0:
             _context.prev = 0;
             _context.next = 3;
-            return faceapi.nets.ssdMobilenetv1.load("".concat(OSS, "/face-api-models/model"));
+            return faceapi.nets.ssdMobilenetv1.load("".concat(OSS, "/model-zoo/face-api-models/model"));
           case 3:
             _context.next = 5;
-            return faceapi.nets.ssdMobilenetv1.load("".concat(OSS, "/face-api-models/model"));
+            return faceapi.nets.ssdMobilenetv1.load("".concat(OSS, "/model-zoo/face-api-models/model"));
           case 5:
             _context.next = 7;
             return faceapi.nets.ageGenderNet.load("".concat(OSS, "/face-api-models/model"));
           case 7:
             _context.next = 9;
-            return faceapi.nets.faceLandmark68Net.load("".concat(OSS, "/face-api-models/model"));
+            return faceapi.nets.faceLandmark68Net.load("".concat(OSS, "/model-zoo/face-api-models/model"));
           case 9:
             _context.next = 11;
-            return faceapi.nets.faceRecognitionNet.load("".concat(OSS, "/face-api-models/model"));
+            return faceapi.nets.faceRecognitionNet.load("".concat(OSS, "/model-zoo/face-api-models/model"));
           case 11:
             _context.next = 13;
-            return faceapi.nets.faceExpressionNet.load("".concat(OSS, "/face-api-models/model"));
+            return faceapi.nets.faceExpressionNet.load("".concat(OSS, "/model-zoo/face-api-models/model"));
           case 13:
             setOptions(new faceapi.SsdMobilenetv1Options({
               minConfidence: MIN_SCORE,
@@ -339,6 +347,38 @@ export var VideoPlayer = /*#__PURE__*/forwardRef(function (_ref, ref) {
       }, _callee, null, [[0, 17]]);
     }))();
   }, []);
+  var initPoseDetecter = useCallback(function () {
+    _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
+      var detectorConfig, _poseDetector;
+      return _regeneratorRuntime().wrap(function _callee2$(_context2) {
+        while (1) switch (_context2.prev = _context2.next) {
+          case 0:
+            _context2.prev = 0;
+            detectorConfig = {
+              modelType: posedetection.movenet.modelType.MULTIPOSE_LIGHTNING,
+              enableTracking: true,
+              trackerType: posedetection.TrackerType.BoundingBox,
+              scoreThreshold: 0.3,
+              modelUrl: "".concat(OSS, "/model-zoo/pose-detection-models/model.json")
+            };
+            _context2.next = 4;
+            return posedetection.createDetector(posedetection.SupportedModels.MoveNet, detectorConfig);
+          case 4:
+            _poseDetector = _context2.sent;
+            setPoseDetector(_poseDetector);
+            _context2.next = 11;
+            break;
+          case 8:
+            _context2.prev = 8;
+            _context2.t0 = _context2["catch"](0);
+            void message.error('初始化姿态检测器失败');
+          case 11:
+          case "end":
+            return _context2.stop();
+        }
+      }, _callee2, null, [[0, 8]]);
+    }))();
+  }, []);
   var drawFaces = useCallback(function (canvas, detections, fps, faceFeature) {
     var ctx = canvas.getContext('2d', {
       willReadFrequently: true
@@ -449,7 +489,7 @@ export var VideoPlayer = /*#__PURE__*/forwardRef(function (_ref, ref) {
       _iterator.f();
     }
   }, []);
-  var detect = useCallback(function () {
+  var detectFaces = useCallback(function () {
     return new Promise(function (resolve, reject) {
       if (videoRef.current != null && options != null && faceApiInited) {
         var t0 = performance.now();
@@ -459,7 +499,7 @@ export var VideoPlayer = /*#__PURE__*/forwardRef(function (_ref, ref) {
         .then(function (detections) {
           if (canvasRef.current != null) {
             var fps = 1000 / (performance.now() - t0);
-            drawFaces(canvasRef.current, detections, fps.toLocaleString(), faceFeature);
+            drawFaces(canvasRef.current, detections, fps.toLocaleString(), aiFeature);
             resolve(true);
           } else {
             reject(false);
@@ -469,7 +509,93 @@ export var VideoPlayer = /*#__PURE__*/forwardRef(function (_ref, ref) {
         });
       }
     });
-  }, [drawFaces, faceApiInited, faceFeature, options]);
+
+    // 肢体检测
+  }, [drawFaces, faceApiInited, aiFeature, options]);
+  var drawKeyPoints = function drawKeyPoints(keypoints, ctx) {
+    keypoints.forEach(function (keypoint) {
+      if (keypoint.score && keypoint.score > 0.3) {
+        ctx.beginPath();
+        ctx.arc(keypoint.x, keypoint.y, 5, 0, 2 * Math.PI);
+        ctx.fillStyle = 'red';
+        ctx.fill();
+
+        // 添加关键点标签，帮助调试
+        ctx.fillStyle = 'white';
+        ctx.fillText("".concat(Math.round(keypoint.score * 100), "%"), keypoint.x + 5, keypoint.y - 5);
+      }
+    });
+  };
+
+  // 绘制骨架
+  var drawSkeleton = function drawSkeleton(keypoints, ctx) {
+    var adjacentPairs = posedetection.util.getAdjacentPairs(posedetection.SupportedModels.MoveNet);
+    adjacentPairs.forEach(function (_ref4) {
+      var _ref5 = _slicedToArray(_ref4, 2),
+        i = _ref5[0],
+        j = _ref5[1];
+      var kp1 = keypoints[i];
+      var kp2 = keypoints[j];
+      if (kp1.score && kp2.score && kp1.score > 0.3 && kp2.score > 0.3) {
+        ctx.beginPath();
+        ctx.moveTo(kp1.x, kp1.y);
+        ctx.lineTo(kp2.x, kp2.y);
+        ctx.strokeStyle = 'blue';
+        ctx.lineWidth = 2;
+        ctx.stroke();
+      }
+    });
+  };
+  var drawPose = useCallback(function (canvas, pose) {
+    var ctx = canvas.getContext('2d');
+    if (ctx == null) {
+      return;
+    }
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    pose.forEach(function (p) {
+      drawKeyPoints(p.keypoints, ctx);
+      drawSkeleton(p.keypoints, ctx);
+    });
+  }, []);
+  var detectPose = useCallback(function () {
+    if (poseDetector == null || videoRef.current == null || poseCanvasRef.current == null) {
+      return;
+    }
+    var video = videoRef.current;
+    var canvas = poseCanvasRef.current;
+    var detect = /*#__PURE__*/function () {
+      var _ref6 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3() {
+        var pose;
+        return _regeneratorRuntime().wrap(function _callee3$(_context3) {
+          while (1) switch (_context3.prev = _context3.next) {
+            case 0:
+              _context3.prev = 0;
+              _context3.next = 3;
+              return poseDetector.estimatePoses(video, {
+                flipHorizontal: false,
+                maxPoses: 1
+              });
+            case 3:
+              pose = _context3.sent;
+              drawPose(canvas, pose);
+              _context3.next = 10;
+              break;
+            case 7:
+              _context3.prev = 7;
+              _context3.t0 = _context3["catch"](0);
+              console.error('检测肢体失败', _context3.t0);
+            case 10:
+            case "end":
+              return _context3.stop();
+          }
+        }, _callee3, null, [[0, 7]]);
+      }));
+      return function detect() {
+        return _ref6.apply(this, arguments);
+      };
+    }();
+    detect();
+  }, [poseDetector]);
   var handleCapture = function handleCapture() {
     if (videoRef.current != null) {
       var _canvas$getContext;
@@ -528,11 +654,33 @@ export var VideoPlayer = /*#__PURE__*/forwardRef(function (_ref, ref) {
     };
   }, []);
   useEffect(function () {
-    if ((faceFeature.emotion || faceFeature.character || faceFeature.anchor) && !faceApiInited) {
-      // 开始初始化人脸
-      initFaceApi();
-    }
-  }, [faceFeature, faceApiInited, initFaceApi]);
+    _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee4() {
+      return _regeneratorRuntime().wrap(function _callee4$(_context4) {
+        while (1) switch (_context4.prev = _context4.next) {
+          case 0:
+            _context4.prev = 0;
+            _context4.next = 3;
+            return tf.ready();
+          case 3:
+            if ((aiFeature.emotion || aiFeature.character || aiFeature.anchor) && !faceApiInited) {
+              // 开始初始化人脸
+              initFaceApi();
+            }
+            if (aiFeature.pose && !poseDetector) {
+              initPoseDetecter();
+            }
+            _context4.next = 9;
+            break;
+          case 7:
+            _context4.prev = 7;
+            _context4.t0 = _context4["catch"](0);
+          case 9:
+          case "end":
+            return _context4.stop();
+        }
+      }, _callee4, null, [[0, 7]]);
+    }))();
+  }, [aiFeature, faceApiInited, initFaceApi, initPoseDetecter, poseDetector]);
   useEffect(function () {
     var handler = null;
     // let lastTime = Date.now();
@@ -558,23 +706,31 @@ export var VideoPlayer = /*#__PURE__*/forwardRef(function (_ref, ref) {
     }
     }; */
 
-    var start = function start() {
-      if (!faceFeature.anchor && !faceFeature.emotion && !faceFeature.character) {
+    var lastTime = 0;
+    var fps = 30;
+    var start = function start(currentTime) {
+      if (currentTime - lastTime < 1000 / fps) {
+        handler = requestAnimationFrame(start);
         return;
       }
-      detect().catch(function (e) {
-        console.log('error', e);
-      }).finally(function () {
-        handler = requestAnimationFrame(start);
-      });
+      lastTime = currentTime;
+      if (aiFeature.anchor || aiFeature.emotion || aiFeature.character) {
+        detectFaces().catch(function (e) {
+          console.log('error', e);
+        }).finally(function () {});
+      }
+      if (aiFeature.pose) {
+        detectPose();
+      }
+      handler = requestAnimationFrame(start);
     };
-    start();
+    start(0);
     return function () {
       if (handler != null) {
         cancelAnimationFrame(handler);
       }
     };
-  }, [detect, faceFeature.anchor, faceFeature.character, faceFeature.emotion]);
+  }, [detectFaces, detectPose, aiFeature.anchor, aiFeature.character, aiFeature.emotion, aiFeature.pose]);
   useEffect(function () {
     var handleClick = function handleClick() {
       setShowSettingPanel(false);
@@ -801,9 +957,9 @@ export var VideoPlayer = /*#__PURE__*/forwardRef(function (_ref, ref) {
     },
     type: 'checkbox',
     className: "".concat(bem.b('container').e('controls-setting').e('panel').e('item').e('checkbox')),
-    checked: faceFeature.emotion,
+    checked: aiFeature.emotion,
     onChange: function onChange(e) {
-      setFaceFeature(function (prev) {
+      setAIFeature(function (prev) {
         return _objectSpread(_objectSpread({}, prev), {}, {
           emotion: e.target.checked
         });
@@ -817,9 +973,9 @@ export var VideoPlayer = /*#__PURE__*/forwardRef(function (_ref, ref) {
     },
     type: 'checkbox',
     className: "".concat(bem.b('container').e('controls-setting').e('panel').e('item').e('checkbox')),
-    checked: faceFeature.character,
+    checked: aiFeature.character,
     onChange: function onChange(e) {
-      setFaceFeature(function (prev) {
+      setAIFeature(function (prev) {
         return _objectSpread(_objectSpread({}, prev), {}, {
           character: e.target.checked
         });
@@ -833,14 +989,30 @@ export var VideoPlayer = /*#__PURE__*/forwardRef(function (_ref, ref) {
     },
     type: 'checkbox',
     className: "".concat(bem.b('container').e('controls-setting').e('panel').e('item').e('checkbox')),
-    checked: faceFeature.anchor,
+    checked: aiFeature.anchor,
     onChange: function onChange(e) {
-      setFaceFeature(function (prev) {
+      setAIFeature(function (prev) {
         return _objectSpread(_objectSpread({}, prev), {}, {
           anchor: e.target.checked
         });
       });
     }
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(bem.b('container').e('controls-setting').e('panel').e('item'))
+  }, /*#__PURE__*/React.createElement("div", null, "\u80A2\u4F53\u7EBF\u6761"), /*#__PURE__*/React.createElement("input", {
+    onClick: function onClick(e) {
+      return e.stopPropagation();
+    },
+    type: 'checkbox',
+    className: "".concat(bem.b('container').e('controls-setting').e('panel').e('item').e('checkbox')),
+    checked: aiFeature.pose,
+    onChange: function onChange(e) {
+      setAIFeature(function (prev) {
+        return _objectSpread(_objectSpread({}, prev), {}, {
+          pose: e.target.checked
+        });
+      });
+    }
   }))) : null), !isFullScreen ? /*#__PURE__*/React.createElement("svg", {
     className: "".concat(bem.b('container').e('controls-full-screen')),
     onClick: handleFullScreen,
@@ -877,7 +1049,7 @@ export var VideoPlayer = /*#__PURE__*/forwardRef(function (_ref, ref) {
     style: {
       width: "".concat(currentTime / duration * 100, "%")
     }
-  }))), faceFeature.anchor || faceFeature.emotion || faceFeature.character ? /*#__PURE__*/React.createElement("canvas", {
+  }))), aiFeature.anchor || aiFeature.emotion || aiFeature.character ? /*#__PURE__*/React.createElement("canvas", {
     className: "".concat(bem.b('container').e('canvas')),
     width: videoEleSize.width,
     height: videoEleSize.height,
@@ -885,6 +1057,14 @@ export var VideoPlayer = /*#__PURE__*/forwardRef(function (_ref, ref) {
     style: {
       transform: "scale(".concat(canvasSize.width / videoEleSize.width, ")")
     }
+  }) : null, aiFeature.pose ? /*#__PURE__*/React.createElement("canvas", {
+    className: "".concat(bem.b('container').e('canvas')),
+    width: videoEleSize.width,
+    height: videoEleSize.height,
+    ref: poseCanvasRef,
+    style: {
+      transform: "scale(".concat(canvasSize.width / videoEleSize.width, ")")
+    }
   }) : null));
 });
 VideoPlayer.displayName = 'VideoPlayer';

package/dist/video-player/index.scss

@@ -237,7 +237,7 @@
         width: 96px;
         left: 50%;
         margin-left: -48px;
-        margin-bottom: 24px;
+        margin-bottom: 40px;
         bottom: 0;
         position: absolute;
         font-size: 12px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "yootd",
-  "version": "0.0.63",
+  "version": "0.0.65",
   "description": "A react library developed with dumi",
   "license": "MIT",
   "module": "dist/index.js",
@@ -44,6 +44,10 @@
       "prettier --parser=typescript --write"
     ]
   },
+  "dependencies": {
+    "@tensorflow-models/pose-detection": "^2.1.3",
+    "@tensorflow/tfjs": "^4.22.0"
+  },
   "devDependencies": {
     "@commitlint/cli": "^17.1.2",
     "@commitlint/config-conventional": "^17.1.0",