<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>观看视频</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />
<script src="js/jquery-1.5.1.min.js"></script>
<script src="js/jsmpeg.min.js"></script>
<style>
* {
font-size: 14px;
}
.seewrap {
background-color: #f5f5f5;
border-radius: 10px 10px 0 0;
min-height: 300px;
padding: 20px;
margin-top: -10px;
}
.seetitle {
font-size: 16px;
font-weight: bold;
}
.errmsg {
color: red;
}
.logwrap {
display: flex;
justify-content: space-between;
vertical-align: middle;
align-items: center;
}
.monitorwrap {
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
width: 100%;
min-height: 300px;
background-color: black;
padding-bottom: 20px;
}
.nodata {
text-align: center;
margin-top: 40px;
}
.grow-item {
display: flex;
justify-content: space-between;
}
.grow-item .time-line {
position: relative;
height: auto;
padding: 8px 17px;
border-left: 1px solid #e5e6e9;
}
.grow-item:last-child .time-line:after {
content: '';
position: absolute;
bottom: 0;
left: -7px;
width: 14px;
height: 17px;
border-radius: 5px;
background-color: #e5e6e9;
transform: perspective(4px) rotateX(12deg);
}
.grow-item .time-line .time-line-dot {
position: absolute;
left: -7px;
width: 10px;
height: 10px;
top: 12px;
background-color: #ffffff;
border-radius: 50%;
border: solid 1px #d2d3d4;
}
.grow-item .time-line .time-line-dot::after {
content: '';
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #f49f16;
}
.grow-item .time-line .time-line-title {
font-weight: bold;
color: #171f31;
line-height: 23px;
}
.grow-item .time-line .time-line-cont {
font-size: 14px;
color: #353f57;
line-height: 20px;
}
.loadbg {
text-align: center;
color: #ffffff;
}
</style>
<script>
//取得cookie
function getCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';'); //把cookie分割成组
for (var i = 0; i < ca.length; i++) {
var c = ca[i]; //取得字符串
while (c.charAt(0) == ' ') { //判断一下字符串有没有前导空格
c = c.substring(1, c.length); //有的话,从第二位开始取
}
if (c.indexOf(nameEQ) == 0) { //如果含有我们要的name
return unescape(c.substring(nameEQ.length, c.length)); //解码并截取我们要值
}
}
return false;
}
//设置cookie
function setCookie(name, value, seconds) {
seconds = seconds || 0; //seconds有值就直接赋值,没有为0,这个根php不一样。
var expires = "";
if (seconds != 0) { //设置cookie生存时间
var date = new Date();
date.setTime(date.getTime() + (seconds * 1000));
expires = "; expires=" + date.toGMTString();
}
document.cookie = name + "=" + escape(value) + expires + "; path=/"; //转码并赋值
}
function refreshId() {
console.log('refresh');
//唯一才执行
//alert($("#hidisload").val());
//if ($("#hidisload").val() != "1") {
// // return;
//}
var IP = $("#hidIp").val();
if (IP != "") {
console.log('getkey', getCookie('cookiekey' + IP));
$.ajax({
type: "POST",
url: "/ajax/SeeMonitorHandler.ashx",
data: { act: 'refreshcache', IP: IP, Key: getCookie('cookiekey' + IP), BabyKey: $("#hidbabykey").val() },
dataType: "json",
success: function (e) {
if (e.ResultCode == 1) {
console.log(e.ResultMessage);
//chenggg
$("#hidIp").val(e.ResultMessage.split('|')[0]);
var key = e.ResultMessage.split('|')[1];
$("#hidkey").val(key);
$("#hidIPkey").val(e.ResultMessage.split('|')[2]);
//存3分钟
console.log("refreshkey", key);
setCookie("cookiekey" + IP, key, 180);
} else {
alert(e.ResultMessage);
}
}
});
}
}
function GetQueryString(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);
if (r != null) return unescape(r[2]); return null;
}
var player = null;
setInterval(refreshId, 240000);
$(function () {
console.log('load');
var babykey = GetQueryString("babykey");
$("#hidbabykey").val(babykey);
$.ajax({
type: "POST",
url: "/ajax/SeeMonitorHandler.ashx",
data: { act: 'checktoken', BabyKey: babykey, token: GetQueryString("token") },
dataType: "json",
success: function (e) {
if (e.ResultCode == 1) {
//2分钟 刷新一次
console.log(e.ResultMessage);
var IP = e.ResultMessage.split('|')[0];
$("#hidIp").val(IP);
var cookieKey = getCookie('cookiekey' + IP);
var key = e.ResultMessage.split('|')[1];
if (cookieKey != '' && cookieKey != 'false') {
key = cookieKey;
}
$("#hidkey").val(key);
//缓存3分钟
setCookie("cookiekey" + IP, key, 180);
var canvas = document.getElementById('video-canvas');
var key = e.ResultMessage.split('|')[2]; console.log("观看key", key);
var url = 'ws://' + document.location.hostname + ':8082/' + key;
try {
player = new JSMpeg.Player(url, { canvas: canvas });
console.log(player);
console.log('animationId', player.animationId);
console.log('isPlaying', player.isPlaying);
if (player.isPlaying == true) {
$("#video-canvas").show();
} else {
}
//间隔几秒再显示
setTimeout("show()", 1000);
} catch (err) {
console.log("cuowu" + err);
}
if (e.lstLog.length == 0) {
$("#divlog").html(` <p class="nodata">暂无观看记录</p>`);
} else {
var strlog = '';
var obj = e.lstLog;
$.each(obj, function (n, value) {
strlog += ` <div class="grow-item"> <div class="time-line"> <div class="time-line-dot"></div> <div class="time-line-title">${value.AddTime}</div><div class='time-line-cont' >观看宝宝监控</div></div></div>`;
});
$("#divlog").html(strlog);
}
} else {
console.log(e.ResultMessage);
$(".errmsg").html(e.ResultMessage);
$("#divlog").html(` <p class="nodata">暂无观看记录</p>`);
}
}
});
});
function show() {
if (player.isPlaying == true && player.currentTime > 0) {
$("#video-canvas").show();
$(".loadbg").hide();
}
else {
setTimeout("show()", 1000);
}
}
</script>
</head>
<body style="margin:0 auto;">
<input type="hidden" id="hidisload" name="hidisload" />
<input type="hidden" id="hidbabykey" name="hidbabykey" />
<input type="hidden" id="hidIp" name="hidIp" />
<input type="hidden" id="hidkey" name="hidkey" />
<input type="hidden" id="hidIPkey" name="hidIPkey" />
<div class="monitorwrap">
<div class="loadbg">
<img src="/images/loading2.gif" />
<p>视频加载中...</p>
</div>
<canvas id="video-canvas" style="display:none;border:none;width:100%;max-width:800px"></canvas>
</div>
<div class="seewrap">
<div class="logwrap">
<div class="seetitle">观看记录</div>
<div class="errmsg"></div>
</div>
<div id="divlog" style="margin-left:10px;"></div>
</div>
<script type="text/javascript">
</script>
</body>
</html>