@xmaxai/web-sdk 1.0.4 → 1.0.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +248 -21
- package/dist/{VideoContentMode-BM97_H8V.d.cts → VideoRenderStatistics-C7zqzfuS.d.cts} +23 -1
- package/dist/{VideoContentMode-BM97_H8V.d.ts → VideoRenderStatistics-C7zqzfuS.d.ts} +23 -1
- package/dist/{chunk-FEL5MJMJ.cjs → chunk-NWNRFTLE.cjs} +2627 -505
- package/dist/chunk-NWNRFTLE.cjs.map +1 -0
- package/dist/{chunk-FMAQXPTE.js → chunk-PLFWPS5A.js} +2439 -317
- package/dist/chunk-PLFWPS5A.js.map +1 -0
- package/dist/index.cjs +14 -2
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +387 -96
- package/dist/index.d.ts +387 -96
- package/dist/index.js +15 -3
- package/dist/react/index.cjs +6 -3
- package/dist/react/index.cjs.map +1 -1
- package/dist/react/index.d.cts +5 -1
- package/dist/react/index.d.ts +5 -1
- package/dist/react/index.js +4 -1
- package/dist/react/index.js.map +1 -1
- package/package.json +1 -1
- package/dist/chunk-FEL5MJMJ.cjs.map +0 -1
- package/dist/chunk-FMAQXPTE.js.map +0 -1
package/dist/index.js
CHANGED
|
@@ -1,6 +1,9 @@
|
|
|
1
1
|
import {
|
|
2
2
|
CameraPosition,
|
|
3
3
|
MediaService,
|
|
4
|
+
NonRealtimeQuality,
|
|
5
|
+
NonRealtimeTaskError,
|
|
6
|
+
NonRealtimeTaskStatus,
|
|
4
7
|
RealtimeConfiguration,
|
|
5
8
|
RealtimeConnectionState,
|
|
6
9
|
RealtimeContext,
|
|
@@ -10,6 +13,7 @@ import {
|
|
|
10
13
|
RealtimeState,
|
|
11
14
|
RealtimeVideoEncoderPreference,
|
|
12
15
|
RealtimeVideoFormat,
|
|
16
|
+
RealtimeVideoSampleMethod,
|
|
13
17
|
RealtimeVideoTrack,
|
|
14
18
|
RtcProvider,
|
|
15
19
|
StorageService,
|
|
@@ -26,11 +30,16 @@ import {
|
|
|
26
30
|
XmaxVideoView,
|
|
27
31
|
apiBaseURL,
|
|
28
32
|
defaultCameraVideoFormat,
|
|
29
|
-
defaultFrameRate
|
|
30
|
-
|
|
33
|
+
defaultFrameRate,
|
|
34
|
+
modelDisplayName,
|
|
35
|
+
supportedRtcProviders
|
|
36
|
+
} from "./chunk-PLFWPS5A.js";
|
|
31
37
|
export {
|
|
32
38
|
CameraPosition,
|
|
33
39
|
MediaService,
|
|
40
|
+
NonRealtimeQuality,
|
|
41
|
+
NonRealtimeTaskError,
|
|
42
|
+
NonRealtimeTaskStatus,
|
|
34
43
|
RealtimeConfiguration,
|
|
35
44
|
RealtimeConnectionState,
|
|
36
45
|
RealtimeContext,
|
|
@@ -40,6 +49,7 @@ export {
|
|
|
40
49
|
RealtimeState,
|
|
41
50
|
RealtimeVideoEncoderPreference,
|
|
42
51
|
RealtimeVideoFormat,
|
|
52
|
+
RealtimeVideoSampleMethod,
|
|
43
53
|
RealtimeVideoTrack,
|
|
44
54
|
RtcProvider,
|
|
45
55
|
StorageService,
|
|
@@ -56,6 +66,8 @@ export {
|
|
|
56
66
|
XmaxVideoView,
|
|
57
67
|
apiBaseURL,
|
|
58
68
|
defaultCameraVideoFormat,
|
|
59
|
-
defaultFrameRate
|
|
69
|
+
defaultFrameRate,
|
|
70
|
+
modelDisplayName,
|
|
71
|
+
supportedRtcProviders
|
|
60
72
|
};
|
|
61
73
|
//# sourceMappingURL=index.js.map
|
package/dist/react/index.cjs
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use strict";Object.defineProperty(exports, "__esModule", {value: true});
|
|
2
2
|
|
|
3
3
|
|
|
4
|
-
var
|
|
4
|
+
var _chunkNWNRFTLEcjs = require('../chunk-NWNRFTLE.cjs');
|
|
5
5
|
|
|
6
6
|
// src/react/XmaxRealtimeVideo.tsx
|
|
7
7
|
|
|
@@ -17,7 +17,7 @@ function XmaxRealtimeVideo(props) {
|
|
|
17
17
|
if (!container) {
|
|
18
18
|
return;
|
|
19
19
|
}
|
|
20
|
-
const view = new (0,
|
|
20
|
+
const view = new (0, _chunkNWNRFTLEcjs.XmaxRealtimeVideoView)();
|
|
21
21
|
view.element.style.width = "100%";
|
|
22
22
|
view.element.style.height = "100%";
|
|
23
23
|
view.attach(container);
|
|
@@ -71,7 +71,7 @@ function XmaxVideo(props) {
|
|
|
71
71
|
if (!container) {
|
|
72
72
|
return;
|
|
73
73
|
}
|
|
74
|
-
const view = new (0,
|
|
74
|
+
const view = new (0, _chunkNWNRFTLEcjs.XmaxVideoView)();
|
|
75
75
|
view.element.style.width = "100%";
|
|
76
76
|
view.element.style.height = "100%";
|
|
77
77
|
view.attach(container);
|
|
@@ -82,6 +82,9 @@ function XmaxVideo(props) {
|
|
|
82
82
|
view.detach();
|
|
83
83
|
};
|
|
84
84
|
}, []);
|
|
85
|
+
_react.useEffect.call(void 0, () => {
|
|
86
|
+
if (viewRef.current) viewRef.current.renderStatisticsHandler = props.onRenderStatistics;
|
|
87
|
+
}, [props.onRenderStatistics]);
|
|
85
88
|
_react.useEffect.call(void 0, () => {
|
|
86
89
|
const view = viewRef.current;
|
|
87
90
|
if (view) {
|
package/dist/react/index.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["/private/var/folders/5j/p3g3j18x2w3byrl5wtnk94tc0000gn/T/xmax-web-release-
|
|
1
|
+
{"version":3,"sources":["/private/var/folders/5j/p3g3j18x2w3byrl5wtnk94tc0000gn/T/xmax-web-release-cumAKF/source/packages/xmax-sdk/dist/react/index.cjs","../../src/react/XmaxRealtimeVideo.tsx","../../src/react/XmaxVideo.tsx"],"names":["useRef","useEffect","jsx"],"mappings":"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","file":"/private/var/folders/5j/p3g3j18x2w3byrl5wtnk94tc0000gn/T/xmax-web-release-cumAKF/source/packages/xmax-sdk/dist/react/index.cjs","sourcesContent":[null,"import {\n VideoContentMode,\n XmaxRealtimeVideoView,\n type RealtimeVideoTrack,\n} from \"../index\";\nimport {\n useEffect,\n useRef,\n type CSSProperties,\n} from \"react\";\n\nexport interface XmaxRealtimeVideoProps {\n /**\n * 当前显示的本地视频轨道。\n */\n localTrack?: RealtimeVideoTrack;\n\n /**\n * 当前显示的远端生成视频轨道；首帧提交后自动渐入。\n */\n remoteTrack?: RealtimeVideoTrack;\n\n /**\n * 视频内容在容器中的显示模式，默认 fill。\n */\n videoContentMode?: VideoContentMode;\n\n /**\n * 容器类名。\n */\n className?: string;\n\n /**\n * 容器样式。\n */\n style?: CSSProperties;\n}\n\n/**\n * 本地预览和远端生成画面自动切换的 React 组件。\n */\nexport function XmaxRealtimeVideo(props: XmaxRealtimeVideoProps) {\n const containerRef = useRef<HTMLDivElement>(null);\n const viewRef = useRef<XmaxRealtimeVideoView | undefined>(undefined);\n\n useEffect(() => {\n const container = containerRef.current;\n if (!container) {\n return;\n }\n\n const view = new XmaxRealtimeVideoView();\n view.element.style.width = \"100%\";\n view.element.style.height = \"100%\";\n view.attach(container);\n viewRef.current = view;\n return () => {\n viewRef.current = undefined;\n view.localTrack = undefined;\n view.remoteTrack = undefined;\n view.detach();\n };\n }, []);\n\n useEffect(() => {\n const view = viewRef.current;\n if (view) {\n view.localTrack = props.localTrack;\n }\n }, [props.localTrack]);\n\n useEffect(() => {\n const view = viewRef.current;\n if (view) {\n view.remoteTrack = props.remoteTrack;\n }\n }, [props.remoteTrack]);\n\n useEffect(() => {\n const view = viewRef.current;\n if (view && props.videoContentMode) {\n view.videoContentMode = props.videoContentMode;\n }\n }, [props.videoContentMode]);\n\n return (\n <div\n ref={containerRef}\n className={props.className}\n style={{ position: \"relative\", overflow: \"hidden\", ...props.style }}\n />\n );\n}\n","import {\n VideoContentMode,\n XmaxVideoView,\n type RealtimeVideoTrack,\n type VideoRenderStatistics,\n} from \"../index\";\nimport {\n useEffect,\n useRef,\n type CSSProperties,\n} from \"react\";\n\nexport interface XmaxVideoProps {\n /**\n * 当前显示的视频轨道；置空时清空画面。\n */\n track?: RealtimeVideoTrack;\n\n /**\n * 视频内容在容器中的显示模式，默认 fill。\n */\n videoContentMode?: VideoContentMode;\n\n /**\n * 是否镜像显示（仅影响显示，不影响发布流）。\n */\n mirrored?: boolean;\n\n /**\n * 当前视图的呈现帧率统计；换流或卸载时清空，不受统计面板显示开关影响。\n */\n onRenderStatistics?: (statistics?: VideoRenderStatistics) => void;\n\n /**\n * 容器类名。\n */\n className?: string;\n\n /**\n * 容器样式。\n */\n style?: CSSProperties;\n}\n\n/**\n * 单轨视频 React 组件：把一路视频轨渲染到容器。\n */\nexport function XmaxVideo(props: XmaxVideoProps) {\n const containerRef = useRef<HTMLDivElement>(null);\n const viewRef = useRef<XmaxVideoView | undefined>(undefined);\n\n useEffect(() => {\n const container = containerRef.current;\n if (!container) {\n return;\n }\n\n const view = new XmaxVideoView();\n view.element.style.width = \"100%\";\n view.element.style.height = \"100%\";\n view.attach(container);\n viewRef.current = view;\n return () => {\n viewRef.current = undefined;\n view.track = undefined;\n view.detach();\n };\n }, []);\n\n useEffect(() => {\n if (viewRef.current) viewRef.current.renderStatisticsHandler = props.onRenderStatistics;\n }, [props.onRenderStatistics]);\n\n useEffect(() => {\n const view = viewRef.current;\n if (view) {\n view.track = props.track;\n }\n }, [props.track]);\n\n useEffect(() => {\n const view = viewRef.current;\n if (view && props.videoContentMode) {\n view.videoContentMode = props.videoContentMode;\n }\n }, [props.videoContentMode]);\n\n useEffect(() => {\n const view = viewRef.current;\n if (view && props.mirrored !== undefined) {\n view.isMirrored = props.mirrored;\n }\n }, [props.mirrored]);\n\n return (\n <div\n ref={containerRef}\n className={props.className}\n style={{ position: \"relative\", overflow: \"hidden\", ...props.style }}\n />\n );\n}\n"]}
|
package/dist/react/index.d.cts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
2
|
import { CSSProperties } from 'react';
|
|
3
|
-
import { a as RealtimeVideoTrack, V as VideoContentMode } from '../
|
|
3
|
+
import { a as RealtimeVideoTrack, V as VideoContentMode, b as VideoRenderStatistics } from '../VideoRenderStatistics-C7zqzfuS.cjs';
|
|
4
4
|
|
|
5
5
|
interface XmaxRealtimeVideoProps {
|
|
6
6
|
/**
|
|
@@ -42,6 +42,10 @@ interface XmaxVideoProps {
|
|
|
42
42
|
* 是否镜像显示（仅影响显示，不影响发布流）。
|
|
43
43
|
*/
|
|
44
44
|
mirrored?: boolean;
|
|
45
|
+
/**
|
|
46
|
+
* 当前视图的呈现帧率统计；换流或卸载时清空，不受统计面板显示开关影响。
|
|
47
|
+
*/
|
|
48
|
+
onRenderStatistics?: (statistics?: VideoRenderStatistics) => void;
|
|
45
49
|
/**
|
|
46
50
|
* 容器类名。
|
|
47
51
|
*/
|
package/dist/react/index.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
2
|
import { CSSProperties } from 'react';
|
|
3
|
-
import { a as RealtimeVideoTrack, V as VideoContentMode } from '../
|
|
3
|
+
import { a as RealtimeVideoTrack, V as VideoContentMode, b as VideoRenderStatistics } from '../VideoRenderStatistics-C7zqzfuS.js';
|
|
4
4
|
|
|
5
5
|
interface XmaxRealtimeVideoProps {
|
|
6
6
|
/**
|
|
@@ -42,6 +42,10 @@ interface XmaxVideoProps {
|
|
|
42
42
|
* 是否镜像显示（仅影响显示，不影响发布流）。
|
|
43
43
|
*/
|
|
44
44
|
mirrored?: boolean;
|
|
45
|
+
/**
|
|
46
|
+
* 当前视图的呈现帧率统计；换流或卸载时清空，不受统计面板显示开关影响。
|
|
47
|
+
*/
|
|
48
|
+
onRenderStatistics?: (statistics?: VideoRenderStatistics) => void;
|
|
45
49
|
/**
|
|
46
50
|
* 容器类名。
|
|
47
51
|
*/
|
package/dist/react/index.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import {
|
|
2
2
|
XmaxRealtimeVideoView,
|
|
3
3
|
XmaxVideoView
|
|
4
|
-
} from "../chunk-
|
|
4
|
+
} from "../chunk-PLFWPS5A.js";
|
|
5
5
|
|
|
6
6
|
// src/react/XmaxRealtimeVideo.tsx
|
|
7
7
|
import {
|
|
@@ -82,6 +82,9 @@ function XmaxVideo(props) {
|
|
|
82
82
|
view.detach();
|
|
83
83
|
};
|
|
84
84
|
}, []);
|
|
85
|
+
useEffect2(() => {
|
|
86
|
+
if (viewRef.current) viewRef.current.renderStatisticsHandler = props.onRenderStatistics;
|
|
87
|
+
}, [props.onRenderStatistics]);
|
|
85
88
|
useEffect2(() => {
|
|
86
89
|
const view = viewRef.current;
|
|
87
90
|
if (view) {
|
package/dist/react/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/react/XmaxRealtimeVideo.tsx","../../src/react/XmaxVideo.tsx"],"sourcesContent":["import {\n VideoContentMode,\n XmaxRealtimeVideoView,\n type RealtimeVideoTrack,\n} from \"../index\";\nimport {\n useEffect,\n useRef,\n type CSSProperties,\n} from \"react\";\n\nexport interface XmaxRealtimeVideoProps {\n /**\n * 当前显示的本地视频轨道。\n */\n localTrack?: RealtimeVideoTrack;\n\n /**\n * 当前显示的远端生成视频轨道；首帧提交后自动渐入。\n */\n remoteTrack?: RealtimeVideoTrack;\n\n /**\n * 视频内容在容器中的显示模式，默认 fill。\n */\n videoContentMode?: VideoContentMode;\n\n /**\n * 容器类名。\n */\n className?: string;\n\n /**\n * 容器样式。\n */\n style?: CSSProperties;\n}\n\n/**\n * 本地预览和远端生成画面自动切换的 React 组件。\n */\nexport function XmaxRealtimeVideo(props: XmaxRealtimeVideoProps) {\n const containerRef = useRef<HTMLDivElement>(null);\n const viewRef = useRef<XmaxRealtimeVideoView | undefined>(undefined);\n\n useEffect(() => {\n const container = containerRef.current;\n if (!container) {\n return;\n }\n\n const view = new XmaxRealtimeVideoView();\n view.element.style.width = \"100%\";\n view.element.style.height = \"100%\";\n view.attach(container);\n viewRef.current = view;\n return () => {\n viewRef.current = undefined;\n view.localTrack = undefined;\n view.remoteTrack = undefined;\n view.detach();\n };\n }, []);\n\n useEffect(() => {\n const view = viewRef.current;\n if (view) {\n view.localTrack = props.localTrack;\n }\n }, [props.localTrack]);\n\n useEffect(() => {\n const view = viewRef.current;\n if (view) {\n view.remoteTrack = props.remoteTrack;\n }\n }, [props.remoteTrack]);\n\n useEffect(() => {\n const view = viewRef.current;\n if (view && props.videoContentMode) {\n view.videoContentMode = props.videoContentMode;\n }\n }, [props.videoContentMode]);\n\n return (\n <div\n ref={containerRef}\n className={props.className}\n style={{ position: \"relative\", overflow: \"hidden\", ...props.style }}\n />\n );\n}\n","import {\n VideoContentMode,\n XmaxVideoView,\n type RealtimeVideoTrack,\n} from \"../index\";\nimport {\n useEffect,\n useRef,\n type CSSProperties,\n} from \"react\";\n\nexport interface XmaxVideoProps {\n /**\n * 当前显示的视频轨道；置空时清空画面。\n */\n track?: RealtimeVideoTrack;\n\n /**\n * 视频内容在容器中的显示模式，默认 fill。\n */\n videoContentMode?: VideoContentMode;\n\n /**\n * 是否镜像显示（仅影响显示，不影响发布流）。\n */\n mirrored?: boolean;\n\n /**\n * 容器类名。\n */\n className?: string;\n\n /**\n * 容器样式。\n */\n style?: CSSProperties;\n}\n\n/**\n * 单轨视频 React 组件：把一路视频轨渲染到容器。\n */\nexport function XmaxVideo(props: XmaxVideoProps) {\n const containerRef = useRef<HTMLDivElement>(null);\n const viewRef = useRef<XmaxVideoView | undefined>(undefined);\n\n useEffect(() => {\n const container = containerRef.current;\n if (!container) {\n return;\n }\n\n const view = new XmaxVideoView();\n view.element.style.width = \"100%\";\n view.element.style.height = \"100%\";\n view.attach(container);\n viewRef.current = view;\n return () => {\n viewRef.current = undefined;\n view.track = undefined;\n view.detach();\n };\n }, []);\n\n useEffect(() => {\n const view = viewRef.current;\n if (view) {\n view.track = props.track;\n }\n }, [props.track]);\n\n useEffect(() => {\n const view = viewRef.current;\n if (view && props.videoContentMode) {\n view.videoContentMode = props.videoContentMode;\n }\n }, [props.videoContentMode]);\n\n useEffect(() => {\n const view = viewRef.current;\n if (view && props.mirrored !== undefined) {\n view.isMirrored = props.mirrored;\n }\n }, [props.mirrored]);\n\n return (\n <div\n ref={containerRef}\n className={props.className}\n style={{ position: \"relative\", overflow: \"hidden\", ...props.style }}\n />\n );\n}\n"],"mappings":";;;;;;AAKA;AAAA,EACE;AAAA,EACA;AAAA,OAEK;AA6EH;AA7CG,SAAS,kBAAkB,OAA+B;AAC/D,QAAM,eAAe,OAAuB,IAAI;AAChD,QAAM,UAAU,OAA0C,MAAS;AAEnE,YAAU,MAAM;AACd,UAAM,YAAY,aAAa;AAC/B,QAAI,CAAC,WAAW;AACd;AAAA,IACF;AAEA,UAAM,OAAO,IAAI,sBAAsB;AACvC,SAAK,QAAQ,MAAM,QAAQ;AAC3B,SAAK,QAAQ,MAAM,SAAS;AAC5B,SAAK,OAAO,SAAS;AACrB,YAAQ,UAAU;AAClB,WAAO,MAAM;AACX,cAAQ,UAAU;AAClB,WAAK,aAAa;AAClB,WAAK,cAAc;AACnB,WAAK,OAAO;AAAA,IACd;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,YAAU,MAAM;AACd,UAAM,OAAO,QAAQ;AACrB,QAAI,MAAM;AACR,WAAK,aAAa,MAAM;AAAA,IAC1B;AAAA,EACF,GAAG,CAAC,MAAM,UAAU,CAAC;AAErB,YAAU,MAAM;AACd,UAAM,OAAO,QAAQ;AACrB,QAAI,MAAM;AACR,WAAK,cAAc,MAAM;AAAA,IAC3B;AAAA,EACF,GAAG,CAAC,MAAM,WAAW,CAAC;AAEtB,YAAU,MAAM;AACd,UAAM,OAAO,QAAQ;AACrB,QAAI,QAAQ,MAAM,kBAAkB;AAClC,WAAK,mBAAmB,MAAM;AAAA,IAChC;AAAA,EACF,GAAG,CAAC,MAAM,gBAAgB,CAAC;AAE3B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,WAAW,MAAM;AAAA,MACjB,OAAO,EAAE,UAAU,YAAY,UAAU,UAAU,GAAG,MAAM,MAAM;AAAA;AAAA,EACpE;AAEJ;;;
|
|
1
|
+
{"version":3,"sources":["../../src/react/XmaxRealtimeVideo.tsx","../../src/react/XmaxVideo.tsx"],"sourcesContent":["import {\n VideoContentMode,\n XmaxRealtimeVideoView,\n type RealtimeVideoTrack,\n} from \"../index\";\nimport {\n useEffect,\n useRef,\n type CSSProperties,\n} from \"react\";\n\nexport interface XmaxRealtimeVideoProps {\n /**\n * 当前显示的本地视频轨道。\n */\n localTrack?: RealtimeVideoTrack;\n\n /**\n * 当前显示的远端生成视频轨道；首帧提交后自动渐入。\n */\n remoteTrack?: RealtimeVideoTrack;\n\n /**\n * 视频内容在容器中的显示模式，默认 fill。\n */\n videoContentMode?: VideoContentMode;\n\n /**\n * 容器类名。\n */\n className?: string;\n\n /**\n * 容器样式。\n */\n style?: CSSProperties;\n}\n\n/**\n * 本地预览和远端生成画面自动切换的 React 组件。\n */\nexport function XmaxRealtimeVideo(props: XmaxRealtimeVideoProps) {\n const containerRef = useRef<HTMLDivElement>(null);\n const viewRef = useRef<XmaxRealtimeVideoView | undefined>(undefined);\n\n useEffect(() => {\n const container = containerRef.current;\n if (!container) {\n return;\n }\n\n const view = new XmaxRealtimeVideoView();\n view.element.style.width = \"100%\";\n view.element.style.height = \"100%\";\n view.attach(container);\n viewRef.current = view;\n return () => {\n viewRef.current = undefined;\n view.localTrack = undefined;\n view.remoteTrack = undefined;\n view.detach();\n };\n }, []);\n\n useEffect(() => {\n const view = viewRef.current;\n if (view) {\n view.localTrack = props.localTrack;\n }\n }, [props.localTrack]);\n\n useEffect(() => {\n const view = viewRef.current;\n if (view) {\n view.remoteTrack = props.remoteTrack;\n }\n }, [props.remoteTrack]);\n\n useEffect(() => {\n const view = viewRef.current;\n if (view && props.videoContentMode) {\n view.videoContentMode = props.videoContentMode;\n }\n }, [props.videoContentMode]);\n\n return (\n <div\n ref={containerRef}\n className={props.className}\n style={{ position: \"relative\", overflow: \"hidden\", ...props.style }}\n />\n );\n}\n","import {\n VideoContentMode,\n XmaxVideoView,\n type RealtimeVideoTrack,\n type VideoRenderStatistics,\n} from \"../index\";\nimport {\n useEffect,\n useRef,\n type CSSProperties,\n} from \"react\";\n\nexport interface XmaxVideoProps {\n /**\n * 当前显示的视频轨道；置空时清空画面。\n */\n track?: RealtimeVideoTrack;\n\n /**\n * 视频内容在容器中的显示模式，默认 fill。\n */\n videoContentMode?: VideoContentMode;\n\n /**\n * 是否镜像显示（仅影响显示，不影响发布流）。\n */\n mirrored?: boolean;\n\n /**\n * 当前视图的呈现帧率统计；换流或卸载时清空，不受统计面板显示开关影响。\n */\n onRenderStatistics?: (statistics?: VideoRenderStatistics) => void;\n\n /**\n * 容器类名。\n */\n className?: string;\n\n /**\n * 容器样式。\n */\n style?: CSSProperties;\n}\n\n/**\n * 单轨视频 React 组件：把一路视频轨渲染到容器。\n */\nexport function XmaxVideo(props: XmaxVideoProps) {\n const containerRef = useRef<HTMLDivElement>(null);\n const viewRef = useRef<XmaxVideoView | undefined>(undefined);\n\n useEffect(() => {\n const container = containerRef.current;\n if (!container) {\n return;\n }\n\n const view = new XmaxVideoView();\n view.element.style.width = \"100%\";\n view.element.style.height = \"100%\";\n view.attach(container);\n viewRef.current = view;\n return () => {\n viewRef.current = undefined;\n view.track = undefined;\n view.detach();\n };\n }, []);\n\n useEffect(() => {\n if (viewRef.current) viewRef.current.renderStatisticsHandler = props.onRenderStatistics;\n }, [props.onRenderStatistics]);\n\n useEffect(() => {\n const view = viewRef.current;\n if (view) {\n view.track = props.track;\n }\n }, [props.track]);\n\n useEffect(() => {\n const view = viewRef.current;\n if (view && props.videoContentMode) {\n view.videoContentMode = props.videoContentMode;\n }\n }, [props.videoContentMode]);\n\n useEffect(() => {\n const view = viewRef.current;\n if (view && props.mirrored !== undefined) {\n view.isMirrored = props.mirrored;\n }\n }, [props.mirrored]);\n\n return (\n <div\n ref={containerRef}\n className={props.className}\n style={{ position: \"relative\", overflow: \"hidden\", ...props.style }}\n />\n );\n}\n"],"mappings":";;;;;;AAKA;AAAA,EACE;AAAA,EACA;AAAA,OAEK;AA6EH;AA7CG,SAAS,kBAAkB,OAA+B;AAC/D,QAAM,eAAe,OAAuB,IAAI;AAChD,QAAM,UAAU,OAA0C,MAAS;AAEnE,YAAU,MAAM;AACd,UAAM,YAAY,aAAa;AAC/B,QAAI,CAAC,WAAW;AACd;AAAA,IACF;AAEA,UAAM,OAAO,IAAI,sBAAsB;AACvC,SAAK,QAAQ,MAAM,QAAQ;AAC3B,SAAK,QAAQ,MAAM,SAAS;AAC5B,SAAK,OAAO,SAAS;AACrB,YAAQ,UAAU;AAClB,WAAO,MAAM;AACX,cAAQ,UAAU;AAClB,WAAK,aAAa;AAClB,WAAK,cAAc;AACnB,WAAK,OAAO;AAAA,IACd;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,YAAU,MAAM;AACd,UAAM,OAAO,QAAQ;AACrB,QAAI,MAAM;AACR,WAAK,aAAa,MAAM;AAAA,IAC1B;AAAA,EACF,GAAG,CAAC,MAAM,UAAU,CAAC;AAErB,YAAU,MAAM;AACd,UAAM,OAAO,QAAQ;AACrB,QAAI,MAAM;AACR,WAAK,cAAc,MAAM;AAAA,IAC3B;AAAA,EACF,GAAG,CAAC,MAAM,WAAW,CAAC;AAEtB,YAAU,MAAM;AACd,UAAM,OAAO,QAAQ;AACrB,QAAI,QAAQ,MAAM,kBAAkB;AAClC,WAAK,mBAAmB,MAAM;AAAA,IAChC;AAAA,EACF,GAAG,CAAC,MAAM,gBAAgB,CAAC;AAE3B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,WAAW,MAAM;AAAA,MACjB,OAAO,EAAE,UAAU,YAAY,UAAU,UAAU,GAAG,MAAM,MAAM;AAAA;AAAA,EACpE;AAEJ;;;ACtFA;AAAA,EACE,aAAAA;AAAA,EACA,UAAAC;AAAA,OAEK;AAqFH,gBAAAC,YAAA;AAhDG,SAAS,UAAU,OAAuB;AAC/C,QAAM,eAAeD,QAAuB,IAAI;AAChD,QAAM,UAAUA,QAAkC,MAAS;AAE3D,EAAAD,WAAU,MAAM;AACd,UAAM,YAAY,aAAa;AAC/B,QAAI,CAAC,WAAW;AACd;AAAA,IACF;AAEA,UAAM,OAAO,IAAI,cAAc;AAC/B,SAAK,QAAQ,MAAM,QAAQ;AAC3B,SAAK,QAAQ,MAAM,SAAS;AAC5B,SAAK,OAAO,SAAS;AACrB,YAAQ,UAAU;AAClB,WAAO,MAAM;AACX,cAAQ,UAAU;AAClB,WAAK,QAAQ;AACb,WAAK,OAAO;AAAA,IACd;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,EAAAA,WAAU,MAAM;AACd,QAAI,QAAQ,QAAS,SAAQ,QAAQ,0BAA0B,MAAM;AAAA,EACvE,GAAG,CAAC,MAAM,kBAAkB,CAAC;AAE7B,EAAAA,WAAU,MAAM;AACd,UAAM,OAAO,QAAQ;AACrB,QAAI,MAAM;AACR,WAAK,QAAQ,MAAM;AAAA,IACrB;AAAA,EACF,GAAG,CAAC,MAAM,KAAK,CAAC;AAEhB,EAAAA,WAAU,MAAM;AACd,UAAM,OAAO,QAAQ;AACrB,QAAI,QAAQ,MAAM,kBAAkB;AAClC,WAAK,mBAAmB,MAAM;AAAA,IAChC;AAAA,EACF,GAAG,CAAC,MAAM,gBAAgB,CAAC;AAE3B,EAAAA,WAAU,MAAM;AACd,UAAM,OAAO,QAAQ;AACrB,QAAI,QAAQ,MAAM,aAAa,QAAW;AACxC,WAAK,aAAa,MAAM;AAAA,IAC1B;AAAA,EACF,GAAG,CAAC,MAAM,QAAQ,CAAC;AAEnB,SACE,gBAAAE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,WAAW,MAAM;AAAA,MACjB,OAAO,EAAE,UAAU,YAAY,UAAU,UAAU,GAAG,MAAM,MAAM;AAAA;AAAA,EACpE;AAEJ;","names":["useEffect","useRef","jsx"]}
|