rtsp-web-player
介绍
支持WEB浏览器播放RTSP流前端播放器,需要依赖客户端插件服务(exe文件进行安装。插件需要本地一些操作权限,为了更好使用该插件,安装时请以管理员身份运行安装),客户端插件服务安装启动后可接入当前前端插件包进行对接。
软件架构
前端插件以typescript 编写支持npm安装引入、cdn方式引入,不限于技术栈如vuejs、react、angularjs目前市面上主流MVVM框架结构
安装
npm命令行,
npm install rtsp-web-player --save
or
yarn add rtsp-web-player
使用说明
入口文件样式引入
import 'rtsp-web-player/dist/style/index.css'
vue3引入示例
<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 | 背景颜色 |