118 lines
4.1 KiB
HTML
118 lines
4.1 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html>
|
|||
|
|
<head>
|
|||
|
|
<title>视频查看</title>
|
|||
|
|
<meta charset="UTF-8"/>
|
|||
|
|
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate"/>
|
|||
|
|
<meta http-equiv="Cache" content="no-cache">
|
|||
|
|
<meta http-equiv="Pragma" content="no-cache" />
|
|||
|
|
<meta http-equiv="Expires" content="0" />
|
|||
|
|
<link rel="stylesheet" href="dist/css/layui.css" />
|
|||
|
|
<script src="jquery-1.11.1.js"></script>
|
|||
|
|
<script src="AgoraRTC_N-4.11.0.js"></script>
|
|||
|
|
<script src="agora-rtm-sdk-1.2.2.js"></script>
|
|||
|
|
<script src="dist/layui.all.js"></script>
|
|||
|
|
<!--给录像文件添加时间进度条-->
|
|||
|
|
<script src="fix-webm-duration.js"></script>
|
|||
|
|
<script src="js/qrcode.min.js"></script>
|
|||
|
|
</head>
|
|||
|
|
<body
|
|||
|
|
<!--视频显示-->
|
|||
|
|
<div id="video">
|
|||
|
|
<div class="inTheVideo">
|
|||
|
|
<img src="./images/inTheVideo.png" alt="" />
|
|||
|
|
<span>REC</span>
|
|||
|
|
</div>
|
|||
|
|
<!--视频信息-->
|
|||
|
|
<div class="videoInfo">
|
|||
|
|
<p>丢包率:<span class="PacketLossRate">0</span>(%)</p>
|
|||
|
|
<p>接收码率:<span class="RecvBitrate">0</span>(Kbps)</p>
|
|||
|
|
<p>渲染帧率:<span class="RenderFrameRate">0</span>(fps)</p>
|
|||
|
|
<p>播放总时间:<span class="TotalPlayDuration">0</span>(s)</p>
|
|||
|
|
<p>卡顿总时间:<span class="TotalFreezeTime">0</span>(s)</p>
|
|||
|
|
<p>传输延时:<span class="TransportDelay">0</span>(ms)</p>
|
|||
|
|
</div>
|
|||
|
|
<div id="qrcode"></div>
|
|||
|
|
<div id="agora_local"></div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!--视频操作-->
|
|||
|
|
<div class="videoNav">
|
|||
|
|
<p class="nav">
|
|||
|
|
<img src="images/videoExit.png" alt="" class="videoExit" title="退出"/>
|
|||
|
|
<img src="images/closeMute.png" alt="" title="静音" mute="close" class="closeMute"/>
|
|||
|
|
<img src="images/videoImg.png" alt="" title="截图" class="videoImg"/>
|
|||
|
|
<img src="images/startRecording.png" alt="" title="开始录像" class="startRecording" state="open"/>
|
|||
|
|
<img src="images/videoWalk.png" alt="" title="对讲" state="close" class="videoWalk"/>
|
|||
|
|
<img src="images/videoFullscreen.png" alt="" title="全屏" model="exitfullScreen" class="videoFullscreen"/>
|
|||
|
|
<img src="images/videoReInfo.png" alt="" title="视频信息" state="close" class="videoReInfo"/>
|
|||
|
|
</p>
|
|||
|
|
<div id="slideTest1" class="demo-slider"></div>
|
|||
|
|
<p class="power">
|
|||
|
|
<img src="images/power100.png" alt="" title="电量"/>
|
|||
|
|
<span></span>
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!--倒计时-->
|
|||
|
|
<div class="videoTitle">
|
|||
|
|
<p>视频关闭中...</p>
|
|||
|
|
<p>正在努力关闭视频中,还需<span class="close_ing_time"></span>秒</p>
|
|||
|
|
<p>
|
|||
|
|
<button type="button" class="class="layui-btn layui-btn-primary">确认</button>
|
|||
|
|
<button type="button" class="class="layui-btn layui-btn-primary">取消</button>
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!--截图-->
|
|||
|
|
<div class="canvasImg">
|
|||
|
|
<div class="canvasImgBox">
|
|||
|
|
<canvas id="canvas"></canvas>
|
|||
|
|
<p>
|
|||
|
|
<a href="#" id="save" download=".png">保存</a>
|
|||
|
|
<button id="cancel">取消</button>
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 前后摄像图切换 -->
|
|||
|
|
<!-- <div class="videoRotate">
|
|||
|
|
<p><button rotate='0' class="carmeOper bgColor">0度</button></p>
|
|||
|
|
<p>
|
|||
|
|
<button rotate='1' class="carmeOper">90度</button>
|
|||
|
|
<button dir="1" class="carmeDir">后</button>
|
|||
|
|
<button rotate='3' class="carmeOper">270度</button>
|
|||
|
|
</p>
|
|||
|
|
<p><button rotate='2' class="carmeOper">180度</button></p>
|
|||
|
|
</div> -->
|
|||
|
|
|
|||
|
|
|
|||
|
|
<!--当js文件发生变化的时候，自动清除浏览器缓存,只要标签后面的v每次不一样浏览器就更新了阿-->
|
|||
|
|
<script>
|
|||
|
|
//创建一个script标签
|
|||
|
|
function loadScriptString() {
|
|||
|
|
var timeStamp=new Date().getTime();
|
|||
|
|
var script = document.createElement("script"); //创建一个script标签
|
|||
|
|
script.type = "module";
|
|||
|
|
script.src=`js/moveDeviceVideoOne.js?v=${timeStamp}`;
|
|||
|
|
document.getElementsByTagName('head')[0].appendChild(script);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
//创建一个link标签
|
|||
|
|
function loadLinkString(){
|
|||
|
|
var timeStamp=new Date().getTime();
|
|||
|
|
var css = document.createElement("link"); //创建一个script标签
|
|||
|
|
css.rel = "stylesheet";
|
|||
|
|
css.href=`css/moveDeviceVideoOne.css?v=${timeStamp}`
|
|||
|
|
document.getElementsByTagName('head')[0].appendChild(css);
|
|||
|
|
|
|||
|
|
$("#video").css("height","720px");
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
loadScriptString();
|
|||
|
|
loadLinkString();
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
</body>
|
|||
|
|
</html>
|