bonc-htmlplayer

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）

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：

var configs = {
    videoId : 'playerid',
};
this._player = new Html5Player(configs);

例2：

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	通道数

例：

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
}