607 lines
27 KiB
HTML
607 lines
27 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
|
||
<head>
|
||
<title>TRTC实时音视频通话</title>
|
||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=0.7, user-scalable=no, shrink-to-fit=no">
|
||
<link rel="stylesheet" href="./css/bootstrap-material-design.min.css">
|
||
<link rel="stylesheet" href="./css/index.css">
|
||
<link rel="stylesheet" href="./css/room.css">
|
||
<!-- 引入样式 -->
|
||
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
|
||
<!-- 引入组件库 -->
|
||
|
||
<script>
|
||
(function (designWidth, maxWidth) {
|
||
var doc = document,
|
||
win = window,
|
||
docEl = doc.documentElement,
|
||
remStyle = document.createElement("style"),
|
||
tid;
|
||
|
||
function refreshRem() {
|
||
|
||
var width = docEl.getBoundingClientRect().width;
|
||
// maxWidth = maxWidth || 540; //不需要判断最大宽度
|
||
// width > maxWidth && (width = maxWidth);
|
||
var rem = width * 100 / designWidth;
|
||
console.log(rem)
|
||
|
||
remStyle.innerHTML = 'html{font-size:' + rem / 100 + 'px;}';
|
||
}
|
||
|
||
if (docEl.firstElementChild) {
|
||
docEl.firstElementChild.appendChild(remStyle);
|
||
} else {
|
||
var wrap = doc.createElement("div");
|
||
wrap.appendChild(remStyle);
|
||
doc.write(wrap.innerHTML);
|
||
wrap = null;
|
||
}
|
||
//要等 wiewport 设置好后才能执行 refreshRem，不然 refreshRem 会执行2次；
|
||
refreshRem();
|
||
|
||
win.addEventListener("resize", function () {
|
||
clearTimeout(tid); //防止执行两次
|
||
tid = setTimeout(refreshRem, 300);
|
||
}, false);
|
||
|
||
win.addEventListener("pageshow", function (e) {
|
||
if (e.persisted) { // 浏览器后退的时候重新计算
|
||
clearTimeout(tid);
|
||
tid = setTimeout(refreshRem, 300);
|
||
}
|
||
}, false);
|
||
|
||
if (doc.readyState === "complete") {
|
||
doc.body.style.fontSize = "16px";
|
||
} else {
|
||
doc.addEventListener("DOMContentLoaded", function (e) {
|
||
doc.body.style.fontSize = "16px";
|
||
}, false);
|
||
}
|
||
})(1366, 1024);
|
||
</script>
|
||
<style>
|
||
video{
|
||
position: unset !important;
|
||
}
|
||
#member-list > div{
|
||
padding: 13rem;
|
||
border-bottom: 1rem solid #EEEEEE;
|
||
}
|
||
.liaotian{
|
||
grid-area: 3/1/4/5;
|
||
margin-top: 28rem;
|
||
height: 90%;
|
||
margin-left: 10rem;
|
||
width: 98%;
|
||
background-color: #fff;
|
||
border-radius: 17rem;
|
||
padding: 24rem 28rem 14rem 28rem !important;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
.wenzi{
|
||
width: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
height: 100%;
|
||
overflow-y: auto;
|
||
|
||
}
|
||
.wenzi > div{
|
||
width: 100%;
|
||
font-size: 11rem;
|
||
}
|
||
.wenzi > div >p:first-child {
|
||
margin-right: 33rem;
|
||
}
|
||
.wenzi > div >p span{
|
||
color: #08AE98;
|
||
}
|
||
.fasongkuang{
|
||
width: 100%;
|
||
height: 29rem;
|
||
display: flex;
|
||
align-items: flex-end;
|
||
justify-content: space-between;
|
||
flex-shrink: 0;
|
||
border-top: 1rem solid #DCDFE0;
|
||
}
|
||
.fasongkuang input{
|
||
font-size: 11rem;
|
||
color: #333;
|
||
width: 430rem;
|
||
border: none;
|
||
|
||
}
|
||
.fasonganniu{
|
||
display: flex;
|
||
font-size: 11rem;
|
||
color: #08AE98;
|
||
align-items: center;
|
||
}
|
||
.fasonganniu img{
|
||
width: 15rem;
|
||
height: 12rem;
|
||
margin-left: 7rem;
|
||
}
|
||
.fasongkuang input::placeholder{
|
||
font-size: 11rem;
|
||
}
|
||
.fasongkuang input:focus{ border: none; background: #fff; outline: none;}
|
||
.guanbibutton{
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
align-items: center;
|
||
|
||
}
|
||
.guanbibutton > button {
|
||
margin-left: 10rem;
|
||
width: 40rem;
|
||
height: 10rem;
|
||
}
|
||
.modal-content{
|
||
border-radius: 3rem;
|
||
padding: 14rem;
|
||
margin-top: 15rem;
|
||
}
|
||
.modal-content .title{
|
||
width: 100%;
|
||
font-size: 10rem;
|
||
color: #595959;
|
||
|
||
}
|
||
.modal-content .buttons{
|
||
width: 100%;
|
||
font-size: 8rem;
|
||
color: #595959;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
margin-top: 8rem;
|
||
}
|
||
.modal-content .buttons > div{
|
||
border: 1px solid #D9D9D9;
|
||
padding: 4rem 14rem;
|
||
margin-left: 11rem;
|
||
color: #595959;
|
||
border-radius: 3rem;
|
||
cursor:pointer;
|
||
}
|
||
.modal-content .buttons .back{
|
||
background-color: #1890FF;
|
||
color: #fff;
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
<div id="root">
|
||
|
||
|
||
<!-- 设备检测界面弹窗 -->
|
||
<div id="device-testing-root" style="display: none;">
|
||
<!-- 设备检测卡片 -->
|
||
<div class="device-testing-card">
|
||
<!-- 设备检测准备界面 -->
|
||
<div id="device-testing-prepare" class="device-testing-prepare">
|
||
<div class="testing-title">设备连接</div>
|
||
<div class="testing-prepare-info">设备检测前请务必给当前页面开放摄像头，麦克风权限哦~</div>
|
||
<div class="device-display">
|
||
<div id="device-camera" class="device icon-normal">
|
||
<svg class="icon" aria-hidden="true">
|
||
<use xlink:href="#icon-shiping-xue"></use>
|
||
</svg>
|
||
</div>
|
||
<div id="device-voice" class="device icon-normal">
|
||
<svg class="icon" aria-hidden="true">
|
||
<use xlink:href="#icon-shengyin"></use>
|
||
</svg>
|
||
</div>
|
||
<div id="device-mic" class="device icon-normal">
|
||
<svg class="icon" aria-hidden="true">
|
||
<use xlink:href="#icon-maikefeng-xue"></use>
|
||
</svg>
|
||
</div>
|
||
<div id="device-network" class="device icon-normal">
|
||
<svg class="icon" aria-hidden="true">
|
||
<use xlink:href="#icon-wangluo"></use>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
<div id="device-loading" class="loading-background">
|
||
<div class="device-loading"></div>
|
||
</div>
|
||
<!-- 连接结果提示 -->
|
||
<div class="connect-info">
|
||
<!-- 连接结果 -->
|
||
<div id="connect-info"></div>
|
||
<!-- 错误icon及错误解决指引 -->
|
||
<div id="connect-attention-container" class="connect-attention-container" style="display: none;">
|
||
<div id="connect-attention-icon" class="connect-attention-icon">
|
||
<svg class="icon" aria-hidden="true">
|
||
<use xlink:href="#icon-warn"></use>
|
||
</svg>
|
||
</div>
|
||
<div id="connect-attention-info" class="connect-attention-info" style="display: none;">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 设备连接页面button -->
|
||
<div class="testing-btn-display">
|
||
<div id="start-test-btn" class="test-btn start-test start-gray">开始检测</div>
|
||
<div id="connect-again-btn" class="test-btn connect-again" style="display: none;">重新连接</div>
|
||
</div>
|
||
</div>
|
||
<!-- 设备检测tab页 -->
|
||
<div id="device-testing" class="device-testing" style="display: none;">
|
||
<div class="device-testing-title">
|
||
<div id="camera-testing" class="testing icon-gray">
|
||
<svg class="icon" aria-hidden="true">
|
||
<use xlink:href="#icon-shiping-xue"></use>
|
||
</svg>
|
||
</div>
|
||
<div id="voice-testing" class="testing icon-gray">
|
||
<svg class="icon" aria-hidden="true">
|
||
<use xlink:href="#icon-shengyin"></use>
|
||
</svg>
|
||
</div>
|
||
<div id="mic-testing" class="testing icon-gray">
|
||
<svg class="icon" aria-hidden="true">
|
||
<use xlink:href="#icon-maikefeng-xue"></use>
|
||
</svg>
|
||
</div>
|
||
<div id="network-testing" class="testing icon-gray">
|
||
<svg class="icon" aria-hidden="true">
|
||
<use xlink:href="#icon-wangluo"></use>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
<!-- 设备检测-摄像头检测 -->
|
||
<div id="camera-testing-body" class="testing-body" style="display: none;">
|
||
<div class="device-list camera-device-list">
|
||
<div class="select-title" style="display: block;">摄像头选择</div>
|
||
<div class="select-list" style="display: block;">
|
||
<select name="select" id="camera-select" class="device-select"></select>
|
||
</div>
|
||
</div>
|
||
<div id="camera-video" class="camera-video"></div>
|
||
<div class="testing-info-container">
|
||
<div class="testing-info">是否可以清楚的看到自己？</div>
|
||
<div class="button-list">
|
||
<div id="camera-fail" class="fail-button">看不到</div>
|
||
<div id="camera-success" class="success-button">可以看到</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 设备检测-播放器检测 -->
|
||
<div id="voice-testing-body" class="testing-body" style="display: none;">
|
||
<div class="device-list camera-device-list">
|
||
<div class="select-title" style="display: block;">扬声器选择</div>
|
||
<div class="select-list" style="display: block;">
|
||
<select name="select" id="voice-select" class="device-select"></select>
|
||
</div>
|
||
</div>
|
||
<div class="audio-control">
|
||
<div class="audio-control-info">请调高设备音量, 点击播放下面的音频试试～</div>
|
||
<audio id="audio-player" src="https://trtc-1252463788.cos.ap-guangzhou.myqcloud.com/web/assets/bgm-test.mp3" controls></audio>
|
||
</div>
|
||
<div class="testing-info-container">
|
||
<div class="testing-info">是否可以听到声音？</div>
|
||
<div class="button-list">
|
||
<div id="voice-fail" class="fail-button">听不到</div>
|
||
<div id="voice-success" class="success-button">可以听到</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 设备检测-麦克风检测 -->
|
||
<div id="mic-testing-body" class="testing-body" style="display: none;">
|
||
<div class="device-list camera-device-list">
|
||
<div class="select-title" style="display: block;">麦克风选择</div>
|
||
<div class="select-list" style="display: block;">
|
||
<select name="select" id="mic-select" class="device-select"></select>
|
||
</div>
|
||
</div>
|
||
<div class="mic-testing-container">
|
||
<div class="mic-testing-info">对着麦克风说'哈喽'试试～</div>
|
||
<div id="mic-bar-container" class="mic-bar-container"></div>
|
||
<div id="audio-container"></div>
|
||
</div>
|
||
<div class="testing-info-container">
|
||
<div class="testing-info">是否可以看到音量图标跳动？</div>
|
||
<div class="button-list">
|
||
<div id="mic-fail" class="fail-button">看不到</div>
|
||
<div id="mic-success" class="success-button">可以看到</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 设备检测-硬件及网速检测 -->
|
||
<div id="network-testing-body" class="testing-body" style="display: none;">
|
||
<div class="testing-index-list">
|
||
<div class="testing-index-group">
|
||
<div class="testing-index">操作系统</div>
|
||
<div id="system"></div>
|
||
</div>
|
||
<div class="testing-index-group">
|
||
<div class="testing-index">浏览器版本</div>
|
||
<div id="browser"></div>
|
||
</div>
|
||
<!-- <div class="testing-index-group">
|
||
<div class="testing-index">IP地址</div>
|
||
<div id="ip"></div>
|
||
</div> -->
|
||
<div class="testing-index-group">
|
||
<div class="testing-index">屏幕共享能力</div>
|
||
<div id="screen-share"></div>
|
||
</div>
|
||
<div class="testing-index-group">
|
||
<div class="testing-index">网络质量</div>
|
||
<div id="uplink-network" class="network-loading"></div>
|
||
</div>
|
||
</div>
|
||
<div class="testing-footer">
|
||
<div id="testing-report-btn" class="test-btn">查看检测报告</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 设备检测报告 -->
|
||
<div id="device-testing-report" class="device-testing-report" style="display: none;">
|
||
<div class="testing-title">检测报告</div>
|
||
<!-- 检测报告内容 -->
|
||
<div class="device-report-list">
|
||
<!-- 摄像头报告信息 -->
|
||
<div class="device-report camera-report">
|
||
<div class="device-info">
|
||
<div class="report-icon">
|
||
<svg class="icon" aria-hidden="true">
|
||
<use xlink:href="#icon-shiping-xue"></use>
|
||
</svg>
|
||
</div>
|
||
<div id="camera-name" class="device-name"></div>
|
||
</div>
|
||
<div id="camera-testing-result" class="camera-testing-result"></div>
|
||
</div>
|
||
<!-- 扬声器报告信息 -->
|
||
<div id="voice-report" class="device-report voice-report">
|
||
<div class="device-info">
|
||
<div class="report-icon">
|
||
<svg class="icon" aria-hidden="true">
|
||
<use xlink:href="#icon-shengyin"></use>
|
||
</svg>
|
||
</div>
|
||
<div id="voice-name" class="device-name"></div>
|
||
</div>
|
||
<div id="voice-testing-result" class="voice-testing-result"></div>
|
||
</div>
|
||
<!-- 麦克风报告信息 -->
|
||
<div class="device-report mic-report">
|
||
<div class="device-info">
|
||
<div class="report-icon">
|
||
<svg class="icon" aria-hidden="true">
|
||
<use xlink:href="#icon-maikefeng-xue"></use>
|
||
</svg>
|
||
</div>
|
||
<div id="mic-name" class="device-name"></div>
|
||
</div>
|
||
<div id="mic-testing-result" class="mic-testing-result"></div>
|
||
</div>
|
||
<!-- 网络报告信息 -->
|
||
<div class="device-report network-report">
|
||
<div class="device-info">
|
||
<div class="report-icon">
|
||
<svg class="icon" aria-hidden="true">
|
||
<use xlink:href="#icon-wangluo"></use>
|
||
</svg>
|
||
</div>
|
||
<div id="network-name" class="device-name"></div>
|
||
</div>
|
||
<div id="network-testing-result" class="network-testing-result"></div>
|
||
</div>
|
||
</div>
|
||
<div class="device-report-footer">
|
||
<div id="testing-again" class="device-report-btn testing-agin">重新检测</div>
|
||
<div id="testing-finish" class="device-report-btn testing-finish">完成检测</div>
|
||
</div>
|
||
</div>
|
||
<!-- 设备检测关闭按钮 -->
|
||
<div id="device-testing-close-btn" class="device-testing-close-btn">
|
||
<svg class="icon" aria-hidden="true">
|
||
<use xlink:href="#icon-baseline-close-px"></use>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 聊天室页面 -->
|
||
<div id="room-root" class="col-div">
|
||
<!-- header -->
|
||
<div class="row-div card" style="width: 100%; height: 65rem; justify-content: space-between;border-radius: 17rem;">
|
||
<!-- 腾讯云logo -->
|
||
<div class="row-div" style="height: 100%; width: 230rem; justify-content: center">
|
||
|
||
<div style="width: 86rem; height: 23rem; font-size: 18rem; color: #333333">直播页面</div>
|
||
</div>
|
||
<!-- 分享屏幕 退出 按钮 -->
|
||
<div class="row-div" style="height: 100%; width: auto;margin-right: 28rem;">
|
||
<img id="screen-btn" style="width: 45rem; height: 45rem" src="./img/screen-off.png" alt="">
|
||
<div style="width: 20rem"></div>
|
||
<!-- id="logout-btn" -->
|
||
<!-- data-toggle="modal" data-target="#exampleModal" -->
|
||
<img data-toggle="modal" data-target="#exampleModal" style="width: 45rem; height: 45rem" src="./img/logout.png" alt="">
|
||
</div>
|
||
|
||
|
||
</div>
|
||
<!-- content -->
|
||
<div class="row-div" style="height: 100%; width: 100%; padding: 10rem">
|
||
<div class="col-div" style="width: 340rem; height: 100%; padding: 10rem">
|
||
<div class="col-div card" style="width: 100%; height: 100%; padding: 23rem;border-radius: 17rem;font-size: 14rem;">
|
||
<!-- 成员列表 -->
|
||
<div style="width: 100%;padding-bottom: 11rem;border-bottom: 1rem solid #EEEEEE;">上课人员</div>
|
||
<div id="member-list" class="col-div" style="width: 100%; justify-content: flex-start; flex: 1">
|
||
<!-- member -->
|
||
<div id="member-me" style="width: 100%; padding-left: 20rem;">
|
||
<div class="row-div member"
|
||
style="width: 100%; height: 50rem; justify-content: space-between">
|
||
<div class="member-id">(我)</div>
|
||
<div class="row-div" style="width:100rem; height: 20rem; justify-content: center">
|
||
<img id="video-btn" class="member-video-btn" style="height: 100%" src="./img/camera-on.png"
|
||
alt="">
|
||
<div style="width: 18rem"></div>
|
||
<img id="mic-btn" class="member-audio-btn" style="height: 100%" src="./img/mic-on.png"
|
||
alt="">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
<!-- 视频网格 -->
|
||
<div id="video-grid" style="height: 100%; flex: 1">
|
||
<!-- 主视频 -->
|
||
<div id="main-video" class="video-box col-div" style="justify-content: flex-end">
|
||
<!-- 主视频控制按钮 -->
|
||
<!-- <div id="main-video-btns" class="row-div"
|
||
style="width: 156rem; position: absolute; z-index: 10; justify-content: center; align-self: flex-end">
|
||
<img id="video-btn" style="width: 68rem; height: 68rem" onClick="event.cancelBubble = true"
|
||
src="./img/big-camera-on.png" alt="" title="关闭摄像头">
|
||
<img id="mic-btn" style="width: 68rem; height: 68rem" onClick="event.cancelBubble = true"
|
||
src="./img/big-mic-on.png" alt="" title="关闭麦克风">
|
||
</div> -->
|
||
<div id="mask_main" class="mask col-div">
|
||
<!-- “摄像头未开启”遮罩 -->
|
||
<div style="height: 100%; width: 100%; position: absolute; background-color: #D8D8D8"></div>
|
||
<img style="width: 63rem; height: 69rem; z-index: 10;" src="./img/camera-max.png" alt="">
|
||
<div style="height: 10rem"></div>
|
||
<div style="z-index: 10">摄像头未打开</div>
|
||
</div>
|
||
</div>
|
||
<div class="liaotian">
|
||
<div class="wenzi" id="liaotianliebiao">
|
||
|
||
|
||
</div>
|
||
<div class="fasongkuang">
|
||
<input type="text" id="shurukuang" placeholder="直播说点什么吧" >
|
||
<div class="fasonganniu" id="fasongxiaoxi">
|
||
发送
|
||
<img src="./img/fasong.png" alt="">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 小视频 -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- Modal -->
|
||
<!-- <button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||
<span aria-hidden="true">×</span>
|
||
</button> -->
|
||
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
|
||
<div class="modal-dialog">
|
||
<div class="modal-content">
|
||
<div class="title">
|
||
您确定要关闭直播吗？
|
||
</div>
|
||
<div class="buttons">
|
||
<div data-dismiss="modal">取消</div>
|
||
<div data-dismiss="modal" class="back" id="logout-btn">确定</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<script>
|
||
|
||
function GetRequest() {
|
||
var url = location.search; //获取url中"?"符后的字串
|
||
var theRequest = new Object();
|
||
if(url.indexOf("?") != -1) {
|
||
var str = url.substr(1);
|
||
strs = str.split("&");
|
||
for(var i = 0; i < strs.length; i++) {
|
||
theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
|
||
}
|
||
}
|
||
return theRequest;
|
||
};
|
||
window.url = 'https://case.sy-my.net/beelink/public/home/'
|
||
const urldata = GetRequest('roomid')
|
||
window.roomid = urldata.roomid
|
||
window.mid = urldata.memberid
|
||
window.liveid = urldata.liveid
|
||
window.uname = urldata.name
|
||
</script>
|
||
|
||
|
||
<script src="./js/jquery-3.2.1.min.js"></script>
|
||
<script src="./js/popper.js"></script>
|
||
<script src="./js/bootstrap-material-design.js"></script>
|
||
<script>
|
||
$(document).ready(function () {
|
||
$('body').bootstrapMaterialDesign();
|
||
});
|
||
</script>
|
||
<script src="./js/debug/GenerateTestUserSig.js"></script>
|
||
<script src="./js/tim-js.js"></script>
|
||
<script src="./js/iminit.js"></script>
|
||
<script src="./js/lib-generate-test-usersig.min.js"></script>
|
||
<script src="./js/iconfont.js"></script>
|
||
<script src="./js/trtc.js"></script>
|
||
<script src="./js/common.js"></script>
|
||
<script src="./js/rtc-client.js"></script>
|
||
<script src="./js/share-client.js"></script>
|
||
<script src="./js/presetting.js"></script>
|
||
<script src="./js/device-testing.js"></script>
|
||
<script src="./js/index.js"></script>
|
||
<a href="/regime/video" target="_top" id="navto"></a>
|
||
<script>
|
||
|
||
setInterval(()=>{
|
||
$.ajax({
|
||
url: window.url + 'onExitRoom',
|
||
headers: { "Authorization": "Bearer " + localStorage.getItem("token")},
|
||
method:"POST",
|
||
data:{
|
||
type:1,
|
||
memberid:window.mid,
|
||
liveid:window.liveid,
|
||
length:5
|
||
},
|
||
success(){
|
||
|
||
}
|
||
})
|
||
},5000)
|
||
</script>
|
||
<!-- import Vue before Element -->
|
||
<script src="https://unpkg.com/vue/dist/vue.js"></script>
|
||
<!-- import JavaScript -->
|
||
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
|
||
<script>
|
||
new Vue({
|
||
el: '#app',
|
||
data: function() {
|
||
return { visible: false }
|
||
},
|
||
methods:{
|
||
open(text){
|
||
this.$message({
|
||
message: text,
|
||
type: 'success'
|
||
});
|
||
},
|
||
},
|
||
mounted(){
|
||
window.message = this.open
|
||
}
|
||
})
|
||
|
||
|
||
</script>
|
||
</body>
|
||
|
||
</html> |