var layer;// 定义全局变量
|
var testList = [
|
{"id":"1","name":"测试视频#1","type":"3004","type0":"1","username":"admin","pwd":"a1234567","ipIn":"192.168.1.199","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":"测试视频#1","type":"3004","type0":"1","username":"admin","pwd":"a1234567","ipIn":"192.168.1.199","portInC":"554","portInV":"80","ipOut":"192.168.1.199","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":"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,url:null,type:null}, {id:null,url:null,type:null},
|
{id:null,url:null,type:null}, {id:null,url:null,type:null}, {id:null,url:null,type:null}];
|
|
//播放方式，IN表示内网访问，OUT表示外网访问，默认为IN
|
var videoType;
|
var deviceList = [];
|
var deviceMap = [];
|
|
(function () {
|
|
layui.use(['layer'], function () {
|
layer = layui.layer;
|
});
|
//获取URL中的参数id
|
id = getParam("id");
|
// console.log(id);
|
if (TEST_TAG) {
|
deviceList = testList;
|
|
renderCameraList();
|
}else{
|
//根据设备类型type从接口中获取同类型设备实时监控
|
initCameraList();
|
}
|
|
//根据第一个设备判断播放模式
|
firstCamera(deviceMap[id]);
|
|
//获取播放模式
|
videoType = $('#select_type').val();
|
|
//初始化时默认单播放页播放列表第一个设备
|
getMediaAddr(deviceMap[id].id);
|
|
}).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].url = null;
|
cameraData[number].id = null;
|
cameraData[number].type = null;
|
clearVideo(number);
|
}else {
|
for(var j = 1;j<cameraData.length;j++) {
|
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();
|
} else {
|
window.parent.notify("系统获取监控设备信息失败！");
|
}
|
}, "json");
|
}
|
//初始化同类型设备列表
|
function renderCameraList() {
|
var html = '';
|
if (deviceList) {
|
deviceList.forEach(function (data) {
|
deviceMap[data.id] = data;
|
});
|
console.log(deviceMap[id]);
|
if(deviceMap[id]){
|
html += '<li><a href="javascript:void(0)" onclick="getMediaAddr(\'' + deviceMap[id].id + '\')">';
|
if(deviceMap[id].type0 == "0"){
|
html += '<img src="images/qiangji.png"/><p>';
|
}
|
if(deviceMap[id].type0 == "1"){
|
html += '<img src="images/qiuji.png"/><p>';
|
}
|
html += deviceMap[id].name + '</p></a></li>';
|
$("#videoNum").html("当前共有1个视频监控");
|
}else{
|
$("#videoNum").html("当前共有0个视频监控");
|
}
|
// deviceList.forEach(function (data) {
|
// html += '<li><a href="javascript:void(0)" onclick="getMediaAddr(\'' + data.id + '\')">';
|
// 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 firstCamera(data) {
|
//判断web播放是否设置，若设置则默认使用web播放
|
if(data.webUrl){
|
//给选择框赋值
|
$("#select_type option[value='WEB']").attr("selected", true);
|
return;
|
}
|
//判断web播放是否设置，若设置使用VLC内网播放
|
if(data.mediaAddr && data.ipIn){
|
//给选择框赋值
|
$("#select_type option[value='IN']").attr("selected", true);
|
return;
|
}
|
//判断web播放是否设置，若设置使用VLC外网播放
|
if(data.mediaAddr && data.ipOut){
|
//给选择框赋值
|
$("#select_type option[value='OUT']").attr("selected", true);
|
}
|
}
|
|
//根据id获取流媒体地址
|
function getMediaAddr(deviceId) {
|
|
var data = {};
|
|
//判断设备播放模式是否支持所选方式
|
for(var i = 0; i<deviceList.length; i++){
|
if(deviceList[i].id == deviceId){
|
data = deviceList[i];
|
if(videoType == "WEB"){
|
if(deviceList[i].webUrl == null || deviceList[i].webUrl == "null" || deviceList[i].webUrl == ""){
|
layer.msg("不支持当前播放方式，请切换！",{
|
time:3000
|
});
|
return;
|
}
|
}else {
|
if(deviceList[i].mediaAddr == null || deviceList[i].mediaAddr == "null" || deviceList[i].mediaAddr == ""){
|
layer.msg("不支持当前播放方式，请切换！",{
|
time:3000
|
});
|
return;
|
}
|
}
|
}
|
}
|
|
//判断选择的设备是否已在播放中
|
for(var i = 0; i<cameraData.length; i++){
|
if(cameraData[i].id == deviceId){
|
//若选择设备在播放中，则判断正播放模式是否跟新选择的模式相同
|
if(cameraData[i].type == videoType){
|
//若播放模式一样，则直接刷新播放，不再ajax请求
|
startVideo(i, cameraData[i].url);
|
return;
|
}else {
|
//若播放模式不同，则继续，并且标记播放的div
|
if(i>0){
|
number = i-1;
|
}
|
break;
|
}
|
}
|
}
|
|
//根据设备id，更新流媒体播放地址
|
if(videoType == "WEB"){
|
//Web直播访问
|
judgeVideo(data.webUrl, deviceId);
|
}else if(videoType == "IN"){
|
//VLC内网播放
|
judgeVideo(updateMedaAddr(data), deviceId);
|
}else{
|
//VLC外网播放
|
judgeVideo(updateMedaAddrByOut(data), deviceId);
|
}
|
|
}
|
|
//判断使用哪个div播放
|
function judgeVideo(mediaAddr, deviceId) {
|
|
//判断当前是单播放页还是四播放页
|
if (!tagVideo) {
|
//四播放页时，需要判断在哪个div中播放
|
if(number == 4){
|
//若number=4，则新的播放在1中播放，重新设置number为1
|
number = 1;
|
}else {
|
//若number为1、2、3，则新的播放在 number+1 中播放
|
number += 1;
|
}
|
}
|
cameraData[number].url = mediaAddr;
|
cameraData[number].id = deviceId;
|
cameraData[number].type = videoType;
|
startVideo(number, cameraData[number].url);
|
}
|
|
//单播放和四播放相互切换
|
var $tabHd = $(".sp-tab-hd span");
|
$tabHd.click(function () {
|
//判断当前播放页并切换
|
if (tagVideo) { //单播放转四播放时，取单播放给四播放第一个
|
//标记为四播放页
|
tagVideo = false;
|
if(cameraData[number].id != null){
|
//标记播放的div
|
number = 1;
|
|
//设置播放div的流媒体地址和设备id
|
cameraData[number].url = cameraData[number-1].url;
|
cameraData[number].id = cameraData[number-1].id;
|
cameraData[number].type = cameraData[number-1].type;
|
|
//清空单播放页div的流媒体地址和设备id
|
cameraData[number-1].url = null;
|
cameraData[number-1].id = null;
|
cameraData[number-1].type = null;
|
|
//清空单播放页div
|
clearVideo(number-1);
|
|
//div播放
|
startVideo(number, cameraData[number].url);
|
}
|
} else { //四播放转单播放时，取四播放第一个给单播放
|
//标记为单播放页
|
tagVideo = true;
|
|
if(cameraData[1].id != null){
|
//标记播放的div
|
number = 0;
|
|
//设置播放div的流媒体地址和设备id
|
cameraData[number].url = cameraData[number+1].url;
|
cameraData[number].id = cameraData[number+1].id;
|
cameraData[number].type = cameraData[number+1].type;
|
|
//遍历清空四播放页div的流媒体地址和设备id
|
for(var j = 1;j<cameraData.length;j++) {
|
cameraData[j].url = null;
|
cameraData[j].id = null;
|
cameraData[j].type = null;
|
clearVideo(j);
|
}
|
|
//div播放
|
startVideo(number, cameraData[number].url);
|
}
|
}
|
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");
|
});
|
|
//播放视频
|
function startVideo(num, mediaAddr) {
|
var tag = "#video" + num;
|
$(tag).html("");
|
var html = '';
|
|
//判断播放类型，是外网访问还是内网访问
|
if(videoType == "WEB"){
|
//live模式
|
// html += '<video id="myPlayer'+num+'" width="100%" height="100%" src="'+ mediaAddr +'" [autoplay] controls playsInline webkit-playsinline></video>';
|
// 测试
|
// html += '<video id="myPlayer'+num+'" width="100%" height="100%" src="ezopen://open.ys7.com/C62644134/1.hd.live" [autoplay] controls playsInline webkit-playsinline></video>';
|
|
//hls模式
|
html += '<video id="myPlayer'+num+'" width="100%" height="100%" poster="" controls playsInline webkit-playsinline>';
|
html += '<source src="' + mediaAddr + '" type="application/x-mpegURL"/></video>';
|
//测试
|
// html += '<video id="myPlayer'+num+'" width="100%" height="100%" poster="" controls playsInline webkit-playsinline>' +
|
// '<source src="https://hls01open.ys7.com/openlive/f915255a20f546a58d8baef026509f39.m3u8" type="application/x-mpegURL"/>' +
|
// '</video>';
|
|
$(tag).append(html);
|
//初始化播放地址
|
var player = new EZUIKit.EZUIPlayer('myPlayer'+num);
|
//播放
|
player.play();
|
}else {
|
html += '<object type="application/x-vlc-plugin" id="video-1"' +
|
'events="true" width="100%" height="100%"' +
|
'pluginspage="http://www.videolan.org"' +
|
'codebase="./plugins/vlc/npapi-vlc-2.2.2.tar.xz">' +
|
'<param name="mrl" value="' + mediaAddr + '"/>'+
|
'<param name="volume" value="50"/>' +
|
'<param name="autoplay" value="true"/>' +
|
'<param name="loop" value="false"/>' +
|
'<param name="fullscreen" value="true"/>' +
|
'<param name="toolbar" value="false"/>' +
|
'</object>';
|
$(tag).append(html);
|
}
|
}
|
|
/*
|
* 调整视频路径新 ，配置路径根据摄像头品牌区别
|
*
|
* 大华： rtsp://username:password@ip:port/cam/realmonitor?channel={chanNum}&subtype=0
|
* 说明: username: 用户名。例如admin。 password: 密码。例如admin。 ip: 为设备IP。例如:10.7.8.122。
|
* port: 端口号默认为554，若为默认可不填写。 channel: 通道号，起始为1。例如通道2，则为channel=2。
|
* subtype:码流类型，主码流为0（即subtype=0），辅码流为1（即subtype=1）。
|
*
|
* 海康 rtsp://[username]:[password]@[ip]:[port]/[codec]/[channel]/[subtype]/
|
* av_stream 说明： username: 用户名。例如admin。 password: 密码。例如12345。 ip: 为设备IP。例如:192.0.0.64。
|
* port: 端口号默认为554，若为默认可不填写。 codec：有h264、MPEG-4、mpeg4这几种。
|
* channel: 通道号，起始为1。例如通道1，则为ch1。 subtype: 码流类型，主码流为main，辅码流为sub。
|
* */
|
//VLC内网访问
|
function updateMedaAddr(data) {
|
// 替换表达式中的值，例如：rtsp://{username}:{pwd}@{ip}:{port}/MPEG-4/ch{chanNum}/sub/av_stream
|
var mediaAddr = data.mediaAddr;
|
mediaAddr = mediaAddr.replace("{username}", data.username);
|
mediaAddr = mediaAddr.replace("{pwd}", data.pwd);
|
mediaAddr = mediaAddr.replace("{ip}", data.ipIn);
|
mediaAddr = mediaAddr.replace("{port}", data.portInC + "");
|
mediaAddr = mediaAddr.replace("{chanNum}", data.chanNum + "");
|
return mediaAddr;
|
}
|
//VLC外网访问
|
function updateMedaAddrByOut(data) {
|
// 替换表达式中的值，例如：rtsp://{username}:{pwd}@{ip}:{port}/MPEG-4/ch{chanNum}/sub/av_stream
|
var mediaAddr = data.mediaAddr;
|
mediaAddr = mediaAddr.replace("{username}", data.username);
|
mediaAddr = mediaAddr.replace("{pwd}", data.pwd);
|
mediaAddr = mediaAddr.replace("{ip}", data.ipOut);
|
mediaAddr = mediaAddr.replace("{port}", data.portOutC + "");
|
mediaAddr = mediaAddr.replace("{chanNum}", data.chanNumOut + "");
|
return mediaAddr;
|
}
|
|
//清空div中的object播放标签
|
function clearVideo(num) {
|
var tag = "#video" + num;
|
$(tag).html('<img src="images/sp-img.png" class="sp-hideImg"/>');
|
}
|
