前端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。

<!-- 

public下的index.html 直接引入js文件

-->



....


<script src="<%= BASE_URL %>jessibuca.js"></script>





.....

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

<script>
export default {
  name: "LiveVideoPlay",
  props: {
    // 播放地址
    playUrl: {
      type: String,
      required: true,
    },
    // 目标domid
    id: {
      type: String,
      required: true,
    },
  },
  data() {
    return {
      player: null,
    };
  },
  methods: {
    // 初始化视频组件
    initPlayer() {
      if (Jessibuca) {
        this.player = new Jessibuca({
          container: document.getElementById(this.id), //jessibuca需要容器
          videoBuffer: 0.2, // 缓存时长
          isResize: false,
          loadingText: "疯狂加载中...",
          useMSE: true,
          useWCS: true,
          debug: true,
          background: "@/assets/icons/svg/no-video.svg",
          supportDblclickFullscreen: true,
          showBandwidth: true, // 显示网速
          operateBtns: {
            fullscreen: true,
            screenshot: true,
            play: true,
            audio: true,
          },
          forceNoOffscreen: true,
          isNotMute: false,
          timeout: 10,
        });
        //console.log("this.player ----- ", this.player, this.playUrl);
        this.player.play(this.playUrl);
      }
    },
  },
  beforeDestroy() {
    // 销毁视频
    if (this.player) {
      this.player.destroy();
      this.player = null;
    }
  },
  mounted() {
    this.initPlayer();
  },
};
</script>
<template>
  <div class="video-player-outer" :id="id"></div>
</template>
<style>
.video-player-outer {
  width: 100%;
  height: 100%;
}
</style>

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

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

<script>
import LiveVideoPlay from "./LiveVideoPlay.vue";
export default {
    name: '',
    components: {
        LiveVideoPlay 
    },
    data () {
        return {
            playUrl1: null,
            playUrl2: null,
            showV1: false,
            showV2: false,
        }
    },
    methods: {
        handlePlayVideo(v) {
      if (v == 1) {
        this.playUrl1 =
          "https://xxxxxx/live/02.live.flv";
        this.showV1 = true;
      } else if (v == 2) {
        this.playUrl2 =
          "https://xxxxxx/live/02.live.flv";
        this.showV2 = true;
      }
    },
    StopPlayVideo(v) {
      if (v == 1) {
        this.showV1 = false;
      } else if (v == 2) {
        this.showV2 = false;
      }
    }, 
    },
}

</script>

<template>

    <div class="box">
          <div class="video-box-item">
            <el-button @click="handlePlayVideo(1)">播放视频1</el-button>
            <el-button @click="StopPlayVideo(1)">停止视频1</el-button>
            <LiveVideoPlay v-if="showV1" :playUrl="playUrl1" id="v1" />
          </div>

          <div class="video-box-item">
            <el-button @click="handlePlayVideo(2)">播放视频2</el-button>
            <el-button @click="StopPlayVideo(2)">停止视频2</el-button>
            <LiveVideoPlay v-if="showV2" :playUrl="playUrl2" id="v2" />
          </div>
    </div>

</template>

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

但是,如果你的要求比较高,又不想买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. 封装播放视频组件

<template>
  <LivePlayer
    class="component-wrapper video-panel"
    :class="{ fullscreen: flag }"
    :videoUrl="options.url"
    :videoTitle="options.title"
    :poster="options.poster"
    :controls="options.controls"
    :autoplay="options.autoplay"
    :live="options.live"
    :hide-snapshot-button="options.hideSnapshot"
    :muted="options.muted"
    :fluent="options.fluent"
    :stretch="options.stretch"
    :aspect="options.aspect"
    :loading="options.loading"
    :hide-big-play-button="options.hideBigPlay"
    @fullscreen="onFullscreen"
  >
    <slot></slot>
  </LivePlayer>
</template>

<script>
import LivePlayer from "@liveqing/liveplayer";

export default {
  name: "LiveVideoRtcPlayer",
  components: {
    LivePlayer,
  },
  props: {
    params: {
      type: String,
    },
  },
  data() {
    return {
      flag: false,
    };
  },
  computed: {
    options() {
      return {
        // 播放地址
        url: this.params,
        // 视频标题
        title: "",
        // 视频封面图片
        poster: "",
        // 播放器控制栏
        controls: true,
        // 隐藏截图
        hideSnapshot: true,
        // 是否直播
        live: true,
        // 是否自动播放
        autoplay: true,
        // 是否静音
        muted: true,
        // 流畅模式
        fluent: true,
        // 是否拉伸
        stretch: true,
        // 全屏 - 适应div
        aspect: "fullscreen",
        // 指示加载状态
        loading: true,
        // 隐藏起播状态下的大播放按钮
        hideBigPlay: true,
      };
    },
  },
  created() {
    console.log("配置 ----- ", this.options);
  },
  beforeDestroy() {
    if (this.options) {
      this.options.url = "";
    }
    this.onExitFullscreen();
  },
  methods: {
    onExitFullscreen() {
      this.flag = false;
    },
    onFullscreen(status) {
      this.flag = status;
      if (!status) {
        this.onExitFullscreen();
        return;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.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;
    }
  }
}
</style>

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

<template>
  <div id="app">
    <!-- 视频 -->
    <div class="video-box">
      <el-button @click="handlePlayVideo(1)">播放视频1</el-button>
      <el-button @click="StopPlayVideo(1)">停止视频1</el-button>
      <div class="video-box-item">
        <LiveVideoRtcPlayer v-if="showV1" :params="playUrl1" id="v1" />
      </div>
      <el-button @click="handlePlayVideo(2)">播放视频2</el-button>
      <el-button @click="StopPlayVideo(2)">停止视频2</el-button>
      <div class="video-box-item">
        <LiveVideoRtcPlayer v-if="showV2" :params="playUrl2" id="v2" />
      </div>
    </div>
  </div>
</template>

<script>
//import Child from "./Child.vue";
//import LiveVideoPlay from "./LiveVideoPlay.vue";
import LiveVideoRtcPlayer from "./LiveVideoRtcPlayer.vue";
export default {
  name: "App",
  components: {
    //LiveVideoPlay,
    LiveVideoRtcPlayer,
  },
  data() {
    return {
      playUrl1: null,
      playUrl2: null,
      showV1: false,
      showV2: false,
    };
  },
  methods: {
    handlePlayVideo(v) {
      if (v == 1) {
        // this.playUrl1 =
        //   "https://xxxxxxxxxxxx/live/02.live.flv";
        this.playUrl1 =
          "webrtcs://xxxxxxxxxxxxx/live/index/api";
        this.showV1 = true;
      } else if (v == 2) {
        this.playUrl2 = 'xxxxx 播放地址';
        this.showV2 = true;
      }
    },
    StopPlayVideo(v) {
      if (v == 1) {
        this.showV1 = false;
      } else if (v == 2) {
        this.showV2 = false;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
#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;
  }
}
</style>
<style lang="scss"></style>

测试一下,nice.

累了,就这样吧.