Exciting news!Announcing our $4.6M Series Seed. Learn more
Socket
LoveBlogFAQ
Install
Log in

bonc-htmlplayer

Package Overview
Dependencies
2
Maintainers
5
Versions
42
Issues
File Explorer

Advanced tools

bonc-htmlplayer

东方国信的html播放器内核

    5.0.2latest

Version published
Maintainers
5
Yearly downloads
2,575
decreased by-15.1%

Weekly downloads

Readme

Source

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

构造方法

配置项必选类型说明
videoIdString视频的video标签的ID
centerInfoobject包含中心服务器的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方法不再需要参数

配置项必选类型说明
DeviceTypeString摄像头类型编号
DeviceIPString视频的通道ID
StreamServerIPString流服务IP
StreamServerPortString流服务端口
DevicePortString设备端口
UserNameString用户名
PassWordString密码
ChannelNumString通道数

例:

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

参数类型说明
eventstring事件名称
functionfunction事件的回调
### 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 }

FAQs

What is bonc-htmlplayer?

东方国信的html播放器内核

Is bonc-htmlplayer popular?

The npm package bonc-htmlplayer receives a total of 50 weekly downloads. As such, bonc-htmlplayer popularity was classified as not popular.

Is bonc-htmlplayer well maintained?

We found that bonc-htmlplayer demonstrated a healthy version release cadence and project activity. It has 5 open source maintainers collaborating on the project.

Last updated on 07 May 2022
Socket

Product

Subscribe to our newsletter

Get open source security insights delivered straight into your inbox. Be the first to learn about new features and product updates.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc