# rtsp-web-player

#### 介绍
支持WEB浏览器播放RTSP流前端播放器，需要依赖客户端插件服务（exe文件进行安装。插件需要本地一些操作权限，为了更好使用该插件，安装时请以管理员身份运行安装），客户端插件服务安装启动后可接入当前前端插件包进行对接。


#### 软件架构

前端插件以typescript 编写支持npm安装引入、cdn方式引入，不限于技术栈如vuejs、react、angularjs目前市面上主流MVVM框架结构


#### 安装

npm命令行， 

```npm
npm install rtsp-web-player --save
or
yarn add rtsp-web-player
```

#### 使用说明

入口文件样式引入

```js
import 'rtsp-web-player/dist/style/index.css'
```

vue3引入示例

``` vue
<template>
  <div class="hello">
    <div id="playerRef" style="height: 700px"></div>
    <button @click="handlePlay">播放</button>
    <button @click="handlePlayByWnd">指定窗口播放</button>
    <button @click="handleSwitchWnd">切换窗口</button>
    <button @click="handleSnapshot">抓拍</button>
    <button @click="handleClear">清空</button>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted } from 'vue';
import RtspPlayer, { RtspWindowEnum } from 'rtsp-web-player';
export default defineComponent({
  name: 'HelloWorld',
  props: {
    msg: String
  },
  setup() {
    let player: RtspPlayer | null = null;
    const init = () => {
      player = new RtspPlayer({
        timeOut: 30000,
        theme: {
          primaryColor: '#8528EE',
          backgroundColor: '#18181C',
          borderColor: '#2D2D30',
          fontColor: '#909092'
        },
        wnd: RtspWindowEnum.SIX,
        target: document.querySelector('#playerRef') as HTMLElement,
        onWindowActiveEvent: (wndInfo) => {
        },
        onEvents: (event) => {
        }
      });
    };
    const handlePlay = () => {
      player?.play({
        rtspUrl: 'rtsp://xxx:xx@123@10.40.147.252/LiveMedia/ch1/Media1',
        cameraName: '252'
      });
    };
    const handleSwitchWnd = () => {
      player?.switchWindow(RtspWindowEnum.SIXTEEN);
    };
    const handlePlayByWnd = () => {
      player?.play({
        rtspUrl: 'rtsp://xxx:xx10.40.147.252/LiveMedia/ch1/Media1',
        cameraName: '252',
        wnd: 1
      });
    };
    const handleClear = () => {
      player?.clearPlayer();
    };
    const handleSnapshot = () => {
      player?.localSnapshot({ wnd: 1, isDownload: false }).then((res) => {
        console.log(
          '🚀 ~ file: HelloWorld.vue ~ line 56 ~ player?.localSnapshot ~ res',
          res
        );
      });
    };
    onMounted(() => {
      init();
    });
    return {
      handlePlay,
      handleSwitchWnd,
      handleClear,
      handlePlayByWnd,
      handleSnapshot
    };
  }
});
</script>
```

#### RtspPlayer实例

| 名称         | 构造参数        | 默认值  | 说明         |
| ---------- | ----------- | ---- | ---------- |
| RtspPlayer | RtspOptions | 无    | 初始化的基础参数信息 |

##### RtspOptions

| 名称                  | 类型                    | 默认值                            | 说明                                     |
| ------------------- | --------------------- | ------------------------------ | -------------------------------------- |
| wnd                 | RtspWindowEnum        | 默认9窗格                          | 默认窗口数，支持[1,4,6,9,12,16]                |
| target              | HTMLElement           | 无                              | 插件承载的元素容器                              |
| quality             | number                | 100                            | 画面的质量数值越高质量越好，最大值为100，数值越低性能越好，图片质量较差。 |
| imageStreamFormat   | RtspImageFormat       | jpeg                           | 帧画面格式，png和jpeg                         |
| frameRate           | number                | 120                            | 每秒推送的帧数最大25，数值越大性能要求越高，画面细节更多。         |
| timeOut             | number                |                                | 播放器请求超时时间                              |
| snapshotPath        | string                | c:\\soc\\snapshot              | 抓拍图片存储路径                               |
| videoPath           | string                | c:\\soc\\video                 | 本地录像存储路径                               |
| wndInfo             | string \| HTMLElement |                                | 空闲窗口显示内容                               |
| serverUrl           | string                |                                | 默认客户端插件服务地址，如果是手机端需要填写服务端地址            |
| theme               | PlayerTheme           |                                | 播放器主题颜色                                |
| onError             | function              | (err: ErrorMessage) => void    | 异常上报事件回调                               |
| onEvents            | function              | (data:  PlayerEvents) => void; | 播放器事件上报回调函数                            |
| onWindowActiveEvent | function              | (data: any) => void            | 窗口激活事件                                 |

#### 方法

| 名称                | 参数类型                      | 默认值  | 返回值     | 说明        |
| ----------------- | ------------------------- | ---- | ------- | --------- |
| play              | PlayOptions               | 无    | Promise | 实时画面/录像回放 |
| batchPlay         | ( PlayOptions[]，callback) | 无    | void    | 批量播放实况/录像 |
| switchWindow      | RtspWindowEnum            | 无    | void    | 设置窗口数     |
| closePlayerWindow | number                    | 无    | void    | 关闭指定窗口    |
| clearPlayer       | 无                         | 无    | void    | 清空所有窗口    |
| localSnapshot     | SnapshotOptions           | 无    | Promise | 抓拍        |
| startRec          | wnd                       | 激活窗口 | void    | 开启本地录像    |
| stopRec           | wnd                       | 激活窗口 | void    | 停止本地录像    |
| destroy           | 无                         | 无    | void    | 播放器销毁     |

##### RtspWindowEnum 枚举

| 枚举名称    | 类型     | 枚举说明  |
| ------- | ------ | :---- |
| ONE     | number | 1窗格数  |
| FOUR    | number | 4窗格数  |
| SIX     | number | 6窗格数  |
| NINE    | number | 9窗格数  |
| TWELVE  | number | 12窗格数 |
| SIXTEEN | number | 16窗格数 |

##### PlayOptions

| 名称         | 类型     | 默认值      | 说明           |
| ---------- | ------ | -------- | :----------- |
| cameraName | string |          | 摄像机名称        |
| rtspUrl    | string |          | 媒体流地址        |
| wnd        | number | 自动获取空闲窗口 | 如若传入，则指定窗口播放 |


##### PlayerTheme

| 名称              | 类型     | 默认值  | 说明   |
| --------------- | ------ | ---- | ---- |
| primaryColor    | string |      | 主题颜色 |
| fontColor       | string |      | 字体颜色 |
| borderColor     | string |      | 边框颜色 |
| backgroundColor | string |      | 背景颜色 |

>本地插件唤醒<a href="//rtsp-plugin"></a>