vue3 使用Jessibuca播放器，实现视频流播放直播

这篇文章主要给大家介绍了关于vue3播放.flv、m3u8视频流(监控)的实现过程,包括视频流播放、视频截图、视频录制、等功能，支持国标H264/H265(FLV_EXT_ID_12标准)，需要的朋友可以参考下

一、步骤介绍

1.下载插件所需的js文件 ‘decoder.js’、‘decoder.wasm’、‘jessibuca.js’、‘jessibuca.d.ts’

2.全局引入‘jessibuca.js’文件

3.创建Jessibuca.vue播放组件

4.引用组件

二、具体代码

官网地址：Jessibuca，从官网demo中下载所需要的文件

1.将下载的文件存放到vue项目的‘public’文件夹下

2.全局引用

   2.1 在项目根目录下找到index.html文件，在index.html文件中全局引用‘jessibuca.js’文件

注意：vue项目中public文件夹下的内容可以直接引用，不需要 ‘./’ 了 src="./jessibuca.js"。type="module"是问了vite打包是报错。

   2.2 jessibuca.d.ts’文件添加到typings文件夹下（typings文件夹是全局TS声明）

提示：ts项目会自动创建tsconfig.json文件，这个文件是ts 全局配置文件，只要 typings 文件夹和其中的 .d.ts 文件在 include 配置中指定的范围内，它们的类型定义就会被 TypeScript 识别并应用到项目的所有文件中。

3.创建Jessibuca.vue组件

   3.1 创建公共组件，在src/components文件夹下新建Jessibuca/index.vue文件

  3.2 Jessibuca.vue组件代码：

<template>
  <div class="w-full aspect-video">
    <div ref="playerRef"></div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from "vue";

const playerRef = ref<HTMLDivElement>();

// jessibuca player
const jessibucaPlayer = ref<Jessibuca>();

interface Props {
  /** 播放地址 */
  wsFlv?: string;
  wssFlv?: string;
  config: Partial<Jessibuca.Config>;
}

const props = withDefaults(defineProps<Props>(), {});

// 创建播放器
const createJessibucaPlayer = () => {
  jessibucaPlayer.value = new Jessibuca({
    container: playerRef.value!,
    ...props.config
  });
  jessibucaPlayer.value.play(props.wsFlv);
};

onMounted(() => {
  createJessibucaPlayer();
});

// 组件销毁前销毁播放器并停止视频流
onBeforeUnmount(() => {
  if (jessibucaPlayer.value) {
    jessibucaPlayer.value.destroy();
    jessibucaPlayer.value = null as unknown as undefined;
  }
});
</script>

<style scoped lang="scss"></style>

4.组件引用

   4.1 html部分

<!-- 视频流播放区 -->
<div class="videoBox-play">
      <JessibucaPlayer
        style="width: 100%; height: 230px"
        v-if="flvUrl1"
        :ws-flv="flvUrl1"
        :config="jessibucaPlayerConfig"
        />
</div>

   4.2 ts部分

<script setup lang="ts">
import { ref } from "vue"
import JessibucaPlayer from "@/components/JessibucaPlayer/index.vue";

// 存储视频流地址（这里是你自己的视频流地址）
const flvUrl1 = ref<any>("http://xxx.xxx.x.xxx:xxxx/xxx/xxxxx.flv");

// 播放器组件配置
const jessibucaPlayerConfig: Partial<Jessibuca.Config> = {
  isFlv: true,  // 是否使用flv格式
  showBandwidth: true, // 是否显示带宽使用情况
  operateBtns: { // 配置按钮对象
    screenshot: true, // 是否启用截图功能
    fullscreen: true, // 是否启用全屏功能
    play: true, // 是否启用播放功能
    audio: true, // 是否启用音频功能
    record: true // 是否启用录制功能
  },
  loadingText: "加载中..."  // 设置播放器加载时显示的文本
}; 
</script>

完整代码：

<template>
  <!-- 视频流播放区 -->
  <div class="videoBox-play">
      <JessibucaPlayer
        style="width: 100%; height: 230px"
         v-if="flvUrl1"
         :ws-flv="flvUrl1"
         :config="jessibucaPlayerConfig"
       />
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue"
import JessibucaPlayer from "@/components/JessibucaPlayer/index.vue";

// 存储视频流地址（这里是你自己的视频流地址）
const flvUrl1 = ref<any>("http://xxx.xxx.x.xxx:xxxx/xxx/xxxxx.flv");

// 播放器组件配置
const jessibucaPlayerConfig: Partial<Jessibuca.Config> = {
  isFlv: true,  // 是否使用flv格式
  showBandwidth: true, // 是否显示带宽使用情况
  operateBtns: { // 配置按钮对象
    screenshot: true, // 是否启用截图功能
    fullscreen: true, // 是否启用全屏功能
    play: true, // 是否启用播放功能
    audio: true, // 是否启用音频功能
    record: true // 是否启用录制功能
  },
  loadingText: "加载中..."  // 设置播放器加载时显示的文本
}; 
</script>

效果展示：