<script setup>
import { onMounted } from 'vue'
const props = defineProps({
  id: {
    type: String,
  },
})

// 定义变量
const showOperateBtns = false // 是否显示按钮
const forceNoOffscreen = true
let jessibuca = null

// 创建播放器的函数
function create(id) {
  const $container = document.getElementById(props.id)
  jessibuca = new Jessibuca({
    container: $container, // 播放器容器 若为 string ，则底层调用的是 document.getElementById('id')
    videoBuffer: 0.2, // 设置最大缓冲时长，单位秒，播放器会自动消除延迟
    isResize: false, //  1. 当为`true`的时候：视频画面做等比缩放后,高或宽对齐canvas区域,画面不被拉伸,但有黑边。 等同于 `setScaleMode(1)` 2. 当为`false`的时候：视频画面完全填充canvas区域,画面会被拉伸。等同于 `setScaleMode(0)`
    loadingText: '视频加载中', // 加载过程中文案
    useMSE: true, // 是否开启MediaSource硬解码 视频编码只支持H.264视频（Safari on iOS不支持）不支持 forceNoOffscreen 为 false (开启离屏渲染)
    useWCS: false, // 是否开启Webcodecs硬解码 视频编码只支持H.264视频 (需在chrome 94版本以上，需要https或者localhost环境) 支持 forceNoOffscreen 为 false （开启离屏渲染)
    debug: true, //  是否开启控制台调试
    showBandwidth: false, // 是否显示显示网速
    loadingTimeout: 60, // flv地址请求超时时间
    operateBtns: {
      // 配置操作按钮
      fullscreen: showOperateBtns, // 是否显示全屏按钮
      screenshot: showOperateBtns, // 是否显示截图按钮
      play: showOperateBtns, // 是否显示播放暂停按钮
      audio: false, // 是否显示声音按钮
      recorder: false, // 是否显示录制按
    },
    forceNoOffscreen, // 是否不使用离屏模式（提升渲染能力）
    isNotMute: false, // 是否开启声音，默认是关闭声音播放的
    hotKey: false, // 是否开启键盘快捷键 目前支持的键盘快捷键有：esc -> 退出全屏；arrowUp -> 声音增加；arrowDown -> 声音减少；
    keepScreenOn: false, // 开启屏幕常亮，在手机浏览器上, canvas标签渲染视频并不会像video标签那样保持屏幕常亮
    supportDblclickFullscreen: true, // 是否支持屏幕的双击事件，触发全屏，取消全屏事件

    hasAudio: false, // 如果不需要播放音频,可以设置hasAudio为false，这样就不会解码音频数据了，可以提升性能。
    autoWasm: true, // 在使用MSE或者Webcodecs 播放H265的时候，是否自动降级到wasm模式。
    controlAutoHide: false, // 底部控制台是否自动隐藏 只有鼠标聚焦到播放器内部才会显示，移除之后，会消失。
    wasmDecodeErrorReplay: true, // wasm解码报错之后，不再抛出异常，而是直接重新播放视频地址。
    wcsUseVideoRender: true, // webcodecs硬解码是否通过video标签渲染, 提升渲染性能。
  })
}

// 获取视频流地址并播放视频
function play(playUrl = '') {
  console.log('播放视频路径: ', playUrl)
  // 播放视频
  playUrl && jessibuca.play(playUrl)
}

// 销毁视频
function destroy() {
  jessibuca && jessibuca.destroy()
  setTimeout(() => {
    create(props.id)
  }, 100)
}

onBeforeUnmount(() => {
  destroy()
})

// 组件挂载后执行的操作
onMounted(() => {
  create(props.id)
})

// ----------------------- 以下是暴露的方法内容 ----------------------------
defineExpose({ play })
</script>

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

<style scoped>
.container {
  background: rgba(13, 14, 27, 0.7);
  height: 100%;
  width: 100%;
}
</style>