bonc-htmlplayer

BonchH5Player 播放器内核接口文档

下载源码及安装配置

git clone https://code.bonc.com.cn/liuyuchao/civms_h5player.git
cd bonc-htmlplayer
npm install
# npm全局安装的路径配置到系统环境变量中，将项目的包放到全局目录下
npm link 

环境变量如下图所示

项目中使用

npm link bonc-htmlplayer

快速开始（基于react）

import React,{Component} from 'react';
import configs from './config'
import Html5Player from 'bonc-htmlplayer'


class App extends  Component{

  componentDidMount(){
    this._player = new Html5Player(configs);
    //绑定回调(打开视频、准备完毕、断开连接)
    this._player.on('startVideo',this.onOpen.bind(this));
    this._player.on('startSuccess',this.onPlay.bind(this));
    this._player.on('disconnectNetWork',this.onDisconnectNetWork.bind(this));
  }
  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;

API

构造方法

配置项	必选	类型	说明
videoId	是	String	视频的video标签的ID

例：

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

实例方法

openVideo(jsonbonc):打开视频

配置项	必选	类型	说明
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() 全屏

事件

startVideo 开始播放

startSuccess 取流成功

disconnectNetWork 网络断开