Skip to content

Commit 77f818b

Browse files
freeshineitfreeshineit
committed
feat: update base-demo
1 parent 5526be7 commit 77f818b

File tree

8 files changed

+181
-142
lines changed

8 files changed

+181
-142
lines changed

‎demos/base-demo/cloudRecord/index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@ <h2>视频模式使用示例：</h2>
3333
// .then((response) => response.json())
3434
// .then((res) => {
3535
// var accessToken = res.data.accessToken;
36+
// 8.2.0 版本开始 默认支持云录制，无需传 isCloudRecord 参数
3637
player = new EZUIKit.EZUIKitPlayer({
3738
id: "video-container", // 视频容器ID
3839
accessToken: "设备的accessToken",

‎demos/base-demo/ezuikit.js‎

Lines changed: 9 additions & 9 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎demos/base-demo/index.html‎

Lines changed: 51 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
<title>Document</title>
1010
<style>
1111
#video-container {
12-
width: 600px;
12+
/* width: 600px; */
1313
height: 400px;
1414
background-color: #000;
1515
}
@@ -21,7 +21,7 @@
2121
<div className="demo">
2222
<h2>视频模式使用示例：</h2>
2323
<div>
24-
<div id="video-container" style="width: 600px"></div>
24+
<div id="video-container"></div>
2525
</div>
2626
<div>
2727
<button class="init">出初始化(init)</button>
@@ -35,9 +35,12 @@ <h2>视频模式使用示例：</h2>
3535
<button class="stopSave">stopSave</button>
3636
<button class="startTalk">开始对讲</button>
3737
<button class="stopTalk">结束对讲</button>
38-
<button class="fullScreen">全屏</button>
38+
<button class="fullscreen">全屏</button>
3939
<button class="destroy">销毁</button>
4040
</div>
41+
<p style="font-style: italic">
42+
播放多个视频，可初始化多个实例，参考：<a href="/multi.html">multi.html</a>
43+
</p>
4144
</div>
4245
<script>
4346
(function () {
@@ -62,14 +65,13 @@ <h2>视频模式使用示例：</h2>
6265
player = new EZUIKit.EZUIKitPlayer({
6366
id: "video-container", // 视频容器ID
6467
accessToken:
65-
"at.4dd7o6hgdl54gv4w6lxx0vjy7g69dwqy-41ygdf1r05-10colmk-j1liejtqx",
66-
url: "ezopen://open.ys7.com/BC7799091/1.hd.live",
68+
"ra.annvsh5v2d2n4ikzai5qk3mbdwrk5re6-9kgkz8sblt-11o92e1-ffwp96liy",
69+
url: "ezopen://open.ys7.com/BC7900686/1.hd.live",
6770
template: "pcLive", // simple: 极简版; pcLive: 预览; pcRec: 回放; security: 安防版; voice: 语音版;
68-
// plugin: ["talk"], // 加载插件，talk-对讲
69-
width: 600,
71+
// width: 600, // 8.2.0 版本开始支持 style 里面宽的值(如 "100%" 或 '100vw' 或 "600px" 或 600 或 "1em" 等等)
7072
height: 400,
7173
language: "en", // zh | en
72-
// debugDownloadData: true,
74+
// debugDownloadData: true, // 调试下载原始数据
7375
handleError: (error) => {
7476
console.error("handleError", error);
7577
},
@@ -99,43 +101,56 @@ <h2>视频模式使用示例：</h2>
99101
// v8.1.10
100102
// 自定义清晰度 默认 null, 如果有值 sdk 内部不在进行获取, null 默认使用接口获取的清晰度列表, videoLevelList.length === 0 不展示清晰度控件 sdk 内部不在进行获取, videoLevelList.length > 0 展示控件 sdk 内部不在进行获取
101103
// videoLevelList: [
102-
// { level: 0, name: "流畅", streamTypeIn: 1 },
103-
// { level: 1, name: "标清", streamTypeIn: 1 },
104+
// { level: 0, name: "标清", streamTypeIn: 2 }, // 需要设备支持子码流
105+
// { level: 1, name: "高清", streamTypeIn: 1 },
104106
// ],
105107
});
106108

107-
player.eventEmitter.on(
108-
EZUIKit.EZUIKitPlayer.EVENTS.videoInfo,
109-
(info) => {
110-
console.log("videoinfo", info);
111-
}
112-
);
109+
// 8.1.x 版本, 9.x.x 移除了 eventEmitter
110+
// player.eventEmitter.on(EZUIKit.EZUIKitPlayer.EVENTS.videoInfo, (info) => {
111+
// console.log("eventEmitter videoInfo", info);
112+
// });
113+
// 8.2.0 开始 推荐使用 player.on
114+
// prettier-ignore
115+
player.on(EZUIKit.EZUIKitPlayer.EVENTS.videoInfo,(info) => {
116+
console.log("videoInfo", info);
117+
});
113118

114-
player.eventEmitter.on(
115-
EZUIKit.EZUIKitPlayer.EVENTS.audioInfo,
116-
(info) => {
117-
console.log("audioInfo", info);
118-
}
119-
);
119+
// 8.1.x 版本, 9.x.x 移除了 eventEmitter
120+
// player.eventEmitter.on(EZUIKit.EZUIKitPlayer.EVENTS.audioInfo, (info) => {
121+
// console.log("eventEmitter audioInfo", info);
122+
// });
123+
// 8.2.0 开始 推荐使用 player.on
124+
// prettier-ignore
125+
player.on(EZUIKit.EZUIKitPlayer.EVENTS.audioInfo, (info) => {
126+
console.log("audioInfo", info);
127+
});
120128

121129
// 首帧渲染成功
122130
// first frame display
123-
player.eventEmitter.on(
124-
EZUIKit.EZUIKitPlayer.EVENTS.firstFrameDisplay,
125-
() => {
126-
console.log("firstFrameDisplay ");
127-
}
128-
);
129-
player.eventEmitter.on(
130-
EZUIKit.EZUIKitPlayer.EVENTS.streamInfoCB,
131-
(info) => {
132-
console.log("streamInfoCB ", info);
133-
}
134-
);
131+
// 8.1.x 版本, 9.x.x 移除了 eventEmitter
132+
// player.eventEmitter.on(EZUIKit.EZUIKitPlayer.EVENTS.firstFrameDisplay, () => {
133+
// console.log("eventEmitter firstFrameDisplay ");
134+
// });
135+
// 8.2.0 开始 推荐使用 player.on
136+
// prettier-ignore
137+
player.on(EZUIKit.EZUIKitPlayer.EVENTS.firstFrameDisplay, () => {
138+
console.log("firstFrameDisplay ");
139+
});
140+
141+
// 8.1.x 版本, 9.x.x 移除了 eventEmitter
142+
// player.eventEmitter.on(EZUIKit.EZUIKitPlayer.EVENTS.streamInfoCB, (info) => {
143+
// console.log("eventEmitter streamInfoCB ", info);
144+
// });
145+
// 8.2.0 开始 推荐使用 player.on
146+
// prettier-ignore
147+
player.on(EZUIKit.EZUIKitPlayer.EVENTS.streamInfoCB, (info) => {
148+
console.log("streamInfoCB ", info);
149+
});
135150
});
136151

137-
document.querySelector(".fullScreen").addEventListener("click", () => {
138-
player.fullScreen();
152+
document.querySelector(".fullscreen").addEventListener("click", () => {
153+
player.fullscreen();
139154
});
140155

141156
document.querySelector(".play").addEventListener("click", () => {

‎demos/base-demo/mobileLive.html‎

Lines changed: 47 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -30,17 +30,14 @@ <h2>视频模式使用示例：</h2>
3030
<button onClick="closeSound()">closeSound</button>
3131
<button onClick="startSave()">startSave</button>
3232
<button onClick="stopSave()">stopSave</button>
33-
<button onClick="ezopenStartTalk()">开始对讲</button>
34-
<button onClick="ezopenStopTalk()">结束对讲</button>
35-
<button onClick="fullScreen()">全屏</button>
33+
<button onClick="startTalk()">开始对讲</button>
34+
<button onClick="stopTalk()">结束对讲</button>
35+
<button onClick="fullscreen()">全屏</button>
3636
<button onClick="destroy()">destroy</button>
3737
</div>
38-
<p style="font-style: italic">
39-
播放多个视频，可初始化多个实例，参考：/demos/base-demo/multi-demo
40-
</p>
4138
</div>
4239
<script>
43-
var player;
40+
let player;
4441
const width = document.body.clientWidth || 375;
4542

4643
// fetch('https://open.ys7.com/jssdk/ezopen/demo/token')
@@ -50,10 +47,9 @@ <h2>视频模式使用示例：</h2>
5047
player = new EZUIKit.EZUIKitPlayer({
5148
id: "video-container", // 视频容器ID
5249
accessToken:
53-
"at.0bcxc4b84rh5c1405waik5vi9uzmcbnu-9gwrqfivpn-1hif4xu-vrgxwvuq",
54-
url: "ezopen://open.ys7.com/BC7799091/1.hd.live",
50+
"ra.annvsh5v2d2n4ikzai5qk3mbdwrk5re6-9kgkz8sblt-11o92e1-ffwp96liy",
51+
url: "ezopen://open.ys7.com/BC7900686/1.hd.live",
5552
template: "mobileLive", // simple: 极简版; pcLive: 预览; pcRec: 回放; security: 安防版; voice: 语音版;
56-
plugin: ["talk"], // 加载插件，talk-对讲
5753
width: width,
5854
height: (width * 9) / 16,
5955
language: "en", // zh | en
@@ -82,37 +78,50 @@ <h2>视频模式使用示例：</h2>
8278
staticPath: "/ezuikit_static", // 如果想使用本地静态资源，请复制根目录下ezuikit_static 到当前目录下， 然后设置该值
8379
});
8480

85-
player.eventEmitter.on(
86-
EZUIKit.EZUIKitPlayer.EVENTS.videoInfo,
87-
(info) => {
88-
console.log("videoinfo", info);
89-
},
90-
);
81+
// 8.1.x 版本, 9.x.x 移除了 eventEmitter
82+
// player.eventEmitter.on(EZUIKit.EZUIKitPlayer.EVENTS.videoInfo, (info) => {
83+
// console.log("eventEmitter videoInfo", info);
84+
// });
85+
// 8.2.0 开始 推荐使用 player.on
86+
// prettier-ignore
87+
player.on(EZUIKit.EZUIKitPlayer.EVENTS.videoInfo,(info) => {
88+
console.log("videoInfo", info);
89+
});
90+
91+
// 8.1.x 版本, 9.x.x 移除了 eventEmitter
92+
// player.eventEmitter.on(EZUIKit.EZUIKitPlayer.EVENTS.audioInfo, (info) => {
93+
// console.log("eventEmitter audioInfo", info);
94+
// });
95+
// 8.2.0 开始 推荐使用 player.on
96+
// prettier-ignore
97+
player.on(EZUIKit.EZUIKitPlayer.EVENTS.audioInfo, (info) => {
98+
console.log("audioInfo", info);
99+
});
91100

92-
player.eventEmitter.on(
93-
EZUIKit.EZUIKitPlayer.EVENTS.audioInfo,
94-
(info) => {
95-
console.log("audioInfo", info);
96-
},
97-
);
98101
// 首帧渲染成功
99102
// first frame display
100-
player.eventEmitter.on(
101-
EZUIKit.EZUIKitPlayer.EVENTS.firstFrameDisplay,
102-
() => {
103-
console.log("firstFrameDisplay ");
104-
},
105-
);
106-
player.eventEmitter.on(
107-
EZUIKit.EZUIKitPlayer.EVENTS.streamInfoCB,
108-
(info) => {
109-
console.log("streamInfoCB ", info);
110-
},
111-
);
103+
// 8.1.x 版本, 9.x.x 移除了 eventEmitter
104+
// player.eventEmitter.on(EZUIKit.EZUIKitPlayer.EVENTS.firstFrameDisplay, () => {
105+
// console.log("eventEmitter firstFrameDisplay ");
106+
// });
107+
// 8.2.0 开始 推荐使用 player.on
108+
// prettier-ignore
109+
player.on(EZUIKit.EZUIKitPlayer.EVENTS.firstFrameDisplay, () => {
110+
console.log("firstFrameDisplay ");
111+
});
112112

113+
// 8.1.x 版本, 9.x.x 移除了 eventEmitter
114+
// player.eventEmitter.on(EZUIKit.EZUIKitPlayer.EVENTS.streamInfoCB, (info) => {
115+
// console.log("eventEmitter streamInfoCB ", info);
113116
// });
114-
function fullScreen() {
115-
var playPromise = player.fullScreen();
117+
// 8.2.0 开始 推荐使用 player.on
118+
// prettier-ignore
119+
player.on(EZUIKit.EZUIKitPlayer.EVENTS.streamInfoCB, (info) => {
120+
console.log("streamInfoCB ", info);
121+
});
122+
123+
function fullscreen() {
124+
var playPromise = player.fullscreen();
116125
playPromise.then((data) => {
117126
console.log("promise 获取 数据", data);
118127
});
@@ -166,10 +175,10 @@ <h2>视频模式使用示例：</h2>
166175
console.log("promise 获取 数据", data);
167176
});
168177
}
169-
function ezopenStartTalk() {
178+
function startTalk() {
170179
player.startTalk();
171180
}
172-
function ezopenStopTalk() {
181+
function stopTalk() {
173182
player.stopTalk();
174183
}
175184

‎demos/base-demo/mobileRec.html‎

Lines changed: 47 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -29,13 +29,13 @@
2929
<button onClick="closeSound()">closeSound</button>
3030
<button onClick="startSave()">startSave</button>
3131
<button onClick="stopSave()">stopSave</button>
32-
<button onClick="ezopenStartTalk()">开始对讲</button>
33-
<button onClick="ezopenStopTalk()">结束对讲</button>
34-
<button onClick="fullScreen()">全屏</button>
32+
<button onClick="startTalk()">开始对讲</button>
33+
<button onClick="stopTalk()">结束对讲</button>
34+
<button onClick="fullscreen()">全屏</button>
3535
<button onClick="destroy()">destroy</button>
3636
</div>
3737
<p style="font-style: italic">
38-
播放多个视频，可初始化多个实例，参考：/demos/base-demo/multi-demo
38+
播放多个视频，可初始化多个实例，参考：<a href="/multi.html">multi.html</a>
3939
</p>
4040
</div>
4141
<script>
@@ -51,8 +51,8 @@
5151
player = new EZUIKit.EZUIKitPlayer({
5252
id: "video-container", // 视频容器ID
5353
accessToken:
54-
"at.0bcxc4b84rh5c1405waik5vi9uzmcbnu-9gwrqfivpn-1hif4xu-vrgxwvuq",
55-
url: "ezopen://open.ys7.com/BC7799091/1.rec",
54+
"ra.annvsh5v2d2n4ikzai5qk3mbdwrk5re6-9kgkz8sblt-11o92e1-ffwp96liy",
55+
url: "ezopen://open.ys7.com/BC7900686/1.rec",
5656
template: "mobileRec", // simple: 极简版; pcLive: 预览; pcRec: 回放; security: 安防版; voice: 语音版;
5757
width: width,
5858
height: (width * 9) / 16,
@@ -83,38 +83,51 @@
8383
staticPath: "/ezuikit_static", // 如果想使用本地静态资源，请复制根目录下ezuikit_static 到当前目录下， 然后设置该值
8484
});
8585

86-
player.eventEmitter.on(
87-
EZUIKit.EZUIKitPlayer.EVENTS.videoInfo,
88-
(info) => {
89-
console.log("videoinfo", info);
90-
},
91-
);
86+
// 8.1.x 版本, 9.x.x 移除了 eventEmitter
87+
// player.eventEmitter.on(EZUIKit.EZUIKitPlayer.EVENTS.videoInfo, (info) => {
88+
// console.log("eventEmitter videoInfo", info);
89+
// });
90+
// 8.2.0 开始 推荐使用 player.on
91+
// prettier-ignore
92+
player.on(EZUIKit.EZUIKitPlayer.EVENTS.videoInfo,(info) => {
93+
console.log("videoInfo", info);
94+
});
9295

93-
player.eventEmitter.on(
94-
EZUIKit.EZUIKitPlayer.EVENTS.audioInfo,
95-
(info) => {
96-
console.log("audioInfo", info);
97-
},
98-
);
96+
// 8.1.x 版本, 9.x.x 移除了 eventEmitter
97+
// player.eventEmitter.on(EZUIKit.EZUIKitPlayer.EVENTS.audioInfo, (info) => {
98+
// console.log("eventEmitter audioInfo", info);
99+
// });
100+
// 8.2.0 开始 推荐使用 player.on
101+
// prettier-ignore
102+
player.on(EZUIKit.EZUIKitPlayer.EVENTS.audioInfo, (info) => {
103+
console.log("audioInfo", info);
104+
});
99105

100106
// 首帧渲染成功
101107
// first frame display
102-
player.eventEmitter.on(
103-
EZUIKit.EZUIKitPlayer.EVENTS.firstFrameDisplay,
104-
() => {
105-
console.log("firstFrameDisplay ");
106-
},
107-
);
108-
player.eventEmitter.on(
109-
EZUIKit.EZUIKitPlayer.EVENTS.streamInfoCB,
110-
(info) => {
111-
console.log("streamInfoCB ", info);
112-
},
113-
);
108+
// 8.1.x 版本, 9.x.x 移除了 eventEmitter
109+
// player.eventEmitter.on(EZUIKit.EZUIKitPlayer.EVENTS.firstFrameDisplay, () => {
110+
// console.log("eventEmitter firstFrameDisplay ");
111+
// });
112+
// 8.2.0 开始 推荐使用 player.on
113+
// prettier-ignore
114+
player.on(EZUIKit.EZUIKitPlayer.EVENTS.firstFrameDisplay, () => {
115+
console.log("firstFrameDisplay ");
116+
});
117+
118+
// 8.1.x 版本, 9.x.x 移除了 eventEmitter
119+
// player.eventEmitter.on(EZUIKit.EZUIKitPlayer.EVENTS.streamInfoCB, (info) => {
120+
// console.log("eventEmitter streamInfoCB ", info);
121+
// });
122+
// 8.2.0 开始 推荐使用 player.on
123+
// prettier-ignore
124+
player.on(EZUIKit.EZUIKitPlayer.EVENTS.streamInfoCB, (info) => {
125+
console.log("streamInfoCB ", info);
126+
});
114127

115128
// });
116-
function fullScreen() {
117-
var playPromise = player.fullScreen();
129+
function fullscreen() {
130+
var playPromise = player.fullscreen();
118131
playPromise.then((data) => {
119132
console.log("promise 获取 数据", data);
120133
});
@@ -169,11 +182,11 @@
169182
});
170183
}
171184

172-
function ezopenStartTalk() {
185+
function startTalk() {
173186
player.startTalk();
174187
}
175188

176-
function ezopenStopTalk() {
189+
function stopTalk() {
177190
player.stopTalk();
178191
}
179192

0 commit comments

Comments
 (0)