- 支持h264视频播放
- 支持h265视频播放
- 支持PPapi插件播放
- 支持wasm无插件化播放
- 支持多路播放
npm start
- es6+ npm run build:pod
- es5 npm run build
- test npm run build:test
- build:pod npm run build:pod //线上版本 经过压缩处理
- build:stream npm run build:stream //将插件编译到上层应用目录的public下
1、参数配置
| 参数名称 | 必填 | 默认值 | 其他值 | 含义 |
|---|---|---|---|---|
| id | yes | null(string) | 用于topic注册、消息交互监听等 | |
| src | yes | null(string) | 视频流地址，接收flv流 | |
| title | no | 空字符串(string) | 视频上方显示title | |
| width | no | 100%(string) | 宽度 | |
| height | no | 100%(string) | 高度 | |
| main-style | no | 空字符串(string) | video样式 | |
| palymode | no | autoplay(string) | manual | 视频在就绪后是否马上播放。 |
| canpaused | no | true | false | 是否有暂停按钮 0.1.30 新增 |
| stream | no | live(string) | replay | 是否直播 还是回放 |
| play-config | no | JSON.stringify({enableStashBuffer: false}) | 配置 | 播放器播放配置0.1.32 新增 |
| encoding | no | h264(string) | h265 | 视频格式类型 |
| plugin | no | PPApi(string) | wasm，PPApi，auto | 俩种插件的使用选择 如果配置结果为wasm 则不能再切换成另一种模式 如果配置结果为PPApi则可以切换俩种模式 如果配置结果为auto [0.1.32]新增() 则根据视频码率自动切换俩种形态 |
| multiscreen | no | true(boolean) | false | 是否支持多屏播放 |
| max-progressive | no | 1080(number) | 超过该值 做插件转换[0.1.32] 新增 | |
| library | no | 空字符串(string) | 静态资源加载路径，微服务是需要传 目前需要加载libqydecoder.wasm layout.json（支持多屏的配置）文件 |
|
| current-time | no | 当天凌晨12点 | 时间戳 | 默认拖拽起始点 |
| toolbars | no | {} | { shutdown: true |false, fullscreen: true |false others：{ shutdown: true, multiscreen: true, screenshot: true, plugin: true, videoInfo: true }} |
操作列按钮 fullscreen 是否支持全屏 shutdown 是否执行关闭当前视频 multiscreen 是否支持分屏 screenshot 是否支持截图 plugin 是否支持切换能力集 videoInfo: 是否支持查看视频信息 |
| fixed-operation | no | true(boolean) | false | 是否固定操作列 |
2、事件配置
import UniteVideo from '@sany/uniteVideo';
/**
* 注入监听事件
*/
const Observer = new UniteVideo.Observer('isLive-video');
/**
* 监听时间拖拽事件
*/
const timelineChange = ({data: {type, date}}: any) => {
if (type === 'current') {
dispatch({
type: EnumVideoState.video,
value: {
// data 返回为正规时间格式 此处可转换为业务需要的格式
startTime: UniteVideo.Utils.fomartTimeToyyyyMMddHHmmss(date), // ,
endTime: UniteVideo.Utils.fomartTimeToyyyyMMddHHmmss(AppUtil.timestampToTime(AppUtil.thisDayEarly())),
}
})
}
};
Observer.subscribe('timeline', timelineChange);
/**
* 或者点语法监听某一类的的数据 俩种皆可
*/
Observer.subscribe('timeline.current', timelineChange);3、Stream获取流信息
/**
* 获取streamUrl地址
* {
* cameraIp: '',
* stream: 'live' | 'replay',
* subStream: true, false,
* startTime: '',
* endTime: ''
* }
* @returns {Promise<void>}
*/
new UniteVideo.Stream('http://10.88.1.118:5180').url({cameraIp, stream, subStream, startTime, endTime});
/**
* 关闭流
* @param url
* @returns {Promise<void>}
*/
new UniteVideo.Stream('http://10.88.1.118:5180').shutdown({url});// 如果有h265格式视频 需将@sany/uniteVideo/build/h265.min.js 加入到当前项目中
// 可通过在index.html中直接<script></script>
// 或者通过其他手段动态导入，例如react-load-script 、@gaopeng123/hoc等1、react（tsx）中使用
- import UniteVideo from '@sany/uniteVideo';
const DevicesVideo = (props: any) => {
/**
* 公共数据
*/
const {state, dispatch, height} = props;
/**
* 视频参数
*/
const videoCfg = state[EnumVideoState.video];
/**
* 设置url 该url通过tree点击传递过来
*/
const [url, setUrl] = useState<string>('');
useEffect(() => {
/**
* 注入监听事件
*/
const Observer = new UniteVideoObserver('isLive-video');
/**
* 监听时间拖拽事件
*/
const timelineChange = ({data: {type, date}}: any) => {
if (type === 'current') {
dispatch({
type: EnumVideoState.video,
value: {
startTime: UniteVideo.Utils.fomartTimeToyyyyMMddHHmmss(date), // ,
endTime: UniteVideo.Utils.fomartTimeToyyyyMMddHHmmss(AppUtil.timestampToTime(new Date(date).getTime() + 1000 * 60 * 30)),
}
})
}
};
Observer.subscribe('timeline', timelineChange);
/**
* 监听分屏触发事件
* @param type
* @param value
*/
const splitScreenChange = ({data: {type, value}}: any) => {
if (type === 'stream') {
dispatch({
type: EnumVideoState.video,
value: {
subStream: value === 'subStream'
}
})
}
};
/**
* 可用点语法监听某一类的的数据
*/
Observer.subscribe('splitScreen.stream', splitScreenChange);
return () => {
Observer.unsubscribe('timeline', timelineChange);
Observer.unsubscribe('splitScreen', splitScreenChange)
}
}, []);
/**
* url变更后 执行视频的更新
*/
useEffect(() => {
const currentUrl = state[EnumVideoState.video]?.url;
setUrl(currentUrl);
}, [state[EnumVideoState.video]?.url]);
return (
<unite-video
id="isLive-video"
style={{height: height, width: '100%'}}
palymode="autoplay"
library={`${process.env.REACT_APP_QIANKUN_publicPath}`}
src={url}
stream={videoCfg.isLive}
encoding={videoCfg.encoding}
></unite-video>
)
};
export default DevicesVideo;2、Vue中使用
import '@sany/uniteVideo';
<unite-video
id="isLive-video"
width="100%"
height="600px"
stream="live"
palymode="autoplay"
src="http://10.88.1.118/flv/57d557d262ea4c12b59a2b4798b0efa2"
encoding="h264"
plugin="wasm">
</unite-video>3、layout配置
{
"defaultSelected": "4",// 默认选中项
"data": [
{
"name": "1分屏",
"key": "1",
"stream": "mainStream", // 主码流 subStream 子码流 后续如果某个分屏想使用主码流 则使用该字段配置
"icon": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAANUlEQVRIS+3SsQkAAAwCwbj/0GaEr1LlrQXhMG07h4kDpCsRCY1EEqEAFnyRRCiABV/0gGgBj4BfuRanDZkAAAAASUVORK5CYII=",
"children": [
{
"type": "row",
"height": "100%",
"children": [
{
"type": "col",
"width": 24,
"height": "100%"
}
]
}
]
},
{
"name": "4分屏",
"key": "4",
"selected": true, // 选中项
"icon": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAeklEQVRIS2P8////fwbiQQMDAwMIEw0YRy0gFFajQUQohBhGg2hwBFE9QWdQoIDUSOZkYGD4Top9pFogwcDA8IKWFqgzMDDcpKUFZgwMDKdoaYEbAwPDLlpaEMrAwLCalhakMDAwzKGlBcUMDAy9tLRgtE4mGLokBxEAWbp2OaL7UUIAAAAASUVORK5CYII=",
"children": [
{
"type": "row",
"height": "50%",
"children": [
{
"type": "col",
"width": 12
},
{
"type": "col",
"width": 12
}
]
},
{
"type": "row",
"height": "50%",
"children": [
{
"type": "col",
"width": 12
},
{
"type": "col",
"width": 12
}
]
}
]
},
{
"name": "6分屏",
"key": "6",
"icon": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAArElEQVRIS+3Tqw7CQBCF4a+GBAS8EkEgkUgkEslDIJFIJBJJwuWJuAgCrqRJm6C2gXbBdJOTmWx259/snEnSNE19v07oh64nDaD5ojJ//cRFwUfUYdMrCt3QRa9QHYBm0II9/ImL/t+DPR545vE9z/ZaaKOTxywvlJRNYmbTY+DQAYOSInecccn10RzMsQgAKjd5hmVMwBSrmIAJ1jEBY2xiAkbYxgQMsasCeAFpiYuxF7ZEFQAAAABJRU5ErkJggg==",
"children": [
{
"type": "row",
"height": "66.66666666%",
"children": [
{
"type": "col",
"width": 16
},
{
"type": "col",
"width": 8,
"children": [
{
"type": "row",
"height": "100%",
"children": [
{
"type": "col",
"width": 24,
"height": "50%"
},
{
"type": "col",
"width": 24,
"height": "50%"
}
]
}
]
}
]
},
{
"type": "row",
"height": "33.3333333333%",
"children": [
{
"type": "col",
"width": 8
},
{
"type": "col",
"width": 8
},
{
"type": "col",
"width": 8
}
]
}
]
},
{
"name": "8分屏",
"key": "8",
"icon": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAuUlEQVRIS+2VoQ7CQAyGvz0Adg+DIiFZ8LPg0fAA8ALzuIlpPIaAQPMQBIWdwxxpchMsveSaBTPuksr2S//+12bOOcfwd/UlZv1SWQJ4ScYh0V7zShpyp8o4hizd/PQndzJ9mSm56E9cdBl+b8IVxEUa4AzMlTSx4hR4+WgDpSdALhGy6RaolGTZmNrWrIEHsIs9mWvgYABIxzcLYAU0BoBIdwc2sR2UwNEIeALLWMACOBkBb6Do53wAJ7KJ838GpCwAAAAASUVORK5CYII=",
"children": [
{
"type": "row",
"height": "75%",
"children": [
{
"type": "col",
"height": "100%",
"width": 18
},
{
"type": "col",
"width": 6,
"height": "100%",
"children": [
{
"type": "row",
"height": "100%",
"children": [
{
"type": "col",
"width": 24,
"height": "33.333333333%"
},
{
"type": "col",
"width": 24,
"height": "33.333333333%"
},
{
"type": "col",
"width": 24,
"height": "33.333333333%"
}
]
}
]
}
]
},
{
"type": "row",
"height": "25%",
"children": [
{
"type": "col",
"width": 6
},
{
"type": "col",
"width": 6
},
{
"type": "col",
"width": 6
},
{
"type": "col",
"width": 6
}
]
}
]
},
{
"name": "9分屏",
"key": "9",
"icon": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAABAklEQVRIS7XVL0gEQRiG8d/ZVNAgWGwWwWgSk4gIFqPBYLQIxstymIyCxWgwGC2CiprEZBQsNovgv3DFsjKwB1tuFhm+gZfZ5WPnGWa/Z7dTVVVl+FjDVaZ+j+VMXacFsIGLSMAmziMB2ziNBOzgJBKwh6NIQBeHpYC7zAK3WMm1YVsttek1PvFVz7+Nhw6wjzGM1hlcp3kE3438YAKTg7R5MI330iPKmTyHl0jAIh4jAeu4jARs4SwSsIvjUkDOgxustvV62+c650EPKannm0lOpPs0+g2Pkkv/8mC8XmDYJot/OFP4KH0HOdFm8BYJmMVrJGAez5GABTxFApbwUAL4A7sDmrHi+FH1AAAAAElFTkSuQmCC",
"children": [
{
"type": "row",
"height": "33.33333333%",
"children": [
{
"type": "col",
"width": 8
},
{
"type": "col",
"width": 8
},
{
"type": "col",
"width": 8
}
]
},
{
"type": "row",
"height": "33.33333333%",
"children": [
{
"type": "col",
"width": 8
},
{
"type": "col",
"width": 8
},
{
"type": "col",
"width": 8
}
]
},
{
"type": "row",
"height": "33.33333333%",
"children": [
{
"type": "col",
"width": 8
},
{
"type": "col",
"width": 8
},
{
"type": "col",
"width": 8
}
]
}
]
},
{
"name": "12分屏",
"key": "12",
"children": [
{
"type": "row",
"height": "33.33333333%",
"children": [
{
"type": "col",
"width": 6
},
{
"type": "col",
"width": 6
},
{
"type": "col",
"width": 6
},
{
"type": "col",
"width": 6
}
]
},
{
"type": "row",
"height": "33.33333333%",
"children": [
{
"type": "col",
"width": 6
},
{
"type": "col",
"width": 6
},
{
"type": "col",
"width": 6
},
{
"type": "col",
"width": 6
}
]
},
{
"type": "row",
"height": "33.33333333%",
"children": [
{
"type": "col",
"width": 6
},
{
"type": "col",
"width": 6
},
{
"type": "col",
"width": 6
},
{
"type": "col",
"width": 6
}
]
}
]
},
{
"name": "13分屏",
"key": "13",
"icon": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAYCAYAAACfpi8JAAAAz0lEQVRIS+2V0QmCMRCDv38S3UA30E10E3UCHUEnUTfQDXQDnaAS6NOPdy20PggX6FMDDWlyN6SUEjauwBY4O5xdvtu0cIYQMrIvHBnnSY4snZC9gAcwdzi6F6YtHAnxGnEHjsDeeaTm6pRJK4vcIyM1QooVDyHfwto6Wbt9jUa4BTVCxwt0rZALYDZUGfF2xLOzkEW0JjsQ9R1HocoRpdnCLY/4Q001HI7WhLD2wmomGXjn1sycR9QsYdLC6THii7YDRU4I+cWuKdr+V1/zAVWpsrwtNJ3PAAAAAElFTkSuQmCC",
"children": [
{
"type": "row",
"height": "25%",
"children": [
{
"type": "col",
"width": 6
},
{
"type": "col",
"width": 6
},
{
"type": "col",
"width": 6
},
{
"type": "col",
"width": 6
}
]
},
{
"type": "row",
"height": "50%",
"children": [
{
"type": "col",
"width": 6,
"children": [
{
"type": "row",
"height": "100%",
"children": [
{
"type": "col",
"height": "50%",
"width": 24
},
{
"type": "col",
"height": "50%",
"width": 24
}
]
}
]
},
{
"type": "col",
"width": 12
},
{
"type": "col",
"width": 6,
"children": [
{
"type": "row",
"height": "100%",
"children": [
{
"type": "col",
"height": "50%",
"width": 24
},
{
"type": "col",
"height": "50%",
"width": 24
}
]
}
]
}
]
},
{
"type": "row",
"height": "25%",
"children": [
{
"type": "col",
"width": 6
},
{
"type": "col",
"width": 6
},
{
"type": "col",
"width": 6
},
{
"type": "col",
"width": 6
}
]
}
]
},
{
"name": "16分屏",
"key": "16",
"icon": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAABZklEQVRIS7XWP0hWYRTH8c+7q0OD4JqDTc1N5SS0CEE4NTQEgTS51BIJgig4SpOQODu1lEIU0SAECeKgQwaSJA4KUgQ5vPLAXbqeI/fC+x54lt/z58t5fufc+3S63W7X1biPd4E+izLq8akSxusTnQTwEOv9BDzGaj8Bz7DcT8BzLPYKcC84qGdSZvINnAaUTF/CH7xqWkW3sBcAMn0NP9oA7uJzAMj09/iKl00zyPog00uj7eNpU8A0XgcZZHoBnOFBBLhiTM9KCFkVDeB3AMr0eVy0MfkmDgJApq/gqA3gDrYCQKa/xXYbwCTKpnpkejF5F+Ub9l9kHjxBSbsemV4AJ5iKAB+DgzYx0UJPC69ksIHjavytVs5FXYkFvKjWlD9hJzl5EMNlZFc0hPNg81jVsfWpNzhsY/IIfgWAcm3l+urxAV/aAEbxvaXJ3zDTtIpuYycAXPeq+IlHTQFZQ10H+BdV3iXft7Dz+OemEQAAAABJRU5ErkJggg==",
"children": [
{
"type": "row",
"height": "25%",
"children": [
{
"type": "col",
"width": 6
},
{
"type": "col",
"width": 6
},
{
"type": "col",
"width": 6
},
{
"type": "col",
"width": 6
}
]
},
{
"type": "row",
"height": "25%",
"children": [
{
"type": "col",
"width": 6
},
{
"type": "col",
"width": 6
},
{
"type": "col",
"width": 6
},
{
"type": "col",
"width": 6
}
]
},
{
"type": "row",
"height": "25%",
"children": [
{
"type": "col",
"width": 6
},
{
"type": "col",
"width": 6
},
{
"type": "col",
"width": 6
},
{
"type": "col",
"width": 6
}
]
},
{
"type": "row",
"height": "25%",
"children": [
{
"type": "col",
"width": 6
},
{
"type": "col",
"width": 6
},
{
"type": "col",
"width": 6
},
{
"type": "col",
"width": 6
}
]
}
]
}
]
}