监控设备页面对接WVP视频

components/common/jessibuca.vue

@@ -0,0 +1,434 @@
+<template>
+  <div
+    ref="container"
+    class="jessibuca-container"
+    :class="{'jessibuca-fullscreen': fullscreen}"
+    @dblclick="fullscreenSwich"
+  >
+    <div class="jessibuca-player-wrapper"></div>
+    <div id="buttonsBox" class="buttons-box">
+      <div class="buttons-box-left">
+        <i v-if="!playing" class="iconfont icon-play jessibuca-btn" @click="playBtnClick" />
+        <i v-if="playing" class="iconfont icon-pause jessibuca-btn" @click="pause" />
+        <i class="iconfont icon-stop jessibuca-btn" @click="destroy" />
+        <i v-if="isNotMute" class="iconfont icon-audio-high jessibuca-btn" @click="mute()" />
+        <i v-if="!isNotMute" class="iconfont icon-audio-mute jessibuca-btn" @click="cancelMute()" />
+      </div>
+      <div class="buttons-box-right">
+        <span class="jessibuca-btn">{{ kBps }} kb/s</span>
+        <!--          <i class="iconfont icon-file-record1 jessibuca-btn"></i>-->
+        <!--          <i class="iconfont icon-xiangqing2 jessibuca-btn" ></i>-->
+        <i
+          class="iconfont icon-camera1196054easyiconnet jessibuca-btn"
+          style="font-size: 1rem !important"
+          @click="screenshot"
+        />
+        <i class="iconfont icon-shuaxin11 jessibuca-btn" @click="playBtnClick" />
+        <i v-if="!fullscreen" class="iconfont icon-weibiaoti10 jessibuca-btn" @click="fullscreenSwich" />
+        <i v-if="fullscreen" class="iconfont icon-weibiaoti11 jessibuca-btn" @click="fullscreenSwich" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+const jessibucaPlayer = {}
+export default {
+  name: 'Jessibuca',
+  props: ['videoUrl', 'error', 'hasAudio', 'height'],
+  data() {
+    return {
+      playing: false,
+      isNotMute: false,
+      quieting: false,
+      fullscreen: false,
+      loaded: false, // mute
+      speed: 0,
+      performance: '', // 工作情况
+      kBps: 0,
+      btnDom: null,
+      videoInfo: null,
+      volume: 1,
+      rotate: 0,
+      vod: true, // 点播
+      forceNoOffscreen: false
+    }
+  },
+  watch: {
+    videoUrl: {
+      handler(val, _) {
+        this.$nextTick(() => {
+          this.play(val)
+        })
+      },
+      immediate: true
+    }
+  },
+  created() {
+    const paramUrl = decodeURIComponent(this.$route.params.url)
+    this.$nextTick(() => {
+      this.updatePlayerDomSize()
+      window.onresize = this.updatePlayerDomSize
+      if (typeof (this.videoUrl) === 'undefined') {
+        this.videoUrl = paramUrl
+      }
+      this.btnDom = document.getElementById('buttonsBox')
+    })
+  },
+  // mounted() {
+  //   const ro = new ResizeObserver(entries => {
+  //     entries.forEach(entry => {
+  //       this.updatePlayerDomSize()
+  //     });
+  //   });
+  //   ro.observe(this.$refs.container);
+  // },
+  mounted() {
+    this.updatePlayerDomSize()
+  },
+  destroyed() {
+    if (jessibucaPlayer[this._uid]) {
+      jessibucaPlayer[this._uid].destroy()
+    }
+    this.playing = false
+    this.loaded = false
+    this.performance = ''
+  },
+  methods: {
+    updatePlayerDomSize() {
+      const dom = this.$refs.container
+      if (!dom) return;
+
+      if (!this.parentNodeResizeObserver) {
+        this.parentNodeResizeObserver = new ResizeObserver(entries => {
+          this.updatePlayerDomSize()
+        })
+        this.parentNodeResizeObserver.observe(dom.parentNode)
+      }
+      
+      // 获取父容器尺寸
+      const boxWidth = dom.parentNode.clientWidth
+      const boxHeight = dom.parentNode.clientHeight
+      
+      // 检查是否处于全屏状态
+      const isFullscreen = this.isFullscreen();
+      let width, height;
+      
+      if (isFullscreen) {
+        // 全屏模式，使用窗口尺寸
+        width = window.innerWidth;
+        height = window.innerHeight;
+      } else {
+        // 非全屏模式，使用16:9比例
+        width = boxWidth
+        height = (9 / 16) * width
+        
+        // 如果计算出的高度超过容器高度，则以容器高度为基准重新计算宽度
+        if (boxHeight > 0 && height > boxHeight) {
+          height = boxHeight
+          width = height * 16 / 9
+        }
+      }
+      
+      // 限制尺寸不超过视口
+      const clientHeight = Math.min(document.body.clientHeight, document.documentElement.clientHeight)
+      if (!isFullscreen && height > clientHeight) {
+        height = clientHeight
+        width = (16 / 9) * height
+      }
+      
+      this.playerWidth = width
+      this.playerHeight = height
+      
+      // 应用尺寸到容器
+      dom.style.width = `${width}px`
+      dom.style.height = `${height}px`
+      
+      // 如果播放器存在，更新播放器尺寸
+      if (this.playing && jessibucaPlayer[this._uid]) {
+        jessibucaPlayer[this._uid].resize(width, height)
+      }
+    },
+    
+    // 公共方法：调整大小
+    resize() {
+      this.updatePlayerDomSize()
+    },
+    
+    // 判断是否处于全屏状态
+    isFullscreen() {
+      return document.fullscreenElement ||
+        document.msFullscreenElement ||
+        document.mozFullScreenElement ||
+        document.webkitFullscreenElement || false
+    },
+    create() {
+      const options = {
+        container: this.$refs.container,
+        autoWasm: true,
+        background: '',
+        controlAutoHide: false,
+        debug: false,
+        decoder: 'static/js/jessibuca/decoder.js',
+        forceNoOffscreen: false,
+        hasAudio: typeof (this.hasAudio) === 'undefined' ? true : this.hasAudio,
+        heartTimeout: 5,
+        heartTimeoutReplay: true,
+        heartTimeoutReplayTimes: 3,
+        hiddenAutoPause: false,
+        hotKey: true,
+        isFlv: false,
+        isFullResize: false,
+        isNotMute: this.isNotMute,
+        isResize: true,
+        keepScreenOn: true,
+        loadingText: '请稍等, 视频加载中......',
+        loadingTimeout: 10,
+        loadingTimeoutReplay: true,
+        loadingTimeoutReplayTimes: 3,
+        openWebglAlignment: false,
+        operateBtns: {
+          fullscreen: false,
+          screenshot: false,
+          play: false,
+          audio: false,
+          record: false
+        },
+        recordType: 'mp4',
+        rotate: 0,
+        showBandwidth: false,
+        supportDblclickFullscreen: false,
+        timeout: 10,
+        useMSE: true,
+        useWCS: false,
+        useWebFullScreen: true,
+        videoBuffer: 0.1,
+        wasmDecodeErrorReplay: true,
+        wcsUseVideoRender: true
+      }
+      console.log('Jessibuca -> options: ', options)
+      jessibucaPlayer[this._uid] = new window.Jessibuca({ ...options })
+
+      const jessibuca = jessibucaPlayer[this._uid]
+      const _this = this
+      jessibuca.on('pause', function() {
+        _this.playing = false
+      })
+      jessibuca.on('play', function() {
+        _this.playing = true
+      })
+      jessibuca.on('fullscreen', function(msg) {
+        _this.fullscreen = msg
+      })
+      jessibuca.on('mute', function(msg) {
+        _this.isNotMute = !msg
+      })
+      jessibuca.on('performance', function(performance) {
+        let show = '卡顿'
+        if (performance === 2) {
+          show = '非常流畅'
+        } else if (performance === 1) {
+          show = '流畅'
+        }
+        _this.performance = show
+      })
+      jessibuca.on('kBps', function(kBps) {
+        _this.kBps = Math.round(kBps)
+      })
+      jessibuca.on('videoInfo', function(msg) {
+        console.log('Jessibuca -> videoInfo: ', msg)
+      })
+      jessibuca.on('audioInfo', function(msg) {
+        console.log('Jessibuca -> audioInfo: ', msg)
+      })
+      jessibuca.on('error', function(msg) {
+        console.log('Jessibuca -> error: ', msg)
+      })
+      jessibuca.on('timeout', function(msg) {
+        console.log('Jessibuca -> timeout: ', msg)
+      })
+      jessibuca.on('loadingTimeout', function(msg) {
+        console.log('Jessibuca -> timeout: ', msg)
+      })
+      jessibuca.on('delayTimeout', function(msg) {
+        console.log('Jessibuca -> timeout: ', msg)
+      })
+      jessibuca.on('playToRenderTimes', function(msg) {
+        console.log('Jessibuca -> playToRenderTimes: ', msg)
+      })
+    },
+    playBtnClick: function(event) {
+      this.play(this.videoUrl)
+    },
+    play: function(url) {
+      console.log('Jessibuca -> url: ', url)
+      if (jessibucaPlayer[this._uid]) {
+        this.destroy()
+      }
+      this.create()
+      jessibucaPlayer[this._uid].on('play', () => {
+        this.playing = true
+        this.loaded = true
+        this.quieting = jessibuca.quieting
+      })
+      if (jessibucaPlayer[this._uid].hasLoaded()) {
+        jessibucaPlayer[this._uid].play(url)
+      } else {
+        jessibucaPlayer[this._uid].on('load', () => {
+          jessibucaPlayer[this._uid].play(url)
+        })
+      }
+    },
+    pause: function() {
+      if (jessibucaPlayer[this._uid]) {
+        jessibucaPlayer[this._uid].pause()
+      }
+      this.playing = false
+      this.err = ''
+      this.performance = ''
+    },
+    screenshot: function() {
+      if (jessibucaPlayer[this._uid]) {
+        jessibucaPlayer[this._uid].screenshot()
+      }
+    },
+    mute: function() {
+      if (jessibucaPlayer[this._uid]) {
+        jessibucaPlayer[this._uid].mute()
+      }
+    },
+    cancelMute: function() {
+      if (jessibucaPlayer[this._uid]) {
+        jessibucaPlayer[this._uid].cancelMute()
+      }
+    },
+    destroy: function() {
+      if (jessibucaPlayer[this._uid]) {
+        jessibucaPlayer[this._uid].destroy()
+      }
+      if (document.getElementById('buttonsBox') == null) {
+        this.$refs.container.appendChild(this.btnDom)
+      }
+      jessibucaPlayer[this._uid] = null
+      this.playing = false
+      this.err = ''
+      this.performance = ''
+    },
+    fullscreenSwich: function() {
+      const isFull = this.isFullscreen()
+      
+      if (!isFull) {
+        // 进入全屏
+        try {
+          const container = this.$refs.container;
+          
+          // 尝试使用HTML5全屏API
+          if (container.requestFullscreen) {
+            container.requestFullscreen();
+          } else if (container.webkitRequestFullscreen) {
+            container.webkitRequestFullscreen();
+          } else if (container.msRequestFullscreen) {
+            container.msRequestFullscreen();
+          } else if (container.mozRequestFullScreen) {
+            container.mozRequestFullScreen();
+          } else {
+            // 如果原生API不可用，使用Jessibuca的全屏API
+            if (jessibucaPlayer[this._uid]) {
+              jessibucaPlayer[this._uid].setFullscreen(true);
+            }
+          }
+          
+          // 设置全屏标志
+          this.fullscreen = true;
+        } catch (e) {
+          console.error('全屏切换失败:', e);
+        }
+      } else {
+        // 退出全屏
+        try {
+          if (document.exitFullscreen) {
+            document.exitFullscreen();
+          } else if (document.webkitExitFullscreen) {
+            document.webkitExitFullscreen();
+          } else if (document.msExitFullscreen) {
+            document.msExitFullscreen();
+          } else if (document.mozCancelFullScreen) {
+            document.mozCancelFullScreen();
+          } else {
+            // 如果原生API不可用，使用Jessibuca的全屏API
+            if (jessibucaPlayer[this._uid]) {
+              jessibucaPlayer[this._uid].setFullscreen(false);
+            }
+          }
+          
+          // 设置全屏标志
+          this.fullscreen = false;
+        } catch (e) {
+          console.error('退出全屏失败:', e);
+        }
+      }
+      
+      // 重新计算尺寸
+      setTimeout(() => {
+        this.updatePlayerDomSize();
+      }, 300);
+    }
+  }
+}
+</script>
+
+<style>
+.jessibuca-container {
+  width: 100%; 
+  height: 100%; 
+  background-color: #000000;
+  margin: 0 auto;
+  position: relative;
+  overflow: hidden;
+}
+
+.jessibuca-container.jessibuca-fullscreen {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw !important;
+  height: 100vh !important;
+  z-index: 9999;
+}
+
+.jessibuca-player-wrapper {
+  width: 100%; 
+  padding-top: 56.25%; 
+  position: relative;
+}
+
+.buttons-box {
+  width: 100%;
+  height: 28px;
+  background-color: rgba(43, 51, 63, 0.7);
+  position: absolute;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  left: 0;
+  bottom: 0;
+  user-select: none;
+  z-index: 10;
+}
+
+.jessibuca-btn {
+  width: 20px;
+  color: rgb(255, 255, 255);
+  line-height: 27px;
+  margin: 0px 10px;
+  padding: 0px 2px;
+  cursor: pointer;
+  text-align: center;
+  font-size: 0.8rem !important;
+}
+
+.buttons-box-right {
+  position: absolute;
+  right: 0;
+}
+</style>

jessibuca/jessibuca.d.ts

@@ -0,0 +1,637 @@
+declare namespace Jessibuca {
+
+    /** 超时信息 */
+    enum TIMEOUT {
+        /** 当play()的时候，如果没有数据返回 */
+        loadingTimeout = 'loadingTimeout',
+        /** 当播放过程中，如果超过timeout之后没有数据渲染 */
+        delayTimeout = 'delayTimeout',
+    }
+
+    /** 错误信息 */
+    enum ERROR {
+        /** 播放错误，url 为空的时候，调用 play 方法 */
+        playError = 'playError',
+        /** http 请求失败 */
+        fetchError = 'fetchError',
+        /** websocket 请求失败 */
+        websocketError = 'websocketError',
+        /** webcodecs 解码 h265 失败 */
+        webcodecsH265NotSupport = 'webcodecsH265NotSupport',
+        /** mediaSource 解码 h265 失败 */
+        mediaSourceH265NotSupport = 'mediaSourceH265NotSupport',
+        /** wasm 解码失败 */
+        wasmDecodeError = 'wasmDecodeError',
+    }
+
+    interface Config {
+        /**
+         * 播放器容器
+         * *  若为 string ，则底层调用的是 document.getElementById('id')
+         * */
+        container: HTMLElement | string;
+        /**
+         * 设置最大缓冲时长，单位秒，播放器会自动消除延迟
+         */
+        videoBuffer?: number;
+        /**
+         * worker地址
+         * *  默认引用的是根目录下面的decoder.js文件 ，decoder.js 与 decoder.wasm文件必须是放在同一个目录下面。 */
+        decoder?: string;
+        /**
+         * 是否不使用离屏模式（提升渲染能力）
+         */
+        forceNoOffscreen?: boolean;
+        /**
+         * 是否开启当页面的'visibilityState'变为'hidden'的时候，自动暂停播放。
+         */
+        hiddenAutoPause?: boolean;
+        /**
+         * 是否有音频，如果设置`false`，则不对音频数据解码，提升性能。
+         */
+        hasAudio?: boolean;
+        /**
+         * 设置旋转角度，只支持，0(默认)，180，270 三个值
+         */
+        rotate?: boolean;
+        /**
+         * 1. 当为`true`的时候：视频画面做等比缩放后,高或宽对齐canvas区域,画面不被拉伸,但有黑边。 等同于 `setScaleMode(1)`
+         * 2. 当为`false`的时候：视频画面完全填充canvas区域,画面会被拉伸。等同于 `setScaleMode(0)`
+         */
+        isResize?: boolean;
+        /**
+         * 1. 当为`true`的时候：视频画面做等比缩放后,完全填充canvas区域,画面不被拉伸,没有黑边,但画面显示不全。等同于 `setScaleMode(2)`
+         */
+        isFullResize?: boolean;
+        /**
+         * 1. 当为`true`的时候：ws协议不检验是否以.flv为依据，进行协议解析。
+         */
+        isFlv?: boolean;
+        /**
+         * 是否开启控制台调试打
+         */
+        debug?: boolean;
+        /**
+         * 1. 设置超时时长, 单位秒
+         * 2. 在连接成功之前(loading)和播放中途(heart),如果超过设定时长无数据返回,则回调timeout事件
+         */
+        timeout?: number;
+        /**
+         * 1. 设置超时时长, 单位秒
+         * 2. 在连接成功之前,如果超过设定时长无数据返回,则回调timeout事件
+         */
+        heartTimeout?: number;
+        /**
+         * 1. 设置超时时长, 单位秒
+         * 2. 在连接成功之前,如果超过设定时长无数据返回,则回调timeout事件
+         */
+        loadingTimeout?: number;
+        /**
+         * 是否支持屏幕的双击事件，触发全屏，取消全屏事件
+         */
+        supportDblclickFullscreen?: boolean;
+        /**
+         * 是否显示网
+         */
+        showBandwidth?: boolean;
+        /**
+         * 配置操作按钮
+         */
+        operateBtns?: {
+            /** 是否显示全屏按钮 */
+            fullscreen?: boolean;
+            /** 是否显示截图按钮 */
+            screenshot?: boolean;
+            /** 是否显示播放暂停按钮 */
+            play?: boolean;
+            /** 是否显示声音按钮 */
+            audio?: boolean;
+            /** 是否显示录制按 */
+            record?: boolean;
+        };
+        /**
+         * 开启屏幕常亮，在手机浏览器上, canvas标签渲染视频并不会像video标签那样保持屏幕常亮
+         */
+        keepScreenOn?: boolean;
+        /**
+         * 是否开启声音，默认是关闭声音播放的
+         */
+        isNotMute?: boolean;
+        /**
+         * 加载过程中文案
+         */
+        loadingText?: string;
+        /**
+         * 背景图片
+         */
+        background?: string;
+        /**
+         * 是否开启MediaSource硬解码
+         * * 视频编码只支持H.264视频（Safari on iOS不支持）
+         * * 不支持 forceNoOffscreen 为 false (开启离屏渲染)
+         */
+        useMSE?: boolean;
+        /**
+         * 是否开启Webcodecs硬解码
+         * *  视频编码只支持H.264视频 (需在chrome 94版本以上，需要https或者localhost环境)
+         * *  支持 forceNoOffscreen 为 false （开启离屏渲染)
+         * */
+        useWCS?: boolean;
+        /**
+         * 是否开启键盘快捷键
+         * 目前支持的键盘快捷键有：esc -> 退出全屏；arrowUp -> 声音增加；arrowDown -> 声音减少；
+         */
+        hotKey?: boolean;
+        /**
+         *  在使用MSE或者Webcodecs 播放H265的时候，是否自动降级到wasm模式。
+         *  设置为false 则直接关闭播放，抛出Error 异常，设置为true 则会自动切换成wasm模式播放。
+         */
+        autoWasm?: boolean;
+        /**
+         * heartTimeout 心跳超时之后自动再播放,不再抛出异常，而直接重新播放视频地址。
+         */
+        heartTimeoutReplay?: boolean,
+        /**
+         * heartTimeoutReplay 从试次数，超过之后，不再自动播放
+         */
+        heartTimeoutReplayTimes?: number,
+        /**
+         * loadingTimeout loading之后自动再播放,不再抛出异常，而直接重新播放视频地址。
+         */
+        loadingTimeoutReplay?: boolean,
+        /**
+         * heartTimeoutReplay 从试次数，超过之后，不再自动播放
+         */
+        loadingTimeoutReplayTimes?: number
+        /**
+         * wasm解码报错之后，不再抛出异常，而是直接重新播放视频地址。
+         */
+        wasmDecodeErrorReplay?: boolean,
+        /**
+         * https://github.com/langhuihui/jessibuca/issues/152 解决方案
+         * 例如：WebGL图像预处理默认每次取4字节的数据，但是540x960分辨率下的U、V分量宽度是540/2=270不能被4整除，导致绿屏。
+         */
+        openWebglAlignment?: boolean
+    }
+}
+
+
+declare class Jessibuca {
+
+    constructor(config?: Jessibuca.Config);
+
+    /**
+     * 是否开启控制台调试打印
+     @example
+     // 开启
+     jessibuca.setDebug(true)
+     // 关闭
+     jessibuca.setDebug(false)
+     */
+    setDebug(flag: boolean): void;
+
+    /**
+     * 静音
+     @example
+     jessibuca.mute()
+     */
+    mute(): void;
+
+    /**
+     * 取消静音
+     @example
+     jessibuca.cancelMute()
+     */
+    cancelMute(): void;
+
+    /**
+     * 留给上层用户操作来触发音频恢复的方法。
+     *
+     * iPhone，chrome等要求自动播放时，音频必须静音，需要由一个真实的用户交互操作来恢复，不能使用代码。
+     *
+     * https://developers.google.com/web/updates/2017/09/autoplay-policy-changes
+     */
+    audioResume(): void;
+
+    /**
+     *
+     * 设置超时时长, 单位秒
+     * 在连接成功之前和播放中途,如果超过设定时长无数据返回,则回调timeout事件
+
+     @example
+     jessibuca.setTimeout(10)
+
+     jessibuca.on('timeout',function(){
+        //
+    });
+     */
+    setTimeout(): void;
+
+    /**
+     * @param mode
+     *      0 视频画面完全填充canvas区域,画面会被拉伸  等同于参数 `isResize` 为false
+     *
+     *      1 视频画面做等比缩放后,高或宽对齐canvas区域,画面不被拉伸,但有黑边 等同于参数 `isResize` 为true
+     *
+     *      2 视频画面做等比缩放后,完全填充canvas区域,画面不被拉伸,没有黑边,但画面显示不全 等同于参数 `isFullResize` 为true
+     @example
+     jessibuca.setScaleMode(0)
+
+     jessibuca.setScaleMode(1)
+
+     jessibuca.setScaleMode(2)
+     */
+    setScaleMode(mode: number): void;
+
+    /**
+     * 暂停播放
+     *
+     * 可以在pause 之后，再调用 `play()`方法就继续播放之前的流。
+     @example
+     jessibuca.pause().then(()=>{
+        console.log('pause success')
+
+        jessibuca.play().then(()=>{
+
+        }).catch((e)=>{
+
+        })
+
+    }).catch((e)=>{
+        console.log('pause error',e);
+    })
+     */
+    pause(): Promise<void>;
+
+    /**
+     * 关闭视频,不释放底层资源
+     @example
+     jessibuca.close();
+     */
+    close(): void;
+
+    /**
+     * 关闭视频，释放底层资源
+     @example
+     jessibuca.destroy()
+     */
+    destroy(): void;
+
+    /**
+     * 清理画布为黑色背景
+     @example
+     jessibuca.clearView()
+     */
+    clearView(): void;
+
+    /**
+     * 播放视频
+     @example
+
+     jessibuca.play('url').then(()=>{
+        console.log('play success')
+    }).catch((e)=>{
+        console.log('play error',e)
+    })
+     //
+     jessibuca.play()
+     */
+    play(url?: string): Promise<void>;
+
+    /**
+     * 重新调整视图大小
+     */
+    resize(): void;
+
+    /**
+     * 设置最大缓冲时长，单位秒，播放器会自动消除延迟。
+     *
+     * 等同于 `videoBuffer` 参数。
+     *
+     @example
+     // 设置 200ms 缓冲
+     jessibuca.setBufferTime(0.2)
+     */
+    setBufferTime(time: number): void;
+
+    /**
+     * 设置旋转角度，只支持，0(默认) ，180，270 三个值。
+     *
+     * > 可用于实现监控画面小窗和全屏效果，由于iOS没有全屏API，此方法可以模拟页面内全屏效果而且多端效果一致。   *
+     @example
+     jessibuca.setRotate(0)
+
+     jessibuca.setRotate(90)
+
+     jessibuca.setRotate(270)
+     */
+    setRotate(deg: number): void;
+
+    /**
+     *
+     * 设置音量大小，取值0 — 1
+     *
+     * > 区别于 mute 和 cancelMute 方法，虽然设置setVolume(0) 也能达到 mute方法，但是mute 方法是不调用底层播放音频的，能提高性能。而setVolume(0)只是把声音设置为0 ，以达到效果。
+     * @param volume 当为0时，完全无声;当为1时，最大音量，默认值
+     @example
+     jessibuca.setVolume(0.2)
+
+     jessibuca.setVolume(0)
+
+     jessibuca.setVolume(1)
+     */
+    setVolume(volume: number): void;
+
+    /**
+     * 返回是否加载完毕
+     @example
+     var result = jessibuca.hasLoaded()
+     console.log(result) // true
+     */
+    hasLoaded(): boolean;
+
+    /**
+     * 开启屏幕常亮，在手机浏览器上, canvas标签渲染视频并不会像video标签那样保持屏幕常亮。
+     * H5目前在chrome\edge 84, android chrome 84及以上有原生亮屏API, 需要是https页面
+     * 其余平台为模拟实现，此时为兼容实现，并不保证所有浏览器都支持
+     @example
+     jessibuca.setKeepScreenOn()
+     */
+    setKeepScreenOn(): boolean;
+
+    /**
+     * 全屏(取消全屏)播放视频
+     @example
+     jessibuca.setFullscreen(true)
+     //
+     jessibuca.setFullscreen(false)
+     */
+    setFullscreen(flag: boolean): void;
+
+    /**
+     *
+     * 截图，调用后弹出下载框保存截图
+     * @param filename 可选参数, 保存的文件名, 默认 `时间戳`
+     * @param format   可选参数, 截图的格式，可选png或jpeg或者webp ,默认 `png`
+     * @param quality  可选参数, 当格式是jpeg或者webp时，压缩质量，取值0 ~ 1 ,默认 `0.92`
+     * @param type 可选参数, 可选download或者base64或者blob，默认`download`
+
+     @example
+
+     jessibuca.screenshot("test","png",0.5)
+
+     const base64 = jessibuca.screenshot("test","png",0.5,'base64')
+
+     const fileBlob = jessibuca.screenshot("test",'blob')
+     */
+    screenshot(filename?: string, format?: string, quality?: number, type?: string): void;
+
+    /**
+     * 开始录制。
+     * @param fileName 可选，默认时间戳
+     * @param fileType 可选，默认webm，支持webm 和mp4 格式
+
+     @example
+     jessibuca.startRecord('xxx','webm')
+     */
+    startRecord(fileName: string, fileType: string): void;
+
+    /**
+     * 暂停录制并下载。
+     @example
+     jessibuca.stopRecordAndSave()
+     */
+    stopRecordAndSave(): void;
+
+    /**
+     * 返回是否正在播放中状态。
+     @example
+     var result = jessibuca.isPlaying()
+     console.log(result) // true
+     */
+    isPlaying(): boolean;
+
+    /**
+     *   返回是否静音。
+     @example
+     var result = jessibuca.isMute()
+     console.log(result) // true
+     */
+    isMute(): boolean;
+
+    /**
+     * 返回是否正在录制。
+     @example
+     var result = jessibuca.isRecording()
+     console.log(result) // true
+     */
+    isRecording(): boolean;
+
+
+    /**
+     * 监听 jessibuca 初始化事件
+     * @example
+     * jessibuca.on("load",function(){console.log('load')})
+     */
+    on(event: 'load', callback: () => void): void;
+
+    /**
+     * 视频播放持续时间，单位ms
+     * @example
+     * jessibuca.on('timeUpdate',function (ts) {console.log('timeUpdate',ts);})
+     */
+    on(event: 'timeUpdate', callback: () => void): void;
+
+    /**
+     * 当解析出视频信息时回调，2个回调参数
+     * @example
+     * jessibuca.on("videoInfo",function(data){console.log('width:',data.width,'height:',data.width)})
+     */
+    on(event: 'videoInfo', callback: (data: {
+        /** 视频宽 */
+        width: number;
+        /** 视频高 */
+        height: number;
+    }) => void): void;
+
+    /**
+     * 当解析出音频信息时回调，2个回调参数
+     * @example
+     * jessibuca.on("audioInfo",function(data){console.log('numOfChannels:',data.numOfChannels,'sampleRate',data.sampleRate)})
+     */
+    on(event: 'audioInfo', callback: (data: {
+        /** 声频通道 */
+        numOfChannels: number;
+        /** 采样率 */
+        sampleRate: number;
+    }) => void): void;
+
+    /**
+     * 信息，包含错误信息
+     * @example
+     * jessibuca.on("log",function(data){console.log('data:',data)})
+     */
+    on(event: 'log', callback: () => void): void;
+
+    /**
+     * 错误信息
+     * @example
+     * jessibuca.on("error",function(error){
+        if(error === Jessibuca.ERROR.fetchError){
+            //
+        }
+        else if(error === Jessibuca.ERROR.webcodecsH265NotSupport){
+            //
+        }
+        console.log('error:',error)
+    })
+     */
+    on(event: 'error', callback: (err: Jessibuca.ERROR) => void): void;
+
+    /**
+     * 当前网速， 单位KB 每秒1次,
+     * @example
+     * jessibuca.on("kBps",function(data){console.log('kBps:',data)})
+     */
+    on(event: 'kBps', callback: (value: number) => void): void;
+
+    /**
+     * 渲染开始
+     * @example
+     * jessibuca.on("start",function(){console.log('start render')})
+     */
+    on(event: 'start', callback: () => void): void;
+
+    /**
+     * 当设定的超时时间内无数据返回,则回调
+     * @example
+     * jessibuca.on("timeout",function(error){console.log('timeout:',error)})
+     */
+    on(event: 'timeout', callback: (error: Jessibuca.TIMEOUT) => void): void;
+
+    /**
+     * 当play()的时候，如果没有数据返回，则回调
+     * @example
+     * jessibuca.on("loadingTimeout",function(){console.log('timeout')})
+     */
+    on(event: 'loadingTimeout', callback: () => void): void;
+
+    /**
+     * 当播放过程中，如果超过timeout之后没有数据渲染，则抛出异常。
+     * @example
+     * jessibuca.on("delayTimeout",function(){console.log('timeout')})
+     */
+    on(event: 'delayTimeout', callback: () => void): void;
+
+    /**
+     * 当前是否全屏
+     * @example
+     * jessibuca.on("fullscreen",function(flag){console.log('is fullscreen',flag)})
+     */
+    on(event: 'fullscreen', callback: () => void): void;
+
+    /**
+     * 触发播放事件
+     * @example
+     * jessibuca.on("play",function(flag){console.log('play')})
+     */
+    on(event: 'play', callback: () => void): void;
+
+    /**
+     * 触发暂停事件
+     * @example
+     * jessibuca.on("pause",function(flag){console.log('pause')})
+     */
+    on(event: 'pause', callback: () => void): void;
+
+    /**
+     * 触发声音事件，返回boolean值
+     * @example
+     * jessibuca.on("mute",function(flag){console.log('is mute',flag)})
+     */
+    on(event: 'mute', callback: () => void): void;
+
+    /**
+     * 流状态统计，流开始播放后回调，每秒1次。
+     * @example
+     * jessibuca.on("stats",function(s){console.log("stats is",s)})
+     */
+    on(event: 'stats', callback: (stats: {
+        /** 当前缓冲区时长，单位毫秒 */
+        buf: number;
+        /** 当前视频帧率 */
+        fps: number;
+        /** 当前音频码率，单位byte */
+        abps: number;
+        /** 当前视频码率，单位byte */
+        vbps: number;
+        /** 当前视频帧pts，单位毫秒 */
+        ts: number;
+    }) => void): void;
+
+    /**
+     * 渲染性能统计，流开始播放后回调，每秒1次。
+     * @param performance 0: 表示卡顿,1: 表示流畅,2: 表示非常流程
+     * @example
+     * jessibuca.on("performance",function(performance){console.log("performance is",performance)})
+     */
+    on(event: 'performance', callback: (performance: 0 | 1 | 2) => void): void;
+
+    /**
+     * 录制开始的事件
+
+     * @example
+     * jessibuca.on("recordStart",function(){console.log("record start")})
+     */
+    on(event: 'recordStart', callback: () => void): void;
+
+    /**
+     * 录制结束的事件
+
+     * @example
+     * jessibuca.on("recordEnd",function(){console.log("record end")})
+     */
+    on(event: 'recordEnd', callback: () => void): void;
+
+    /**
+     * 录制的时候，返回的录制时长，1s一次
+
+     * @example
+     * jessibuca.on("recordingTimestamp",function(timestamp){console.log("recordingTimestamp is",timestamp)})
+     */
+    on(event: 'recordingTimestamp', callback: (timestamp: number) => void): void;
+
+    /**
+     * 监听调用play方法 经过 初始化-> 网络请求-> 解封装 -> 解码 -> 渲染 一系列过程的时间消耗
+     * @param event
+     * @param callback
+     */
+    on(event: 'playToRenderTimes', callback: (times: {
+        playInitStart: number, // 1 初始化
+        playStart: number, // 2 初始化
+        streamStart: number, // 3 网络请求
+        streamResponse: number, // 4 网络请求
+        demuxStart: number, // 5 解封装
+        decodeStart: number, // 6 解码
+        videoStart: number, // 7 渲染
+        playTimestamp: number,// playStart- playInitStart
+        streamTimestamp: number,// streamStart - playStart
+        streamResponseTimestamp: number,// streamResponse - streamStart
+        demuxTimestamp: number, // demuxStart - streamResponse
+        decodeTimestamp: number, // decodeStart - demuxStart
+        videoTimestamp: number,// videoStart - decodeStart
+        allTimestamp: number // videoStart - playInitStart
+    }) => void): void
+
+    /**
+     * 监听方法
+     *
+     @example
+
+     jessibuca.on("load",function(){console.log('load')})
+     */
+    on(event: string, callback: Function): void;
+
+}
+
+export default Jessibuca;

main.js

@@ -1,8 +1,13 @@
 import App from './App.vue'
 import { createSSRApp } from 'vue'
+import JessibucaPlugin from './utils/jessibuca-plugin'
 
 export function createApp() {
   const app = createSSRApp(App)
+  
+  // 注册Jessibuca插件
+  app.use(JessibucaPlugin)
+  
   return {
     app
   }

pages/device-list/detail-camera.vue

@@ -44,22 +44,10 @@
     
     <!-- 视频预览区域 -->
     <view class="video-section">
-      <view class="video-container">
+      <view class="video-container" :class="{'fullscreen-mode': isFullscreen}">
         <image v-if="!isPlaying" src="/static/images/video-placeholder.jpg" mode="aspectFill" class="video-placeholder"></image>
-        <video 
-          v-else
-          id="videoPlayer" 
-          :src="deviceInfo.streamUrl"
-          class="video-player"
-          object-fit="cover"
-          autoplay
-          :controls="false"
-          :show-center-play-btn="false"
-          :show-fullscreen-btn="false"
-          :show-play-btn="false"
-          :enable-progress-gesture="false"
-          @error="handleVideoError"
-        ></video>
+        <!-- 使用Jessibuca组件替换原来的video标签 -->
+        <Jessibuca v-if="isPlaying" ref="jessibucaRef" :videoUrl="deviceInfo.streamUrl" :hasAudio="true" />
         
         <!-- 视频控制层 -->
         <view class="video-controls">
@@ -210,7 +198,13 @@
 </template>
 
 <script>
+// 导入Jessibuca组件
+import Jessibuca from '@/components/common/jessibuca.vue'
+
 export default {
+  components: {
+    Jessibuca
+  },
   data() {
     return {
       deviceInfo: {
@@ -219,7 +213,7 @@ export default {
         status: 'online',
         location: '西区B2地块',
         lastUpdate: '5分钟前',
-        streamUrl: 'https://demo-rtsp-server-2h4n.onrender.com/stream.mp4',
+        streamUrl: 'ws://121.4.16.100:6080/rtp/34020000001110000001_34020000001320000012.live.flv',
         alertCount: 3
       },
       isPlaying: false,
@@ -243,8 +237,7 @@ export default {
         { id: 2, time: '今天 09:30', type: '信号异常', status: '未处理', level: 'medium' },
         { id: 3, time: '昨天 15:45', type: '设备状态', status: '已处理', level: 'low' },
         { id: 4, time: '昨天 10:20', type: '遮挡告警', status: '未处理', level: 'low' }
-      ],
-      videoContext: null
+      ]
     }
   },
   
@@ -255,10 +248,7 @@ export default {
     }
   },
   
-  onReady() {
-    // 获取视频实例
-    this.videoContext = uni.createVideoContext('videoPlayer')
-    
+  mounted() {
     // 设置页面标题
     uni.setNavigationBarTitle({
       title: this.deviceInfo.name
@@ -266,6 +256,23 @@ export default {
     
     // 模拟更新时间
     this.startTimeUpdate()
+    
+    // 加载Jessibuca的JS库
+    this.loadJessibucaScript()
+    
+    // 监听全屏状态变化
+    this.setupFullscreenListener()
+    
+    // 添加键盘事件监听
+    this.setupKeyboardListener()
+  },
+  
+  beforeUnmount() {
+    // 移除全屏状态监听
+    this.removeFullscreenListener()
+    
+    // 移除键盘事件监听
+    this.removeKeyboardListener()
   },
   
   onLoad(options) {
@@ -276,6 +283,19 @@ export default {
   },
   
   methods: {
+    // 加载Jessibuca脚本
+    loadJessibucaScript() {
+      const script = document.createElement('script')
+      script.src = '/static/js/jessibuca/jessibuca.js'
+      script.onload = () => {
+        console.log('Jessibuca 脚本加载成功')
+      }
+      script.onerror = (error) => {
+        console.error('Jessibuca 脚本加载失败:', error)
+      }
+      document.head.appendChild(script)
+    },
+    
     // 获取设备信息
     fetchDeviceInfo(deviceId) {
       // 这里应该是API请求，暂时用模拟数据
@@ -292,37 +312,36 @@ export default {
         // 从未播放状态切换到播放状态
         this.isPlaying = true;
         
-        // 短暂延迟确保视频元素已加载
+        // 短暂延迟确保Jessibuca组件已加载
         setTimeout(() => {
-          if (this.videoContext) {
-            this.videoContext.play();
-            // 振动反馈
-            uni.vibrateShort();
-          }
+          // 振动反馈
+          uni.vibrateShort();
         }, 300);
       } else {
         // 从播放状态切换到暂停状态
-        if (this.videoContext) {
-          this.videoContext.pause();
-          
-          // 在页面上显示暂停状态
-          uni.showToast({
-            title: '视频已暂停',
-            icon: 'none',
-            duration: 1500
-          });
+        if (this.$refs.jessibucaRef) {
+          this.$refs.jessibucaRef.pause();
         }
+        
+        this.isPlaying = false;
+        
+        // 在页面上显示暂停状态
+        uni.showToast({
+          title: '视频已暂停',
+          icon: 'none',
+          duration: 1500
+        });
       }
     },
     
     // 静音切换
     toggleMute() {
       this.isMuted = !this.isMuted
-      if (this.videoContext) {
+      if (this.$refs.jessibucaRef) {
         if (this.isMuted) {
-          this.videoContext.mute()
+          this.$refs.jessibucaRef.mute()
         } else {
-          this.videoContext.unmute()
+          this.$refs.jessibucaRef.cancelMute()
         }
       }
     },
@@ -334,18 +353,61 @@ export default {
         this.togglePlayState();
         // 延迟执行全屏操作，等待视频元素加载
         setTimeout(() => {
-          if (this.videoContext) {
-            this.videoContext.requestFullScreen();
-            this.isFullscreen = true;
-          }
+          this.setFullscreen(true);
         }, 500);
-      } else if (this.videoContext) {
-        if (!this.isFullscreen) {
-          this.videoContext.requestFullScreen();
+      } else {
+        this.setFullscreen(!this.isFullscreen);
+      }
+    },
+    
+    // 设置全屏状态
+    setFullscreen(fullscreen) {
+      this.isFullscreen = fullscreen;
+      
+      // 更新CSS状态
+      if (this.isFullscreen) {
+        // 如果是移动设备，尝试使用系统全屏
+        const ua = navigator.userAgent.toLowerCase();
+        const isMobile = /mobile|android|iphone|ipad/.test(ua);
+        
+        if (isMobile && this.$refs.jessibucaRef) {
+          // 在移动设备上使用Jessibuca的全屏API
+          this.$refs.jessibucaRef.fullscreenSwich();
         } else {
-          this.videoContext.exitFullScreen();
+          // 适配屏幕尺寸
+          setTimeout(() => {
+            if (this.$refs.jessibucaRef) {
+              this.$refs.jessibucaRef.resize();
+            }
+          }, 300);
+        }
+        
+        // 锁定屏幕方向为横屏
+        if (window.screen && window.screen.orientation && window.screen.orientation.lock) {
+          window.screen.orientation.lock('landscape').catch(err => {
+            console.error('无法锁定屏幕方向:', err);
+          });
+        }
+      } else {
+        // 退出全屏状态
+        if (this.$refs.jessibucaRef) {
+          // 在某些情况下需要先调用Jessibuca的退出全屏
+          if (this.$refs.jessibucaRef.isFullscreen()) {
+            this.$refs.jessibucaRef.fullscreenSwich();
+          }
+          
+          // 重置视频大小
+          setTimeout(() => {
+            if (this.$refs.jessibucaRef) {
+              this.$refs.jessibucaRef.resize();
+            }
+          }, 300);
+        }
+        
+        // 解除屏幕方向锁定
+        if (window.screen && window.screen.orientation && window.screen.orientation.unlock) {
+          window.screen.orientation.unlock();
         }
-        this.isFullscreen = !this.isFullscreen;
       }
     },
     
@@ -360,18 +422,18 @@ export default {
     
     // 截图
     takeScreenshot() {
-      // 模拟截图功能
-      uni.showLoading({
-        title: '截图中...'
-      })
-      
-      setTimeout(() => {
-        uni.hideLoading()
+      if (this.$refs.jessibucaRef && this.isPlaying) {
+        this.$refs.jessibucaRef.screenshot();
         uni.showToast({
           title: '截图已保存',
           icon: 'success'
-        })
-      }, 1000)
+        });
+      } else {
+        uni.showToast({
+          title: '请先播放视频',
+          icon: 'none'
+        });
+      }
     },
     
     // 语音对讲
@@ -423,38 +485,6 @@ export default {
       }
     },
     
-    // 切换缩放模式
-    toggleZoom() {
-      this.isZoomMode = !this.isZoomMode
-      uni.showToast({
-        title: this.isZoomMode ? '进入缩放模式' : '退出缩放模式',
-        icon: 'none'
-      })
-    },
-    
-    // 添加预设位
-    addPreset() {
-      uni.showModal({
-        title: '添加预设位',
-        content: '是否保存当前位置为预设位？',
-        success: (res) => {
-          if (res.confirm) {
-            uni.showToast({
-              title: '预设位已保存',
-              icon: 'success'
-            })
-          }
-        }
-      })
-    },
-    
-    // 处理告警点击
-    handleAlert(item) {
-      uni.navigateTo({
-        url: `/pages/alerts/alert-detail?alertId=${item.id}&deviceId=${this.deviceInfo.deviceId}`
-      })
-    },
-    
     // 跳转到历史视频页面
     navigateToHistory() {
       uni.navigateTo({
@@ -462,15 +492,6 @@ export default {
       })
     },
     
-    // 处理视频错误
-    handleVideoError(e) {
-      console.error('视频播放错误:', e)
-      uni.showToast({
-        title: '视频播放出错，请稍后再试',
-        icon: 'none'
-      })
-    },
-    
     // 更新时间
     startTimeUpdate() {
       // 模拟时间更新
@@ -481,6 +502,62 @@ export default {
         const seconds = String(now.getSeconds()).padStart(2, '0')
         this.currentTime = `${hours}:${minutes}:${seconds}`
       }, 1000)
+    },
+    
+    // 设置全屏状态监听
+    setupFullscreenListener() {
+      this.fullscreenChangeHandler = () => {
+        const isFullscreen = !!(
+          document.fullscreenElement ||
+          document.mozFullScreenElement ||
+          document.webkitFullscreenElement ||
+          document.msFullscreenElement
+        );
+        
+        if (this.isFullscreen !== isFullscreen) {
+          this.isFullscreen = isFullscreen;
+        }
+      };
+      
+      document.addEventListener('fullscreenchange', this.fullscreenChangeHandler);
+      document.addEventListener('webkitfullscreenchange', this.fullscreenChangeHandler);
+      document.addEventListener('mozfullscreenchange', this.fullscreenChangeHandler);
+      document.addEventListener('MSFullscreenChange', this.fullscreenChangeHandler);
+    },
+    
+    // 移除全屏状态监听
+    removeFullscreenListener() {
+      if (this.fullscreenChangeHandler) {
+        document.removeEventListener('fullscreenchange', this.fullscreenChangeHandler);
+        document.removeEventListener('webkitfullscreenchange', this.fullscreenChangeHandler);
+        document.removeEventListener('mozfullscreenchange', this.fullscreenChangeHandler);
+        document.removeEventListener('MSFullscreenChange', this.fullscreenChangeHandler);
+      }
+    },
+    
+    // 设置键盘监听
+    setupKeyboardListener() {
+      this.keydownHandler = (event) => {
+        // ESC键退出全屏
+        if (event.key === 'Escape' && this.isFullscreen) {
+          this.setFullscreen(false);
+        }
+        
+        // F键切换全屏
+        if (event.key === 'f' || event.key === 'F') {
+          this.toggleFullscreen();
+          event.preventDefault();
+        }
+      };
+      
+      document.addEventListener('keydown', this.keydownHandler);
+    },
+    
+    // 移除键盘监听
+    removeKeyboardListener() {
+      if (this.keydownHandler) {
+        document.removeEventListener('keydown', this.keydownHandler);
+      }
     }
   }
 }
@@ -613,6 +690,8 @@ export default {
 /* 视频预览区域 */
 .video-section {
   margin: 0 30rpx 20rpx;
+  position: relative;
+  z-index: 1;
 }
 
 .video-container {
@@ -623,11 +702,39 @@ export default {
   border-radius: 16rpx;
   overflow: hidden;
   box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.1);
+  transition: all 0.3s ease;
+}
+
+.video-container.fullscreen-mode {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  margin: 0;
+  z-index: 9999;
+  border-radius: 0;
+}
+
+.video-container.fullscreen-mode .video-controls {
+  padding: 30rpx;
+}
+
+.video-container.fullscreen-mode .top-controls,
+.video-container.fullscreen-mode .bottom-controls {
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
+
+.video-container.fullscreen-mode:hover .top-controls,
+.video-container.fullscreen-mode:hover .bottom-controls {
+  opacity: 1;
 }
 
 .video-player, .video-placeholder {
   width: 100%;
   height: 100%;
+  object-fit: contain;
 }
 
 .video-controls {

static/js/jessibuca/jessibuca.d.ts

@@ -0,0 +1,637 @@
+declare namespace Jessibuca {
+
+    /** 超时信息 */
+    enum TIMEOUT {
+        /** 当play()的时候，如果没有数据返回 */
+        loadingTimeout = 'loadingTimeout',
+        /** 当播放过程中，如果超过timeout之后没有数据渲染 */
+        delayTimeout = 'delayTimeout',
+    }
+
+    /** 错误信息 */
+    enum ERROR {
+        /** 播放错误，url 为空的时候，调用 play 方法 */
+        playError = 'playError',
+        /** http 请求失败 */
+        fetchError = 'fetchError',
+        /** websocket 请求失败 */
+        websocketError = 'websocketError',
+        /** webcodecs 解码 h265 失败 */
+        webcodecsH265NotSupport = 'webcodecsH265NotSupport',
+        /** mediaSource 解码 h265 失败 */
+        mediaSourceH265NotSupport = 'mediaSourceH265NotSupport',
+        /** wasm 解码失败 */
+        wasmDecodeError = 'wasmDecodeError',
+    }
+
+    interface Config {
+        /**
+         * 播放器容器
+         * *  若为 string ，则底层调用的是 document.getElementById('id')
+         * */
+        container: HTMLElement | string;
+        /**
+         * 设置最大缓冲时长，单位秒，播放器会自动消除延迟
+         */
+        videoBuffer?: number;
+        /**
+         * worker地址
+         * *  默认引用的是根目录下面的decoder.js文件 ，decoder.js 与 decoder.wasm文件必须是放在同一个目录下面。 */
+        decoder?: string;
+        /**
+         * 是否不使用离屏模式（提升渲染能力）
+         */
+        forceNoOffscreen?: boolean;
+        /**
+         * 是否开启当页面的'visibilityState'变为'hidden'的时候，自动暂停播放。
+         */
+        hiddenAutoPause?: boolean;
+        /**
+         * 是否有音频，如果设置`false`，则不对音频数据解码，提升性能。
+         */
+        hasAudio?: boolean;
+        /**
+         * 设置旋转角度，只支持，0(默认)，180，270 三个值
+         */
+        rotate?: boolean;
+        /**
+         * 1. 当为`true`的时候：视频画面做等比缩放后,高或宽对齐canvas区域,画面不被拉伸,但有黑边。 等同于 `setScaleMode(1)`
+         * 2. 当为`false`的时候：视频画面完全填充canvas区域,画面会被拉伸。等同于 `setScaleMode(0)`
+         */
+        isResize?: boolean;
+        /**
+         * 1. 当为`true`的时候：视频画面做等比缩放后,完全填充canvas区域,画面不被拉伸,没有黑边,但画面显示不全。等同于 `setScaleMode(2)`
+         */
+        isFullResize?: boolean;
+        /**
+         * 1. 当为`true`的时候：ws协议不检验是否以.flv为依据，进行协议解析。
+         */
+        isFlv?: boolean;
+        /**
+         * 是否开启控制台调试打
+         */
+        debug?: boolean;
+        /**
+         * 1. 设置超时时长, 单位秒
+         * 2. 在连接成功之前(loading)和播放中途(heart),如果超过设定时长无数据返回,则回调timeout事件
+         */
+        timeout?: number;
+        /**
+         * 1. 设置超时时长, 单位秒
+         * 2. 在连接成功之前,如果超过设定时长无数据返回,则回调timeout事件
+         */
+        heartTimeout?: number;
+        /**
+         * 1. 设置超时时长, 单位秒
+         * 2. 在连接成功之前,如果超过设定时长无数据返回,则回调timeout事件
+         */
+        loadingTimeout?: number;
+        /**
+         * 是否支持屏幕的双击事件，触发全屏，取消全屏事件
+         */
+        supportDblclickFullscreen?: boolean;
+        /**
+         * 是否显示网
+         */
+        showBandwidth?: boolean;
+        /**
+         * 配置操作按钮
+         */
+        operateBtns?: {
+            /** 是否显示全屏按钮 */
+            fullscreen?: boolean;
+            /** 是否显示截图按钮 */
+            screenshot?: boolean;
+            /** 是否显示播放暂停按钮 */
+            play?: boolean;
+            /** 是否显示声音按钮 */
+            audio?: boolean;
+            /** 是否显示录制按 */
+            record?: boolean;
+        };
+        /**
+         * 开启屏幕常亮，在手机浏览器上, canvas标签渲染视频并不会像video标签那样保持屏幕常亮
+         */
+        keepScreenOn?: boolean;
+        /**
+         * 是否开启声音，默认是关闭声音播放的
+         */
+        isNotMute?: boolean;
+        /**
+         * 加载过程中文案
+         */
+        loadingText?: string;
+        /**
+         * 背景图片
+         */
+        background?: string;
+        /**
+         * 是否开启MediaSource硬解码
+         * * 视频编码只支持H.264视频（Safari on iOS不支持）
+         * * 不支持 forceNoOffscreen 为 false (开启离屏渲染)
+         */
+        useMSE?: boolean;
+        /**
+         * 是否开启Webcodecs硬解码
+         * *  视频编码只支持H.264视频 (需在chrome 94版本以上，需要https或者localhost环境)
+         * *  支持 forceNoOffscreen 为 false （开启离屏渲染)
+         * */
+        useWCS?: boolean;
+        /**
+         * 是否开启键盘快捷键
+         * 目前支持的键盘快捷键有：esc -> 退出全屏；arrowUp -> 声音增加；arrowDown -> 声音减少；
+         */
+        hotKey?: boolean;
+        /**
+         *  在使用MSE或者Webcodecs 播放H265的时候，是否自动降级到wasm模式。
+         *  设置为false 则直接关闭播放，抛出Error 异常，设置为true 则会自动切换成wasm模式播放。
+         */
+        autoWasm?: boolean;
+        /**
+         * heartTimeout 心跳超时之后自动再播放,不再抛出异常，而直接重新播放视频地址。
+         */
+        heartTimeoutReplay?: boolean,
+        /**
+         * heartTimeoutReplay 从试次数，超过之后，不再自动播放
+         */
+        heartTimeoutReplayTimes?: number,
+        /**
+         * loadingTimeout loading之后自动再播放,不再抛出异常，而直接重新播放视频地址。
+         */
+        loadingTimeoutReplay?: boolean,
+        /**
+         * heartTimeoutReplay 从试次数，超过之后，不再自动播放
+         */
+        loadingTimeoutReplayTimes?: number
+        /**
+         * wasm解码报错之后，不再抛出异常，而是直接重新播放视频地址。
+         */
+        wasmDecodeErrorReplay?: boolean,
+        /**
+         * https://github.com/langhuihui/jessibuca/issues/152 解决方案
+         * 例如：WebGL图像预处理默认每次取4字节的数据，但是540x960分辨率下的U、V分量宽度是540/2=270不能被4整除，导致绿屏。
+         */
+        openWebglAlignment?: boolean
+    }
+}
+
+
+declare class Jessibuca {
+
+    constructor(config?: Jessibuca.Config);
+
+    /**
+     * 是否开启控制台调试打印
+     @example
+     // 开启
+     jessibuca.setDebug(true)
+     // 关闭
+     jessibuca.setDebug(false)
+     */
+    setDebug(flag: boolean): void;
+
+    /**
+     * 静音
+     @example
+     jessibuca.mute()
+     */
+    mute(): void;
+
+    /**
+     * 取消静音
+     @example
+     jessibuca.cancelMute()
+     */
+    cancelMute(): void;
+
+    /**
+     * 留给上层用户操作来触发音频恢复的方法。
+     *
+     * iPhone，chrome等要求自动播放时，音频必须静音，需要由一个真实的用户交互操作来恢复，不能使用代码。
+     *
+     * https://developers.google.com/web/updates/2017/09/autoplay-policy-changes
+     */
+    audioResume(): void;
+
+    /**
+     *
+     * 设置超时时长, 单位秒
+     * 在连接成功之前和播放中途,如果超过设定时长无数据返回,则回调timeout事件
+
+     @example
+     jessibuca.setTimeout(10)
+
+     jessibuca.on('timeout',function(){
+        //
+    });
+     */
+    setTimeout(): void;
+
+    /**
+     * @param mode
+     *      0 视频画面完全填充canvas区域,画面会被拉伸  等同于参数 `isResize` 为false
+     *
+     *      1 视频画面做等比缩放后,高或宽对齐canvas区域,画面不被拉伸,但有黑边 等同于参数 `isResize` 为true
+     *
+     *      2 视频画面做等比缩放后,完全填充canvas区域,画面不被拉伸,没有黑边,但画面显示不全 等同于参数 `isFullResize` 为true
+     @example
+     jessibuca.setScaleMode(0)
+
+     jessibuca.setScaleMode(1)
+
+     jessibuca.setScaleMode(2)
+     */
+    setScaleMode(mode: number): void;
+
+    /**
+     * 暂停播放
+     *
+     * 可以在pause 之后，再调用 `play()`方法就继续播放之前的流。
+     @example
+     jessibuca.pause().then(()=>{
+        console.log('pause success')
+
+        jessibuca.play().then(()=>{
+
+        }).catch((e)=>{
+
+        })
+
+    }).catch((e)=>{
+        console.log('pause error',e);
+    })
+     */
+    pause(): Promise<void>;
+
+    /**
+     * 关闭视频,不释放底层资源
+     @example
+     jessibuca.close();
+     */
+    close(): void;
+
+    /**
+     * 关闭视频，释放底层资源
+     @example
+     jessibuca.destroy()
+     */
+    destroy(): void;
+
+    /**
+     * 清理画布为黑色背景
+     @example
+     jessibuca.clearView()
+     */
+    clearView(): void;
+
+    /**
+     * 播放视频
+     @example
+
+     jessibuca.play('url').then(()=>{
+        console.log('play success')
+    }).catch((e)=>{
+        console.log('play error',e)
+    })
+     //
+     jessibuca.play()
+     */
+    play(url?: string): Promise<void>;
+
+    /**
+     * 重新调整视图大小
+     */
+    resize(): void;
+
+    /**
+     * 设置最大缓冲时长，单位秒，播放器会自动消除延迟。
+     *
+     * 等同于 `videoBuffer` 参数。
+     *
+     @example
+     // 设置 200ms 缓冲
+     jessibuca.setBufferTime(0.2)
+     */
+    setBufferTime(time: number): void;
+
+    /**
+     * 设置旋转角度，只支持，0(默认) ，180，270 三个值。
+     *
+     * > 可用于实现监控画面小窗和全屏效果，由于iOS没有全屏API，此方法可以模拟页面内全屏效果而且多端效果一致。   *
+     @example
+     jessibuca.setRotate(0)
+
+     jessibuca.setRotate(90)
+
+     jessibuca.setRotate(270)
+     */
+    setRotate(deg: number): void;
+
+    /**
+     *
+     * 设置音量大小，取值0 — 1
+     *
+     * > 区别于 mute 和 cancelMute 方法，虽然设置setVolume(0) 也能达到 mute方法，但是mute 方法是不调用底层播放音频的，能提高性能。而setVolume(0)只是把声音设置为0 ，以达到效果。
+     * @param volume 当为0时，完全无声;当为1时，最大音量，默认值
+     @example
+     jessibuca.setVolume(0.2)
+
+     jessibuca.setVolume(0)
+
+     jessibuca.setVolume(1)
+     */
+    setVolume(volume: number): void;
+
+    /**
+     * 返回是否加载完毕
+     @example
+     var result = jessibuca.hasLoaded()
+     console.log(result) // true
+     */
+    hasLoaded(): boolean;
+
+    /**
+     * 开启屏幕常亮，在手机浏览器上, canvas标签渲染视频并不会像video标签那样保持屏幕常亮。
+     * H5目前在chrome\edge 84, android chrome 84及以上有原生亮屏API, 需要是https页面
+     * 其余平台为模拟实现，此时为兼容实现，并不保证所有浏览器都支持
+     @example
+     jessibuca.setKeepScreenOn()
+     */
+    setKeepScreenOn(): boolean;
+
+    /**
+     * 全屏(取消全屏)播放视频
+     @example
+     jessibuca.setFullscreen(true)
+     //
+     jessibuca.setFullscreen(false)
+     */
+    setFullscreen(flag: boolean): void;
+
+    /**
+     *
+     * 截图，调用后弹出下载框保存截图
+     * @param filename 可选参数, 保存的文件名, 默认 `时间戳`
+     * @param format   可选参数, 截图的格式，可选png或jpeg或者webp ,默认 `png`
+     * @param quality  可选参数, 当格式是jpeg或者webp时，压缩质量，取值0 ~ 1 ,默认 `0.92`
+     * @param type 可选参数, 可选download或者base64或者blob，默认`download`
+
+     @example
+
+     jessibuca.screenshot("test","png",0.5)
+
+     const base64 = jessibuca.screenshot("test","png",0.5,'base64')
+
+     const fileBlob = jessibuca.screenshot("test",'blob')
+     */
+    screenshot(filename?: string, format?: string, quality?: number, type?: string): void;
+
+    /**
+     * 开始录制。
+     * @param fileName 可选，默认时间戳
+     * @param fileType 可选，默认webm，支持webm 和mp4 格式
+
+     @example
+     jessibuca.startRecord('xxx','webm')
+     */
+    startRecord(fileName: string, fileType: string): void;
+
+    /**
+     * 暂停录制并下载。
+     @example
+     jessibuca.stopRecordAndSave()
+     */
+    stopRecordAndSave(): void;
+
+    /**
+     * 返回是否正在播放中状态。
+     @example
+     var result = jessibuca.isPlaying()
+     console.log(result) // true
+     */
+    isPlaying(): boolean;
+
+    /**
+     *   返回是否静音。
+     @example
+     var result = jessibuca.isMute()
+     console.log(result) // true
+     */
+    isMute(): boolean;
+
+    /**
+     * 返回是否正在录制。
+     @example
+     var result = jessibuca.isRecording()
+     console.log(result) // true
+     */
+    isRecording(): boolean;
+
+
+    /**
+     * 监听 jessibuca 初始化事件
+     * @example
+     * jessibuca.on("load",function(){console.log('load')})
+     */
+    on(event: 'load', callback: () => void): void;
+
+    /**
+     * 视频播放持续时间，单位ms
+     * @example
+     * jessibuca.on('timeUpdate',function (ts) {console.log('timeUpdate',ts);})
+     */
+    on(event: 'timeUpdate', callback: () => void): void;
+
+    /**
+     * 当解析出视频信息时回调，2个回调参数
+     * @example
+     * jessibuca.on("videoInfo",function(data){console.log('width:',data.width,'height:',data.width)})
+     */
+    on(event: 'videoInfo', callback: (data: {
+        /** 视频宽 */
+        width: number;
+        /** 视频高 */
+        height: number;
+    }) => void): void;
+
+    /**
+     * 当解析出音频信息时回调，2个回调参数
+     * @example
+     * jessibuca.on("audioInfo",function(data){console.log('numOfChannels:',data.numOfChannels,'sampleRate',data.sampleRate)})
+     */
+    on(event: 'audioInfo', callback: (data: {
+        /** 声频通道 */
+        numOfChannels: number;
+        /** 采样率 */
+        sampleRate: number;
+    }) => void): void;
+
+    /**
+     * 信息，包含错误信息
+     * @example
+     * jessibuca.on("log",function(data){console.log('data:',data)})
+     */
+    on(event: 'log', callback: () => void): void;
+
+    /**
+     * 错误信息
+     * @example
+     * jessibuca.on("error",function(error){
+        if(error === Jessibuca.ERROR.fetchError){
+            //
+        }
+        else if(error === Jessibuca.ERROR.webcodecsH265NotSupport){
+            //
+        }
+        console.log('error:',error)
+    })
+     */
+    on(event: 'error', callback: (err: Jessibuca.ERROR) => void): void;
+
+    /**
+     * 当前网速， 单位KB 每秒1次,
+     * @example
+     * jessibuca.on("kBps",function(data){console.log('kBps:',data)})
+     */
+    on(event: 'kBps', callback: (value: number) => void): void;
+
+    /**
+     * 渲染开始
+     * @example
+     * jessibuca.on("start",function(){console.log('start render')})
+     */
+    on(event: 'start', callback: () => void): void;
+
+    /**
+     * 当设定的超时时间内无数据返回,则回调
+     * @example
+     * jessibuca.on("timeout",function(error){console.log('timeout:',error)})
+     */
+    on(event: 'timeout', callback: (error: Jessibuca.TIMEOUT) => void): void;
+
+    /**
+     * 当play()的时候，如果没有数据返回，则回调
+     * @example
+     * jessibuca.on("loadingTimeout",function(){console.log('timeout')})
+     */
+    on(event: 'loadingTimeout', callback: () => void): void;
+
+    /**
+     * 当播放过程中，如果超过timeout之后没有数据渲染，则抛出异常。
+     * @example
+     * jessibuca.on("delayTimeout",function(){console.log('timeout')})
+     */
+    on(event: 'delayTimeout', callback: () => void): void;
+
+    /**
+     * 当前是否全屏
+     * @example
+     * jessibuca.on("fullscreen",function(flag){console.log('is fullscreen',flag)})
+     */
+    on(event: 'fullscreen', callback: () => void): void;
+
+    /**
+     * 触发播放事件
+     * @example
+     * jessibuca.on("play",function(flag){console.log('play')})
+     */
+    on(event: 'play', callback: () => void): void;
+
+    /**
+     * 触发暂停事件
+     * @example
+     * jessibuca.on("pause",function(flag){console.log('pause')})
+     */
+    on(event: 'pause', callback: () => void): void;
+
+    /**
+     * 触发声音事件，返回boolean值
+     * @example
+     * jessibuca.on("mute",function(flag){console.log('is mute',flag)})
+     */
+    on(event: 'mute', callback: () => void): void;
+
+    /**
+     * 流状态统计，流开始播放后回调，每秒1次。
+     * @example
+     * jessibuca.on("stats",function(s){console.log("stats is",s)})
+     */
+    on(event: 'stats', callback: (stats: {
+        /** 当前缓冲区时长，单位毫秒 */
+        buf: number;
+        /** 当前视频帧率 */
+        fps: number;
+        /** 当前音频码率，单位byte */
+        abps: number;
+        /** 当前视频码率，单位byte */
+        vbps: number;
+        /** 当前视频帧pts，单位毫秒 */
+        ts: number;
+    }) => void): void;
+
+    /**
+     * 渲染性能统计，流开始播放后回调，每秒1次。
+     * @param performance 0: 表示卡顿,1: 表示流畅,2: 表示非常流程
+     * @example
+     * jessibuca.on("performance",function(performance){console.log("performance is",performance)})
+     */
+    on(event: 'performance', callback: (performance: 0 | 1 | 2) => void): void;
+
+    /**
+     * 录制开始的事件
+
+     * @example
+     * jessibuca.on("recordStart",function(){console.log("record start")})
+     */
+    on(event: 'recordStart', callback: () => void): void;
+
+    /**
+     * 录制结束的事件
+
+     * @example
+     * jessibuca.on("recordEnd",function(){console.log("record end")})
+     */
+    on(event: 'recordEnd', callback: () => void): void;
+
+    /**
+     * 录制的时候，返回的录制时长，1s一次
+
+     * @example
+     * jessibuca.on("recordingTimestamp",function(timestamp){console.log("recordingTimestamp is",timestamp)})
+     */
+    on(event: 'recordingTimestamp', callback: (timestamp: number) => void): void;
+
+    /**
+     * 监听调用play方法 经过 初始化-> 网络请求-> 解封装 -> 解码 -> 渲染 一系列过程的时间消耗
+     * @param event
+     * @param callback
+     */
+    on(event: 'playToRenderTimes', callback: (times: {
+        playInitStart: number, // 1 初始化
+        playStart: number, // 2 初始化
+        streamStart: number, // 3 网络请求
+        streamResponse: number, // 4 网络请求
+        demuxStart: number, // 5 解封装
+        decodeStart: number, // 6 解码
+        videoStart: number, // 7 渲染
+        playTimestamp: number,// playStart- playInitStart
+        streamTimestamp: number,// streamStart - playStart
+        streamResponseTimestamp: number,// streamResponse - streamStart
+        demuxTimestamp: number, // demuxStart - streamResponse
+        decodeTimestamp: number, // decodeStart - demuxStart
+        videoTimestamp: number,// videoStart - decodeStart
+        allTimestamp: number // videoStart - playInitStart
+    }) => void): void
+
+    /**
+     * 监听方法
+     *
+     @example
+
+     jessibuca.on("load",function(){console.log('load')})
+     */
+    on(event: string, callback: Function): void;
+
+}
+
+export default Jessibuca;

utils/jessibuca-plugin.js

@@ -0,0 +1,60 @@
+/**
+ * Jessibuca视频播放器插件
+ * 用于初始化Jessibuca所需的脚本和依赖
+ */
+
+// 加载Jessibuca脚本
+export const loadJessibucaScript = () => {
+  return new Promise((resolve, reject) => {
+    if (typeof window === 'undefined') {
+      return reject(new Error('非浏览器环境，无法加载Jessibuca'))
+    }
+    
+    // 检查是否已经加载
+    if (window.Jessibuca) {
+      return resolve(window.Jessibuca)
+    }
+    
+    // 加载主脚本
+    const script = document.createElement('script')
+    script.src = '/static/js/jessibuca/jessibuca.js'
+    script.async = true
+    
+    script.onload = () => {
+      console.log('Jessibuca脚本加载成功')
+      resolve(window.Jessibuca)
+    }
+    
+    script.onerror = (error) => {
+      console.error('Jessibuca脚本加载失败:', error)
+      reject(error)
+    }
+    
+    document.head.appendChild(script)
+  })
+}
+
+export default {
+  install(app) {
+    // 全局属性
+    app.config.globalProperties.$jessibuca = {
+      // 加载Jessibuca脚本方法
+      loadScript: loadJessibucaScript,
+      
+      // 创建播放器实例
+      createPlayer(options) {
+        return loadJessibucaScript()
+          .then(() => {
+            return new window.Jessibuca(options)
+          })
+      }
+    }
+    
+    // 预加载脚本
+    setTimeout(() => {
+      loadJessibucaScript().catch(err => {
+        console.error('预加载Jessibuca失败:', err)
+      })
+    }, 1000)
+  }
+}