Skip to content

Commit f5cbe69

Browse files
freeshineitfreeshineit
committed
demo: update demo
1 parent e344be5 commit f5cbe69

File tree

3 files changed

+376
-0
lines changed

3 files changed

+376
-0
lines changed

‎demos/react-demo/src/Player.js‎

Lines changed: 232 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,232 @@
1+
import React, { useCallback, useRef } from "react";
2+
import EZUIKit from "ezuikit-js";
3+
import { isMobile } from "./utils";
4+
5+
import "./App.css";
6+
7+
const Player = () => {
8+
const player = useRef();
9+
const initPlayer = useCallback(() => {
10+
if (document.getElementById("player-container")) {
11+
let width = 600;
12+
let height = 400;
13+
14+
if (isMobile()) {
15+
width = document.documentElement.clientWidth;
16+
height = (width * 9) / 16;
17+
}
18+
19+
player.current = new EZUIKit.EZUIKitPlayer({
20+
id: "player-container",
21+
url: "ezopen://open.ys7.com/C17369415/1.rec",
22+
accessToken:
23+
"ra.df4odsvw3qmz6rao4181c5oc8cfjprjl-60u980bhwa-081mbqo-d3xptaquw",
24+
width,
25+
height,
26+
template: "pcRec",
27+
// isCloudRecord: true, // 如果是云录制的播放 需要这个值， 是必须的
28+
});
29+
}
30+
}, []);
31+
32+
/** 播放 */
33+
const handlePlay = useCallback(() => {
34+
if (player.current) {
35+
player.current.play();
36+
}
37+
}, []);
38+
39+
/** 停止 */
40+
const handleStop = useCallback(() => {
41+
if (player.current) {
42+
player.current.stop();
43+
}
44+
}, []);
45+
46+
/** 开启声音， 默认 0.8, 暂时不可调节， 如要调节请调节系统音量 */
47+
const handleOpenSound = useCallback(() => {
48+
if (player.current) {
49+
player.current.openSound();
50+
}
51+
}, []);
52+
53+
const handleCloseSound = useCallback(() => {
54+
if (player.current) {
55+
player.current.closeSound();
56+
}
57+
}, []);
58+
/** 开始录制， 录制需要在播放状态下才可以 */
59+
const handleStartSave = useCallback(() => {
60+
if (player.current) {
61+
player.current.startSave();
62+
}
63+
}, []);
64+
65+
const handleStopSave = useCallback(() => {
66+
if (player.current) {
67+
player.current.stopSave();
68+
}
69+
}, []);
70+
71+
/** 抓图/截图 */
72+
const handleCapturePicture = useCallback(() => {
73+
if (player.current) {
74+
player.current.capturePicture();
75+
}
76+
}, []);
77+
78+
/** 全屏 */
79+
const handleFullscreen = useCallback(() => {
80+
if (player.current) {
81+
player.current.fullScreen();
82+
}
83+
}, []);
84+
85+
/** 回去OSD时间 */
86+
const handleGetOSDTime = useCallback(() => {
87+
if (player.current) {
88+
player.current.getOSDTime();
89+
}
90+
}, []);
91+
92+
return (
93+
<div>
94+
<h2>视频模式使用示例：</h2>
95+
<div id="player-container"></div>
96+
<div>
97+
<button onClick={initPlayer}>初始化</button>
98+
<button onClick={handleStop}>stop</button>
99+
<button onClick={handlePlay}>play</button>
100+
<button onClick={handleOpenSound}>openSound</button>
101+
<button onClick={handleCloseSound}>closeSound</button>
102+
<button onClick={handleStartSave}>startSave</button>
103+
<button onClick={handleStopSave}>stopSave</button>
104+
<button onClick={handleCapturePicture}>capturePicture</button>
105+
<button onClick={handleFullscreen}>fullScreen</button>
106+
<button onClick={handleGetOSDTime}>getOSDTime</button>
107+
{/*<button onClick={() => this.ezopenStartTalk()}>开始对讲</button>
108+
<button onClick={() => this.ezopenStopTalk()}>结束对讲</button> */}
109+
</div>
110+
</div>
111+
);
112+
};
113+
114+
class App extends React.Component {
115+
constructor(props) {
116+
super(props);
117+
this.player = null; //定义播放器
118+
}
119+
componentDidMount() {
120+
// fetch('https://open.ys7.com/jssdk/ezopen/demo/token')
121+
// .then(response => response.json())
122+
// .then(res => {
123+
// var accessToken = res.data.accessToken;
124+
125+
if (window.player) {
126+
return;
127+
}
128+
129+
this.player = new EZUIKit.EZUIKitPlayer({
130+
id: "video-container", // 视频容器ID
131+
accessToken:
132+
"at.0siysnsad14jkcgmbnp2pbop427gcbx6-8l00xx7oa9-193qkwi-ryfn1m0j",
133+
url: "ezopen://open.ys7.com/BC7900686/1.hd.live",
134+
// simple:极简版; pcLive: pc直播; pcRec: pc回放; mobileLive: 移动端直播; mobileRec: 移动端回放; security: 安防版; voice: 语音版;
135+
template: "pcLive",
136+
plugin: ["talk"], // 加载插件，talk-对讲
137+
width: 600,
138+
height: 400,
139+
handleFirstFrameDisplay: (res) => {
140+
if (window.player.jSPlugin) {
141+
console.log(
142+
"-------------------res",
143+
window.player.jSPlugin.player.getFrameInfo()
144+
);
145+
}
146+
},
147+
handleError: (error) => {
148+
console.log("handleError", error);
149+
},
150+
// language: "en", // zh | en
151+
// staticPath: "/ezuikit_static", // 如果想使用本地静态资源，请复制根目录下ezuikit_static 到当前目录下， 然后设置该值
152+
});
153+
// });
154+
window.player = this.player;
155+
156+
// console.log(window.player.jSPlugin);
157+
158+
// if (window.player.jSPlugin) {
159+
// window.player.jSPlugin.player.event.on("videoInfo", (res) => {
160+
// console.log(res);
161+
// });
162+
// }
163+
}
164+
play = () => {
165+
var playPromise = this.player.play();
166+
playPromise.then((data) => {
167+
console.log("promise 获取 数据", data);
168+
});
169+
};
170+
stop = () => {
171+
var stopPromise = this.player.stop();
172+
stopPromise.then((data) => {
173+
console.log("promise 获取 数据", data);
174+
});
175+
};
176+
getOSDTime = () => {
177+
var getOSDTimePromise = this.player.getOSDTime();
178+
getOSDTimePromise.then((data) => {
179+
console.log("promise 获取 数据", data);
180+
});
181+
};
182+
capturePicture = () => {
183+
var capturePicturePromise = this.player.capturePicture(
184+
`${new Date().getTime()}`
185+
);
186+
capturePicturePromise.then((data) => {
187+
console.log("promise 获取 数据", data);
188+
});
189+
};
190+
openSound = () => {
191+
var openSoundPromise = this.player.openSound();
192+
openSoundPromise.then((data) => {
193+
console.log("promise 获取 数据", data);
194+
});
195+
};
196+
closeSound = () => {
197+
var openSoundPromise = this.player.closeSound();
198+
openSoundPromise.then((data) => {
199+
console.log("promise 获取 数据", data);
200+
});
201+
};
202+
startSave = () => {
203+
var startSavePromise = this.player.startSave(`${new Date().getTime()}`);
204+
startSavePromise.then((data) => {
205+
console.log("promise 获取 数据", data);
206+
});
207+
};
208+
stopSave = () => {
209+
var stopSavePromise = this.player.stopSave();
210+
stopSavePromise.then((data) => {
211+
console.log("promise 获取 数据", data);
212+
});
213+
};
214+
ezopenStartTalk = () => {
215+
this.player.startTalk();
216+
};
217+
ezopenStopTalk = () => {
218+
this.player.stopTalk();
219+
};
220+
fullScreen = () => {
221+
this.player.fullScreen();
222+
};
223+
render() {
224+
return (
225+
<div className="demo">
226+
<div id="video-container" style={{ width: 600, height: 600 }}></div>
227+
</div>
228+
);
229+
}
230+
}
231+
232+
export default Player;

‎demos/react-demo/src/PlayerClass.js‎

Lines changed: 138 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,138 @@
1+
import React from "react";
2+
import EZUIKit from "ezuikit-js";
3+
4+
import "./App.css";
5+
6+
class App extends React.Component {
7+
constructor(props) {
8+
super(props);
9+
this.player = null; //定义播放器
10+
}
11+
componentDidMount() {
12+
// fetch('https://open.ys7.com/jssdk/ezopen/demo/token')
13+
// .then(response => response.json())
14+
// .then(res => {
15+
// var accessToken = res.data.accessToken;
16+
17+
if (window.player) {
18+
return;
19+
}
20+
21+
this.player = new EZUIKit.EZUIKitPlayer({
22+
id: "video-container", // 视频容器ID
23+
accessToken:
24+
"at.0siysnsad14jkcgmbnp2pbop427gcbx6-8l00xx7oa9-193qkwi-ryfn1m0j",
25+
url: "ezopen://open.ys7.com/BC7900686/1.hd.live",
26+
// simple:极简版; pcLive: pc直播; pcRec: pc回放; mobileLive: 移动端直播; mobileRec: 移动端回放; security: 安防版; voice: 语音版;
27+
template: "pcLive",
28+
plugin: ["talk"], // 加载插件，talk-对讲
29+
width: 600,
30+
height: 400,
31+
handleFirstFrameDisplay: (res) => {
32+
if (window.player.jSPlugin) {
33+
console.log(
34+
"-------------------res",
35+
window.player.jSPlugin.player.getFrameInfo()
36+
);
37+
}
38+
},
39+
handleError: (error) => {
40+
console.log("handleError", error);
41+
},
42+
// language: "en", // zh | en
43+
// staticPath: "/ezuikit_static", // 如果想使用本地静态资源，请复制根目录下ezuikit_static 到当前目录下， 然后设置该值
44+
});
45+
// });
46+
window.player = this.player;
47+
48+
// console.log(window.player.jSPlugin);
49+
50+
// if (window.player.jSPlugin) {
51+
// window.player.jSPlugin.player.event.on("videoInfo", (res) => {
52+
// console.log(res);
53+
// });
54+
// }
55+
}
56+
play = () => {
57+
var playPromise = this.player.play();
58+
playPromise.then((data) => {
59+
console.log("promise 获取 数据", data);
60+
});
61+
};
62+
stop = () => {
63+
var stopPromise = this.player.stop();
64+
stopPromise.then((data) => {
65+
console.log("promise 获取 数据", data);
66+
});
67+
};
68+
getOSDTime = () => {
69+
var getOSDTimePromise = this.player.getOSDTime();
70+
getOSDTimePromise.then((data) => {
71+
console.log("promise 获取 数据", data);
72+
});
73+
};
74+
capturePicture = () => {
75+
var capturePicturePromise = this.player.capturePicture(
76+
`${new Date().getTime()}`
77+
);
78+
capturePicturePromise.then((data) => {
79+
console.log("promise 获取 数据", data);
80+
});
81+
};
82+
openSound = () => {
83+
var openSoundPromise = this.player.openSound();
84+
openSoundPromise.then((data) => {
85+
console.log("promise 获取 数据", data);
86+
});
87+
};
88+
closeSound = () => {
89+
var openSoundPromise = this.player.closeSound();
90+
openSoundPromise.then((data) => {
91+
console.log("promise 获取 数据", data);
92+
});
93+
};
94+
startSave = () => {
95+
var startSavePromise = this.player.startSave(`${new Date().getTime()}`);
96+
startSavePromise.then((data) => {
97+
console.log("promise 获取 数据", data);
98+
});
99+
};
100+
stopSave = () => {
101+
var stopSavePromise = this.player.stopSave();
102+
stopSavePromise.then((data) => {
103+
console.log("promise 获取 数据", data);
104+
});
105+
};
106+
ezopenStartTalk = () => {
107+
this.player.startTalk();
108+
};
109+
ezopenStopTalk = () => {
110+
this.player.stopTalk();
111+
};
112+
fullScreen = () => {
113+
this.player.fullScreen();
114+
};
115+
render() {
116+
return (
117+
<div className="demo">
118+
<h2>视频模式使用示例：</h2>
119+
<div id="video-container" style={{ width: 600, height: 600 }}></div>
120+
<div>
121+
<button onClick={() => this.stop()}>stop</button>
122+
<button onClick={() => this.play()}>play</button>
123+
<button onClick={() => this.openSound()}>openSound</button>
124+
<button onClick={() => this.closeSound()}>closeSound</button>
125+
<button onClick={() => this.startSave()}>startSave</button>
126+
<button onClick={() => this.stopSave()}>stopSave</button>
127+
<button onClick={() => this.capturePicture()}>capturePicture</button>
128+
<button onClick={() => this.fullScreen()}>fullScreen</button>
129+
<button onClick={() => this.getOSDTime()}>getOSDTime</button>
130+
<button onClick={() => this.ezopenStartTalk()}>开始对讲</button>
131+
<button onClick={() => this.ezopenStopTalk()}>结束对讲</button>
132+
</div>
133+
</div>
134+
);
135+
}
136+
}
137+
138+
export default App;

‎demos/react-demo/src/utils.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
export function isMobile() {
2+
const userAgent = navigator.userAgent || navigator.vendor || window.opera;
3+
return /android|iPhone|iPad|iPod|blackberry|windows phone|mobile/i.test(
4+
userAgent
5+
);
6+
}

0 commit comments

Comments
 (0)