|
|
<!DOCTYPE html>
|
|
|
<html lang="en">
|
|
|
<head>
|
|
|
<meta charset="UTF-8" />
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
|
<meta name="google" content="notranslate" />
|
|
|
<title>anyrtc 呼叫邀请DEMO - anyRTC</title>
|
|
|
<!-- icon -->
|
|
|
<link rel="icon" href="./assets/images/favicon.ico" />
|
|
|
<!-- CSS only -->
|
|
|
<link rel="stylesheet" href="./assets/css/bootstrap.min.css" />
|
|
|
<link rel="stylesheet" type="text/css" href="assets/font/iconfont.css" />
|
|
|
<!-- JS, Popper.js, and jQuery -->
|
|
|
<script src="./assets/js/jquery-3.5.1.min.js"></script>
|
|
|
<script src="./assets/js/bootstrap.min.js"></script>
|
|
|
<!-- JS, RTC and RTM -->
|
|
|
<script src="https://unpkg.com/ar-rtc-sdk"></script>
|
|
|
<script src="https://unpkg.com/ar-rtm-sdk@1.0.5/release/ArRTM@latest.js"></script>
|
|
|
<!-- 覆盖bootstrap样式 -->
|
|
|
<link rel="stylesheet" href="./assets/css/index.css" />
|
|
|
</head>
|
|
|
|
|
|
<body class="notranslate">
|
|
|
<!-- 全局警告框 -->
|
|
|
<div class="warning_box warning_whole" id="warningWholeBox"></div>
|
|
|
|
|
|
<!-- 首页 -->
|
|
|
<div
|
|
|
class="page d-flex flex-col justify-content-center align-items-center"
|
|
|
id="homePage"
|
|
|
>
|
|
|
<!-- -->
|
|
|
<div class="login d-flex flex-row align-items-stretch">
|
|
|
<!-- 警告框 -->
|
|
|
<div class="warning_box" id="warningBox"></div>
|
|
|
<!-- -->
|
|
|
<div class="flex-fill flex-basis-0 login-left">
|
|
|
<img
|
|
|
draggable="false"
|
|
|
class="img-responsive"
|
|
|
src="assets/images/BG.png"
|
|
|
/>
|
|
|
</div>
|
|
|
<!-- -->
|
|
|
<div class="flex-fill flex-basis-0 login-right">
|
|
|
<!-- 邀请(首页) -->
|
|
|
<div class="home-login-flex flex-column full-wrap" id="loginHome">
|
|
|
<div class="flex-fill">
|
|
|
<div
|
|
|
class="d-flex flex-column align-items-center justify-content-center full-wrap"
|
|
|
>
|
|
|
<a
|
|
|
type="button"
|
|
|
class="container-fluid btn btn-primary"
|
|
|
disabled
|
|
|
id="openP2PInvite"
|
|
|
>
|
|
|
<img src="assets/images/Dcall.png" />点对点呼叫邀请
|
|
|
</a>
|
|
|
<a
|
|
|
type="button"
|
|
|
class="container-fluid btn btn-primary"
|
|
|
disabled
|
|
|
id="openMultiInvite"
|
|
|
style="margin-top: 45px"
|
|
|
>
|
|
|
<img src="assets/images/Mcalls.png" />多人呼叫邀请
|
|
|
</a>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="login-form_ownid">
|
|
|
您的用户ID：<span class="own-user-id-view">未登录</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- 点对点呼叫 -->
|
|
|
<div
|
|
|
class="home-login-flex flex-column full-wrap d-none"
|
|
|
id="loginForm"
|
|
|
>
|
|
|
<div class="flex-fill">
|
|
|
<div
|
|
|
class="d-flex align-items-center login-form_hd justify-content-between"
|
|
|
>
|
|
|
<div class="align-self-start">
|
|
|
<a
|
|
|
type="button"
|
|
|
class="icon-btn"
|
|
|
onclick="OperationPackge.public.backToHome()"
|
|
|
>
|
|
|
<svg
|
|
|
width="2em"
|
|
|
style="color: #ddd"
|
|
|
height="2em"
|
|
|
viewBox="0 0 16 16"
|
|
|
class="bi bi-chevron-left"
|
|
|
fill="currentColor"
|
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
|
>
|
|
|
<path
|
|
|
fill-rule="evenodd"
|
|
|
d="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"
|
|
|
/>
|
|
|
</svg>
|
|
|
</a>
|
|
|
</div>
|
|
|
<div class="login-form_bt">点对点呼叫邀请</div>
|
|
|
<div class="align-self-end">
|
|
|
<span class="icon-btn" id="openSettingBtn">
|
|
|
<svg
|
|
|
width="2em"
|
|
|
style="color: #40a3fc"
|
|
|
height="2em"
|
|
|
viewBox="0 0 16 16"
|
|
|
class="bi bi-gear"
|
|
|
fill="currentColor"
|
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
|
>
|
|
|
<path
|
|
|
fill-rule="evenodd"
|
|
|
d="M8.837 1.626c-.246-.835-1.428-.835-1.674 0l-.094.319A1.873 1.873 0 0 1 4.377 3.06l-.292-.16c-.764-.415-1.6.42-1.184 1.185l.159.292a1.873 1.873 0 0 1-1.115 2.692l-.319.094c-.835.246-.835 1.428 0 1.674l.319.094a1.873 1.873 0 0 1 1.115 2.693l-.16.291c-.415.764.42 1.6 1.185 1.184l.292-.159a1.873 1.873 0 0 1 2.692 1.116l.094.318c.246.835 1.428.835 1.674 0l.094-.319a1.873 1.873 0 0 1 2.693-1.115l.291.16c.764.415 1.6-.42 1.184-1.185l-.159-.291a1.873 1.873 0 0 1 1.116-2.693l.318-.094c.835-.246.835-1.428 0-1.674l-.319-.094a1.873 1.873 0 0 1-1.115-2.692l.16-.292c.415-.764-.42-1.6-1.185-1.184l-.291.159A1.873 1.873 0 0 1 8.93 1.945l-.094-.319zm-2.633-.283c.527-1.79 3.065-1.79 3.592 0l.094.319a.873.873 0 0 0 1.255.52l.292-.16c1.64-.892 3.434.901 2.54 2.541l-.159.292a.873.873 0 0 0 .52 1.255l.319.094c1.79.527 1.79 3.065 0 3.592l-.319.094a.873.873 0 0 0-.52 1.255l.16.292c.893 1.64-.902 3.434-2.541 2.54l-.292-.159a.873.873 0 0 0-1.255.52l-.094.319c-.527 1.79-3.065 1.79-3.592 0l-.094-.319a.873.873 0 0 0-1.255-.52l-.292.16c-1.64.893-3.433-.902-2.54-2.541l.159-.292a.873.873 0 0 0-.52-1.255l-.319-.094c-1.79-.527-1.79-3.065 0-3.592l.319-.094a.873.873 0 0 0 .52-1.255l-.16-.292c-.892-1.64.902-3.433 2.541-2.54l.292.159a.873.873 0 0 0 1.255-.52l.094-.319z"
|
|
|
/>
|
|
|
<path
|
|
|
fill-rule="evenodd"
|
|
|
d="M8 5.754a2.246 2.246 0 1 0 0 4.492 2.246 2.246 0 0 0 0-4.492zM4.754 8a3.246 3.246 0 1 1 6.492 0 3.246 3.246 0 0 1-6.492 0z"
|
|
|
/>
|
|
|
</svg>
|
|
|
</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="login-form_bd">
|
|
|
<div class="login-form_bt mb-2">输入您朋友的用户ID</div>
|
|
|
<div
|
|
|
class="f-flex justify-content-between input-group userid-inputs"
|
|
|
id="userInputs"
|
|
|
>
|
|
|
<input
|
|
|
autocomplete="off"
|
|
|
type="tel"
|
|
|
maxlength="1"
|
|
|
name="code"
|
|
|
pattern="[0-9]*"
|
|
|
/>
|
|
|
<input
|
|
|
autocomplete="off"
|
|
|
type="tel"
|
|
|
maxlength="1"
|
|
|
name="code"
|
|
|
pattern="[0-9]*"
|
|
|
/>
|
|
|
<input
|
|
|
autocomplete="off"
|
|
|
type="tel"
|
|
|
maxlength="1"
|
|
|
name="code"
|
|
|
pattern="[0-9]*"
|
|
|
/>
|
|
|
<input
|
|
|
autocomplete="off"
|
|
|
type="tel"
|
|
|
maxlength="1"
|
|
|
name="code"
|
|
|
pattern="[0-9]*"
|
|
|
/>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="login-form_bt">
|
|
|
<div
|
|
|
class="login-form_submit d-flex justify-content-around align-items-center"
|
|
|
>
|
|
|
<button
|
|
|
type="button"
|
|
|
class="container-fluid btn btn-primary disabled"
|
|
|
id="p2pAudioMakeCall"
|
|
|
>
|
|
|
语音呼叫
|
|
|
</button>
|
|
|
<button
|
|
|
type="button"
|
|
|
class="container-fluid btn btn-primary disabled"
|
|
|
id="p2pVideoMakeCall"
|
|
|
>
|
|
|
视频呼叫
|
|
|
</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="login-form_ownid">
|
|
|
您的用户ID：<span class="own-user-id-view">未登录</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- 点对点设置 -->
|
|
|
<div
|
|
|
class="home-login-flex flex-column login-form login-setting"
|
|
|
id="loginSetting"
|
|
|
>
|
|
|
<div class="extend-height d-flex flex-column">
|
|
|
<div class="setting-hd d-flex">
|
|
|
<div>
|
|
|
<span class="icon-btn" id="closeSettingBtn">
|
|
|
<svg
|
|
|
width="2em"
|
|
|
style="color: #ddd"
|
|
|
height="2em"
|
|
|
viewBox="0 0 16 16"
|
|
|
class="bi bi-chevron-left"
|
|
|
fill="currentColor"
|
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
|
>
|
|
|
<path
|
|
|
fill-rule="evenodd"
|
|
|
d="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"
|
|
|
/>
|
|
|
</svg>
|
|
|
</span>
|
|
|
</div>
|
|
|
<div style="text-align: center; width: 100%">
|
|
|
<span>设置</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="setting-bd">
|
|
|
<div
|
|
|
class="d-flex justify-content-between align-items-end seting-mutil_height"
|
|
|
>
|
|
|
<span>点对点视频呼叫统计</span>
|
|
|
<div class="custom-control custom-switch">
|
|
|
<input
|
|
|
autocomplete="off"
|
|
|
type="checkbox"
|
|
|
class="custom-control-input"
|
|
|
id="videoDataSwitch"
|
|
|
/>
|
|
|
<label class="custom-control-label" for="videoDataSwitch">
|
|
|
</label>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="setting-option_title">分辨率</div>
|
|
|
<select name="" id="settingVideoResolution">
|
|
|
<option value="1920*1080">1080P</option>
|
|
|
<option value="1280*720">720P</option>
|
|
|
<option value="640*480">480P</option>
|
|
|
<option value="640*360">360P</option>
|
|
|
</select>
|
|
|
<!-- -->
|
|
|
<div class="setting-option_title">音频设备</div>
|
|
|
<select name="" id="audioInputSelect"></select>
|
|
|
<!-- -->
|
|
|
<div class="setting-option_title">视频设备</div>
|
|
|
<select name="" id="videoInputSelect"></select>
|
|
|
<!-- -->
|
|
|
<div
|
|
|
class="d-flex justify-content-center setting-video_preview"
|
|
|
>
|
|
|
<img
|
|
|
draggable="false"
|
|
|
class="img-responsive setting-video_preview_bg"
|
|
|
src="assets/images/chart.png"
|
|
|
/>
|
|
|
<div
|
|
|
id="settingVideoPreview"
|
|
|
style="width: 100%; height: 100%"
|
|
|
></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- 多人呼叫 -->
|
|
|
<div
|
|
|
class="home-login-flex d-none flex-column full-wrap"
|
|
|
id="loginMutiFprm"
|
|
|
>
|
|
|
<!-- 多人呼叫邀请 -->
|
|
|
<div class="flex-fill">
|
|
|
<div
|
|
|
class="d-flex align-items-center login-form_hd justify-content-between"
|
|
|
>
|
|
|
<div class="align-self-start">
|
|
|
<a
|
|
|
type="button"
|
|
|
class="icon-btn"
|
|
|
onclick="OperationPackge.public.backToHome()"
|
|
|
>
|
|
|
<svg
|
|
|
width="2em"
|
|
|
style="color: #ddd"
|
|
|
height="2em"
|
|
|
viewBox="0 0 16 16"
|
|
|
class="bi bi-chevron-left"
|
|
|
fill="currentColor"
|
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
|
>
|
|
|
<path
|
|
|
fill-rule="evenodd"
|
|
|
d="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"
|
|
|
/>
|
|
|
</svg>
|
|
|
</a>
|
|
|
</div>
|
|
|
<div class="login-form_bt">多人呼叫邀请</div>
|
|
|
<div class="align-self-end">
|
|
|
<span class="icon-btn" id="multiOpenSettingBtn">
|
|
|
<svg
|
|
|
width="2em"
|
|
|
style="color: #40a3fc"
|
|
|
height="2em"
|
|
|
viewBox="0 0 16 16"
|
|
|
class="bi bi-gear"
|
|
|
fill="currentColor"
|
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
|
>
|
|
|
<path
|
|
|
fill-rule="evenodd"
|
|
|
d="M8.837 1.626c-.246-.835-1.428-.835-1.674 0l-.094.319A1.873 1.873 0 0 1 4.377 3.06l-.292-.16c-.764-.415-1.6.42-1.184 1.185l.159.292a1.873 1.873 0 0 1-1.115 2.692l-.319.094c-.835.246-.835 1.428 0 1.674l.319.094a1.873 1.873 0 0 1 1.115 2.693l-.16.291c-.415.764.42 1.6 1.185 1.184l.292-.159a1.873 1.873 0 0 1 2.692 1.116l.094.318c.246.835 1.428.835 1.674 0l.094-.319a1.873 1.873 0 0 1 2.693-1.115l.291.16c.764.415 1.6-.42 1.184-1.185l-.159-.291a1.873 1.873 0 0 1 1.116-2.693l.318-.094c.835-.246.835-1.428 0-1.674l-.319-.094a1.873 1.873 0 0 1-1.115-2.692l.16-.292c.415-.764-.42-1.6-1.185-1.184l-.291.159A1.873 1.873 0 0 1 8.93 1.945l-.094-.319zm-2.633-.283c.527-1.79 3.065-1.79 3.592 0l.094.319a.873.873 0 0 0 1.255.52l.292-.16c1.64-.892 3.434.901 2.54 2.541l-.159.292a.873.873 0 0 0 .52 1.255l.319.094c1.79.527 1.79 3.065 0 3.592l-.319.094a.873.873 0 0 0-.52 1.255l.16.292c.893 1.64-.902 3.434-2.541 2.54l-.292-.159a.873.873 0 0 0-1.255.52l-.094.319c-.527 1.79-3.065 1.79-3.592 0l-.094-.319a.873.873 0 0 0-1.255-.52l-.292.16c-1.64.893-3.433-.902-2.54-2.541l.159-.292a.873.873 0 0 0-.52-1.255l-.319-.094c-1.79-.527-1.79-3.065 0-3.592l.319-.094a.873.873 0 0 0 .52-1.255l-.16-.292c-.892-1.64.902-3.433 2.541-2.54l.292.159a.873.873 0 0 0 1.255-.52l.094-.319z"
|
|
|
/>
|
|
|
<path
|
|
|
fill-rule="evenodd"
|
|
|
d="M8 5.754a2.246 2.246 0 1 0 0 4.492 2.246 2.246 0 0 0 0-4.492zM4.754 8a3.246 3.246 0 1 1 6.492 0 3.246 3.246 0 0 1-6.492 0z"
|
|
|
/>
|
|
|
</svg>
|
|
|
</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="login-form_bd">
|
|
|
<div class="login-form_bt">输入您朋友的用户ID</div>
|
|
|
<div
|
|
|
class="f-flex justify-content-between input-group userid-inputs"
|
|
|
id="multiUserInputs"
|
|
|
>
|
|
|
<input
|
|
|
autocomplete="off"
|
|
|
type="tel"
|
|
|
maxlength="1"
|
|
|
name="code"
|
|
|
pattern="[0-9]*"
|
|
|
/>
|
|
|
<input
|
|
|
autocomplete="off"
|
|
|
type="tel"
|
|
|
maxlength="1"
|
|
|
name="code"
|
|
|
pattern="[0-9]*"
|
|
|
/>
|
|
|
<input
|
|
|
autocomplete="off"
|
|
|
type="tel"
|
|
|
maxlength="1"
|
|
|
name="code"
|
|
|
pattern="[0-9]*"
|
|
|
/>
|
|
|
<input
|
|
|
autocomplete="off"
|
|
|
type="tel"
|
|
|
maxlength="1"
|
|
|
name="code"
|
|
|
pattern="[0-9]*"
|
|
|
/>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="login-form_us" id="multiUserBtn"></div>
|
|
|
<div class="login-form_bt">
|
|
|
<div class="login-form_submit">
|
|
|
<button
|
|
|
type="button"
|
|
|
style="border-radius: 30px; margin: 0"
|
|
|
class="container-fluid btn btn-primary disabled"
|
|
|
id="MultipleCalls"
|
|
|
>
|
|
|
发起邀请
|
|
|
</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="login-form_ownid">
|
|
|
您的用户ID：<span class="own-user-id-view">未登录</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- 多人设置 -->
|
|
|
<div
|
|
|
class="home-login-flex flex-column login-form login-setting"
|
|
|
id="loginMutiSetting"
|
|
|
>
|
|
|
<div class="extend-height d-flex flex-column">
|
|
|
<div class="setting-hd d-flex">
|
|
|
<div>
|
|
|
<span class="icon-btn" id="closeMutiSettingBtn">
|
|
|
<svg
|
|
|
width="2em"
|
|
|
style="color: #ddd"
|
|
|
height="2em"
|
|
|
viewBox="0 0 16 16"
|
|
|
class="bi bi-chevron-left"
|
|
|
fill="currentColor"
|
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
|
>
|
|
|
<path
|
|
|
fill-rule="evenodd"
|
|
|
d="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"
|
|
|
/>
|
|
|
</svg>
|
|
|
</span>
|
|
|
</div>
|
|
|
<div style="text-align: center; width: 100%">
|
|
|
<span>设置</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="setting-bd">
|
|
|
<div
|
|
|
class="d-flex justify-content-between align-items-end seting-mutil_height"
|
|
|
>
|
|
|
<span>开启摄像头</span>
|
|
|
<div class="custom-control custom-switch">
|
|
|
<input
|
|
|
autocomplete="off"
|
|
|
type="checkbox"
|
|
|
class="custom-control-input"
|
|
|
id="userVideoCameraSetting"
|
|
|
/>
|
|
|
<label
|
|
|
class="custom-control-label"
|
|
|
for="userVideoCameraSetting"
|
|
|
></label>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div
|
|
|
class="d-flex justify-content-between align-items-end seting-mutil_height"
|
|
|
>
|
|
|
<span>开启麦克风</span>
|
|
|
<div class="custom-control custom-switch">
|
|
|
<input
|
|
|
autocomplete="off"
|
|
|
type="checkbox"
|
|
|
class="custom-control-input"
|
|
|
id="userMicrophoneSetting"
|
|
|
/>
|
|
|
<label
|
|
|
class="custom-control-label"
|
|
|
for="userMicrophoneSetting"
|
|
|
></label>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- p2p页面 -->
|
|
|
|
|
|
<!-- 邀请 -->
|
|
|
<div
|
|
|
class="page d-flex justify-content-center align-items-center allheight d-none"
|
|
|
id="makeCallPage"
|
|
|
>
|
|
|
<div class="invitation bd-highlight">
|
|
|
<div class="d-flex justify-content-center">
|
|
|
<div class="head_portrait">
|
|
|
<img draggable="false" src="assets/images/head.png" />
|
|
|
</div>
|
|
|
</div>
|
|
|
<div
|
|
|
class="d-flex flex-wrap justify-content-center text-white mt-2 mb-2 user_characteristic"
|
|
|
id="calleeIdView"
|
|
|
style="font-size: 2em; letter-spacing: 12px"
|
|
|
>
|
|
|
----
|
|
|
</div>
|
|
|
<div
|
|
|
class="d-flex justify-content-center text-white"
|
|
|
style="z-index: 8"
|
|
|
>
|
|
|
呼叫中...
|
|
|
</div>
|
|
|
|
|
|
<div
|
|
|
class="page d-flex flex-col justify-content-center align-items-centermar"
|
|
|
style="margin: 130px auto 30px"
|
|
|
>
|
|
|
<img
|
|
|
draggable="false"
|
|
|
class="img-responsive"
|
|
|
style="cursor: pointer"
|
|
|
src="assets/images/hangup.png"
|
|
|
id="cancelCallBtn"
|
|
|
/>
|
|
|
<!-- <button type="button" class="btn btn-danger" >取消</button> -->
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- 被呼-->
|
|
|
<div
|
|
|
class="page d-flex justify-content-center align-items-center allheight d-none"
|
|
|
id="reciveCallPage"
|
|
|
>
|
|
|
<div class="invitation bd-highlight">
|
|
|
<div class="d-flex justify-content-center">
|
|
|
<div class="head_portrait">
|
|
|
<img draggable="false" src="assets/images/head.png" />
|
|
|
</div>
|
|
|
</div>
|
|
|
<div
|
|
|
class="text-white mt-2 mb-2"
|
|
|
id="callerIdView"
|
|
|
style="
|
|
|
font-size: 2em;
|
|
|
letter-spacing: 12px;
|
|
|
overflow: hidden;
|
|
|
text-overflow: ellipsis;
|
|
|
text-align: center;
|
|
|
"
|
|
|
>
|
|
|
----
|
|
|
</div>
|
|
|
<div class="d-flex justify-content-center text-white">待接听...</div>
|
|
|
|
|
|
<div
|
|
|
class="page d-flex flex-col justify-content-around align-items-centermar"
|
|
|
style="margin: 130px auto 30px"
|
|
|
>
|
|
|
<img
|
|
|
draggable="false"
|
|
|
class="img-responsive"
|
|
|
style="cursor: pointer"
|
|
|
src="assets/images/changaudio-hover.png"
|
|
|
id="changAudioBtn"
|
|
|
/>
|
|
|
<img
|
|
|
draggable="false"
|
|
|
class="img-responsive"
|
|
|
style="cursor: pointer"
|
|
|
src="assets/images/answer.png"
|
|
|
id="acceptCallBtn"
|
|
|
/>
|
|
|
<img
|
|
|
draggable="false"
|
|
|
class="img-responsive"
|
|
|
style="cursor: pointer"
|
|
|
src="assets/images/hangup.png"
|
|
|
id="refuseCallBtn"
|
|
|
/>
|
|
|
<!-- 多人 -->
|
|
|
<!-- <img draggable="false" class="img-responsive" style="cursor: pointer;" src="assets/images/answer.png" id="acceptCallBtn" /> -->
|
|
|
<!-- <img draggable="false" class="img-responsive" style="cursor: pointer;" src="assets/images/hangup.png" id="refuseCallBtn" /> -->
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- 音频通讯 -->
|
|
|
<div
|
|
|
class="page d-flex flex-col justify-content-center align-items-center d-none"
|
|
|
id="audioPage"
|
|
|
>
|
|
|
<div
|
|
|
class="container d-flex flex-column justify-content-around align-items-center"
|
|
|
style="position: relative"
|
|
|
>
|
|
|
<div
|
|
|
class="audio_main d-flex flex-column justify-content-around align-items-center"
|
|
|
>
|
|
|
<div class="">
|
|
|
<img
|
|
|
draggable="false"
|
|
|
class="img-responsive"
|
|
|
src="assets/images/head.png"
|
|
|
/>
|
|
|
</div>
|
|
|
<div class="">
|
|
|
<div class="audio_time" id="audioDuration">00:00</div>
|
|
|
<div class="audio_option d-flex">
|
|
|
<button
|
|
|
type="button"
|
|
|
id="audioSwitchBtn"
|
|
|
class="d-flex flex-column align-items-center"
|
|
|
>
|
|
|
<i class="iconfont icon-audio_close meet-control_icon"></i>音频
|
|
|
</button>
|
|
|
<button
|
|
|
type="button"
|
|
|
id="hangupAudioBtn"
|
|
|
class="d-flex flex-column align-items-center"
|
|
|
>
|
|
|
<i
|
|
|
class="iconfont icon-hangup meet-control_icon"
|
|
|
style="color: #f97171"
|
|
|
></i
|
|
|
>挂断
|
|
|
</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="audio_bg">
|
|
|
<img
|
|
|
draggable="false"
|
|
|
style="width: 100%"
|
|
|
class="img-responsive"
|
|
|
src="assets/images/audio_bg.png"
|
|
|
/>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!--p2p 视频通讯-->
|
|
|
<div
|
|
|
class="page d-none d-flex flex-col justify-content-center align-items-center"
|
|
|
id="meetPage"
|
|
|
>
|
|
|
<div class="meet-view" style="position: relative">
|
|
|
<!-- 小屏 -->
|
|
|
<div class="video-preview_little">
|
|
|
<div
|
|
|
class="d-flex justify-content-center align-items-center"
|
|
|
style="margin: 0; width: 100%; height: 100%"
|
|
|
id="mineVideoPreview"
|
|
|
>
|
|
|
<img
|
|
|
id="mineVideoPreview_bg"
|
|
|
draggable="false"
|
|
|
style="position: absolute; width: 50%"
|
|
|
class="img-responsive"
|
|
|
src="assets/images/logo_title.png"
|
|
|
/>
|
|
|
</div>
|
|
|
<div class="prompt_little d-flex">
|
|
|
<!-- <div class="" id="titleAudio">
|
|
|
<i class="iconfont icon-_yinpinkaiqizhong icon_color_blue"></i>
|
|
|
</div> -->
|
|
|
<div id="UserIdChanel">用户</div>
|
|
|
</div>
|
|
|
<div class="d-none" id="userLocalVideoData"></div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 大屏 -->
|
|
|
<div class="video-preview_big">
|
|
|
<div
|
|
|
class="video-preview_big d-flex justify-content-center align-items-center"
|
|
|
id="peerVideoPreview"
|
|
|
>
|
|
|
<img
|
|
|
id="peerVideoPreview_bg"
|
|
|
draggable="false"
|
|
|
style="position: absolute; width: 40%"
|
|
|
class="img-responsive"
|
|
|
src="assets/images/logo_big.png"
|
|
|
/>
|
|
|
</div>
|
|
|
<div class="prompt_big meet-control_icon m-3" id="videoDuration">
|
|
|
00:00
|
|
|
</div>
|
|
|
<div class="d-none" id="userRemodeVideoData"></div>
|
|
|
</div>
|
|
|
|
|
|
<!-- -->
|
|
|
<div class="video-operate d-flex justify-content-center">
|
|
|
<div class="d-flex">
|
|
|
<div class="audio_option d-flex" style="width: 200px">
|
|
|
<button
|
|
|
id="switchToAudioCall"
|
|
|
type="button"
|
|
|
class="d-flex flex-column align-items-center"
|
|
|
>
|
|
|
<i
|
|
|
class="iconfont icon-switch-audio meet-control_icon icon_color_blue"
|
|
|
></i
|
|
|
>转到语音
|
|
|
</button>
|
|
|
<!-- <button id="audioSwitchBtn" type="button" class="d-flex flex-column align-items-center"><i class="iconfont icon-_yinpinkaiqizhong audio_icon icon_color_blue"></i>音频</button> -->
|
|
|
<button
|
|
|
id="hangupBtn"
|
|
|
type="button"
|
|
|
class="d-flex flex-column align-items-center"
|
|
|
>
|
|
|
<i
|
|
|
class="iconfont icon-hangup meet-control_icon icon_color_red"
|
|
|
></i
|
|
|
>挂断
|
|
|
</button>
|
|
|
<!-- <button id="videoSwitchBtn" type="button" class="d-flex flex-column align-items-center"><i class="iconfont icon-_shipinkaiqizhong audio_icon icon_color_blue"></i>视频</button> -->
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 多人呼叫 -->
|
|
|
|
|
|
<!-- 多人 视频通讯页 -->
|
|
|
<div
|
|
|
class="page d-flex flex-col justify-content-center align-items-center d-none"
|
|
|
id="meetMutiPage"
|
|
|
>
|
|
|
<div
|
|
|
class="meet-view"
|
|
|
style="
|
|
|
position: relative;
|
|
|
padding: 0;
|
|
|
border-radius: 10px;
|
|
|
overflow: hidden;
|
|
|
"
|
|
|
>
|
|
|
<div class="video-preview_small">
|
|
|
<div class="d-flex" id="mineMutiTitleVideoPreview">
|
|
|
<!-- 小屏用户窗口 -->
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- 大屏 -->
|
|
|
<div class="video-preview_big">
|
|
|
<div
|
|
|
class="video-preview_big d-flex justify-content-center align-items-center"
|
|
|
id="peerMutiVideoPreview"
|
|
|
>
|
|
|
<div class="basicView_img" id="peerMutiVideoPreviewbasicView_img">
|
|
|
<img
|
|
|
draggable="false"
|
|
|
class="img-responsive"
|
|
|
src="assets/images/logo_big.png"
|
|
|
/>
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
<!-- 左下角小格 -->
|
|
|
<div
|
|
|
class="d-flex video-preview_big_left_bottom prompt_little"
|
|
|
id="peerMutiVideoPreviewLeftBottom"
|
|
|
></div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<!-- -->
|
|
|
<div class="video-operate d-flex justify-content-center">
|
|
|
<div class="d-flex">
|
|
|
<div class="audio_option d-flex" style="width: 310px">
|
|
|
<button id="setAudioEnableBtn" type="button" class="">
|
|
|
<i
|
|
|
class="iconfont meet-control_icon icon-audio_open icon_color_blue"
|
|
|
id="localAudioEnableIcon"
|
|
|
></i>
|
|
|
<p>音频</p>
|
|
|
</button>
|
|
|
<button id="hangupMutiBtn" type="button" class="">
|
|
|
<i
|
|
|
class="iconfont icon-hangup meet-control_icon icon_color_red"
|
|
|
></i>
|
|
|
<p>挂断</p>
|
|
|
</button>
|
|
|
<button id="setVideoEnableBtn" type="button" class="">
|
|
|
<i
|
|
|
class="iconfont meet-control_icon icon-video_open icon_color_blue"
|
|
|
id="localVideoEnableIcon"
|
|
|
></i>
|
|
|
<p>视频</p>
|
|
|
</button>
|
|
|
<button
|
|
|
class="invite-btn"
|
|
|
id="videoInviteMutiBtn"
|
|
|
type="button"
|
|
|
data-toggle="modal"
|
|
|
data-target="#invitationModal"
|
|
|
class=""
|
|
|
>
|
|
|
<i
|
|
|
class="iconfont icon-request_transparent meet-control_icon"
|
|
|
></i>
|
|
|
<i
|
|
|
class="iconfont icon-request_opacity meet-control_icon icon_color_blue"
|
|
|
></i>
|
|
|
<p>邀请</p>
|
|
|
</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 多人邀请模态框 -->
|
|
|
<div
|
|
|
class="modal fade"
|
|
|
id="invitationModal"
|
|
|
tabindex="-1"
|
|
|
role="dialog"
|
|
|
aria-labelledby="invitationModalLabel"
|
|
|
aria-hidden="true"
|
|
|
>
|
|
|
<div class="modal-dialog modal-dialog-centered">
|
|
|
<div class="modal-content">
|
|
|
<div class="modal-header">
|
|
|
<h4 class="modal-title" id="invitationModalLabel">邀请用户</h4>
|
|
|
<button
|
|
|
type="button"
|
|
|
id="modalClose"
|
|
|
class="close"
|
|
|
data-dismiss="modal"
|
|
|
aria-hidden="true"
|
|
|
>
|
|
|
×
|
|
|
</button>
|
|
|
</div>
|
|
|
<div class="modal-body">
|
|
|
<div class="login-form_bd modal-form_bd">
|
|
|
<div class="login-form_bt">输入您朋友的用户ID</div>
|
|
|
<div
|
|
|
class="f-flex justify-content-between input-group userid-inputs"
|
|
|
id="userMutiModalInputs"
|
|
|
>
|
|
|
<input
|
|
|
autocomplete="off"
|
|
|
autofocus
|
|
|
type="tel"
|
|
|
maxlength="1"
|
|
|
name="code"
|
|
|
pattern="[0-9]*"
|
|
|
/>
|
|
|
<input
|
|
|
autocomplete="off"
|
|
|
type="tel"
|
|
|
maxlength="1"
|
|
|
name="code"
|
|
|
pattern="[0-9]*"
|
|
|
/>
|
|
|
<input
|
|
|
autocomplete="off"
|
|
|
type="tel"
|
|
|
maxlength="1"
|
|
|
name="code"
|
|
|
pattern="[0-9]*"
|
|
|
/>
|
|
|
<input
|
|
|
autocomplete="off"
|
|
|
type="tel"
|
|
|
maxlength="1"
|
|
|
name="code"
|
|
|
pattern="[0-9]*"
|
|
|
/>
|
|
|
</div>
|
|
|
<div class="login-form_bt" id="invitaionErrorView"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="modal-footer justify-content-center">
|
|
|
<button
|
|
|
id="mutiModalBtn"
|
|
|
type="button"
|
|
|
class="btn btn-primary"
|
|
|
style="width: 96px"
|
|
|
>
|
|
|
确定
|
|
|
</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- /.modal-content -->
|
|
|
</div>
|
|
|
<!-- /.modal -->
|
|
|
</div>
|
|
|
<script src="./assets/js/index.js"></script>
|
|
|
</body>
|
|
|
</html>
|