背景
单位需要在基于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>
输入地址后，就可以看到监控画面了。
