var layer;// 定义全局变量
|
var testList = [
|
{"id":"1","name":"摄像机1","type":"3004","type0":"1","username":"admin","pwd":"a1234567","ipIn":"192.168.0.200","portInC":"554","portInV":"80","ipOut":"192.168.0.200","portOutC":"0","portOutV":"0","chanNum":"1","chanNumOut":"1","brand":"测试品牌","vld":"0","address":"地址","mediaAddr":"rtsp://{username}:{pwd}@{ip}:{port}/MPEG-4/ch1/sub/av_stream","webUrl":""},
|
{"id":"2","name":"摄像机2","type":"3004","type0":"0","username":"username","pwd":"123456","ipIn":"192.168.1.123","portInC":"554","portInV":"1","ipOut":"192.168.1.123","portOutC":"1","portOutV":"1","chanNum":"1","chanNumOut":"1","brand":"测试品牌","vld":"0","address":"地址","mediaAddr":"rtsp://{username}:{pwd}@{ip}:{port}/MPEG-4/ch1/sub/av_stream","webUrl":"webUrl"},
|
{"id":"3","name":"摄像机3","type":"3004","type0":"0","username":"username","pwd":"123456","ipIn":"192.168.1.123","portInC":"554","portInV":"1","ipOut":"192.168.1.123","portOutC":"1","portOutV":"1","chanNum":"1","chanNumOut":"1","brand":"测试品牌","vld":"0","address":"地址","mediaAddr":"rtsp://{username}:{pwd}@{ip}:{port}/MPEG-4/ch1/sub/av_stream","webUrl":"webUrl"},
|
{"id":"4","name":"摄像机4","type":"3004","type0":"0","username":"username","pwd":"123456","ipIn":"192.168.1.123","portInC":"554","portInV":"1","ipOut":"192.168.1.123","portOutC":"1","portOutV":"1","chanNum":"1","chanNumOut":"1","brand":"测试品牌","vld":"0","address":"地址","mediaAddr":"rtsp://{username}:{pwd}@{ip}:{port}/MPEG-4/ch1/sub/av_stream","webUrl":"webUrl"}
|
// {"id":"5","name":"测试视频#5","type":"3004","type0":"0","username":"username","pwd":"123456","ipIn":"192.168.1.123","portInC":"554","portInV":"1","ipOut":"192.168.1.123","portOutC":"1","portOutV":"1","chanNum":"1","chanNumOut":"1","brand":"测试品牌","vld":"0","address":"地址","mediaAddr":"rtsp://{username}:{pwd}@{ip}:{port}/MPEG-4/ch1/sub/av_stream","webUrl":"webUrl"},
|
// {"id":"6","name":"测试视频#6","type":"3004","type0":"0","username":"username","pwd":"123456","ipIn":"192.168.1.123","portInC":"554","portInV":"1","ipOut":"192.168.1.123","portOutC":"1","portOutV":"1","chanNum":"1","chanNumOut":"1","brand":"测试品牌","vld":"0","address":"地址","mediaAddr":"rtsp://{username}:{pwd}@{ip}:{port}/MPEG-4/ch1/sub/av_stream","webUrl":"webUrl"},
|
// {"id":"7","name":"测试视频#7","type":"3004","type0":"0","username":"username","pwd":"123456","ipIn":"192.168.1.123","portInC":"554","portInV":"1","ipOut":"192.168.1.123","portOutC":"1","portOutV":"1","chanNum":"1","chanNumOut":"1","brand":"测试品牌","vld":"0","address":"地址","mediaAddr":"rtsp://{username}:{pwd}@{ip}:{port}/MPEG-4/ch1/sub/av_stream","webUrl":"webUrl"},
|
// {"id":"8","name":"测试视频#8","type":"3004","type0":"0","username":"username","pwd":"123456","ipIn":"192.168.1.123","portInC":"554","portInV":"1","ipOut":"192.168.1.123","portOutC":"1","portOutV":"1","chanNum":"1","chanNumOut":"1","brand":"测试品牌","vld":"0","address":"地址","mediaAddr":"rtsp://{username}:{pwd}@{ip}:{port}/MPEG-4/ch1/sub/av_stream","webUrl":"webUrl"}
|
];
|
|
var id = "";
|
//标记播放页，默认true是单播放页，false为四播放页
|
var tagVideo = true;
|
//标记播放的div
|
var number = 0;
|
//存放播放div对应的设备信息
|
var cameraData = [{id:null,name:null,url:null,type:null}, {id:null,name:null,url:null,type:null},
|
{id:null,name:null,url:null,type:null}, {id:null,name:null,url:null,type:null}, {id:null,name:null,url:null,type:null}];
|
|
//播放方式，IN表示内网访问，OUT表示外网访问，默认为IN
|
var videoType;
|
var deviceList = [];
|
var deviceMap = [];
|
var cdata = {};
|
|
(function () {
|
|
layui.use(['layer'], function () {
|
layer = layui.layer;
|
});
|
|
//获取URL中的参数id
|
id = getParam("id");
|
if (TEST_TAG) {
|
deviceList = testList;
|
cameraSetMap(deviceList);
|
renderCameraList();
|
}else{
|
//根据设备类型type从接口中获取同类型设备实时监控
|
initCameraList();
|
}
|
|
//根据第一个设备判断播放模式
|
firstCamera(deviceMap[id].id,deviceMap[id].name);
|
|
//初始化时默认单播放页播放列表第一个设备
|
// getMediaAddr(deviceList[0].id,deviceList[0].name);
|
|
}).call(this);
|
/**
|
* 获取URL中的参数
|
* @param name
|
* @returns {string|null}
|
*/
|
function getParam(name) {
|
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
|
var r = window.location.search.substr(1).match(reg);
|
if (r != null) return unescape(r[2]);
|
return null;
|
}
|
|
//添加播放方式选择
|
$("#select_type").change(function () {
|
videoType = $('#select_type').val();
|
|
//清空播放信息
|
if (tagVideo) {
|
cameraData[number].name = null;
|
cameraData[number].url = null;
|
cameraData[number].id = null;
|
cameraData[number].type = null;
|
clearVideo(number);
|
}else {
|
for(var j = 1;j<cameraData.length;j++) {
|
cameraData[j].name = null;
|
cameraData[j].url = null;
|
cameraData[j].id = null;
|
cameraData[j].type = null;
|
clearVideo(j);
|
}
|
}
|
number = 0;
|
});
|
|
//根据设备类型获取视频设备列表
|
function initCameraList(){
|
$.ajaxSettings.async = false;
|
$.get("./cgi-bin/device-vedio/query", function (data, status) {
|
if ("success" == status) {
|
deviceList = data;
|
renderCameraList();
|
cameraSetMap(deviceList);
|
} else {
|
window.parent.notify("系统获取监控设备信息失败！");
|
}
|
}, "json");
|
}
|
//初始化同类型设备列表
|
function renderCameraList() {
|
var html = '';
|
if (deviceList) {
|
deviceList.forEach(function (data) {
|
html += '<li><a href="javascript:void(0)" onclick="getMediaAddr(\'' + data.id + '\',\'' + data.name + '\')">';
|
if(data.type0 == "0"){
|
html += '<img src="images/qiangji.png"/><p>';
|
}
|
if(data.type0 == "1"){
|
html += '<img src="images/qiuji.png"/><p>';
|
}
|
html += data.name + '</p></a></li>';
|
});
|
//设置设备数量
|
$("#videoNum").html("当前共有" + deviceList.length + "个视频监控");
|
} else {
|
$("#videoNum").html("当前共有0个视频监控");
|
}
|
$("#videoList").html(html);
|
}
|
|
function cameraSetMap(deviceList) {
|
deviceList.forEach(function (data) {
|
deviceMap[data.id] = data;
|
});
|
}
|
|
//判断第一个设备播放模式，并设置模式选择框值
|
function firstCamera(id,name) {
|
getCameraById(id);
|
var hostname = window.location.hostname;
|
// var src = "http://127.0.0.1:8083" + "/stream/player/" + name;
|
var src = "http://" + hostname + ":8083" + "/stream/player/" + name;
|
var html = "<iframe id='myPlayer' width='100%' height='100%' style='border-radius: 5px;'" +
|
"src='"+src+"'></iframe>";
|
$("#video0").html(html);
|
}
|
|
//根据id获取流媒体地址
|
function getMediaAddr(id,name) {
|
getCameraById(id);
|
var hostname = window.location.hostname;
|
if(tagVideo){
|
// console.log(window.location);
|
// console.log(window.location.hostname);
|
// var src = "http://127.0.0.1:8083" + "/stream/player/" + name;
|
var src = "http://" + hostname + ":8083" + "/stream/player/" + name;
|
var html = "<iframe id='myPlayer' width='100%' height='100%' style='border-radius: 5px;'" +
|
"src='"+src+"'></iframe>";
|
$("#video0").html(html);
|
|
}else{
|
var myPlayerID = "myPlayer"+cdata.id;
|
var myPlayer = document.getElementById(myPlayerID);
|
|
if(myPlayer){
|
var src = "http://" + hostname + ":8083" + "/stream/player/" + name;
|
// var src = "http://127.0.0.1:8083" + "/stream/player/" + name;
|
var html = "<iframe id='myPlayer"+cdata.id+"' width='100%' height='100%' style='border-radius: 5px;'" +
|
"src='"+src+"'></iframe>";
|
myPlayer.parentElement.innerHTML = html;
|
|
}else {
|
//一个新的视频
|
number++;
|
if(number == 5){
|
number = 1;
|
}
|
|
var videoID = "video"+number;
|
var src = "http://" + hostname + ":8083" + "/stream/player/" + name;
|
// var src = "http://127.0.0.1:8083" + "/stream/player/" + name;
|
var html = "<iframe id='myPlayer"+cdata.id+"' width='100%' height='100%' style='border-radius: 5px;'" +
|
"src='"+src+"'></iframe>";
|
$("#"+videoID).html(html);
|
}
|
}
|
|
}
|
|
//根据id获取流媒体地址
|
function getURL(id,name) {
|
getCameraById(id);
|
var hostname = window.location.hostname;
|
// console.log(window.location);
|
// console.log(window.location.hostname);
|
// var src = "http://127.0.0.1:8083" + "/stream/player/" + name;
|
var src = "http://" + hostname + ":8083" + "/stream/player/" + name;
|
return src;
|
}
|
|
|
function getCameraById(id) {
|
cdata = deviceMap[id];
|
if(tagVideo){
|
cameraData[0].id = cdata.id;
|
cameraData[0].name = cdata.name;
|
cameraData[0].url = cdata.url;
|
cameraData[0].type = cdata.type;
|
}else{
|
cameraData[number].id = cdata.id;
|
cameraData[number].name = cdata.name;
|
cameraData[number].url = cdata.url;
|
cameraData[number].type = cdata.type;
|
}
|
}
|
|
|
//播放视频
|
function startVideo(num, data) {
|
var tag = "#video" + num;
|
$(tag).html("");
|
var html = "";
|
|
var src = getURL(data.id,data.name);
|
|
html += "<iframe id='myPlayer"+ data.id +"' width='100%' height='100%' style='border-radius: 5px;'";
|
html += "src='" + src + "' ></iframe>";
|
|
$(tag).html(html);
|
|
}
|
|
|
//清空div中的object播放标签
|
function clearVideo(num) {
|
var tag = "#video" + num;
|
$(tag).html('<img src="images/sp-img.png" class="sp-hideImg"/>');
|
}
|
|
|
|
//摄像头控制事件
|
function action(value) {
|
// var param = {"ip":cdata.ipIn,"usr":cdata.username,"password":cdata.pwd,"cmd":value};
|
// console.log("上传参数：");
|
// console.log(JSON.stringify(param));
|
// // $.ajaxSettings.async = false;
|
// $.post("./cgi-bin/device-vedio/ptz", JSON.stringify(param), function (data, status) {
|
// if ("success" == status) {
|
//
|
// } else {
|
//
|
// }
|
// }, "json");
|
}
|
|
|
//单播放和四播放相互切换
|
var $tabHd = $(".sp-tab-hd span");
|
$tabHd.click(function () {
|
var html = '<img src="./images/sp-img.png" class="sp-hideImg"/>';
|
//判断当前播放页并切换
|
if (tagVideo) { //单播放转四播放时，取单播放给四播放第一个
|
//标记为四播放页
|
tagVideo = false;
|
number = 0;
|
$("#video0").html(html);
|
} else { //四播放转单播放时，取四播放第一个给单播放
|
//标记为单播放页
|
tagVideo = true;
|
$("#video1").html(html);
|
$("#video2").html(html);
|
$("#video3").html(html);
|
$("#video4").html(html);
|
}
|
var $index = $tabHd.index(this);
|
var $tabBd = $(".sp-tab-bd .sp-showBox");
|
$(this).addClass("active").siblings().removeClass("active");
|
$tabBd.eq($index).addClass("show").siblings().removeClass("show");
|
});
|
|
|
