You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
117 lines
3.4 KiB
117 lines
3.4 KiB
1 year ago
|
<!DOCTYPE html>
|
||
|
|
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<title>Title</title>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
.spth_win {
|
||
|
|
width: 320px;
|
||
|
|
height: 564px !important;
|
||
|
|
z-index: 9999;
|
||
|
|
position: absolute;
|
||
|
|
left: calc(50% - 142px);
|
||
|
|
top: calc(50% - 254px) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.spth_control {
|
||
|
|
position: absolute;
|
||
|
|
bottom: 30px;
|
||
|
|
left: 18px;
|
||
|
|
width: 284px;
|
||
|
|
height: 100px;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
z-index: 999;
|
||
|
|
}
|
||
|
|
.loading{
|
||
|
|
width: 150px;
|
||
|
|
height: 30px;
|
||
|
|
font-size: 20px;
|
||
|
|
line-height: 20px;
|
||
|
|
position: absolute;
|
||
|
|
top: calc(50% - 55px);
|
||
|
|
left: calc(50% - 75px);
|
||
|
|
z-index: 998;
|
||
|
|
color: #fff;
|
||
|
|
}
|
||
|
|
.spth_control_left {
|
||
|
|
width: 170px;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
justify-content: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.spth_control_left p, .spth_control_left span {
|
||
|
|
font-size: 18px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.spth_control_left p {
|
||
|
|
color: #11D0C9;
|
||
|
|
margin: 10px 0 0 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.spth_control_right {
|
||
|
|
width: 90px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.callOver {
|
||
|
|
width: 28px;
|
||
|
|
height: 28px;
|
||
|
|
margin-top: 15px;
|
||
|
|
background: url(images/callOver.png) no-repeat;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* .hang_up::before {
|
||
|
|
background: url("images/callOver.png") no-repeat;
|
||
|
|
width: 26px;
|
||
|
|
height: 8px;
|
||
|
|
display: block;
|
||
|
|
margin-bottom: 10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.hang_up::after {
|
||
|
|
content: '通话结束';
|
||
|
|
} */
|
||
|
|
|
||
|
|
.open_btn {
|
||
|
|
height: 50px;
|
||
|
|
width: 200px;
|
||
|
|
font-size: 25px;
|
||
|
|
border: 2px solid red;
|
||
|
|
border-radius: 15px;
|
||
|
|
text-align: center;
|
||
|
|
line-height: 50px;
|
||
|
|
cursor: pointer
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<!-- <div class="open_btn" onclick="openVideoCall()">开启视频通话</div> -->
|
||
|
|
<div id="spth_win" class="spth_win">
|
||
|
|
<div id="agora_remote_video" style="width: 284px;height: 509px;position: relative;z-index: 999;"></div>
|
||
|
|
<div class="loading">正在呼叫中···</div>
|
||
|
|
<div class="spth_control">
|
||
|
|
<div class="spth_control_left">
|
||
|
|
<p>联系人：<span id="spth_caller"></span></p>
|
||
|
|
</div>
|
||
|
|
<div class="spth_control_right">
|
||
|
|
<div class="callOver" onclick="closeVideoCall()"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
<script src="jquery.min.js"></script>
|
||
|
|
<script src="trtc/AgoraRTCSDK-2.7.0.js"></script>
|
||
|
|
<script src="trtc/popper.js" type="text/javascript"></script>
|
||
|
|
<script src="trtc/toastify.js" type="text/javascript"></script>
|
||
|
|
<script src="trtc/bootstrap-material-design.min.js" type="text/javascript"></script>
|
||
|
|
<script src="trtc/trtc.js" type="text/javascript"></script>
|
||
|
|
<script src="trtc/lib-generate-test-usersig.min.js" type="text/javascript"></script>
|
||
|
|
<script src="trtc/GenerateTestUserSig.js" type="text/javascript"></script>
|
||
|
|
<script src="trtc/utils.js" type="text/javascript"></script>
|
||
|
|
<script src="trtc/rtc-client.js" type="text/javascript"></script>
|
||
|
|
<script src="../../application.js" type="text/javascript"></script>
|
||
|
|
<script src="demo.js" type="text/javascript"></script>
|
||
|
|
</html>
|