### 支持的流媒体

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

### 版本记录

| <span style='white-space: nowrap;'>版本号</span> | 变更内容                                                                                                                                                                                                                                  |
| ------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| 2.0.85                                           | - 适配多个备用ip                                                                                                                                                                                                                          |
| 2.0.84                                           | - 修复cvr流媒体返回的云端回放地址中因hls关键字的判定引起的拼接地址失败的问题                                                                                                                                                              |
| 2.0.83                                           | - 修复大华NVR在播放回放时，因外部使用播放器时未传入control.speed参数导致的前10秒会卡屏的问题 <br > - 解决海康NVR倍速播放混乱的问题 <br > - 去除easycvr主动停止取流的方法调用 <br > - 精准控制easycvr播放器对tiemout回调重新拉流的方法调用 |
| 2.0.82                                           | - 添加播放器结构变量的保护                                                                                                                                                                                                                |
| 2.0.81                                           | - 修复因2.0.80兼容备用ip时，流媒体地址错乱的问题                                                                                                                                                                                          |
| 2.0.80                                           | - 添加备用ip，访问流媒体                                                                                                                                                                                                                  |
| 2.0.79                                           | - 去除大华播放器 101 报错提示 <br > - 修复ivss系统云端录像模式接入NVR的通道时，大华web无插件版sdk无法播放NVR通道回放的问题                                                                                                                |
| 2.0.78                                           | - 修复大华播放器接入业务上的部分 bug <br > - chrome 自动播放时会失败的问题                                                                                                                                                                |
| 2.0.77                                           | - 修改大华 sdk 中相互引用的 js 文件的绝对路径 由 /module 改为 /static/module                                                                                                                                                              |
| 2.0.76                                           | - 接入大华 NVR                                                                                                                                                                                                                            |
| 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 登录账户数受限的问题 <br > - 实现后端返回海康 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 接入完成 <br > - 修复播放器播放完成后 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 <br /> - 去除权限验证代 码 <br /> - 球机控制轮盘在通道画面全屏切换时，尺寸有误的问题<br /> - 播放器需要注入 token 时，只提示一次                                                                                |
| 2.0.52                                           | - 调整保活接口路由为 servicemng <br /> - 调整接入项目时 注入 token 的过程，使接入播放器更丝滑                                                                                                                                             |
| 2.0.51                                           | - 保活接口路由调整为适配主分支的 videomap                                                                                                                                                                                                 |
| 2.0.50                                           | - 添加了 easycvr timeout 最大调用次数限制；替换了 easycvr 的 sdk，该 sdk 修复了云端回放卡顿问题和 chrome136 版本及以上可以播放 webrtc 的问题 <br /> - 适配 ai 小系统，模块拆分的保活接口 servicemng 路由修改                              |
| 2.0.49                                           | - 修复了回放中切换了时间,没有清空上一次保活<br /> - 调整了回放的开始暂停控制方式;只需要修改通道信息(回放时间也在通道信息中,修改回放时间也属于修改通道信息)就会触发                                                                        |
| 2.0.48                                           | - 轮询方法添加了 cancel；在某些通道持续轮询播不出来时，切换了别的通道重新播放，可以自动中断之前的轮询                                                                                                                                     |
| 2.0.47                                           | - haoyou 流媒体接入完成（直播和回放）<br /> - 适配旧系统的 videomap 保活                                                                                                                                                                  |
| 2.0.46                                           | - 适配 ai 小系统，模块拆分，修改了保活转发接口                                                                                                                                                                                            |
| 2.0.30                                           | - 适配 ai 小系统，模块拆分，修改了保活转发接口                                                                                                                                                                                            |

### 使用方法

**1. 进入项目，安装播放器 `npm i yl-player -S`**
<br />

**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: <span style='color:#f00'>注意：</span>一般情况下，这样配置就 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
      }
    }
  }
  // ———————————————————————— 操作结束
  ```

<br />

**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: <span style='color:#f00'>注意：</span>一般情况下，这样配置就 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)
  }
})
// ———————————————————————— 操作结束
```

<br />

**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>
```
