bonc-h5player-components

描述

本组件库包含若干基于内核进行封装的React组件，可以针对h264编码的视频流进行解析播放。

安装

# 仓库地址切换到公司的私有npm上
npm config set registry https://code.bonc.com.cn/nexus/repository/npm-unstable/
# 安装
npm i bonc-h5player-components --save

1.VideoPlayer

VideoPlayer用于播放单个实时视频，具有清除、全屏、截图等功能

代码示例：

import React from 'react';
import ReactDOM from 'react-dom';
import {VideoPlayer} from '../../../src/index'
import  './index.css';

class App extends React.Component{
    constructor(){
        super();
        this.channelInfo1 = {
            DeviceIP: "192.168.1.188",
            DevicePort: "554",
            DeviceType: "1101",
            ChannelNum: "0",       
            PassWord: "123",            
            StreamServerIP: "172.16.96.165",
            StreamServerPort: "10088",
            UserName: "admin" 
        }
        this.state = {
            playState:false
        }
    }

    playeVideo1(){
        debugger
        this.videoEl.playVideo(this.channelInfo1)
    }
    playeVideo2(){
        this.videoEl.playVideo(this.channelInfo2)
    }
    render(){
        return <div className='Full'>
            <div className='left'>
                <button id='playbtn1' onClick={()=>this.playeVideo1.bind(this)()}>播一路</button>
            </div>
            <div className='right'>
                <VideoPlayer 
                    ref={el => this.videoEl = el} 
                    style = {{
                        top: '0%',
                        left: '0%',
                        width: '100%',
                        height:'100%'
                    }}/>
            </div>            
        </div>
    }
    
};

ReactDOM.render(<App />, document.getElementById("root"))

.Full{
    display: flex; 
    height: 100%;
}
.left{
    width: 100px;
}
.right{
    flex: 1;
    position: relative;
}

属性

style

参数	说明	类型
top	组件的样式的top值	string
left	组件的样式的left值	string
width	组件的样式的width值	string
height	组件的样式的height值	string

boncH5Player

播放器内核实例

实例方法

playVideo(channelInfo)

配置项	必选	类型	说明
DeviceType	是	String	摄像头类型编号
DeviceIP	是	String	视频的通道ID
StreamServerIP	是	String	流服务IP
StreamServerPort	是	String	流服务端口
DevicePort	是	String	设备端口
UserName	是	String	用户名
PassWord	是	String	密码
ChannelNum	是	String	通道数

2.VideoPanel

VideoPanel 用于播放多个实时视频

示例代码

import React from 'react';
import ReactDOM from 'react-dom';
import {VideoPanel} from '../../../src/index'
import  './index.css';

class App extends React.Component{
    constructor(){
        super();
        this.channelInfo1 = {
            DeviceIP: "192.168.1.188",
            DevicePort: "554",
            DeviceType: "1101",
            PassWord: "123",            
            StreamServerIP: "172.16.96.165",
            StreamServerPort: "10088",
            UserName: "admin" 
        }
        this.channelInfo2 = {            
            ChannelNum: "0",
            DeviceIP: "192.168.1.202",
            DevicePort: "554",
            DeviceType: "1101",            
            PassWord: "123",          
            StreamServerIP: "172.16.96.165",
            StreamServerPort: "10088",
            UserName: "admin"        
        }
        this.state = {
            playState:false
        }
    }    
    playeVideo1(){        
        this.videoEl.videoPlay(this.channelInfo1)
    }
    playeVideo2(){
        this.videoEl.videoPlay(this.channelInfo2)
    }
    render(){
        return <div className='Full'>            
            <div className='left'>
                <button id='playbtn1' onClick={()=>this.playeVideo1.bind(this)()}>播一路</button>
                <button id='playbtn2' onClick={()=>this.playeVideo2.bind(this)()}>播二路</button>
            </div>
            <div className='right'>
                <VideoPanel ref={el => this.videoEl = el}/>
            </div>            
        </div>
    }    
};

ReactDOM.render(<App />, document.getElementById("root"))

实例方法

videoPlay(channelInfo)

配置项	必选	类型	说明
DeviceType	是	String	摄像头类型编号
DeviceIP	是	String	视频的通道ID
StreamServerIP	是	String	流服务IP
StreamServerPort	是	String	流服务端口
DevicePort	是	String	设备端口
UserName	是	String	用户名
PassWord	是	String	密码
ChannelNum	是	String	通道数

实例属性

els

获取视频的数组，数组中每个元素为一个videoPlayer组件的实例

3.VideoPanelBack

VideoPanelBack用于回放多个视频

属性

selectedChannels

描述：用于保存需要播放的通道信息 类型：数组 单个数组元素结构：

配置项	必选	类型	说明
channelId	是	String	通道ID
name	是	String	通道名称

timeInfo

描述：用于保存查询视频的开始时间和结束时间 类型：对象 对象结构：

配置项	必选	类型	说明
startTime	是	String	起始时间
endTime	是	String	结束时间

实例方法

RecordSearch()

在selectedChannels和timeInfo设置之后，执行该方法，可以完成该段时间段的视频查询

4. VideoIntelli

用于安防的算法配置规则，可在视频上绘制单向绊线、双向绊线、

##属性 videoWidth 视频区域的宽度 必填 number videoHeight 视频区域的高度 必填 number channelInfo 通道信息 必填 object showOsd 是否展示osd信息 选填 Boolean 默认不展示 drawRule 是否将事先绘制好的规则画在视频上 选填 Boolean 默认false

配置项	必选	类型	说明
DeviceType	是	String	摄像头类型编号
DeviceIP	是	String	视频的通道ID
StreamServerIP	是	String	流服务IP
StreamServerPort	是	String	流服务端口
DevicePort	是	String	设备端口
UserName	是	String	用户名
PassWord	是	String	密码
ChannelNum	是	String	通道数

实例属性

boncH5Player 内核实例

具体用法参见内核实例的文档

实例方法

getElements() 返回所有绘制的要素所形成的素数组

数组元素的结构

请核实坐标原点位置，canvas的坐标原点位置在左上角，如果坐标不满足请做坐标变换

eleType	几何名称	几何信息描述
rect	矩形	对角线坐标：sX 起点x坐标, sY 起点y坐标, eX 终点x坐标, eY终点y坐标
polygon	区域	points属性为存储坐标的数组，数组中的元素为对象，包括x和y
polygonDirection	区域+方向线	points属性为区域的坐标同上，arrow属性为箭头的坐标对象，包括：sX 箭头起点x, sY 箭头起点y, eX 箭头终点x, eY 箭头终点y
lineSingleDirection	单向绊线	sX 起点x坐标, sY 起点y坐标, eX 终点x坐标, eY终点y坐标，单向绊线的方向为绊线方向的逆时针方向
lineDoubleDirection	双向绊线	起点、终点信息同上