vue3 +vite + jessibuca 播放直播视频流

官网地址
http://jessibuca.monibuca.com/

文件放置位置

组件代码块

<template>
  <div class="root">
    <div class="container-shell">
      <div class="container" :id="props.id"></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {ref} from "vue";
import {onMounted, onUnmounted,defineProps} from "vue";
    const props = defineProps([
      'id',
      'playUrl',
    ])
    let jessibuca = {};
    const buffer = ref(null);
    const showBandwidth = ref(true)
    const showOperateBtns = ref(true);
    const forceNoOffscreen = ref(false);
    const playing = ref(false);
    const quieting = ref(true);
    const loaded = ref(false);
    const createJessibuca = () => {
      jessibuca[props.id] = new (window as any).Jessibuca({
        container: document.getElementById(`${props.id}`),
        videoBuffer: 0.2, // 缓存时长
        isResize: false,
        text: "",
        decoder:'/decoder.js', 
        loadingText: "加载中,请稍后",
        debug: true,
        showBandwidth: showBandwidth.value, // 显示网速
        operateBtns: {
          fullscreen: showOperateBtns.value,
          screenshot: showOperateBtns.value,
          play: false,
          audio: showOperateBtns.value,
        },
        forceNoOffscreen: forceNoOffscreen.value,
        isNotMute: false,
      }) as Jessibuca
      jessibuca[props.id].on("load", () => {
        console.log('dsafdsafdsa')
        play()
      })
    
      jessibuca[props.id].on("log", function (msg : any) {
        console.log("on log", msg);
      });
      jessibuca[props.id].on("record", function (msg: any) {
        console.log("on record:", msg);
      });
      jessibuca[props.id].on("pause", function () {
        console.log("on pause");
        playing.value = false;
      });
      jessibuca[props.id].on("play", function () {
        console.log("on play");
        playing.value = true;
        loaded.value = true;
        quieting.value = jessibuca[props.id].isMute();
      });
      jessibuca[props.id].on("fullscreen", function (msg: any) {
        console.log("on fullscreen", msg);
      });

      jessibuca[props.id].on("mute", function (msg: any) {
        console.log("on mute", msg);
        quieting.value = msg;
      });

      jessibuca[props.id].on("mute", function (msg: any) {
        console.log("on mute2", msg);
      });

      jessibuca[props.id].on("audioInfo", function (msg: any) {
        console.log("audioInfo", msg);
      });
      jessibuca[props.id].on("videoInfo", function (info: any) {
        console.log("videoInfo", info);
      });

      jessibuca[props.id].on("error", function (error: any) {
        console.log("error", error);
      });

      jessibuca[props.id].on("timeout", function () {
        console.log("timeout");
      });

      jessibuca[props.id].on('start', function () {
        console.log('start');
      })

      jessibuca[props.id].on("performance", function (performance: any) {
        var show = "卡顿";
        if (performance === 2) {
          show = "非常流畅";
        } else if (performance === 1) {
          show = "流畅";
        }
      });
      jessibuca[props.id].on('buffer', function (buffer: any) {
        console.log('buffer', buffer);
      })

      jessibuca[props.id].on('stats', function (stats: any) {
        console.log('stats', stats);
      })

      jessibuca[props.id].on('kBps', function (kBps: any) {
        console.log('kBps', kBps);
      });

      // 显示时间戳 PTS
      jessibuca[props.id].on('videoFrame', function () {

      })

      //
      jessibuca[props.id].on('metadata', function () {

      });


    }

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

    onUnmounted(() => {
      jessibuca[props.id] && jessibuca[props.id].destroy();
    })
   
    const play = () => {
      if (props.playUrl) {
        jessibuca[props.id].play(props.playUrl);
      }
    }
    const pause = () => {
      jessibuca[props.id].pause();
      playing.value = false;
    }

    const destroy = ()=>{
      if (jessibuca[props.id]) {
        jessibuca[props.id].destroy();
      }
      createJessibuca();
      playing.value = false;
      loaded.value = false;
    }


</script>
<style>
.root {
  /* flex: 1; */
  /* display: flex; */
  width: 100%;
  height: 100%;
}

.container-shell {
  width: 100%;
  height: 100%;
  display: flex;
  position: relative;
  /* backdrop-filter: blur(5px); */
  /* background: hsla(0, 0%, 50%, 0.5); */
  width: auto;
  position: relative;
  border-radius: 5px;
}

.container {
  background: rgba(9, 9, 10, 0.7);
  width: 100%;
  height: 100%;
  /* border: 1px solid red; */
}



</style>