背景
单位需要在基于H5的管理软件中接入安防音视频，直接在H5上实现不容易，只能选择第三方开发包，本文对klporxy使用做个简单记录。
开发包的获取
开发包为共享软件，2路视频是免费的，需要的可以点击下载。或者邮件联系5614280@qq.com,也可以私信我。
软件的安装配置
该软件无安装包，解压即可使用，软件里有使用说明以及HTTP-API开发手册和实例，上手比较容易。
下图是我配置的海康威视服务器，只需要输入IP地址，端口号，用户名密码即可！
1.添加设备点击添加设备按钮，根据实际情况填写设备IP地址、端口号、用户名密码等，TOKEN作为访问标志，请填写一个唯一的方便记忆的非中文编码，建议开发者使用。
2.作为开发者建议都与定义设备，当然您也可以不定义任何设备，这需要你在使用相关接口中指定正确的设备IP地址、端口号、用户名、密码等。
3.如果作为GB28181下级这里必须正确填写配置设备，SIPID 必须为20位编号，请按28181规范填写，如果不作为GB28181下级使用，可以不填写，下面举例说明SIPID。
SIPID:34020000001320000012 前10位（3402000000）为SIP域，通常由上级指定，不能随意填写。11-13位为设备类型，132为网络摄像机，本软件要求固定为132，14为网络类型一般填0，15-20为编号，本软件内不能重复。
下图为海康设备实例，其中设备信息为： 192.168.1.73为海康IP摄像机。对应的端口为8000 设备用户名为admin 密码为admin12345,Token为自定义唯一不重复ID，实例中设置为hik173.为了开发简单，请务必定义token，如果未定义，软件将自动匹配IP地址或者设备名，但这并不能保证唯一性。
在HTML5(H5)中使用
HTML就相对容易了，本文引用开发包例子。直接上代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>flv 播放示例</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="sourcesNode"></div>
<div>
<p style="color:#808080">请输入你的FLV播放地址: </p>
<p style="color:#808080">示例:http://127.0.0.1:8081/cgi-bin/live.flv?devicetoken=ehome&devicechannel=0&streamtype=0</p>
</div>
<div>
<p>
<input id="stream_url" size="100" value= "http://127.0.0.1:8081/cgi-bin/live.flv?devicetoken=ehome&devicechannel=0&streamtype=0">
</p>
<p>
<button id="set_new_url">播放</button>
</p>
</div>
<div>
<video id="videoElement" controls autoplay muted style="width:640px;height:360px;background-color:Black;">Your browser is too old which doesn't support HTML5 video.</video>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/flv.js/1.5.0/flv.js"></script>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
var urlButton = document.getElementById("set_new_url");
var urlEdit = document.getElementById("stream_url");
var player = document.getElementById("videoElement");
//player.controls = false; //显示控件按钮
var flvPlayer = null;
urlButton.onclick = ()=>
{
setPlayerSource(urlEdit.value);
};
$(document).ready(function()
{
//setPlayerSource(urlEdit.value);
});
window.onload = function ()
{
//setPlayerSource(urlEdit.value);
}
function setPlayerSource(newSource)
{
flvPlayer = flvjs.createPlayer
(
{
type: 'flv',
isLive: true,
url: newSource,
enableWorker: false,
fixAudioTimestampGap: false,
autoCleanupSourceBuffer:true
},
{
azyLoadMaxDuration: 30*60,
isLive: true,
lazyLoad:false,
controls:true//显示控件按钮
}
);
if (flvPlayer)
{
flvPlayer.on(flvjs.Events.ERROR, (errType, errDetail) =>
{
// errType是 NetworkError时，对应errDetail有：Exception、HttpStatusCodeInvalid、ConnectingTimeout、EarlyEof、UnrecoverableEarlyEof
// errType是 MediaError时，对应errDetail是MediaMSEError
alert(errDetail);
});
flvPlayer.on(flvjs.Events.LOADING_COMPLETE, () =>
{
//alert('MEDIA_SOURCE_CLOSE'); //直播中途断开
});
flvPlayer.on(flvjs.Events.METADATA_ARRIVED, () =>
{
});
}
flvPlayer.attachMediaElement(videoElement);
flvPlayer.load(); //加载
flvPlayer.play();
/*
player = new FlvPlayer
(
{
id: 'test_video',
isLive: true,
url: newSource,
playsinline: true,
autoplay: true,
controls:false,//显示控件按钮
preloadTime: 1,
minCachedTime: 5,
cors: true,
height: 360,
width: 640
},
{
enableWorker: true,
azyLoadMaxDuration: 2,
seekType: 'range',
fixAudioTimestampGap: false,
}
);
*/
setInterval(() =>
{
if (!player.buffered.length)
{
return;
}
let end = player.buffered.end(0);
let diff = end - player.currentTime;
if (diff >= 3)
{
player.currentTime = end - 1;
}
},
5 * 1000);
}
</script>
</body>
</html>
输入地址后，就可以看到监控画面了。
