支持的流媒体

· 海康 sdk（海康NVR）
· easycvr 流媒体
· haoyou456 流媒体

版本记录

| 版本号 | 变更内容 | | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | 2.0.75 | - 修复海康 sdk 用 iframe 渲染时，在 webVideoCtrl.js 中获取 window.parentData 参数失败后导致的无法播放的问题 | | 2.0.74 | - 修复开发海康 sdk 获取 token 时，影响到了 haoyou 流媒体获取 token 的返回值，导致的好游流媒体无法播放的问题 | | 2.0.73 | - 海康倍速功能接入，但海康只支持 0.5 倍速、1 倍速、2 倍速的切换 | | 2.0.72 | - 修复 2.0.71 添加的 uuid，在海康 sdk 的登录过期后未加入 uuid 导致播放失败的问题 | | 2.0.71 | - 回放功能接入，回放控制（暂停、恢复播放）；倍速功能因海康 sdk 有问题，未添加 | | 2.0.70 | - 修复海康 sdk 登录账户数受限的问题 - 实现后端返回海康 token 过期后，重播的功能 | | 2.0.69 | - 修复海康通道有时播不出来的问题（控制台报错 o.JSplay...） | | 2.0.68 | - 通道播放完成后，未还原回放控制状态 | | 2.0.67 | - 修复 iframe 样式影响到项目的问题 | | 2.0.66 | - 修复 2.0.63 没有修好的问题 | | 2.0.65 | - 测试 npm install 过程中是否会在控制台打印版本号 | | 2.0.64 | - 修复在切换通道时，中断上一个通道的拉流过程后，偶尔会提示“获取直播流媒体地址失败，请稍后重试”的问题 | | 2.0.63 | - 海康 sdk 接入完成 - 修复播放器播放完成后 loaded 回调中抛出事件和打开插槽的时机调整（解决某些情况下，通道播放完成后，在通道画面坐标系初始化的功能可能无法使用，比如预案功能，测量工具等） | | 2.0.62 | - 修复球机通道右下角控制轮盘位置始终在通道右上角的问题 | | 2.0.61 | - 先把坐标系尺寸设置完成后；打开插槽框；然后再往外抛出播放完成事件； | | 2.0.60 | - 修复回放时，超过拉流次数但并未抛出无信号事件的问题 | | 2.0.59 | - 修复球机通道右下角控制轮盘在标签弹框中切换全屏时，位置有误的问题（2.0.58 没修好） | | 2.0.58 | - 修复球机通道右下角控制轮盘在标签弹框中切换全屏时，位置有误的问题 | | 2.0.57 | - 修复通道播放完成时，插槽某些时候无法准确的获取通道坐标系 | | 2.0.56 | - 流媒体改造；把直播和回放的流媒体管理合并，合二为一； | | 2.0.55 | - 修复球机通道右下角控制轮盘被底部地图面板盖住的问题 | | 2.0.54 | - 该版本不能使用，请跳过 | | 2.0.53 | - 保活接口路由 servicemng - 去除权限验证代 码 - 球机控制轮盘在通道画面全屏切换时，尺寸有误的问题 - 播放器需要注入 token 时，只提示一次 | | 2.0.52 | - 调整保活接口路由为 servicemng - 调整接入项目时 注入 token 的过程，使接入播放器更丝滑 | | 2.0.51 | - 保活接口路由调整为适配主分支的 videomap | | 2.0.50 | - 添加了 easycvr timeout 最大调用次数限制；替换了 easycvr 的 sdk，该 sdk 修复了云端回放卡顿问题和 chrome136 版本及以上可以播放 webrtc 的问题 - 适配 ai 小系统，模块拆分的保活接口 servicemng 路由修改 | | 2.0.49 | - 修复了回放中切换了时间,没有清空上一次保活 - 调整了回放的开始暂停控制方式;只需要修改通道信息(回放时间也在通道信息中,修改回放时间也属于修改通道信息)就会触发 | | 2.0.48 | - 轮询方法添加了 cancel；在某些通道持续轮询播不出来时，切换了别的通道重新播放，可以自动中断之前的轮询 | | 2.0.47 | - haoyou 流媒体接入完成（直播和回放） - 适配旧系统的 videomap 保活 | | 2.0.46 | - 适配 ai 小系统，模块拆分，修改了保活转发接口 | | 2.0.30 | - 适配 ai 小系统，模块拆分，修改了保活转发接口 |

使用方法

1. 进入项目，安装播放器 npm i yl-player -S

2. 在项目的配置文件中：

• vite 项目，在 vite.config.js 中引入：

  import { injectScript } from 'yl-player/scripts/inject-script'
  export default defineConfig({
    plugins: [
      injectScript({
        // 如果项目部署有相对路径则一定要传 baseUrl，否则不用传参，但这个方法一定要调用并写入 plugins 数组；
        baseUrl: '/static',
      }),
    ],
  })

• vue-cli 项目，在 vue.config.js 中引入：

  const { injectScript } = require('yl-player/scripts/inject-script')
  module.exports  = {
    configureWebpack: (config) => {
      injectScript({
        // 如果项目部署有相对路径则一定要传 baseUrl，否则不用传参，但这个方法一定要调用并写入 plugins 数组；
        baseUrl: '/static',
      })
    }
  }

  :warning: 注意：一般情况下，这样配置就 ok 了；然鹅，你们有一个伟大的龙哥；针对你龙哥的后台系统（基于 webpack 和 vue-cli），有特殊的配置办法：

  在你龙哥的后台系统 3d_sys/vue.config.js 中添加：

  // 操作开始 ————————————————————————
  //引入播放器脚本方法
  const { injectScript } = require('yl-player/scripts/inject-script')
  module.exports = async () => {
    // 注入播放器配置
    await injectScript({
      baseUrl: '/static'
    })
  
    return {
      chainWebpack: async (config) => {
        //你龙哥遗留的其他代码...
        //避免你龙哥脚手架对代码疯狂压缩，导致运行起来报错
        config.module
          .rule('images')
          .include.add(path.resolve(__dirname, 'src')) // 保留原有 src 目录
          .add(path.resolve(__dirname, 'yl-player')) // 新增 yl-player 包目录
          .end()
  
        return config
      }
    }
  }
  // ———————————————————————— 操作结束

3. 在项目的main.js或者App.vue中引入：

import { createApp } from "vue";
import App from "./App.vue";

// 注册播放器所需token 开始 ——————————
import { YlPlayer, injectToken } from 'yl-player'
//取当前系统的登录后的token；你也可以用其他办法获取
const accessToken = localStorage.getItem('accessToken')
if (accessToken) {
  //注入token
  injectToken(accessToken)
}
app.component('YlPlayer', YlPlayer)
// 注册播放器所需token 结束 ——————————

app.mount("#app");

在登录页中添加（在项目初始化时 main.js 和 App.vue 是没有 token 的，系统会自动跳转到登录页，在登录页中需要添加注入 token 的操作）：

<script setup>
import { injectToken } from 'yl-player'

const submit = () => {
  //登录方法
  login().then(token => {
    //注入token
    injectToken(token);
    //然后跳转到首页
    ...
  })
}
</script>

:warning: 注意：一般情况下，这样配置就 ok 了；然鹅，你们有一个伟大的龙哥；针对你龙哥的后台系统（基于 webpack 和 vue-cli），有特殊的配置办法：

在你龙哥的后台系统 3d_sys/projects/sys/bootstrap.js 中：

// 操作开始 ————————————————————————
import { YlPlayer, injectToken } from 'yl-player'
import config from './config.js'
created(() => {
  const beforeToken = localStorage.getItem(config.auth.tokenKey)
  if (beforeToken) {
    injectToken(beforeToken)
    // component 方法你龙哥已经在顶部导入过了，就是一般项目中 main.js 中注册组件的方法 app.component()
    component('YlPlayer', YlPlayer)
  }
})
// ———————————————————————— 操作结束

4. 在项目中使用播放器

• 第 3 步中已经全局注册后，直接在 vue 文件中：

<template>
  <yl-player v-model='channel'></yl-player>
</template>

<script setup>
//通道详情
const channel = ref({
...
})
</script>

• 如果你真的习惯于搞自己难受，也可以在某个页面中手动导入一下：

<template>
  <yl-player v-model='channel'></yl-player>
</template>

<script setup>
// 手动导入（不搞自己难受就不开心）
import YlPlayer from 'yl-player'
//通道详情
const channel = ref({
...
})
</script>