Security News
JSR Working Group Kicks Off with Ambitious Roadmap and Plans for Open Governance
At its inaugural meeting, the JSR Working Group outlined plans for an open governance model and a roadmap to enhance JavaScript package management.
bonc-htmlplayer
Advanced tools
本项目包含一个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
}
FAQs
东方国信的html播放器内核
The npm package bonc-htmlplayer receives a total of 5 weekly downloads. As such, bonc-htmlplayer popularity was classified as not popular.
We found that bonc-htmlplayer demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 7 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
At its inaugural meeting, the JSR Working Group outlined plans for an open governance model and a roadmap to enhance JavaScript package management.
Security News
Research
An advanced npm supply chain attack is leveraging Ethereum smart contracts for decentralized, persistent malware control, evading traditional defenses.
Security News
Research
Attackers are impersonating Sindre Sorhus on npm with a fake 'chalk-node' package containing a malicious backdoor to compromise developers' projects.