<!DOCTYPE html>
|
<html lang="en">
|
<head>
|
<meta charset="UTF-8">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
|
<title>省平台视频接口</title>
|
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
|
<link rel="stylesheet" href="videojs/video-js.min.css">
|
<script src="videojs/video.js"></script>
|
<script src="videojs/videojs-contrib-hls.js"></script>
|
<script type="text/javascript" src="../../js/jquery.min.js"></script>
|
<script type="text/javascript" src="../../js/jquery.query-2.1.7.js"></script>
|
<script type="text/javascript" src="CryptoJS/components/core.js"></script>
|
<script type="text/javascript" src="CryptoJS/components/cipher-core.js"></script>
|
<script type="text/javascript" src="CryptoJS/components/tripledes.js"></script>
|
<script type="text/javascript" src="CryptoJS/components/mode-ecb.js"></script>
|
<script type="text/javascript" src="../js/encrypt.js"></script>
|
<style type="text/css">
|
@media (min-width:1340px) {
|
.container{
|
display: flex;
|
flex-flow:column nowrap;
|
width: 1340px;/*任意改变长宽*/
|
height: 700px;
|
background:#ccc;
|
}
|
}
|
|
@media (min-width:1820px) {
|
.container{
|
display: flex;
|
flex-flow:column nowrap;
|
width: 1850px;/*任意改变长宽*/
|
height: 890px;
|
background:#ccc;
|
}
|
}
|
|
.parent{
|
display: flex;
|
flex-flow:row nowrap;
|
flex:1 1 0;/*元素弹性*/
|
text-align: center;
|
}
|
.container .parent:first-child{margin-bottom: 5px;}
|
.item{
|
flex:1 1 0;/*元素弹性*/
|
background: black;
|
}
|
.parent .item:first-child{margin-right: 5px;}
|
</style>
|
<script type="text/javascript">
|
var isInitFinished = false;
|
var jsession = "";
|
var vehiIdno = "";
|
var devIdno = "";
|
var name = "";
|
var channel = 0;
|
var chnCount = 1;
|
var closeSecond = 0;
|
var lang = new langZhCn();
|
var myPlayer = null;
|
var isVideoBreak = null; //判断视频是否卡住，卡主后重载加载视频
|
var lastTime = -1;
|
var tryTimes = 0;
|
// 车载视频接入省平台接口参数
|
// 接口请求格式 ： http://地址:端口/路径?Key=密钥&VehPlateNum=车牌号&VehPlateColorCode=2&Channel=1,2,3,4
|
var isSptReq = false;
|
var sptInfRequestObj = {
|
key :null, // 双向加密
|
channelList : [], // 通道号
|
chnCount: 0, // 总通道数
|
plateColor : 0, // 车牌颜色 1蓝色 2黄色
|
vehiIdNo: "", //车牌号
|
jsession: null, // 本次请求会话
|
devIdno : null // 设备号
|
}
|
|
//获取URL参数信息
|
function getUrlParameter(name){
|
if(location.search==''){
|
return '';
|
}
|
var o={};
|
var search=location.search.replace(/\?/,'');//只替换第一个问号,如果参数中带有问号,当作普通文本
|
var s=search.split('&');
|
for(var i=0;i<s.length;i++){
|
o[s[i].split('=')[0]]=s[i].split('=')[1];
|
}
|
return o[name]==undefined?'':o[name];
|
}
|
|
|
|
function langZhCn() {
|
this.loginError = "登陆失败";
|
this.jsessionError = "会话号不存在";
|
this.deviceNoExist = "找不到车辆信息";
|
this.errorVideoDevice = "这个设备不是视频设备";
|
this.vehicleNotOperate = "没有车辆或者设备操作权限";
|
this.closeTip = "秒后关闭视频";
|
}
|
|
function langEn() {
|
this.loginError = "Login failed";
|
this.jsessionError = "Jsession error";
|
this.deviceNoExist = "Can't not find vehicles";
|
this.vehicleNotOperate = "No vehicle or device operating authority";
|
this.errorVideoDevice = "This device is not video device";
|
this.closeTip = " seconds later close video"
|
}
|
|
// http://地址:端口/路径?Key=密钥&VehPlateNum=车牌号&VehPlateColorCode=2&Channel=1,2,3,4
|
function initSptInfRequestObj() {
|
var Key = getUrlParameter("Key");
|
if(Key == null || typeof Key == 'undefined' || Key == '') {
|
console.log("并非调用省平台车载视频接入接口。");
|
isSptReq = false;
|
return;
|
} else {
|
isSptReq = true;
|
}
|
var Channel = getUrlParameter("Channel");
|
var VehPlateNum = getUrlParameter("VehPlateNum");
|
var VehPlateColorCode = getUrlParameter("VehPlateColorCode");
|
sptInfRequestObj.channelList = Channel.split(',');
|
sptInfRequestObj.key = Key;
|
sptInfRequestObj.plateColor = VehPlateColorCode;
|
sptInfRequestObj.vehiIdNo = VehPlateNum;
|
}
|
|
$(document).ready(function(){
|
// 初始化省平台接口参数
|
initSptInfRequestObj();
|
if(isNaN(Number(sptInfRequestObj.plateColor))) {
|
alert("车牌类型输入有误，请输入数字。");
|
return;
|
}
|
/* if(Number(sptInfRequestObj.plateColor) > 2) {
|
alert("车牌类型输入有误，目前仅支持黄牌跟蓝牌。");
|
return;
|
} */
|
$("#closeTip").hide();
|
var chn = getUrlParameter("channel");
|
if (chn) {
|
channel = parseInt(chn, 10);
|
}
|
var temp = getUrlParameter("close");
|
if (temp) {
|
closeSecond = parseInt(temp, 10);
|
}
|
if (getUrlParameter("lang") == "en") {
|
lang = new langEn();
|
}
|
//设备号
|
devIdno = getUrlParameter("devIdno");
|
//车牌号
|
vehiIdno = decodeURIComponent(getUrlParameter("vehiIdno"));
|
if((!devIdno && !vehiIdno) && !isSptReq) {//都为空 而且不是省平台视频接口
|
alert(lang.deviceNoExist);
|
}else {
|
if(devIdno) {
|
name = devIdno;
|
}else {
|
name = vehiIdno;
|
}
|
document.title = name;
|
//会话号
|
jsession = getUrlParameter("jsession");
|
//如果jsession为空，则登陆获取会话号
|
if(!jsession) {
|
login();
|
}else {
|
//加载设备信息
|
loadDeviceInfo();
|
}
|
}
|
});
|
|
//如果传入了用户名和密码，则登陆获取会话号
|
function login() {
|
var account = "";
|
var password = "";
|
if(isSptReq) {
|
// 解密key 格式 account|password
|
var decryptKey = decryptByDESModeEBC(sptInfRequestObj.key);
|
var userInfo = decryptKey.split("|");
|
account = userInfo[0];
|
password = userInfo[1];
|
} else {
|
account = getUrlParameter("account");
|
password = getUrlParameter("password");
|
}
|
var param = [];
|
param.push({name: 'account', value: account});
|
param.push({name: 'password', value: password});
|
this.doAjaxSubmit('StandardApiAction_loginEx.action', param, function(json, action, success) {
|
if(success) {
|
jsession = json.jsession;
|
if(isSptReq) {
|
sptInfRequestObj.jsession = json.jsession;
|
}
|
//获取到会话号，则加载设备信息
|
loadDeviceInfo();
|
}else {
|
if(isSptReq) {
|
alert("Key值错误，请确认输入正确的Key值。");
|
}
|
alert(lang.loginError);
|
}
|
});
|
}
|
|
//如果传入设备号，则直接判断设备号；
|
//如果没传入设备号，则判断传入的车牌号
|
//根据设备号或者车牌号获取设备信息，并判断是否有效和是否视频设备
|
//获取设备通道
|
function loadDeviceInfo() {
|
var param = [];
|
var ajaxUrl = "StandardApiAction_getVideoDevice.action";
|
param.push({name: 'jsession', value: jsession});
|
if(isSptReq) {
|
// 省平台接口不存在设备参数
|
param.push({name: 'devIdno', value: null});
|
param.push({name: 'vehiIdno', value: sptInfRequestObj.vehiIdNo});
|
param.push({name: 'plateType', value: sptInfRequestObj.plateColor});
|
}else {
|
param.push({name: 'devIdno', value: devIdno});
|
param.push({name: 'vehiIdno', value: vehiIdno});
|
}
|
|
this.doAjaxSubmit(ajaxUrl, param, function(json, action, success) {
|
if(success) {
|
//不是视频设备
|
if(!json.isVideoDevice) {
|
alert(lang.errorVideoDevice);
|
}else {
|
devIdno = json.devIdno;
|
chnCount = json.chnCount;
|
if(isSptReq) {
|
if(json.plateTypeErr == 1) {
|
alert("该汽车没有对应的车牌颜色，请核对车牌颜色输入是否有误。");
|
return;
|
}
|
sptInfRequestObj.devIdno = json.devIdno;
|
sptInfRequestObj.chnCount = json.chnCount;
|
//sptInfRequestObj.chnCount = 9;
|
}
|
//加载完成再加载其他信息
|
if(isSptReq) {
|
previewMutiChVideo();
|
}else{
|
previewVideo();
|
}
|
}
|
}else {
|
//没有操作权限
|
if(json) {
|
if(json.result == 5) {
|
alert(lang.jsessionError);
|
}else if(json.result == 8) {
|
alert(lang.vehicleNotOperate);
|
}else {
|
alert(lang.deviceNoExist);
|
}
|
}else {
|
alert(lang.deviceNoExist);
|
}
|
}
|
});
|
}
|
|
//提交ajax
|
function doAjaxSubmit(action, params, callback) {
|
$.ajax({
|
type: 'POST',
|
url: action,
|
data: params,
|
cache:false,/*禁用浏览器缓存*/
|
dataType: 'json',
|
success: function (json) {
|
if(json.result == 0){
|
callback.call(this, json, action, true);
|
} else {
|
callback.call(this, json, action, false);
|
}
|
},
|
error: function (XMLHttpRequest, textStatus, errorThrown) {
|
try {
|
if (p.onError) p.onError(XMLHttpRequest, textStatus, errorThrown);
|
} catch (e) {}
|
callback.call(this, null, action, false);
|
}
|
});
|
}
|
|
//开始预览视频
|
function previewVideo() {
|
var host = window.location.host;
|
var ip = host.split(":")[0];
|
if(!ip || ip == 'localhost') {
|
ip = '127.0.0.1';
|
}
|
//ip = "192.168.1.230";
|
|
var m3u8Url = "http://" + ip + ":6604/hls/1_" + devIdno + "_" +channel + "_1.m3u8?JSESSIONID=" + jsession;
|
var divVideo = "<video id=\"hls_example_video\" class=\"video-js vjs-default-skin\" controls preload=\"none\" width=\"352\" height=\"288\" data-setup=\"{}\">"
|
+ "<source src=\"" + m3u8Url + "\" type=\"application/x-mpegURL\">"
|
+ "</video>";
|
$("#hls_video").empty();
|
$("#hls_video").append(divVideo);
|
videojs("hls_example_video").ready(function(){
|
myPlayer = this;
|
myPlayer.width(document.documentElement.clientWidth - 20);
|
var height = document.documentElement.clientWidth;
|
if (document.documentElement.clientWidth > document.documentElement.clientHeight) {
|
var height = document.documentElement.clientHeight;
|
}
|
myPlayer.height(height - 20);
|
myPlayer.on("pause", onPause);
|
myPlayer.on("play", onPlay);
|
myPlayer.play();
|
});
|
}
|
|
//预览一个设备的多个通道视频
|
function previewMutiChVideo(requsetObj) {
|
var host = window.location.host;
|
var ip = host.split(":")[0];
|
if(!ip || ip == 'localhost') {
|
ip = '127.0.0.1';
|
}
|
//ip = "192.168.1.230";
|
|
var divVideo = "";
|
var chn = 0;
|
var m3u8Url = "";
|
var renderVideoForDivObj = {isRenderVideo : false,m3u8Url : "",chn:null}
|
var pageChNum = 4;
|
var divWidth = "45%";
|
var divHeight = "45%";
|
var videoWidth = "590";
|
var videoHeight = "420";
|
var adjustMargin = "40px";
|
if(screen.width < 1441 || document.documentElement.clientWidth < 1441) {
|
videoWidth = "440";
|
videoHeight = "325";
|
}
|
|
|
if(sptInfRequestObj.chnCount > 4){
|
pageChNum = 9;
|
divWidth = document.documentElement.clientWidth * 0.3;
|
divWidth += "px";
|
divHeight = document.documentElement.clientHeight * 0.3;
|
divHeight += "px";
|
videoWidth = "400";
|
videoHeight = "290";
|
adjustMargin = "20px";
|
}
|
|
var getIsRenderVideoObj = function (divId) {
|
if($.inArray((divId + 1).toString(),sptInfRequestObj.channelList) != -1) {
|
renderVideoForDivObj.isRenderVideo = true;
|
renderVideoForDivObj.chn = divId;
|
renderVideoForDivObj.m3u8Url = m3u8Url = "http://" + ip + ":6604/hls/1_" + sptInfRequestObj.devIdno + "_" +renderVideoForDivObj.chn + "_1.m3u8?JSESSIONID=" + sptInfRequestObj.jsession;
|
} else { // 重置
|
renderVideoForDivObj = {isRenderVideo : false,m3u8Url : "",chn:divId}
|
}
|
return renderVideoForDivObj;
|
}
|
|
for(var i=0;i<pageChNum;i++) {
|
// 决定对每个i 容器是否渲染视频，如果渲染视频，则要给url，通道号，是否渲染提示
|
renderVideoForDivObj = getIsRenderVideoObj(i);
|
/* if (renderVideoForDivObj.isRenderVideo) {
|
divVideo += "<div style=\"width:"+ divWidth +";height:"+ divHeight +";float:left;margin:10px;margin-left:"+ adjustMargin +";padding:10px;\"><video id=\"hls_example_video"+ i +"\" class=\"video-js vjs-default-skin\" style=\"margin-left:5px\" controls preload=\"none\" width=\"352\" height=\"288\" data-setup=\"{}\">"
|
+ "<source src=\"" + renderVideoForDivObj.m3u8Url + "\" type=\"application/x-mpegURL\">"
|
+ "</video></div>";
|
} else {
|
divVideo += "<div style=\"width:"+ divWidth +";height:"+ divHeight +";float:left;margin:10px;margin-left:"+ adjustMargin +";padding:10px;\"><video id=\"hls_example_video"+ i +"\" class=\"video-js vjs-default-skin\" style=\"margin-left:5px\" controls preload=\"none\" width=\""+ videoWidth +"\" height=\""+videoHeight+"\" data-setup=\"{}\">"
|
+ "<source src=\"\" type=\"application/x-mpegURL\">"
|
+ "</video></div>";
|
} */
|
if (i%2 == 0) { // 偶数
|
// 偶数为行第一个
|
divVideo += "<div class=\"parent\">";
|
//divVideo += "<div class=\"item\"></div>";
|
if (renderVideoForDivObj.isRenderVideo) {
|
divVideo += "<div class=\"item\" align=\"center\">"
|
+ "<div style=\"color:red\">车牌号："+ decodeURI(sptInfRequestObj.vehiIdNo) +" 通道号：" + (renderVideoForDivObj.chn + 1) + "</div>"
|
+ "<video id=\"hls_example_video"+ i +"\" class=\"video-js vjs-default-skin\" controls preload=\"none\" width=\""+ videoWidth +"\" height=\""+ videoHeight +"\" data-setup=\"{}\">"
|
+ "<source src=\"" + renderVideoForDivObj.m3u8Url + "\" type=\"application/x-mpegURL\">"
|
+ "</video></div>";
|
} else {
|
divVideo += "<div class=\"item\" align=\"center\"></div>";
|
/* + "<div style=\"color:red\">车牌号："+ decodeURI(sptInfRequestObj.vehiIdNo) +" 通道号：" + renderVideoForDivObj.chn + "</div>"
|
+ "<video id=\"hls_example_video"+ i +"\" class=\"video-js vjs-default-skin\" controls preload=\"none\" width=\""+ videoWidth +"\" height=\""+ videoHeight +"\" data-setup=\"{}\">"
|
+ "<source src=\"\" type=\"application/x-mpegURL\">"
|
+ "</video></div>"; */
|
}
|
} else { // 奇数
|
//divVideo += "<div class=\"item\"></div>";
|
if (renderVideoForDivObj.isRenderVideo) {
|
divVideo += "<div class=\"item\" align=\"center\">"
|
+ "<div style=\"color:red\">车牌号："+ decodeURI(sptInfRequestObj.vehiIdNo) +" 通道号：" + (renderVideoForDivObj.chn + 1) + "</div>"
|
+ "<video id=\"hls_example_video"+ i +"\" class=\"video-js vjs-default-skin\" controls preload=\"none\" width=\""+ videoWidth +"\" height=\""+ videoHeight +"\" data-setup=\"{}\">"
|
+ "<source src=\"" + renderVideoForDivObj.m3u8Url + "\" type=\"application/x-mpegURL\">"
|
+ "</video></div>";
|
} else {
|
divVideo += "<div class=\"item\" align=\"center\"></div>";
|
/* + "<div style=\"color:red\">车牌号："+ decodeURI(sptInfRequestObj.vehiIdNo) +" 通道号：" + renderVideoForDivObj.chn + "</div>"
|
+ "<video id=\"hls_example_video"+ i +"\" class=\"video-js vjs-default-skin\" controls preload=\"none\" width=\""+ videoWidth +"\" height=\""+ videoHeight +"\" data-setup=\"{}\">"
|
+ "<source src=\"\" type=\"application/x-mpegURL\">"
|
+ "</video></div>"; */
|
}
|
divVideo += "</div>";
|
}
|
}
|
$("#hls_video").empty();
|
$("#hls_video").append(divVideo);
|
for(var j=0;j<pageChNum;j++) {
|
chn = sptInfRequestObj.channelList[j];
|
// 输入通道不能大于已有通道数
|
// v1.0.1 经省平台指出，不显示提示
|
/* if(chn > sptInfRequestObj.chnCount) {
|
alert("通道参数不能大于已有通道数，请输入正确的通道参数。");
|
break;
|
} */
|
var obj = "hls_example_video" + j;
|
if(!document.getElementById( obj)) {
|
continue;
|
}
|
videojs(obj).ready(function(){
|
myPlayer = this;
|
myPlayer.width(videoWidth);
|
myPlayer.height(videoHeight);
|
myPlayer.on("pause", onPause);
|
myPlayer.on("play", onPlay);
|
myPlayer.play();
|
});
|
}
|
//url示例
|
//http://192.168.1.230:6604/hls/1_10000_0_1.m3u8?JSESSIONID=123456789
|
//http://流媒体服务器IP:流媒体服务器客户服务端口(默认为6604)/hls/请求类型(1表示实时视频)_设备编号_通道号_码流类型(0主码流1子码流).m3u8?JSESSION=会话号
|
//暂时只考虑单个流媒体服务器，如果为多个流媒体服务器，则为先请求流媒体服务器的地址
|
|
/*myPlayer.src({src:m3u8Url,type:"application/x-mpegURL"});
|
alert(myPlayer.cache_.source.src);
|
alert(myPlayer.cache_.source.type);
|
alert(myPlayer.cache_.src);
|
myPlayer.cache_.src = m3u8Url;
|
myPlayer.play();
|
checkVideo();
|
if (closeSecond != 0) {
|
$("#closeTip").show();
|
setTimeout(closeVideo, 1000);
|
}*/
|
}
|
|
function checkVideo() {
|
if (isVideoBreak != null) {
|
clearInterval(isVideoBreak);
|
isVideoBreak = null;
|
}
|
isVideoBreak = setInterval(function(){
|
var currentTime = myPlayer.currentTime();
|
//currentTime为0表示还未加载
|
if (currentTime != 0) {
|
if(currentTime == lastTime){
|
if(++tryTimes > 2){
|
//设置当前播放时间为超时时间，此时videojs会在play()后把currentTime设置为0
|
myPlayer.currentTime(currentTime+10000);
|
myPlayer.play();
|
tryTimes = 0;
|
}
|
}else{
|
lastTime = currentTime;
|
tryTimes = 0;
|
}
|
}
|
},3000)
|
}
|
|
function onPlay() {
|
checkVideo();
|
}
|
|
function onPause() {
|
if (isVideoBreak != null) {
|
clearInterval(isVideoBreak);
|
isVideoBreak = null;
|
}
|
}
|
|
function closeVideo() {
|
// for (var i = 0; i < 4; ++ i) {
|
// swfobject.getObjectById('cmsv6flash').stopVideo(i);
|
// }
|
if (closeSecond > 0) {
|
closeSecond -- ;
|
$("#spanCloseSecond").text(closeSecond + lang.closeTip);
|
setTimeout(closeVideo, 1000);
|
} else {
|
if (isVideoBreak != null) {
|
clearInterval(isVideoBreak);
|
isVideoBreak = null;
|
}
|
$("#closeTip").hide();
|
myPlayer.pause();
|
}
|
}
|
</script>
|
</head>
|
<body>
|
<div id="closeTip">
|
<p><span id="spanCloseSecond"></span></p>
|
</div>
|
<div id="hls_video" class="container">
|
</div>
|
</body>
|
</html>
|
