# bonc-htmlplayer

> 东方国信的html播放器内核

Latest version **5.0.29** (published 2024-06-04) · ISC license · 0 weekly downloads

## Install

```sh
npm install bonc-htmlplayer
pnpm add bonc-htmlplayer
yarn add bonc-htmlplayer
bun add bonc-htmlplayer
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; large bundle.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 5.0.29 |
| Published | 2024-06-04 |
| First published | 2020-09-16 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 23.4 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | fuqingyu |
| Maintainers | xdluo, xiaoruidudu, wuyage, liuyixuan, zhangyongworknpm, yuchao.liu, zhanghaixia |

## Links

- npm: https://www.npmjs.com/package/bonc-htmlplayer
- Repository: https://code.bonc.com.cn/liuyuchao/civms_h5player
- npm.io page: https://npm.io/package/bonc-htmlplayer

## Dependencies (2)

- [lodash](https://npm.io/package/lodash.md) ^4.17.19
- [objtree](https://npm.io/package/objtree.md) ^0.1.24

## Recent versions

- 5.0.29 (latest) — 2024-06-04
- 5.0.28 — 2024-03-12
- 5.0.27 — 2024-01-29
- 5.0.26 — 2024-01-19
- 5.0.25 — 2024-01-17
- 5.0.24 — 2024-01-16
- 5.0.23 — 2024-01-16
- 5.0.22 — 2023-12-18
- 5.0.21 — 2023-12-08
- 5.0.20 — 2023-12-06
- 5.0.19 — 2023-09-25
- 5.0.18 — 2023-09-12
- 5.0.1-7.1 — 2023-09-12
- 5.0.17 — 2023-09-08
- 5.0.16 — 2023-08-10
- … 55 more at https://npm.io/package/bonc-htmlplayer/versions

## README

# BoncH5Player 播放器内核接口文档

## 描述
本项目包含一个h5播放器，接收相机传过来的h264流媒体数据。即可以通过git拉取源码使用，也可以通过npm安装适应。公司的私有npm需要连接公司的内网使用，我把播放器内核包放到了 https://code.bonc.com.cn/nexus/repository/npm-test/ 切换npm仓库地址后即可通过npm安装。同时，该npm包在公有npm上也有推送，所以可以直接执行“npm i bonc-htmlplayer”。播放视频的过程中需保证网络流畅,否则会造成丢包，引起花屏。


## 快速开始（基于react的demo）
```javascript
import React,{Component} from 'react';
import configs from './config'
import Html5Player from 'bonc-htmlplayer'//播放器内核库

class App extends  Component{

  componentDidMount(){
    this._player = new Html5Player(configs);
  }
  playVideo(){
    var url = 'http://172.16.17.165:80//vms/deviceForChannel/openChanneltForHtml'
    var formData = new FormData();
    var channelidstr = '334a578c72334d21a201656e246f4c25-0000'

    formData.append('channelId',channelidstr);
    fetch(url, {
        method: 'POST',
        body: formData
    })
    .then(function(response)
    {
        return  response.json();
    })
    .then((jsonbonc)=> {
        
        if(!jsonbonc.StreamServerIP){
          throw new Error('错误')
        }
        
        this._player.openVideo(jsonbonc);
    }).catch((e)=>{
        console.error(e,'服务器错误')
    });
  }
  closeVideo(){
    this._player.closeVideo();
  }
  render(){
    return (
      <div className="App">
        <div>
          <video style={{width:800,height:600}}  id="playerid"   ></video> 
        <div style= {{}}>
          <button  className='controlbutton' onClick={()=>this.playVideo()} id="playbtn" >播放视频</button>
        </div>
        
      </div>
    );

  } 
}

export default App;

```
## 注：
demo中的channelidstr这个通道id来自于接口（两种方式），具体用哪个字段，请参考文档以下两个接口的说明：
1.根据组织id获取编码设备以及编码设备下的通道
2.获取通道列表
## API

## 构造方法
|配置项|必选|类型|说明|
|:----    |:---|:----- |-----   |
|videoId |是   |String | 视频的video标签的ID   |
|centerInfo|否|object|包含中心服务器的url和摄像头通道id的对象 centerInfo:{centerUrl:'http://172.16.96.165:80//vms/deviceForChannel/openChanneltForHtml' ,channelId:'334a578c72334d21a201656e246f4c25-0000'}

例1：
```javascript
var configs = {
    videoId : 'playerid',
};
this._player = new Html5Player(configs);
```
例2：
```javascript
var configs = {
    videoId : 'playerid',
    centerInfo:{
		centerUrl:'http://172.16.96.165:80//vms/deviceForChannel/openChanneltForHtml',
		channelId:'334a578c72334d21a201656e246f4c25-0000'
	}
};
this._player = new Html5Player(configs);
```

## 实例方法
### openVideo(jsonbonc):打开视频
json:object,如果构造方法的配置项中指定了中心服务器地址和通道id，openVideo方法不再需要参数

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

例：

``` javascript
var jsonbonc = {
    DeviceIP: "192.168.1.202",
    DevicePort: "554",
    DeviceType: "1101",
    StreamServerIP: "172.16.17.165",
    StreamServerPort: "10088",
    UserName: "admin",
    PassWord: "123",
    ChannelNum: "0"
}
openVideo(jsonbonc)
```
### changeVideo() 参数与打开视频相同
### closeVideo() 关闭视频
### fullScreen() 全屏

### on(event,function) 绑定事件的回调函数
|参数|类型|说明|
|:----    |:----- |-----   |
|event|string|事件名称|
|function|function|事件的回调|
### off(event,function) 解绑定事件的回调 参数同上
### offAll() 解绑定所有事件的所有回调

## 事件及其回调
| 名称  			| 说明 			 | 参数			  |
| ------------    | ------------ | ------------ |
|  startVideo     |播放命令执行后，请求websocket服务之前  |   |
|  startSuccess   |视频准备成功，开始播放之前   |   |
|  disconnectNetWork |网络异常断开后   |   |
|  currentTime |播放当前帧数据对应的时间|time:int 当前帧的unix时间，单位是ms
|imgInfo		|抛出人脸序列的回调|e：人脸数据，类型ArrayBuffer
|onRecordInfo | 查询录像结果的回调 | info:{Response:{ChannelID: "f8785be0cfe440b4bf37c53a90604fd6-0000"CmdType: "RecordInfo",RecordList:{item:[]},SumNum:"345"}}



## 视频回放的相关方法
1.绑定onRecordInfo的回调
2.执行searchRecord，其中startTime和endTime相差不得超过3天，否则服务端直接拒绝查询，不会返回任何信息
3.等待查询返回结果
4.执行播放视频的方法playRecord
###  searchRecord(params) 查询录像

```
var params ={
	channelId: "f8785be0cfe440b4bf37c53a90604fd6-0000",
	endTime: "11/25/2020, 10:46:07 AM",
	startTime: "11/24/2020, 2:46:07 PM",
	streamServerIP: "172.16.96.165",
	streamServerPort: "10090",
}
searchRecord(params)
```

### playRecord(params) 播放录像
```
var params = {
	channelId: "f8785be0cfe440b4bf37c53a90604fd6-0000"
	endTime: 1606272367
	index: 0
	speed: 1
	startTime: 1606211353
}
playRecord(params)
```

### pause() 暂停播放

### download(info) 下载
```
var info = {
	startTime: Number, //时间戳 秒
    endTime: Number, //时间戳 秒
    ip:String, // 回放服务器的ip地址
    port : String, // 回放服务的端口号
    filename :String, // 保存的文件名
    channelId :String, // 通道id
}
```

---
_Source: https://npm.io/package/bonc-htmlplayer · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._