Skip to content

Commit c8beeb1

Browse files
xiaosongxiaosongxiaosongxiaosong
committed
fix: 删除 hls.js/flv.js 依赖，按需加载
1 parent 9a8af26 commit c8beeb1

File tree

6 files changed

+54
-18
lines changed

6 files changed

+54
-18
lines changed

‎packages/reactjs-player-demo/src/App.js

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,10 @@ const getSupportedList = ua => {
2727
{ key: 'nativelive', kernel: 'native', live: true, src: '', type: 'application/x-mpegURL' },
2828
];
2929
}
30+
31+
global.Hls = Hls;
32+
global.flvjs = flvjs;
33+
3034
const list = [];
3135
if (Hls.isSupported()) {
3236
list.push({
@@ -181,7 +185,7 @@ const App = React.memo(({ form }) => {
181185
ref={ref}
182186
{...info}
183187
src={src}
184-
poster="https://raw.githubusercontent.com/goblin-laboratory/reactjs-player/master/logo128x128.png"
188+
poster="https://raw.githubusercontent.com/goblin-laboratory/reactjs-player/master/docs/logo128x128.png"
185189
x5playsinline={x5playsinline}
186190
onFullscreenChange={onFullscreenChange}
187191
videoProps={videoProps}

‎packages/reactjs-player/package.json

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -32,8 +32,6 @@
3232
"@testing-library/react": "^9.1.1",
3333
"@testing-library/react-hooks": "^1.1.0",
3434
"antd": "^3.20.1",
35-
"flv.js": "^1.5.0",
36-
"hls.js": "^0.12.4",
3735
"less": "^3.9.0",
3836
"numeral": "^2.0.6",
3937
"react": "^16.9.0",
@@ -52,8 +50,6 @@
5250
},
5351
"peerDependencies": {
5452
"antd": "^3.19.3",
55-
"flv.js": "^1.5.0",
56-
"hls.js": "^0.12.4",
5753
"numeral": "^2.0.6",
5854
"prop-types": "^15.7.2",
5955
"react": "^16.9.0",

‎packages/use-flvjs/lib/use-flvjs.js

Lines changed: 22 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react';
2-
import flvjs from 'flv.js';
2+
// import flvjs from 'flv.js';
33

44
const getElement = (getEl, timeout = 3000) => {
55
return new Promise(resolve => {
@@ -14,6 +14,17 @@ const getElement = (getEl, timeout = 3000) => {
1414
});
1515
};
1616

17+
const getScript = src => {
18+
return new Promise((resolve, reject) => {
19+
const script = global.document.createElement('script');
20+
global.document.body.appendChild(script);
21+
script.onload = resolve;
22+
script.onerror = reject;
23+
script.async = true;
24+
script.src = src;
25+
});
26+
};
27+
1728
// eslint-disable-next-line no-console
1829
const debug = console.error;
1930

@@ -47,7 +58,14 @@ export default ({ src, config, onKernelError }, getVideoElement) => {
4758
debug('useFlvjs: 获取 video 元素失败');
4859
return;
4960
}
50-
setFlvPlayer(flvjs.createPlayer({ isLive: true, type: 'flv', url: src }, { ...config }));
61+
if (!global.flvjs) {
62+
await getScript('https://unpkg.com/flv.js/dist/flv.min.js');
63+
if (!global.flvjs) {
64+
debug('useFlvjs: 加载 flv.js 失败');
65+
return;
66+
}
67+
}
68+
setFlvPlayer(global.flvjs.createPlayer({ isLive: true, type: 'flv', url: src }, { ...config }));
5169
};
5270

5371
ref.current = src;
@@ -60,7 +78,7 @@ export default ({ src, config, onKernelError }, getVideoElement) => {
6078
if (!flvPlayer || !el) {
6179
return () => {};
6280
}
63-
flvPlayer.on(flvjs.Events.ERROR, onFlvError);
81+
flvPlayer.on(global.flvjs.Events.ERROR, onFlvError);
6482
flvPlayer.attachMediaElement(el);
6583
flvPlayer.load();
6684
// TODO: autoPlay
@@ -70,7 +88,7 @@ export default ({ src, config, onKernelError }, getVideoElement) => {
7088
return;
7189
}
7290
try {
73-
flvPlayer.off(flvjs.Events.ERROR, onFlvError);
91+
flvPlayer.off(global.flvjs.Events.ERROR, onFlvError);
7492
} catch (errMsg) {
7593
// debugger;
7694
}

‎packages/use-flvjs/package.json

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,6 @@
2424
"url": "https://github.com/goblin-laboratory/reactjs-player/issues"
2525
},
2626
"peerDependencies": {
27-
"flv.js": "^1.5.0",
2827
"react": "^16.9.0"
2928
},
3029
"devDependencies": {

‎packages/use-hlsjs/lib/use-hlsjs.js

Lines changed: 27 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react';
2-
import Hls from 'hls.js';
2+
// import Hls from 'hls.js';
33

44
const getElement = (getEl, timeout = 3000) => {
55
return new Promise(resolve => {
@@ -14,6 +14,17 @@ const getElement = (getEl, timeout = 3000) => {
1414
});
1515
};
1616

17+
const getScript = src => {
18+
return new Promise((resolve, reject) => {
19+
const script = global.document.createElement('script');
20+
global.document.body.appendChild(script);
21+
script.onload = resolve;
22+
script.onerror = reject;
23+
script.async = true;
24+
script.src = src;
25+
});
26+
};
27+
1728
// eslint-disable-next-line no-console
1829
const debug = console.error;
1930

@@ -31,7 +42,7 @@ const destroyHls = hls => {
3142
const load = (el, src, config, onHlsError, timeout = 3 * 1000) => {
3243
return new Promise((resolve, reject) => {
3344
// TODO: https://github.com/video-dev/hls.js/pull/2174
34-
const hls = new Hls({ enableWorker: false, ...config });
45+
const hls = new global.Hls({ enableWorker: false, ...config });
3546

3647
hls.loadSource(src);
3748
hls.attachMedia(el);
@@ -43,9 +54,9 @@ const load = (el, src, config, onHlsError, timeout = 3 * 1000) => {
4354
}
4455
interval = 0;
4556
// eslint-disable-next-line no-use-before-define
46-
hls.off(Hls.Events.MANIFEST_PARSED, onParsed);
57+
hls.off(global.Hls.Events.MANIFEST_PARSED, onParsed);
4758
// eslint-disable-next-line no-use-before-define
48-
hls.off(Hls.Events.ERROR, onError);
59+
hls.off(global.Hls.Events.ERROR, onError);
4960
};
5061

5162
const onParsed = () => {
@@ -70,8 +81,8 @@ const load = (el, src, config, onHlsError, timeout = 3 * 1000) => {
7081
reject({ hls, message: 'hls timeout' });
7182
};
7283

73-
hls.on(Hls.Events.MANIFEST_PARSED, onParsed);
74-
hls.on(Hls.Events.ERROR, onError);
84+
hls.on(global.Hls.Events.MANIFEST_PARSED, onParsed);
85+
hls.on(global.Hls.Events.ERROR, onError);
7586
interval = setTimeout(onTimeout, timeout);
7687
}).catch(errMsg => {
7788
destroyHls(errMsg && errMsg.hls);
@@ -113,6 +124,15 @@ export default ({ src, config, onKernelError }, getVideoElement) => {
113124
debug('useHlsjs: 获取 video 元素失败');
114125
return;
115126
}
127+
128+
if (!global.Hls) {
129+
await getScript('https://unpkg.com/hls.js/dist/hls.min.js');
130+
if (!global.Hls) {
131+
debug('useHlsjs: 加载 hls.js 失败');
132+
return;
133+
}
134+
}
135+
116136
const hls = await load(el, src, config, onHlsError);
117137
if (ref.current !== src) {
118138
destroyHls(hls);
@@ -136,7 +156,7 @@ export default ({ src, config, onKernelError }, getVideoElement) => {
136156

137157
React.useEffect(() => {
138158
if (hlsPlayer) {
139-
hlsPlayer.on(Hls.Events.ERROR, onHlsError);
159+
hlsPlayer.on(global.Hls.Events.ERROR, onHlsError);
140160
}
141161
return () => destroyHls(hlsPlayer);
142162
}, [hlsPlayer, onHlsError]);

‎packages/use-hlsjs/package.json

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,6 @@
2424
"url": "https://github.com/goblin-laboratory/reactjs-player/issues"
2525
},
2626
"peerDependencies": {
27-
"hls.js": "^0.12.4",
2827
"react": "^16.9.0"
2928
},
3029
"devDependencies": {

0 commit comments

Comments
 (0)