dep: 使用 mpegtsjs 替换 flvjs，修复音视频可能不同步等问题 (#2358)

docs/zh-CN/components/video.md

@@ -18,6 +18,13 @@ order: 71
 }
 ```
 
+## flv 和 hls 直播
+
+需要设置 `isLive: true`，目前 flv 和 hls 是通过文件后缀来判断的，还可以通过设置 videoType 来指定，它有两个值：
+
+- `video/x-flv`，使用 [mpegts.js](https://github.com/xqq/mpegts.js) 播放 flv
+- `application/x-mpegURL`，使用 [hls.js](https://github.com/video-dev/hls.js/) 播放 hls 格式
+
 ## 属性表
 
 | 属性名    | 类型      | 默认值    | 说明                                                     |
@@ -26,6 +33,7 @@ order: 71
 | className | `string`  |           | 外层 Dom 的类名                                          |
 | src       | `string`  |           | 视频地址                                                 |
 | isLive    | `boolean` | false     | 是否为直播，视频为直播时需要添加上，支持`flv`和`hls`格式 |
+| videoType | `string`  |           | 指定直播视频格式                                         |
 | poster    | `string`  |           | 视频封面地址                                             |
 | muted     | `boolean` |           | 是否静音                                                 |
 | autoPlay  | `boolean` |           | 是否自动播放                                             |

fis-conf.js

@@ -113,7 +113,7 @@ fis.match('tinymce/plugins/*/index.js', {
   ignoreDependencies: false
 });
 
-fis.match(/(?:flv\.js)/, {
+fis.match(/(?:mpegts\.js)/, {
   ignoreDependencies: true
 });
 
@@ -478,7 +478,7 @@ if (fis.project.currentMedia() === 'publish') {
         'examples/embed.tsx',
         'examples/embed.tsx:deps',
         'examples/loadMonacoEditor.ts',
-        '!flv.js/**',
+        '!mpegts.js/**',
         '!hls.js/**',
         '!froala-editor/**',
         '!tinymce/**',
@@ -550,7 +550,7 @@ if (fis.project.currentMedia() === 'publish') {
       'rest.js': [
         '*.js',
         '!monaco-editor/**',
-        '!flv.js/**',
+        '!mpegts.js/**',
         '!hls.js/**',
         '!froala-editor/**',
         '!src/components/RichText.tsx',
@@ -765,7 +765,7 @@ if (fis.project.currentMedia() === 'publish') {
         '/examples/mod.js',
         'node_modules/**.js',
         '!monaco-editor/**',
-        '!flv.js/**',
+        '!mpegts.js/**',
         '!hls.js/**',
         '!froala-editor/**',
         '!tinymce/**',
@@ -800,7 +800,7 @@ if (fis.project.currentMedia() === 'publish') {
         '**.{js,jsx,ts,tsx}',
         '!static/mod.js',
         '!monaco-editor/**',
-        '!flv.js/**',
+        '!mpegts.js/**',
         '!hls.js/**',
         '!froala-editor/**',
         '!jquery/**',

package.json

@@ -49,7 +49,6 @@
     "echarts-stat": "^1.2.0",
     "exceljs": "^4.2.0",
     "file-saver": "^2.0.2",
-    "flv.js": "1.5.0",
     "froala-editor": "2.9.6",
     "highlight.js": "^10.7.2",
     "hls.js": "0.12.2",
@@ -65,6 +64,7 @@
     "mobx-state-tree": "^3.17.3",
     "moment": "^2.19.3",
     "monaco-editor": "0.24.0",
+    "mpegts.js": "^1.6.7",
     "papaparse": "^5.3.0",
     "prop-types": "^15.6.1",
     "punycode": "^2.1.1",

src/renderers/Video.tsx

@@ -143,7 +143,7 @@ export interface FlvSourceProps {
 // let currentPlaying: any = null;
 
 export class FlvSource extends React.Component<FlvSourceProps, any> {
-  flvPlayer: any;
+  mpegtsPlayer: any;
   loaded = false;
   timer: any;
   unsubscribe: any;
@@ -187,7 +187,7 @@ export class FlvSource extends React.Component<FlvSourceProps, any> {
 
     if (src !== prevProps.src) {
       setError('');
-      this.flvPlayer?.destroy();
+      this.mpegtsPlayer?.destroy();
       this.unsubscribe?.();
       this.loaded = false;
       this.initFlv({
@@ -204,8 +204,8 @@ export class FlvSource extends React.Component<FlvSourceProps, any> {
   }
 
   componentWillUnmount() {
-    if (this.flvPlayer) {
-      this.flvPlayer.destroy();
+    if (this.mpegtsPlayer) {
+      this.mpegtsPlayer.destroy();
       this.props.setError?.('');
     }
   }
@@ -220,10 +220,10 @@ export class FlvSource extends React.Component<FlvSourceProps, any> {
     setError,
     autoPlay
   }: any) {
-    import('flv.js').then((flvjs: any) => {
+    import('mpegts.js').then((mpegts: any) => {
       video = video || (manager.video && manager.video.video);
 
-      let flvPlayer = flvjs.createPlayer(
+      let mpegtsPlayer = mpegts.createPlayer(
         {
           type: 'flv',
           url: src,
@@ -231,8 +231,8 @@ export class FlvSource extends React.Component<FlvSourceProps, any> {
         },
         config
       );
-      flvPlayer.attachMediaElement(video);
-      this.flvPlayer = flvPlayer;
+      mpegtsPlayer.attachMediaElement(video);
+      this.mpegtsPlayer = mpegtsPlayer;
 
       this.unsubscribe = manager.subscribeToOperationStateChange(
         (operation: any) => {
@@ -242,17 +242,17 @@ export class FlvSource extends React.Component<FlvSourceProps, any> {
             clearTimeout(this.timer);
             if (!this.loaded) {
               this.loaded = true;
-              flvPlayer.load();
+              mpegtsPlayer.load();
             }
 
-            flvPlayer.play();
+            mpegtsPlayer.play();
           } else if (type === 'pause') {
-            flvPlayer.pause();
+            mpegtsPlayer.pause();
 
             if (isLive) {
               this.timer = setTimeout(() => {
                 actions.seek(0);
-                flvPlayer.unload();
+                mpegtsPlayer.unload();
                 this.loaded = false;
               }, 30000);
             }
@@ -260,12 +260,12 @@ export class FlvSource extends React.Component<FlvSourceProps, any> {
         }
       );
 
-      flvPlayer.on(flvjs.Events.RECOVERED_EARLY_EOF, () => {
+      mpegtsPlayer.on(mpegts.Events.RECOVERED_EARLY_EOF, () => {
         setError('直播已经结束');
       });
-      flvPlayer.on(flvjs.Events.ERROR, () => {
+      mpegtsPlayer.on(mpegts.Events.ERROR, () => {
         setError('视频加载失败');
-        flvPlayer.unload();
+        mpegtsPlayer.unload();
       });
 
       if (autoPlay) {
@@ -314,7 +314,7 @@ export class HlsSource extends React.Component<HlsSourceProps, any> {
     }
   }
 
-  componentDidUpdate(prevProps: FlvSourceProps) {
+  componentDidUpdate(prevProps: HlsSourceProps) {
     const props = this.props;
     let {autoPlay, actions, src, isLive, config, video, manager} = props;