anxiao_web/rtc/moveDeviceTwoAudio.html

126 lines
4.0 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!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="../js/url.js"></script>
<script src="dist/layui.all.js"></script>
<!--给录像文件添加时间进度条-->
<script src="fix-webm-duration.js"></script>
</head>
<body
<!--视频显示-->
<div id="video">
<!-- <div class="inTheVideo">
<img src="../images/inTheVideo.png" alt="" />
<span>REC</span>
</div> -->
<div class="talkTop">
<p class="talkTime">00:00</p>
</div>
<div class="talkCenter">
<div>
<img src="./images/walkPerson.png">
</div>
<div class="talkName"></div>
<div class="talkDelayText"></div>
</div>
<div class="talkBottom">
<div>
<p state="open" class="videoWalk">
<img src="./images/mikeOpen.png" alt="">
<span>麦克风已开</span>
</p>
<p class="videoExit" >
<img src="./images/closeAudio.png" alt="">
<span>挂断</span>
</p>
<p state="open" class="closeMute">
<img src="./images/hornOpen.png" alt="">
<span>扬声器已开</span>
</p>
</div>
</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="agora_local" style="display:inline-block;position:absolute;right:0;z-index:100000;"></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/videoWalk.png" alt="" title="对讲" state="close" class="videoWalk"/>
<img src="images/videoReInfo.png" alt="" title="音频数据" state="close" class="videoReInfo"/>
</p>
<div id="slideTest1" class="demo-slider"></div>
</div> -->
<!--倒计时-->
<!-- <div class="videoTitle">
<p>视频关闭中...</p>
<p>正在努力关闭视频中,还需<span class="close_ing_time"></span>秒</p>
<p><button>确认</button><button>关闭</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> -->
<!--当js文件发生变化的时候自动清除浏览器缓存,只要标签后面的v每次不一样浏览器就更新了阿-->
<script>
//创建一个script标签
function loadScriptString() {
var timeStamp=new Date().getTime();
var script = document.createElement("script"); //创建一个script标签
script.type = "module";
script.src=`js/moveDeviceTwoAudio.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/moveDeviceTwoAudio.css?v=${timeStamp}`
document.getElementsByTagName('head')[0].appendChild(css);
// $("#video").css("height","720px");
}
loadScriptString();
loadLinkString();
</script>
</body>
</html>