@jp-web/ts-sdk
Version:
视频客服,视频会议Web端及微信小程序端SDK
172 lines (138 loc) • 9.31 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>Title</title>
<!-- <script src="https://cdn.bootcdn.net/ajax/libs/webrtc-adapter/7.4.0/adapter.js"></script>-->
<link href="./styles.css" type="text/css" rel="stylesheet"/>
<!-- MDUI CSS -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/mdui@1.0.0/dist/css/mdui.min.css"
integrity="sha384-2PJ2u4NYg6jCNNpv3i1hK9AoAqODy6CdiC+gYiL2DVx+ku5wzJMFNdE3RoWfBIRP"
crossorigin="anonymous"
/>
<!-- MDUI JavaScript -->
<script
src="https://cdn.jsdelivr.net/npm/mdui@1.0.0/dist/js/mdui.min.js"
integrity="sha384-aB8rnkAu/GBsQ1q6dwTySnlrrbhqDwrDnpVHR2Wgm8pWLbwUnzDcIROX3VvCbaK+"
crossorigin="anonymous"
></script>
<script src="https://cdn.bootcdn.net/ajax/libs/vConsole/3.3.4/vconsole.min.js"></script>
<script src="juphoon-sdk.webrtc.guest.debug.js?130eac9e54978f86460c"></script></head>
<body class="mdui-theme-primary-indigo mdui-theme-accent-pink">
<div class="mdui-appbar">
<div class="mdui-toolbar mdui-color-theme">
<a id="version" class="mdui-typo-Subheading"></a>
</div>
<div id="tab" class="mdui-tab" mdui-tab>
<a href="#call-settings" class="mdui-ripple">呼叫设置</a>
<a href="#video" class="mdui-ripple">通话</a>
</div>
</div>
<article class="mdui-container-fluid">
<section id="call-settings">
<!-- <fieldset>-->
<!-- <legend>版本信息</legend>-->
<!-- <code id="version-info" style="word-break: break-word;"></code>-->
<!-- </fieldset>-->
<!-- 环境设置 -->
<h3>环境设置</h3>
<div class="prefix-button-wrapper">
<div class="mdui-textfield"><label for="environment-address" class="mdui-textfield-label">服务环境</label><input id="environment-address" class="mdui-textfield-input" type="text" disabled/></div>
<button id="truth-address" class="mdui-btn mdui-textfield-close mdui-btn-raised mdui-btn-dense prefix-button" onclick="window.open(environmentAddressInput.value, '_blank')" title="信任地址" disabled>信任地址</button>
</div>
<div class="mdui-textfield"><label for="appKey" class="mdui-textfield-label">appKey</label><input id="appKey" class="mdui-textfield-input" type="text" disabled/></div>
<div class="prefix-button-wrapper">
<div class="mdui-textfield"><label for="token" class="mdui-textfield-label">token</label><input id="token" class="mdui-textfield-input" type="text" disabled/></div>
<button id="get-token" class="mdui-btn mdui-btn-raised mdui-btn-dense prefix-button" onclick="getToken()" title="获取token" disabled>获取token</button>
</div>
<!-- 访客设置 -->
<h3>访客设置</h3>
<button id="create-client" class="mdui-btn mdui-btn-raised mdui-btn-dense" onclick="createClient()" title="创建Client" disabled>创建Client</button>
<button id="destroy-client" class="mdui-btn mdui-btn-raised mdui-btn-dense" onclick="destroyClient()" title="销毁Client" disabled>销毁Client</button>
<div class="mdui-textfield"><label for="nickname" class="mdui-textfield-label">昵称</label><input id="nickname" class="mdui-textfield-input" type="text" disabled/></div>
<div class="mdui-textfield"><label for="extra-param" class="mdui-textfield-label">随路参数</label><input id="extra-param" class="mdui-textfield-input" type="text" disabled/></div>
<div class="mdui-textfield"><label for="svc-resolution" class="mdui-textfield-label">svc参数</label><input id="svc-resolution" class="mdui-textfield-input" type="text" value="1 144 150 360 450 720 1000" disabled/></div>
<div class="mdui-textfield">
<label for="security-type" class="mdui-textfield-label">加密类型</label>
<select id="security-type" class="mdui-select" title="request video size" disabled>
<option value="0" selected>不加密</option>
<option value="1">srtp加密</option>
<option value="2">国密</option>
</select>
</div>
<div class="prefix-button-wrapper">
<div class="mdui-textfield"><label for="agent-uri" class="mdui-textfield-label">坐席uri</label><input id="agent-uri" class="mdui-textfield-input" type="text" disabled/></div>
<button id="one-to-one-call" class="mdui-btn mdui-btn-raised mdui-btn-dense prefix-button" onclick="oneToOneCall()" title="点对点呼叫" disabled>点对点呼叫</button>
</div>
<div class="prefix-button-wrapper">
<div class="mdui-textfield"><label>业务组列表</label><select id="group-list" class="mdui-select" title="group list" disabled></select></div>
<button id="query-group-list" class="mdui-btn mdui-btn-raised mdui-btn-dense prefix-button" onclick="queryGroupList()" disabled>查询业务列表</button>
</div>
<button id="call" class="mdui-btn mdui-btn-raised mdui-btn-dense" onclick="call()" title="call" disabled>呼叫</button>
</section>
<section id="video" >
<div class="mdui-row">
<div id="local-video" class="mdui-col-xs-6"></div>
<div id="remote-video" class="mdui-col-xs-6"></div>
</div>
<!-- 接口测试 -->
<h3>接口测试</h3>
<button id="term" class="mdui-btn mdui-btn-raised mdui-btn-dense" onclick="term()" title="term" disabled>挂断</button>
<button id="open-camera" class="mdui-btn mdui-btn-raised mdui-btn-dense" onclick="openCamera()" title="打开摄像头" disabled>打开摄像头</button>
<div class="mdui-btn-group">
<button id="trigger-audio-output" class="mdui-btn mdui-btn-raised mdui-btn-dense" onclick="triggerAudioOutput()" title="开启关闭扬声器" disabled>开启关闭扬声器</button>
<button id="trigger-video-input" class="mdui-btn mdui-btn-raised mdui-btn-dense" onclick="triggerVideoInput()" title="开启关闭摄像头" disabled>开启关闭摄像头</button>
<button id="trigger-audio-input" class="mdui-btn mdui-btn-raised mdui-btn-dense" onclick="triggerAudioInput()" title="开启关闭麦克风" disabled>开启关闭麦克风</button>
</div>
<div class="mdui-textfield">
<label>设置对端分辨率</label>
<select id="request-video-size" class="mdui-select" title="request video size" onchange="requestVideo(this.value)" disabled>
<option value="0x0">不请求</option>
<option value="0x100">最小尺寸</option>
<option value="0x200">小尺寸</option>
<option value="0x300">大尺寸</option>
<option value="0x400">最大尺寸</option>
</select>
</div>
<div class="mdui-textfield">
<label>切换摄像头</label><select id="switch-video-input" class="mdui-select" title="切换摄像头" onchange="switchVideoInputChange(this.value)" disabled></select>
<label>切换扬声器</label><select id="switch-audio-output" class="mdui-select" title="切换扬声器" onchange="switchAudioOutputChange(this.value)" disabled></select>
<label hidden>切换麦克风</label><select hidden id="switch-audio-input" class="mdui-select" title="切换麦克风" onchange="switchAudioInputChange(this.value)" disabled></select>
</div>
<div class="prefix-button-wrapper">
<div class="mdui-textfield"><label for="ratio" class="mdui-textfield-label">宽高比,支持数字(0.5626 = 9/16,0.75 = 3/4)或表达式(9/16,3/4)</label><input id="ratio" class="mdui-textfield-input" type="text" disabled/></div>
<button id="set-ratio" class="mdui-btn mdui-btn-raised mdui-btn-dense prefix-button" onclick="setRatio()">确定</button>
</div>
<h6>发送文本消息</h6>
<div class="mdui-textfield">
<label for="to-user-id" class="mdui-textfield-label">发送对象</label>
<select id="to-user-id" class="mdui-select" title="request video size" disabled></select>
<label for="message-type" class="mdui-textfield-label">消息类型</label>
<input id="message-type" class="mdui-textfield-input" type="text" disabled/>
<label for="message-content" class="mdui-textfield-label">消息内容</label>
<input id="message-content" class="mdui-textfield-input" type="text" disabled/>
<button id="send-message" class="mdui-btn mdui-btn-raised mdui-btn-dense" onclick="sendMessage()">确定</button>
</div>
<!-- 其他 -->
<h3>其他</h3>
<button id="download-log" class="mdui-btn mdui-btn-raised mdui-btn-dense" onclick="downloadLog()" title="下载日志" disabled>下载日志</button>
</section>
</article>
<div id="waiting-dialog" class="mdui-dialog">
<div class="mdui-dialog-title">排队中</div>
<div class="mdui-dialog-content">
<div class="mdui-typo-subheading">等待人数: <strong id="wait-count"></strong></div>
<div class="mdui-typo-subheading">预计等待时间: <strong id="wait-time"></strong></div>
</div>
<div class="mdui-dialog-actions">
<button class="mdui-btn mdui-ripple" mdui-dialog-close onclick="term()">挂断</button>
<button class="mdui-btn mdui-ripple" onclick="urgent()">加急</button>
</div>
</div>
<script src="config.js"></script>
<script src="index.js"></script>
</body>
</html>