UNPKG

@jp-web/ts-sdk

Version:

视频客服,视频会议Web端及微信小程序端SDK

172 lines (138 loc) 9.31 kB
<!DOCTYPE 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>