前端FLV视频直播解决方案

项目背景：

1. 后台给出一个地址，持续不断的推送flv视频流。

2.前端需要接收视频流，并寻找合适的播放插件。

一开始：

其实用的是xgplayer（西瓜视频）。

官网地址：西瓜播放器

使用的是直播，flv的插件：西瓜播放器 | xgplayer-flv。

但是无法播放，现象就是一直loading；

后来，查了好多资料，发现一个issue：

流数据正常下载，xgplayer-flv无法播放 · Issue #604 · bytedance/xgplayer · GitHub。

和我情况一模一样，但是暂时没有什么解决方案。说明，此路不通。

柳暗花明：

找了很久，找到一个万能播放插件 —— Jessibuca。

官网地址：Jessibuca

如何使用：

前端如何使用？建议直接下载相关资源，静态引入。

需要下载三个资源，如下图：

怎么找到这三个资源？去官网的network里找找吧，不在多说。

vue中使用详情：

首先，上边的三个文件引入public。在index.html文件中只需要引入jessibuca.js。

....








.....

然后,创建视频播放组件 LiveVideoPlay.vue:

  


.video-player-outer {
  width: 100%;
  height: 100%;
}

最后,父组件中直接引用:

// 父组件中直接使用该组件





    
          
            播放视频1
            停止视频1
            
          

          
            播放视频2
            停止视频2
            
          
    

如上,可以试一试自己的播放地址是否可以成功播放视频.如果你的需求不那么高,不考虑延迟,到这里基本就够了,不需要卷下去.

但是,如果你的要求比较高,又不想买jecibuca的收费版本,那么请继续往下看, 有更好的解决方案.

优中选优:

现在这个功能是做出来了,但是视频延迟的问题比较突出.比如,我控制摄像头旋转一下位置,在上述解决方案中,会明显发现摄像头触发旋转进而回传视频明显延迟.那怎么办? 如果你要求不高,那么上边的解决方案足够使用,但是如果要求低延迟,那么就不得不祭出另个大杀器了 – LiveQing.

官网地址: LivePlayer H5播放器 | 青柿视频流媒体服务解决方案

如何使用? vue2中大概分为这几步骤(vue3+vite的可以参考官网):

1. 安装 Liveplayer:

npm install @liveqing/liveplayer

2. 安装 webpack 插件 copy-webpack-plugin

npm install copy-webpack-plugin@4.6.0

注意: 如果你的版本是vuecli4.0+, 那么以上这个版本就够用了.但是 如果你的vuecli5.0+, 你需要升级这个copywebpack-plugins的版本,比如 copy-webpack-plugin@11.0.0 .亲测有效,一定要注意!!!

3. 配置vue.config.js

/**  vue.config.js   */

// *****  注意 还是vuecli版本的问题
// *****  如果你的vuelci4.0+  就用下边这个配置

const CopyWebpackPlugin = require("copy-webpack-plugin");

module.exports = {

    ...


    configureWebpack: (config) => {
        config.devtool = "source-map";
        config.output.libraryExport =
                      "default"; /* 解决import UMD打包文件时, 组件install方法执行报错的问题！！ */



        // 增加配置如下  主要是 plugins

        const plugins = [
          new CopyWebpackPlugin([
            {
              from: "node_modules/@liveqing/liveplayer/dist/component/crossdomain.xml",
            },
            {
              from: "node_modules/@liveqing/liveplayer/dist/component/liveplayer.swf",
            },
            {
              from: "node_modules/@liveqing/liveplayer/dist/component/liveplayer-lib.min.js",
              to: "livePlayer/",
            },
      ]),
    ];
        config.plugins.push(...plugins);

      
    }
  },


    ...

}


// *****  如果你的vuelci5.0+  就用下边这个配置

const CopyWebpackPlugin = require("copy-webpack-plugin");


module.exports = {


    .....


    chainWebpack(config) {
        
        // 增加插件
        
        config.plugin('copy').use(CopyWebpackPlugin, [

           {
                 patterns: [
            {
              from: "node_modules/@liveqing/liveplayer/dist/component/crossdomain.xml",
            },
            {
              from: "node_modules/@liveqing/liveplayer/dist/component/liveplayer.swf",
            },
            {
              from: "node_modules/@liveqing/liveplayer/dist/component/liveplayer-lib.min.js",
              to: "livePlayer/",
            },
      ]
            }
        ])

        
    }
    


}

4. public中的index.html中引入js文件

5. 封装播放视频组件

  
    
  





.component-wrapper.video-panel {
  position: relative;
  width: 100%;
  height: 100%;

  .video-wrapper .video-js {
    background-color: rgba(32, 46, 71, 0.6);

    .video-title {
      top: 4px;
      right: unset;
      left: 4px;
      padding: 4px 6px;
      max-width: 80%;
      font-size: 16px;
    }

    .video-control {
      position: absolute;
      top: 100%;
      left: 50%;
      transform: translate(-50%, -140%);
      margin-top: 0;
    }
  }

  &.fullscreen .video-wrapper .video-js {
    .video-title {
      top: 60px;
      right: unset;
      left: 20px;
      padding: 5px 8px 6px;
      background: rgba(4, 16, 37, 0.6);
      border-radius: 4px;
    }
  }
}

6. 父组件中引用播放组件

  
    
    
      播放视频1
      停止视频1
      
        
      
      播放视频2
      停止视频2
      
        
      
    
  





#app {
  height: 100%;
}

#app ::v-deep .box {
  font-size: 30px;
}

.video-box {
  width: 100%;
  height: 600px;
  overflow: hidden;

  &-item {
    width: 300px;
    height: 400px;
    float: left;
    overflow: hidden;
    background-color: #f1f2f3;
    margin-left: 50px;
    position: relative;
  }
}

测试一下,nice.

累了,就这样吧.