代码拉取完成，页面将自动刷新
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
body {
margin: 0px;
padding: 0px;
}
.tab {
width: 100%;
height: 100%;
/* 设置背景颜色，背景图加载过程中会显示背景色 */
background-color: #464646;
}
#mainTab {
/* 加载背景图 */
background-image: url(images/bg.jpg);
/* 背景图垂直、水平均居中 */
background-position: center center;
/* 背景图不平铺 */
/*background-repeat: no-repeat;*/
/* 当内容高度大于图片高度时，背景图像的位置相对于viewport固定 */
background-attachment: fixed;
/* 让背景图基于容器大小伸缩 */
background-size: 100% 100%;
}
.loginInfo {
padding-top: 50px;
}
.userId {
color: white;
text-align: center;
font-size: 16px;
}
.backButton {
padding: 20px 0px 0px 0px;
text-align: center;
font-size: 20px;
width: 200px;
height: 50px;
background-color: black;
color: white;
cursor: pointer;
}
.contentcontent {
background-color: #67CF22;
}
.topic {
border-radius: 20px;
margin: 30px auto 30px auto;
padding: 20px 0px 0px 0px;
text-align: center;
font-size: 20px;
color: white;
width: 400px;
height: 50px;
background-color: #3dc25a;
cursor: pointer;
}
.logintopic {
margin: 5px auto 5px auto;
padding: 0px 0px 0px 0px;
text-align: center;
font-size: 20px;
color: white;
width: 50px;
height: 30px;
background-color: #B22222;
cursor: pointer;
}
.button2 {
height: 30px;
background-color: transparent;
text-align: center;
line-height: 30px;
cursor: pointer;
border: inset;
border-width: 1px;
border-color: transparent;
border-bottom-color: #e5e5ce;
}
.left {
float: left;
width: 10%;
height: 100%;
background-color: #ffffff;
}
.left .backButton {
width: 100%;
}
.right {
float: right;
width: 90%;
height: 100%;
}
.title {
padding: 20px 0px 0px 0px;
text-align: center;
font-size: 20px;
width: 100%;
height: 50px;
background-color: #464646;
color: #ffffff;
}
.messageButton {
position: absolute;
right: 20px;
bottom: 20px;
width: 100px;
height: 100px;
margin: auto;
z-index: 1;
//background-color:red;
}
#videoMeetingZone {
width: 100%;
margin: 0px auto 0px auto;
background-color: #464646;
}
.msgBubble {
text-align: left;
word-wrap: break-word;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
padding: 5px;
margin: 5px auto 5px auto;
}
.circle {
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
text-align: center;
font-size: 20px;
}
.videoToolBar {
position: absolute;
left: 0;
top: 0;
right: 0;
width: 100%;
height: 30px;
line-height: 30px;
}
.videoToolBarIcon {
display: inline-block;
width: 18px;
height: 18px;
margin-top: 6px;
background-position: center center;
background-size: 18px 18px;
background-repeat: no-repeat;
cursor: pointer;
}
</style>
<link rel="stylesheet" type="text/css" href="css/effect.css">
<link rel="stylesheet" type="text/css" href="jquery-ui.min.css">
<script type="text/javascript" src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="jquery-ui.min.js"></script>
<script type="text/javascript" src="msg_box_plugin.js"></script>
<script type="text/javascript" src="./sdk/star_rtc_video.min.js"></script>
<script type="text/javascript" src="./sdk/star_rtc_lib.min.js"></script>
<script type="text/javascript" src="cookie_tools.js"></script>
<script type="text/javascript" src="index.js"></script>
</head>
<body>
<div id="mainTab" class="tab">
<div class="loginInfo">
<div class="userImage">
<div id="userImage" class="spinner">
</div>
</div>
<div id="userId" class="userId">请先登录</div>
<div id="login" class="logintopic">登录</div>
</div>
<div class="starServ" style="margin-top:20px">
<p>
<center style="color:white;">注：支持多浏览器，目前微信浏览器、safari、opera、firefox会出现能连通但是没画面的情况！</center>
</p>
<div id="voipButton" class="topic">一对一视频</div>
<div id="videoLiveButton" class="topic">互动直播</div>
<div id="videoMeetingButton" class="topic">多人会议</div>
<div id="superTalkButton" class="topic">超级对讲</div>
<div id="superVideoButton" class="topic">超级监控</div>
<center>安卓和iOS程序也可以和这个页面互通：
<a id="continue" onMouseOut="hideAndroidQr()" onmouseover="showAndroidQr()" class="a_pay">下载安卓版</a>
<!--<a id = "continue" onMouseOut="hideiOSQr()" onmouseover="showiOSQr()" class="a_pay">下载iOS版</a>-->
<a href='https://www.starrtc.com/demo/im/' target="_blank">匿名公共聊天室</a>
</center>
<p>
<center style="color:white;">Copyright © <a
href='https://docs.starrtc.com/en/download/'>starRTC.com</a> <span
id="sdkVersion">v1.0.3<span></center>
</p>
<div id="android_app" style="display:none;height:200px;back-ground:#f00;position:absolute;"><img
src="android.png" /></div>
<div id="ios_app" style="display:none;height:200px;back-ground:#f00;position:absolute;"><img
src="ios.png" />
</div>
</div>
</div>
<div id="voipTab" class="tab" style="display:none">
<div id="voipCallDlg" title="发送1对1聊天申请">
<p class="validateTips">向用户：<span id="calleeId"></span>发起1对1聊天申请.</p>
<div style="margin-top:10px">
<input type="checkbox" id="voipTypeAudioOnly"><label for="voipTypeAudioOnly">仅音频</label>
</div>
</div>
<div id="voipResponseDlg" title="收到1对1聊天申请">
<p class="validateTips">收到来自用户：<span id="callerId"></span>的<span id="callerType">视频</span>聊天申请.</p>
</div>
<div id="voipConnectDlg" title="正在呼叫用户">
<div class="validateTips">
<div class="spinner" style="width:100px;margin-top:10px;">
<div class="rect1" style="margin-left:5px;"></div>
<div class="rect2" style="margin-left:5px;"></div>
<div class="rect3" style="margin-left:5px;"></div>
<div class="rect4" style="margin-left:5px;"></div>
<div class="rect5" style="margin-left:5px;"></div>
</div>
</div>
</div>
<div class="left">
<div class="backButton">返回</div>
<div id="voipCtrl">
<div style="width:100%;height:100px;padding-top:25px;">
<div id="voipCalling"
style="width:75px;height:75px;margin:0 auto;background-image: url(images/call.jpg);background-size: cover;cursor:pointer;">
</div>
</div>
<div style="width:100%;height:100px;padding-top:25px;">
<div id="voipHangup"
style="width:75px;height:75px;margin:0 auto;background-image: url(images/hangup.jpg);background-size: cover;cursor:pointer;">
</div>
</div>
</div>
</div>
<div class="right">
<div id="voipTargetIdInputWrapper" class="title" style="height:70px;padding:0px;">
<input id="targetUserId" type="text"
style="width: 100%;height: 100%;background: whitesmoke;padding: 0;border-width: 0;text-align: center"
placeholder="点击这里 输入对方ID" />
</div>
<div id="voipZone" style="width:100%;height:100%">
<div id="voipVideoZone" style="width:100%;height:100%">
<div class="" style="width:100%;height:100%;position:relative;">
<div id="voipCanvas"
style="width:100%;height:100%;z-index=1;position:absolute;top:0px;left:0px;">
<canvas id="voipMyCanvas" style="width:100%;height:100%">
</canvas>
</div>
<video id="voipSmallVideo" muted style="width:15%;max-height:100%;float:left"></video>
<video id="voipBigVideo" style="max-width:85%;height:100%"></video>
<audio id="voipBigAudio" autoplay style="width:100%;height:100%" />
</div>
</div>
<div id="voipMsgWindow" style="width:15%;height:100%;float:right;position:relative;">
</div>
<div id="voipMessageButton" class="messageButton" style="display:none">
<span class="svg-icon flat-line" id="line-email">
<span class="svg-icon flat-line" id="line-message"><svg class="flat_icon"
xmlns="http://www.w3.org/2000/svg" width="100px" height="100px" viewBox="0 0 100 100">
<path class="circle"
d="M50,2.125c26.441,0,47.875,21.434,47.875,47.875c0,26.441-21.434,47.875-47.875,47.875C17.857,97.875,2.125,76.441,2.125,50C2.125,23.559,23.559,2.125,50,2.125z">
</path>
<g class="icon">
<path class="back"
d="M75.139,28.854h-3.807l-8.125-8.125c-0.381-0.38-0.999-0.382-1.381,0l-8.124,8.125H36.428c-2.79,0-5.05,2.261-5.05,5.048v25.247c0,2.79,2.26,5.051,5.05,5.051h38.711c2.789,0,5.05-2.261,5.05-5.051V33.902C80.188,31.115,77.928,28.854,75.139,28.854z">
</path>
<path class="front"
d="M63.571,35.8H24.862c-2.789,0-5.05,2.262-5.05,5.049v25.247c0,2.788,2.261,5.049,5.05,5.049h3.806l8.125,8.125c0.382,0.381,1,0.383,1.381,0l8.125-8.125h17.275c2.788,0,5.05-2.261,5.05-5.049V40.85C68.62,38.062,66.361,35.8,63.571,35.8z">
</path>
<path class="dots"
d="M34.743,50.108c-1.858,0-3.365,1.507-3.365,3.366c0,1.86,1.506,3.367,3.365,3.367c1.86,0,3.367-1.507,3.367-3.367C38.109,51.615,36.603,50.108,34.743,50.108z M44.842,50.108c-1.858,0-3.367,1.507-3.367,3.366c0,1.86,1.507,3.367,3.367,3.367c1.859,0,3.366-1.507,3.366-3.367C48.208,51.615,46.701,50.108,44.842,50.108z M54.94,50.108c-1.857,0-3.365,1.507-3.365,3.366c0,1.86,1.506,3.367,3.365,3.367c1.86,0,3.366-1.507,3.366-3.367C58.307,51.615,56.8,50.108,54.94,50.108z">
</path>
</g>
</svg></span>
</span>
</div>
</div>
</div>
</div>
<div id="videoLiveTab" class="tab" style="display:none">
<div id="videoLiveCreateDlg" title="创建直播">
<p class="validateTips">请输入直播的名称.</p>
<div>
<input type="text" name="newLiveName" id="newLiveName" value=""
class="text ui-widget-content ui-corner-all">
</div>
<div style="margin-top:10px">
<input type="checkbox" id="liveTypecheck" style="display:none"><label for="liveTypecheck"
style="display:none">公开</label>
<input type="checkbox" id="liveMediaSourceTypeCheck"><label for="liveMediaSourceTypeCheck">分享屏幕</label>
</div>
</div>
<div id="videoLiveDelDlg" title="离开直播">
<p class="validateTips">确定要离开直播间吗？</p>
</div>
<div id="videoLiveCanvasDlg" title="画板">
<div style="width:100%;height:100%;position:relative;">
<div id="videoLiveCanvas" style="width:100%;height:100%;z-index=1;position:absolute;top:0px;left:0px;">
<canvas id="videoLiveMyCanvas" style="width:100%;height:100%">
</canvas>
</div>
</div>
</div>
<div id="videoLiveApplyDlg" title="申请直播连麦">
<p class="validateTips">申请直播连麦吗？</p>
</div>
<div id="videoLiveManageDlg" title="用户管理">
<p class="validateTips">收到来自用户：<span id="applyTargetId"></span>的连麦申请.</p>
</div>
<div class="left">
<div class="backButton">返回</div>
<div id="videoLiveList"></div>
</div>
<div class="right" style="position:relative;">
<div id="videoLiveTitle" class="title"></div>
<div id="videoLiveZone" style="width:100%;height:100%;background-color:#464646;position:relative;">
<div id="videoLiveVideoZone" style="width:100%;height:100%">
<div class="" style="width:100%;height:100%">
<video id="videoLiveSelfVideo" muted style="width:100%;height:100%" />
</div>
</div>
<div id="videoLiveMsgWindow" style="width:15%;height:100%;float:right;position:relative;">
</div>
<div id="videoLiveMessageButton" class="messageButton">
<span class="svg-icon flat-line" id="line-email">
<svg class="flat_icon" xmlns="http://www.w3.org/2000/svg" width="100px" height="100px"
viewBox="0 0 100 100">
<path class="circle"
d="M50,2.125c26.441,0,47.875,21.434,47.875,47.875c0,26.441-21.434,47.875-47.875,47.875C17.857,97.875,2.125,76.441,2.125,50C2.125,23.559,23.559,2.125,50,2.125z">
</path>
<g class="icon">
<path class="top"
d="M76.162,35.079c1.113,0.731,1.113,1.917,0,2.647L52.013,53.615c-1.11,0.731-2.915,0.731-4.024,0l-24.15-15.889c-1.111-0.73-1.111-1.916,0-2.647l24.15-15.889c1.11-0.729,2.914-0.729,4.024,0L76.162,35.079z">
</path>
<path class="paper" d="M30.105,32.763h39.791v28.421H30.105V32.763z"></path>
<path class="base"
d="M23.003,36.404L50,54.165l26.997-17.761c0,0,0.006-0.667,0.006,1.688v27.002c0,2.354-1.91,4.264-4.264,4.264H27.262c-2.354,0-4.264-1.91-4.264-4.264V38.092C23,35.738,23.003,36.404,23.003,36.404z">
</path>
<path class="text"
d="M36.145,38.27h27.71c0.199,0,0.357-0.16,0.357-0.356c0-0.195-0.158-0.355-0.357-0.355h-27.71c-0.197,0-0.355,0.16-0.355,0.355C35.788,38.11,35.947,38.27,36.145,38.27z M63.854,39.691H36.144c-0.197,0-0.355,0.159-0.355,0.356c0,0.196,0.158,0.355,0.355,0.355h27.711c0.197,0,0.357-0.16,0.357-0.355C64.211,39.849,64.053,39.691,63.854,39.691z M63.854,41.822H36.144c-0.197,0-0.355,0.161-0.355,0.356c0,0.197,0.158,0.355,0.355,0.355h27.711c0.197,0,0.357-0.158,0.357-0.355C64.211,41.982,64.053,41.822,63.854,41.822z">
</path>
</g>
</svg>
</span>
</div>
<div id="videoLiveApplyButton"
style="position:absolute;left:20px;bottom:150px;width:100px;height:100px;margin:auto;z-index:1">
<span class="svg-icon flat-line" id="line-mic"><svg class="flat_icon"
xmlns="http://www.w3.org/2000/svg" width="100px" height="100px" viewBox="0 0 100 100">
<path class="circle"
d="M50,2.125c26.441,0,47.875,21.434,47.875,47.875c0,26.441-21.434,47.875-47.875,47.875C17.857,97.875,2.125,76.441,2.125,50C2.125,23.559,23.559,2.125,50,2.125z">
</path>
<g class="icon">
<path class="base"
d="M50,19.317c8.592,0,15.557,6.964,15.557,15.558v12.101c0,8.593-6.965,15.558-15.557,15.558s-15.558-6.965-15.558-15.558V34.875C34.443,26.281,41.408,19.317,50,19.317z">
</path>
<path class="stand"
d="M74.201,46.975c0-1.433-1.161-2.594-2.592-2.594c-1.434,0-2.595,1.161-2.595,2.594c0,10.501-8.512,19.015-19.014,19.015c-10.501,0-19.015-8.514-19.015-19.015c0-1.433-1.16-2.594-2.593-2.594c-1.432,0-2.593,1.161-2.593,2.594c0,12.49,9.461,22.765,21.607,24.06v4.461h-6.913c-1.432,0-2.594,1.162-2.594,2.594s1.161,2.594,2.594,2.594h19.014c1.433,0,2.593-1.162,2.593-2.594s-1.16-2.594-2.593-2.594h-6.915v-4.461C64.739,69.74,74.201,59.463,74.201,46.975z">
</path>
<path class="bars_left"
d="M34.443,33.146v3.458h10.372v-3.458H34.443z M34.443,42.653h10.372v-3.457H34.443V42.653z M34.443,48.704h10.372v-3.458H34.443V48.704z">
</path>
<g class="bars_right">
<rect x="55.187" y="33.146" width="10.371" height="3.458"></rect>
<rect x="55.187" y="39.196" width="10.371" height="3.457"></rect>
<rect x="55.187" y="45.246" width="10.371" height="3.458"></rect>
</g>
</g>
</svg></span>
</div>
<div id="videoCanvasButton"
style="position:absolute;left:150px;bottom:20px;width:100px;height:100px;margin:auto;z-index:1">
<span class="svg-icon flat-line" id="line-mic"><svg class="flat_icon"
xmlns="http://www.w3.org/2000/svg" width="100px" height="100px" viewBox="0 0 100 100">
<path class="circle"
d="M50,2.125c26.441,0,47.875,21.434,47.875,47.875c0,26.441-21.434,47.875-47.875,47.875C17.857,97.875,2.125,76.441,2.125,50C2.125,23.559,23.559,2.125,50,2.125z">
</path>
<g class="icon">
<path class="base"
d="M50,19.317c8.592,0,15.557,6.964,15.557,15.558v12.101c0,8.593-6.965,15.558-15.557,15.558s-15.558-6.965-15.558-15.558V34.875C34.443,26.281,41.408,19.317,50,19.317z">
</path>
<path class="stand"
d="M74.201,46.975c0-1.433-1.161-2.594-2.592-2.594c-1.434,0-2.595,1.161-2.595,2.594c0,10.501-8.512,19.015-19.014,19.015c-10.501,0-19.015-8.514-19.015-19.015c0-1.433-1.16-2.594-2.593-2.594c-1.432,0-2.593,1.161-2.593,2.594c0,12.49,9.461,22.765,21.607,24.06v4.461h-6.913c-1.432,0-2.594,1.162-2.594,2.594s1.161,2.594,2.594,2.594h19.014c1.433,0,2.593-1.162,2.593-2.594s-1.16-2.594-2.593-2.594h-6.915v-4.461C64.739,69.74,74.201,59.463,74.201,46.975z">
</path>
<path class="bars_left"
d="M34.443,33.146v3.458h10.372v-3.458H34.443z M34.443,42.653h10.372v-3.457H34.443V42.653z M34.443,48.704h10.372v-3.458H34.443V48.704z">
</path>
<g class="bars_right">
<rect x="55.187" y="33.146" width="10.371" height="3.458"></rect>
<rect x="55.187" y="39.196" width="10.371" height="3.457"></rect>
<rect x="55.187" y="45.246" width="10.371" height="3.458"></rect>
</g>
</g>
</svg></span>
</div>
<div id="videoLiveCreateButton"
style="position:absolute;left:20px;bottom:20px;width:100px;height:100px;margin:auto;z-index:1">
<span class="svg-icon flat-line" id="line-pencil"><svg class="flat_icon"
xmlns="http://www.w3.org/2000/svg" width="100px" height="100px" viewBox="0 0 100 100">
<path class="circle"
d="M50,4.25c26.441,0,47.875,21.434,47.875,47.875C97.875,78.566,76.441,100,50,100C17.857,100,2.125,78.566,2.125,52.125C2.125,25.684,23.559,4.25,50,4.25z">
</path>
<g class="icon">
<path class="wood" d="M26.683,55.108l16.801,16.84L23.62,75.635L26.683,55.108z"></path>
<path class="base_top"
d="M53.408,28.524l5.809,5.813L32.489,61.012l-5.807-5.75L53.408,28.524z"></path>
<path class="base_bottom"
d="M63.639,38.64l6.569,6.572L43.483,71.948l-6.635-6.575L63.639,38.64z"></path>
<path class="base_middle"
d="M58.868,33.931l6.569,6.573L38.714,67.239l-6.569-6.574L58.868,33.931z">
</path>
<path class="tip" d="M31.731,74.101l-8.635,1.776l1.776-8.638L31.731,74.101z"></path>
<path class="eraser"
d="M65.004,23.567l10.455,10.461c1.926,1.926,1.926,5.049,0,6.975L58.03,23.567C59.958,21.642,63.078,21.642,65.004,23.567z">
</path>
<path class="metal"
d="M58.555,22.899l17.429,17.437c0.322,0.321,0.322,0.843,0,1.163l-4.244,4.246c-0.32,0.322-0.841,0.322-1.163,0L53.147,28.308c-0.319-0.32-0.319-0.842,0-1.161l4.245-4.248C57.715,22.578,58.235,22.578,58.555,22.899z">
</path>
</g>
</svg></span>
</div>
</div>
</div>
</div>
<div id="videoMeetingTab" class="tab" style="display:none">
<div id="videoMeetingCreateDlg" title="创建会议室">
<p class="validateTips">请输入会议室的名称.</p>
<div>
<input type="text" name="newMeetingName" id="newMeetingName" value=""
class="text ui-widget-content ui-corner-all">
</div>
<div style="margin-top:10px">
<input type="checkbox" id="meetingTypecheck" style="display:none"><label for="meetingTypecheck"
style="display:none">公开</label>
<input type="checkbox" id="meetingMediaSourceTypeCheck"><label
for="meetingMediaSourceTypeCheck">分享屏幕</label>
</div>
</div>
<div id="videoMeetingDelDlg" title="离开会议室">
<p class="validateTips">确定要离开会议室吗？</p>
</div>
<div class="left">
<div class="backButton">返回</div>
<div id="videoMeetingList"></div>
</div>
<div class="right" style="position:relative;">
<div id="videoMeetingTitle" class="title"></div>
<div id="videoMeetingZone" style="width:100%;height:100%">
<div id="videoMeetingVideoZone" style="width:100%;height:100%">
<div class="" style="width:100%;height:100%;position:relative;">
<video id="videoMeetingSelfVideo" muted style="width:100%;height:100%"></video>
<div id="videoMeetingSelfVideoCtrl" class="videoToolBar">
<span id="videoMeetingVideoCtrl" class="videoToolBarIcon"
style="background-image: url(./images/icon-video.png);"></span>
<span id="videoMeetingAudioCtrl" class="videoToolBarIcon"
style="background-image: url(./images/icon-audio.png);"></span>
</div>
</div>
</div>
<div id="videoMeetingMsgWindow" style="width:15%;height:100%;float:right;position:relative;">
</div>
<div id="videoMeetingMessageButton" class="messageButton">
<span class="svg-icon flat-line" id="line-email">
<svg class="flat_icon" xmlns="http://www.w3.org/2000/svg" width="100px" height="100px"
viewBox="0 0 100 100">
<path class="circle"
d="M50,2.125c26.441,0,47.875,21.434,47.875,47.875c0,26.441-21.434,47.875-47.875,47.875C17.857,97.875,2.125,76.441,2.125,50C2.125,23.559,23.559,2.125,50,2.125z">
</path>
<g class="icon">
<path class="top"
d="M76.162,35.079c1.113,0.731,1.113,1.917,0,2.647L52.013,53.615c-1.11,0.731-2.915,0.731-4.024,0l-24.15-15.889c-1.111-0.73-1.111-1.916,0-2.647l24.15-15.889c1.11-0.729,2.914-0.729,4.024,0L76.162,35.079z">
</path>
<path class="paper" d="M30.105,32.763h39.791v28.421H30.105V32.763z"></path>
<path class="base"
d="M23.003,36.404L50,54.165l26.997-17.761c0,0,0.006-0.667,0.006,1.688v27.002c0,2.354-1.91,4.264-4.264,4.264H27.262c-2.354,0-4.264-1.91-4.264-4.264V38.092C23,35.738,23.003,36.404,23.003,36.404z">
</path>
<path class="text"
d="M36.145,38.27h27.71c0.199,0,0.357-0.16,0.357-0.356c0-0.195-0.158-0.355-0.357-0.355h-27.71c-0.197,0-0.355,0.16-0.355,0.355C35.788,38.11,35.947,38.27,36.145,38.27z M63.854,39.691H36.144c-0.197,0-0.355,0.159-0.355,0.356c0,0.196,0.158,0.355,0.355,0.355h27.711c0.197,0,0.357-0.16,0.357-0.355C64.211,39.849,64.053,39.691,63.854,39.691z M63.854,41.822H36.144c-0.197,0-0.355,0.161-0.355,0.356c0,0.197,0.158,0.355,0.355,0.355h27.711c0.197,0,0.357-0.158,0.357-0.355C64.211,41.982,64.053,41.822,63.854,41.822z">
</path>
</g>
</svg>
</span>
</div>
<div id="videoMeetingCreateButton"
style="position:absolute;left:20px;bottom:20px;width:100px;height:100px;margin:auto;z-index:1">
<span class="svg-icon flat-line" id="line-pencil"><svg class="flat_icon"
xmlns="http://www.w3.org/2000/svg" width="100px" height="100px" viewBox="0 0 100 100">
<path class="circle"
d="M50,4.25c26.441,0,47.875,21.434,47.875,47.875C97.875,78.566,76.441,100,50,100C17.857,100,2.125,78.566,2.125,52.125C2.125,25.684,23.559,4.25,50,4.25z">
</path>
<g class="icon">
<path class="wood" d="M26.683,55.108l16.801,16.84L23.62,75.635L26.683,55.108z"></path>
<path class="base_top"
d="M53.408,28.524l5.809,5.813L32.489,61.012l-5.807-5.75L53.408,28.524z"></path>
<path class="base_bottom"
d="M63.639,38.64l6.569,6.572L43.483,71.948l-6.635-6.575L63.639,38.64z"></path>
<path class="base_middle"
d="M58.868,33.931l6.569,6.573L38.714,67.239l-6.569-6.574L58.868,33.931z">
</path>
<path class="tip" d="M31.731,74.101l-8.635,1.776l1.776-8.638L31.731,74.101z"></path>
<path class="eraser"
d="M65.004,23.567l10.455,10.461c1.926,1.926,1.926,5.049,0,6.975L58.03,23.567C59.958,21.642,63.078,21.642,65.004,23.567z">
</path>
<path class="metal"
d="M58.555,22.899l17.429,17.437c0.322,0.321,0.322,0.843,0,1.163l-4.244,4.246c-0.32,0.322-0.841,0.322-1.163,0L53.147,28.308c-0.319-0.32-0.319-0.842,0-1.161l4.245-4.248C57.715,22.578,58.235,22.578,58.555,22.899z">
</path>
</g>
</svg></span>
</div>
</div>
</div>
</div>
<div id="superTalkTab" class="tab" style="display:none">
<div id="superTalkCreateDlg" title="创建超级聊天室">
<p class="validateTips">请输入超级聊天室的名称.</p>
<div>
<input type="text" name="newSuperTalkName" id="newSuperTalkName" value=""
class="text ui-widget-content ui-corner-all">
</div>
</div>
<div id="superTalkDelDlg" title="离开超级聊天室">
<p class="validateTips">确定要离开超级聊天室吗？</p>
</div>
<div id="superTalkStartTalkDlg" title="开始说话">
<p class="validateTips">确定要开始说话吗？</p>
</div>
<div id="superTalkEndTalkDlg" title="结束说话">
<p class="validateTips">确定要结束说话吗？</p>
</div>
<div id="superTalkStartTalkConnectDlg" title="正在开启说话">
<div class="validateTips">
<div class="spinner" style="width:100px;margin-top:10px;">
<div class="rect1" style="margin-left:5px;"></div>
<div class="rect2" style="margin-left:5px;"></div>
<div class="rect3" style="margin-left:5px;"></div>
<div class="rect4" style="margin-left:5px;"></div>
<div class="rect5" style="margin-left:5px;"></div>
</div>
</div>
</div>
<div class="left">
<div class="backButton">返回</div>
<div id="superTalkList"></div>
</div>
<div class="right" style="position:relative;">
<div id="superTalkTitle" class="title"></div>
<div id="superTalkZone" style="width:100%;height:100%">
<div id="superTalkAudioZone" style="width:100%;height:100%">
<div id="superTalkUser0" class="" style="width:25%;height:50%;float:left;display:none">
<div style="display: flex;align-items: center;justify-content: center">
<span class="svg-icon flat-shadow" id="shadow-user"><svg class="flat_icon"
xmlns="http://www.w3.org/2000/svg" width="100px" height="100px"
viewBox="0 0 100 100">
<path class="circle"
d="M50,2.125c26.441,0,47.875,21.434,47.875,47.875c0,26.441-21.434,47.875-47.875,47.875C17.857,97.875,2.125,76.441,2.125,50C2.125,23.559,23.559,2.125,50,2.125z">
</path>
<g class="icon">
<path class="body"
d="M74.302,78.127H25.698c-2.982,0-5.4-2.419-5.4-5.4l0,0l0,0c0-19.884,13.501-25.202,29.702-25.202s29.702,5.318,29.702,25.202l0,0C79.702,75.71,77.283,78.127,74.302,78.127z">
</path>
<polygon class="collar_right" points="63.501,49.325 50,54.726 55.4,62.826 ">
</polygon>
<polygon class="collar_left"
points="46.977,62.826 52.377,54.726 38.876,49.325 "></polygon>
<path class="head"
d="M50.877,21.873c8.947,0,16.201,7.254,16.201,16.201c0,8.948-7.254,16.201-16.201,16.201c-8.947,0-16.201-7.253-16.201-16.201C34.676,29.127,41.928,21.873,50.877,21.873z">
</path>
<path class="hair"
d="M67.918,39.683c-1.019,0.116-2.053,0.193-3.114,0.193c-8.816,0-16.3-4.136-19.082-9.9h-0.565c-1.256,2.194-3.435,4.371-6.296,6.022c-1.684,0.972-3.41,1.646-5.062,2.043c0.386-7.127,5.121-13.086,11.609-15.266h0.087c0.83-0.279,1.686-0.499,2.564-0.653c0.055-0.009,0.11-0.018,0.166-0.023c0.371-0.061,0.745-0.111,1.124-0.148c0.497-0.044,0.997-0.075,1.504-0.075c7.674,0,14.167,5.054,16.332,12.016c0.168,0.537,0.309,1.083,0.423,1.638c0.229,1.114,0.349,2.267,0.349,3.447C67.954,39.215,67.928,39.445,67.918,39.683z">
</path>
</g>
</svg></span>
</div>
<div id="superTalkUserName0" class="title"></div>
<audio id="superTalkAudioUser0" autoplay style="width:100%;height:100%" />
</div>
<div id="superTalkUser1" class="" style="width:25%;height:50%;float:left;display:none">
<div style="display: flex;align-items: center;justify-content: center;">
<span class="svg-icon flat-shadow" id="shadow-user"><svg class="flat_icon"
xmlns="http://www.w3.org/2000/svg" width="100px" height="100px"
viewBox="0 0 100 100">
<path class="circle"
d="M50,2.125c26.441,0,47.875,21.434,47.875,47.875c0,26.441-21.434,47.875-47.875,47.875C17.857,97.875,2.125,76.441,2.125,50C2.125,23.559,23.559,2.125,50,2.125z">
</path>
<g class="icon">
<path class="body"
d="M74.302,78.127H25.698c-2.982,0-5.4-2.419-5.4-5.4l0,0l0,0c0-19.884,13.501-25.202,29.702-25.202s29.702,5.318,29.702,25.202l0,0C79.702,75.71,77.283,78.127,74.302,78.127z">
</path>
<polygon class="collar_right" points="63.501,49.325 50,54.726 55.4,62.826 ">
</polygon>
<polygon class="collar_left"
points="46.977,62.826 52.377,54.726 38.876,49.325 "></polygon>
<path class="head"
d="M50.877,21.873c8.947,0,16.201,7.254,16.201,16.201c0,8.948-7.254,16.201-16.201,16.201c-8.947,0-16.201-7.253-16.201-16.201C34.676,29.127,41.928,21.873,50.877,21.873z">
</path>
<path class="hair"
d="M67.918,39.683c-1.019,0.116-2.053,0.193-3.114,0.193c-8.816,0-16.3-4.136-19.082-9.9h-0.565c-1.256,2.194-3.435,4.371-6.296,6.022c-1.684,0.972-3.41,1.646-5.062,2.043c0.386-7.127,5.121-13.086,11.609-15.266h0.087c0.83-0.279,1.686-0.499,2.564-0.653c0.055-0.009,0.11-0.018,0.166-0.023c0.371-0.061,0.745-0.111,1.124-0.148c0.497-0.044,0.997-0.075,1.504-0.075c7.674,0,14.167,5.054,16.332,12.016c0.168,0.537,0.309,1.083,0.423,1.638c0.229,1.114,0.349,2.267,0.349,3.447C67.954,39.215,67.928,39.445,67.918,39.683z">
</path>
</g>
</svg></span>
</div>
<div id="superTalkUserName1" class="title"></div>
<audio id="superTalkAudioUser1" autoplay style="width:100%;height:100%" />
</div>
<div id="superTalkUser2" class="" style="width:25%;height:50%;float:left;display:none">
<div style="display: flex;align-items: center;justify-content: center;">
<span class="svg-icon flat-shadow" id="shadow-user"><svg class="flat_icon"
xmlns="http://www.w3.org/2000/svg" width="100px" height="100px"
viewBox="0 0 100 100">
<path class="circle"
d="M50,2.125c26.441,0,47.875,21.434,47.875,47.875c0,26.441-21.434,47.875-47.875,47.875C17.857,97.875,2.125,76.441,2.125,50C2.125,23.559,23.559,2.125,50,2.125z">
</path>
<g class="icon">
<path class="body"
d="M74.302,78.127H25.698c-2.982,0-5.4-2.419-5.4-5.4l0,0l0,0c0-19.884,13.501-25.202,29.702-25.202s29.702,5.318,29.702,25.202l0,0C79.702,75.71,77.283,78.127,74.302,78.127z">
</path>
<polygon class="collar_right" points="63.501,49.325 50,54.726 55.4,62.826 ">
</polygon>
<polygon class="collar_left"
points="46.977,62.826 52.377,54.726 38.876,49.325 "></polygon>
<path class="head"
d="M50.877,21.873c8.947,0,16.201,7.254,16.201,16.201c0,8.948-7.254,16.201-16.201,16.201c-8.947,0-16.201-7.253-16.201-16.201C34.676,29.127,41.928,21.873,50.877,21.873z">
</path>
<path class="hair"
d="M67.918,39.683c-1.019,0.116-2.053,0.193-3.114,0.193c-8.816,0-16.3-4.136-19.082-9.9h-0.565c-1.256,2.194-3.435,4.371-6.296,6.022c-1.684,0.972-3.41,1.646-5.062,2.043c0.386-7.127,5.121-13.086,11.609-15.266h0.087c0.83-0.279,1.686-0.499,2.564-0.653c0.055-0.009,0.11-0.018,0.166-0.023c0.371-0.061,0.745-0.111,1.124-0.148c0.497-0.044,0.997-0.075,1.504-0.075c7.674,0,14.167,5.054,16.332,12.016c0.168,0.537,0.309,1.083,0.423,1.638c0.229,1.114,0.349,2.267,0.349,3.447C67.954,39.215,67.928,39.445,67.918,39.683z">
</path>
</g>
</svg></span>
</div>
<div id="superTalkUserName2" class="title"></div>
<audio id="superTalkAudioUser2" autoplay style="width:100%;height:100%" />
</div>
<div id="superTalkUser3" class="" style="width:25%;height:50%;float:left;display:none">
<div style="display: flex;align-items: center;justify-content: center;">
<span class="svg-icon flat-shadow" id="shadow-user"><svg class="flat_icon"
xmlns="http://www.w3.org/2000/svg" width="100px" height="100px"
viewBox="0 0 100 100">
<path class="circle"
d="M50,2.125c26.441,0,47.875,21.434,47.875,47.875c0,26.441-21.434,47.875-47.875,47.875C17.857,97.875,2.125,76.441,2.125,50C2.125,23.559,23.559,2.125,50,2.125z">
</path>
<g class="icon">
<path class="body"
d="M74.302,78.127H25.698c-2.982,0-5.4-2.419-5.4-5.4l0,0l0,0c0-19.884,13.501-25.202,29.702-25.202s29.702,5.318,29.702,25.202l0,0C79.702,75.71,77.283,78.127,74.302,78.127z">
</path>
<polygon class="collar_right" points="63.501,49.325 50,54.726 55.4,62.826 ">
</polygon>
<polygon class="collar_left"
points="46.977,62.826 52.377,54.726 38.876,49.325 "></polygon>
<path class="head"
d="M50.877,21.873c8.947,0,16.201,7.254,16.201,16.201c0,8.948-7.254,16.201-16.201,16.201c-8.947,0-16.201-7.253-16.201-16.201C34.676,29.127,41.928,21.873,50.877,21.873z">
</path>
<path class="hair"
d="M67.918,39.683c-1.019,0.116-2.053,0.193-3.114,0.193c-8.816,0-16.3-4.136-19.082-9.9h-0.565c-1.256,2.194-3.435,4.371-6.296,6.022c-1.684,0.972-3.41,1.646-5.062,2.043c0.386-7.127,5.121-13.086,11.609-15.266h0.087c0.83-0.279,1.686-0.499,2.564-0.653c0.055-0.009,0.11-0.018,0.166-0.023c0.371-0.061,0.745-0.111,1.124-0.148c0.497-0.044,0.997-0.075,1.504-0.075c7.674,0,14.167,5.054,16.332,12.016c0.168,0.537,0.309,1.083,0.423,1.638c0.229,1.114,0.349,2.267,0.349,3.447C67.954,39.215,67.928,39.445,67.918,39.683z">
</path>
</g>
</svg></span>
</div>
<div id="superTalkUserName3" class="title"></div>
<audio id="superTalkAudioUser3" autoplay style="width:100%;height:100%" />
</div>
<div id="superTalkUser4" class="" style="width:25%;height:50%;float:left;display:none">
<div style="display: flex;align-items: center;justify-content: center;">
<span class="svg-icon flat-shadow" id="shadow-user"><svg class="flat_icon"
xmlns="http://www.w3.org/2000/svg" width="100px" height="100px"
viewBox="0 0 100 100">
<path class="circle"
d="M50,2.125c26.441,0,47.875,21.434,47.875,47.875c0,26.441-21.434,47.875-47.875,47.875C17.857,97.875,2.125,76.441,2.125,50C2.125,23.559,23.559,2.125,50,2.125z">
</path>
<g class="icon">
<path class="body"
d="M74.302,78.127H25.698c-2.982,0-5.4-2.419-5.4-5.4l0,0l0,0c0-19.884,13.501-25.202,29.702-25.202s29.702,5.318,29.702,25.202l0,0C79.702,75.71,77.283,78.127,74.302,78.127z">
</path>
<polygon class="collar_right" points="63.501,49.325 50,54.726 55.4,62.826 ">
</polygon>
<polygon class="collar_left"
points="46.977,62.826 52.377,54.726 38.876,49.325 "></polygon>
<path class="head"
d="M50.877,21.873c8.947,0,16.201,7.254,16.201,16.201c0,8.948-7.254,16.201-16.201,16.201c-8.947,0-16.201-7.253-16.201-16.201C34.676,29.127,41.928,21.873,50.877,21.873z">
</path>
<path class="hair"
d="M67.918,39.683c-1.019,0.116-2.053,0.193-3.114,0.193c-8.816,0-16.3-4.136-19.082-9.9h-0.565c-1.256,2.194-3.435,4.371-6.296,6.022c-1.684,0.972-3.41,1.646-5.062,2.043c0.386-7.127,5.121-13.086,11.609-15.266h0.087c0.83-0.279,1.686-0.499,2.564-0.653c0.055-0.009,0.11-0.018,0.166-0.023c0.371-0.061,0.745-0.111,1.124-0.148c0.497-0.044,0.997-0.075,1.504-0.075c7.674,0,14.167,5.054,16.332,12.016c0.168,0.537,0.309,1.083,0.423,1.638c0.229,1.114,0.349,2.267,0.349,3.447C67.954,39.215,67.928,39.445,67.918,39.683z">
</path>
</g>
</svg></span>
</div>
<div id="superTalkUserName4" class="title"></div>
<audio id="superTalkAudioUser4" autoplay style="width:100%;height:100%" />
</div>
<div id="superTalkUser5" class="" style="width:25%;height:50%;float:left;display:none">
<div style="display: flex;align-items: center;justify-content: center;">
<span class="svg-icon flat-shadow" id="shadow-user"><svg class="flat_icon"
xmlns="http://www.w3.org/2000/svg" width="100px" height="100px"
viewBox="0 0 100 100">
<path class="circle"
d="M50,2.125c26.441,0,47.875,21.434,47.875,47.875c0,26.441-21.434,47.875-47.875,47.875C17.857,97.875,2.125,76.441,2.125,50C2.125,23.559,23.559,2.125,50,2.125z">
</path>
<g class="icon">
<path class="body"
d="M74.302,78.127H25.698c-2.982,0-5.4-2.419-5.4-5.4l0,0l0,0c0-19.884,13.501-25.202,29.702-25.202s29.702,5.318,29.702,25.202l0,0C79.702,75.71,77.283,78.127,74.302,78.127z">
</path>
<polygon class="collar_right" points="63.501,49.325 50,54.726 55.4,62.826 ">
</polygon>
<polygon class="collar_left"
points="46.977,62.826 52.377,54.726 38.876,49.325 "></polygon>
<path class="head"
d="M50.877,21.873c8.947,0,16.201,7.254,16.201,16.201c0,8.948-7.254,16.201-16.201,16.201c-8.947,0-16.201-7.253-16.201-16.201C34.676,29.127,41.928,21.873,50.877,21.873z">
</path>
<path class="hair"
d="M67.918,39.683c-1.019,0.116-2.053,0.193-3.114,0.193c-8.816,0-16.3-4.136-19.082-9.9h-0.565c-1.256,2.194-3.435,4.371-6.296,6.022c-1.684,0.972-3.41,1.646-5.062,2.043c0.386-7.127,5.121-13.086,11.609-15.266h0.087c0.83-0.279,1.686-0.499,2.564-0.653c0.055-0.009,0.11-0.018,0.166-0.023c0.371-0.061,0.745-0.111,1.124-0.148c0.497-0.044,0.997-0.075,1.504-0.075c7.674,0,14.167,5.054,16.332,12.016c0.168,0.537,0.309,1.083,0.423,1.638c0.229,1.114,0.349,2.267,0.349,3.447C67.954,39.215,67.928,39.445,67.918,39.683z">
</path>
</g>
</svg></span>
</div>
<div id="superTalkUserName5" class="title"></div>
<audio id="superTalkAudioUser5" autoplay style="width:100%;height:100%" />
</div>
<div id="superTalkUser6" class="" style="width:25%;height:50%;float:left;display:none">
<div style="display: flex;align-items: center;justify-content: center;">
<span class="svg-icon flat-shadow" id="shadow-user"><svg class="flat_icon"
xmlns="http://www.w3.org/2000/svg" width="100px" height="100px"
viewBox="0 0 100 100">
<path class="circle"
d="M50,2.125c26.441,0,47.875,21.434,47.875,47.875c0,26.441-21.434,47.875-47.875,47.875C17.857,97.875,2.125,76.441,2.125,50C2.125,23.559,23.559,2.125,50,2.125z">
</path>
<g class="icon">
<path class="body"
d="M74.302,78.127H25.698c-2.982,0-5.4-2.419-5.4-5.4l0,0l0,0c0-19.884,13.501-25.202,29.702-25.202s29.702,5.318,29.702,25.202l0,0C79.702,75.71,77.283,78.127,74.302,78.127z">
</path>
<polygon class="collar_right" points="63.501,49.325 50,54.726 55.4,62.826 ">
</polygon>
<polygon class="collar_left"
points="46.977,62.826 52.377,54.726 38.876,49.325 "></polygon>
<path class="head"
d="M50.877,21.873c8.947,0,16.201,7.254,16.201,16.201c0,8.948-7.254,16.201-16.201,16.201c-8.947,0-16.201-7.253-16.201-16.201C34.676,29.127,41.928,21.873,50.877,21.873z">
</path>
<path class="hair"
d="M67.918,39.683c-1.019,0.116-2.053,0.193-3.114,0.193c-8.816,0-16.3-4.136-19.082-9.9h-0.565c-1.256,2.194-3.435,4.371-6.296,6.022c-1.684,0.972-3.41,1.646-5.062,2.043c0.386-7.127,5.121-13.086,11.609-15.266h0.087c0.83-0.279,1.686-0.499,2.564-0.653c0.055-0.009,0.11-0.018,0.166-0.023c0.371-0.061,0.745-0.111,1.124-0.148c0.497-0.044,0.997-0.075,1.504-0.075c7.674,0,14.167,5.054,16.332,12.016c0.168,0.537,0.309,1.083,0.423,1.638c0.229,1.114,0.349,2.267,0.349,3.447C67.954,39.215,67.928,39.445,67.918,39.683z">
</path>
</g>
</svg></span>
</div>
<div id="superTalkUserName6" class="title"></div>
<audio id="superTalkAudioUser6" autoplay style="width:100%;height:100%" />
</div>
</div>
<div id="superTalkMsgWindow" style="width:15%;height:100%;float:right;position:relative;">
</div>
<div id="superTalkMessageButton" class="messageButton">
<span class="svg-icon flat-line" id="line-email">
<svg class="flat_icon" xmlns="http://www.w3.org/2000/svg" width="100px" height="100px"
viewBox="0 0 100 100">
<path class="circle"
d="M50,2.125c26.441,0,47.875,21.434,47.875,47.875c0,26.441-21.434,47.875-47.875,47.875C17.857,97.875,2.125,76.441,2.125,50C2.125,23.559,23.559,2.125,50,2.125z">
</path>
<g class="icon">
<path class="top"
d="M76.162,35.079c1.113,0.731,1.113,1.917,0,2.647L52.013,53.615c-1.11,0.731-2.915,0.731-4.024,0l-24.15-15.889c-1.111-0.73-1.111-1.916,0-2.647l24.15-15.889c1.11-0.729,2.914-0.729,4.024,0L76.162,35.079z">
</path>
<path class="paper" d="M30.105,32.763h39.791v28.421H30.105V32.763z"></path>
<path class="base"
d="M23.003,36.404L50,54.165l26.997-17.761c0,0,0.006-0.667,0.006,1.688v27.002c0,2.354-1.91,4.264-4.264,4.264H27.262c-2.354,0-4.264-1.91-4.264-4.264V38.092C23,35.738,23.003,36.404,23.003,36.404z">
</path>
<path class="text"
d="M36.145,38.27h27.71c0.199,0,0.357-0.16,0.357-0.356c0-0.195-0.158-0.355-0.357-0.355h-27.71c-0.197,0-0.355,0.16-0.355,0.355C35.788,38.11,35.947,38.27,36.145,38.27z M63.854,39.691H36.144c-0.197,0-0.355,0.159-0.355,0.356c0,0.196,0.158,0.355,0.355,0.355h27.711c0.197,0,0.357-0.16,0.357-0.355C64.211,39.849,64.053,39.691,63.854,39.691z M63.854,41.822H36.144c-0.197,0-0.355,0.161-0.355,0.356c0,0.197,0.158,0.355,0.355,0.355h27.711c0.197,0,0.357-0.158,0.357-0.355C64.211,41.982,64.053,41.822,63.854,41.822z">
</path>
</g>
</svg>
</span>
</div>
<div id="superTalkEndTalkButton"
style="position:absolute;left:150px;bottom:20px;width:100px;height:100px;margin:auto;z-index:1;display:none">
<span class="svg-icon flat-filled" id="filled-mic"><svg class="flat_icon"
xmlns="http://www.w3.org/2000/svg" width="100px" height="100px" viewBox="0 0 100 100">
<path class="circle"
d="M50,2.125c26.441,0,47.875,21.434,47.875,47.875c0,26.441-21.434,47.875-47.875,47.875C17.857,97.875,2.125,76.441,2.125,50C2.125,23.559,23.559,2.125,50,2.125z">
</path>
<g class="icon">
<path class="base"
d="M50,19.317c8.592,0,15.557,6.964,15.557,15.558v12.101c0,8.593-6.965,15.558-15.557,15.558s-15.558-6.965-15.558-15.558V34.875C34.443,26.281,41.408,19.317,50,19.317z">
</path>
<path class="stand"
d="M74.201,46.975c0-1.433-1.161-2.594-2.592-2.594c-1.434,0-2.595,1.161-2.595,2.594c0,10.501-8.512,19.015-19.014,19.015c-10.501,0-19.015-8.514-19.015-19.015c0-1.433-1.16-2.594-2.593-2.594c-1.432,0-2.593,1.161-2.593,2.594c0,12.49,9.461,22.765,21.607,24.06v4.461h-6.913c-1.432,0-2.594,1.162-2.594,2.594s1.161,2.594,2.594,2.594h19.014c1.433,0,2.593-1.162,2.593-2.594s-1.16-2.594-2.593-2.594h-6.915v-4.461C64.739,69.74,74.201,59.463,74.201,46.975z">
</path>
<path class="bars_left"
d="M34.443,33.146v3.458h10.372v-3.458H34.443z M34.443,42.653h10.372v-3.457H34.443V42.653z M34.443,48.704h10.372v-3.458H34.443V48.704z">
</path>
<g class="bars_right">
<rect x="55.187" y="33.146" width="10.371" height="3.458"></rect>
<rect x="55.187" y="39.196" width="10.371" height="3.457"></rect>
<rect x="55.187" y="45.246" width="10.371" height="3.458"></rect>
</g>
</g>
</svg></span>
</div>
<div id="superTalkStartTalkButton"
style="position:absolute;left:150px;bottom:20px;width:100px;height:100px;margin:auto;z-index:1;display:none">
<span class="svg-icon flat-line" id="line-mic"><svg class="flat_icon"
xmlns="http://www.w3.org/2000/svg" width="100px" height="100px" viewBox="0 0 100 100">
<path class="circle"
d="M50,2.125c26.441,0,47.875,21.434,47.875,47.875c0,26.441-21.434,47.875-47.875,47.875C17.857,97.875,2.125,76.441,2.125,50C2.125,23.559,23.559,2.125,50,2.125z">
</path>
<g class="icon">
<path class="base"
d="M50,19.317c8.592,0,15.557,6.964,15.557,15.558v12.101c0,8.593-6.965,15.558-15.557,15.558s-15.558-6.965-15.558-15.558V34.875C34.443,26.281,41.408,19.317,50,19.317z">
</path>
<path class="stand"
d="M74.201,46.975c0-1.433-1.161-2.594-2.592-2.594c-1.434,0-2.595,1.161-2.595,2.594c0,10.501-8.512,19.015-19.014,19.015c-10.501,0-19.015-8.514-19.015-19.015c0-1.433-1.16-2.594-2.593-2.594c-1.432,0-2.593,1.161-2.593,2.594c0,12.49,9.461,22.765,21.607,24.06v4.461h-6.913c-1.432,0-2.594,1.162-2.594,2.594s1.161,2.594,2.594,2.594h19.014c1.433,0,2.593-1.162,2.593-2.594s-1.16-2.594-2.593-2.594h-6.915v-4.461C64.739,69.74,74.201,59.463,74.201,46.975z">
</path>
<path class="bars_left"
d="M34.443,33.146v3.458h10.372v-3.458H34.443z M34.443,42.653h10.372v-3.457H34.443V42.653z M34.443,48.704h10.372v-3.458H34.443V48.704z">
</path>
<g class="bars_right">
<rect x="55.187" y="33.146" width="10.371" height="3.458"></rect>
<rect x="55.187" y="39.196" width="10.371" height="3.457"></rect>
<rect x="55.187" y="45.246" width="10.371" height="3.458"></rect>
</g>
</g>
</svg></span>
</div>
<div id="superTalkCreateButton"
style="position:absolute;left:20px;bottom:20px;width:100px;height:100px;margin:auto;z-index:1">
<span class="svg-icon flat-line" id="line-pencil"><svg class="flat_icon"
xmlns="http://www.w3.org/2000/svg" width="100px" height="100px" viewBox="0 0 100 100">
<path class="circle"
d="M50,4.25c26.441,0,47.875,21.434,47.875,47.875C97.875,78.566,76.441,100,50,100C17.857,100,2.125,78.566,2.125,52.125C2.125,25.684,23.559,4.25,50,4.25z">
</path>
<g class="icon">
<path class="wood" d="M26.683,55.108l16.801,16.84L23.62,75.635L26.683,55.108z"></path>
<path class="base_top"
d="M53.408,28.524l5.809,5.813L32.489,61.012l-5.807-5.75L53.408,28.524z"></path>
<path class="base_bottom"
d="M63.639,38.64l6.569,6.572L43.483,71.948l-6.635-6.575L63.639,38.64z"></path>
<path class="base_middle"
d="M58.868,33.931l6.569,6.573L38.714,67.239l-6.569-6.574L58.868,33.931z">
</path>
<path class="tip" d="M31.731,74.101l-8.635,1.776l1.776-8.638L31.731,74.101z"></path>
<path class="eraser"
d="M65.004,23.567l10.455,10.461c1.926,1.926,1.926,5.049,0,6.975L58.03,23.567C59.958,21.642,63.078,21.642,65.004,23.567z">
</path>
<path class="metal"
d="M58.555,22.899l17.429,17.437c0.322,0.321,0.322,0.843,0,1.163l-4.244,4.246c-0.32,0.322-0.841,0.322-1.163,0L53.147,28.308c-0.319-0.32-0.319-0.842,0-1.161l4.245-4.248C57.715,22.578,58.235,22.578,58.555,22.899z">
</path>
</g>
</svg></span>
</div>
</div>
</div>
</div>
<div id="superVideoTab" class="tab" style="display:none">
<div class="left">
<div class="backButton">返回</div>
<div id="superVideoList">
<div class='button2' onclick='openSuperVideoMeeting()'>超级会议监控</div>
<div class='button2' onclick='openSuperVideoLive()'>超级直播监控</div>
</div>
</div>
<div class="right" style="position:relative;">
<div id="superVideoTitle" class="title"></div>
<div id="superVideoZone" style="width:100%;height:100%">
<div id="superVideoVideoZone" style="width:100%;height:100%">
<div id="superVideo0" class="" style="width:25%;height:50%;float:left;display:none">
<div id="superVideoName0" class="title"></div>
<video id="superVideoVideo0" autoplay muted style="width:100%;height:100%" />
</div>
<div id="superVideo1" class="" style="width:25%;height:50%;float:left;display:none">
<div id="superVideoName1" class="title"></div>
<video id="superVideoVideo1" autoplay muted style="width:100%;height:100%" />
</div>
<div id="superVideo2" class="" style="width:25%;height:50%;float:left;display:none">
<div id="superVideoName2" class="title"></div>
<video id="superVideoVideo2" autoplay muted style="width:100%;height:100%" />
</div>
<div id="superVideo3" class="" style="width:25%;height:50%;float:left;display:none">
<div id="superVideoName3" class="title"></div>
<video id="superVideoVideo3" autoplay muted style="width:100%;height:100%" />
</div>
<div id="superVideo4" class="" style="width:25%;height:50%;float:left;display:none">
<div id="superVideoName0" class="title"></div>
<video id="superVideoVideo4" autoplay muted style="width:100%;height:100%" />
</div>
<div id="superVideo5" class="" style="width:25%;height:50%;float:left;display:none">
<div id="superVideoName5" class="title"></div>
<video id="superVideoVideo5" autoplay muted style="width:100%;height:100%" />
</div>
<div id="superVideo6" class="" style="width:25%;height:50%;float:left;display:none">
<div id="superVideoName6" class="title"></div>
<video id="superVideoVideo6" autoplay muted style="width:100%;height:100%" />
</div>
<div id="superVideo7" class="" style="width:25%;height:50%;float:left;display:none">
<div id="superVideoName7" class="title"></div>
<video id="superVideoVideo7" autoplay muted style="width:100%;height:100%" />
</div>
</div>
</div>
</div>
</div>
</body>
</html>
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。