本项目包含一个h5播放器,接收相机传过来的h264流媒体数据。即可以通过git拉取源码使用,也可以通过npm安装适应。公司的私有npm需要连接公司的内网使用,我把播放器内核包放到了 https://code.bonc.com.cn/nexus/repository/npm-test/ 切换npm仓库地址后即可通过npm安装。同时,该npm包在公有npm上也有推送,所以可以直接执行“npm i bonc-htmlplayer”。播放视频的过程中需保证网络流畅,否则会造成丢包,引起花屏。
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.获取通道列表
配置项 | 必选 | 类型 | 说明 |
---|---|---|---|
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);
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)
参数 | 类型 | 说明 |
---|---|---|
event | string | 事件名称 |
function | function | 事件的回调 |
名称 | 说明 | 参数 |
---|---|---|
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
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)
var params = {
channelId: "f8785be0cfe440b4bf37c53a90604fd6-0000"
endTime: 1606272367
index: 0
speed: 1
startTime: 1606211353
}
playRecord(params)
var info = {
startTime: Number, //时间戳 秒
endTime: Number, //时间戳 秒
ip:String, // 回放服务器的ip地址
port : String, // 回放服务的端口号
filename :String, // 保存的文件名
channelId :String, // 通道id
}