zhhl-h5player99 v1.0.0

ZhhlH5Player 播放器内核接口文档

描述

本项目包含一个h5播放器，接收相机传过来的h264流媒体数据。即可以通过git拉取源码使用，也可以通过npm安装适应。公司的私有npm需要连接公司的内网使用，我把播放器内核包放到了 https://xxx.xxx.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 'zhhl-h5player99'//播放器内核库

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

构造方法

例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方法不再需要参数

例：

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) 绑定事件的回调函数

off(event,function) 解绑定事件的回调 参数同上

offAll() 解绑定所有事件的所有回调

事件及其回调

视频回放的相关方法

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
}