UNPKG

@jp-web/ts-sdk

Version:

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

177 lines (174 loc) 11 kB
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <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"/> <script src="config.js"></script> <!-- <script src="https://cdn.bootcdn.net/ajax/libs/vConsole/3.3.4/vconsole.min.js"></script>--> <!-- <script>publicConfig.debug && new VConsole();</script>--> <script src="juphoon-sdk.webrtc.conference.debug.js?a89592dcb653fe32c169"></script></head> <body> <article style="display: flex;flex-direction: column;width: 100%;height: 100%;"> <section style="flex: 1 1 0;display: flex;flex-direction: row;"> <section style="flex: 2 1 0;display: flex;flex-direction: column;"> <fieldset> <legend>版本信息</legend> <code id="version-info" style="word-break: break-word;"></code> </fieldset> <fieldset> <legend>环境设置</legend> <label for="environment-address" title="服务环境">服务环境</label><input id="environment-address" type="text"/> <button onclick="window.open(environmentAddressInput.value, '_blank')" title="信任地址">信任地址</button> <label for="appKey" title="appKey">appKey</label><input id="appKey" type="text"/> <label for="token" title="token">token</label><input id="token" type="text"/> <button id="get-token" onclick="getToken()" title="获取token">获取token</button> </fieldset> <fieldset> <legend>会议设置</legend> <button id="create-client" onclick="createClient()" title="创建Client" disabled>创建Client</button> <button id="destroy-client" onclick="destroyClient()" title="销毁Client" disabled>销毁Client</button> <label for="enable-conf-ctrl" title="enable conference control">会控</label><input id="enable-conf-ctrl" type="checkbox" onchange="enableConfCtrlChange(this)" disabled/> <hr> <label for="conference-number" title="会议号">会议号</label><input id="conference-number" type="text" disabled/> <label for="nickname" title="昵称">昵称</label><input id="nickname" type="text" disabled/> <label for="account-name" title="账号">账号(可选)</label><input id="account-name" type="text" disabled/> <label for="password" title="密码">密码(可选)</label><input id="password" type="text" disabled/> <label for="mtc-conf-password-key" title="会议密码">会议密码(可选)</label><input id="mtc-conf-password-key" type="text" disabled/> <label for="enable-record" title="enable record">开启录制</label><input id="enable-record" type="checkbox" disabled/> <label for="role" title="role">入会角色</label><select id="role" disabled><option value="7" selected>普通成员</option><option value="71">坐席</option><option value="135">访客</option></select> <hr> <button id="start" onclick="start()" title="创建会议" disabled hidden>创建会议</button> <button id="join" onclick="join()" title="加入会议" disabled>加入会议</button> <button id="leave" onclick="leave()" title="离开会议" disabled>离开会议</button> <button id="stop" onclick="stop()" title="结束会议" disabled>结束会议</button> <hr> <label for="channel-id" title="查询会议号">查询会议号</label><input id="channel-id" type="text" disabled/><button id="query-channel-id" onclick="query()" title="查询" disabled>查询</button> </fieldset> <fieldset> <legend>接口测试</legend> <button id="open-camera" onclick="openCamera()" title="打开摄像头" disabled>打开摄像头</button> <label> 切换摄像头 <select id="switch-video-input" title="切换摄像头" onchange="switchVideoInputChange(this.value)" disabled> </select> </label> <label> 切换摄像头 <select id="switch-audio-output" title="切换扬声器" onchange="switchAudioOutputChange(this.value)" disabled> </select> </label> <label> 切换麦克风 <select id="switch-audio-input" title="切换麦克风" onchange="switchAudioInputChange(this.value)" disabled> </select> </label> <button id="trigger-audio-output" onclick="triggerAudioOutput()" title="开启关闭扬声器" disabled>开启关闭扬声器</button> <button id="trigger-video-input" onclick="triggerVideoInput()" title="开启关闭摄像头" disabled>开启关闭摄像头</button> <button id="trigger-audio-input" onclick="triggerAudioInput()" title="开启关闭麦克风" disabled>开启关闭麦克风</button> <button id="start-remote-record" onclick="startRemoteRecord()" title="开始远程录制" disabled>开始远程录制</button> <button id="stop-remote-record" onclick="stopRemoteRecord()" title="结束远程录制" disabled>结束远程录制</button> <button id="start-local-record" onclick="startLocalRecord()" title="开始本地录制" disabled>开始本地录制</button> <button id="stop-local-record" onclick="stopLocalRecord()" title="结束本地录制" disabled>结束本地录制</button> <button id="snapshot" onclick="snapshot()" title="本地拍照" disabled>本地快照</button> <fieldset> <legend>设置分屏合并模式</legend> <label> 分屏模式 <select id="mergeModeSelect" onchange="mergeModeSelectChange(this.value)" disabled> <option value="1" selected>平铺模式</option> <option value="2">讲台模式</option> <option value="3">演讲模式</option> <option value="4">自定义模式</option> <option value="5">智能模式</option> </select> </label> <label> 智能分屏模式 <select id="intellegenceMergeModeSelect" disabled onchange="intellegenceMergeModeChange(this.value)"> <option value="1" selected>FREE_LAYOUT</option> <option value="2">RECT_LAYOUT</option> <option value="3">BIG_SMALLX2</option> <option value="4">BIG_SMALLX3</option> <option value="5">BIG_SMALLX4</option> <option value="6">BIG_SMALLX5</option> <option value="7">BIG_SMALLX6</option> <option value="8">BIG_SMALLX7</option> <option value="9">BIG_SMALLX8</option> <option value="10">BIG_SMALLX9</option> <option value="11">BIG_SMALLX10</option> <option value="12">BIG_SMALL_TOP</option> <option value="13">BIG_SMALL_BOTTOM</option> </select> </label> <label> 智能分屏带屏幕共享模式 <select id="screenShareModeSelect" disabled onchange="screenShareModeChange(this.value)"> <option value="1" selected>SCREEN</option> <option value="2">PLATOFORM</option> <option value="3">PLATFORM_COVER</option> <option value="4">SPEAKER</option> </select> </label> </fieldset> <fieldset> <legend>录制配置</legend> <label> 录制分辨率 <select id="record-resolution" title="录制分辨率" disabled> <option value="0">NONE</option> <option value="0x100">MIN</option> <option value="0x200">SMALL</option> <option value="0x300">LARGE</option> <option value="0x400">MAX</option> </select> </label> <label> 媒体录制视频合并模式 <select id="record-merge-mode" title="媒体录制视频合并模式" disabled> <option value="1">SCREEN</option> <option value="2">PLATFORM</option> <option value="3">SPEAKER</option> <option value="4">LAYOUT</option> <option value="5">INTELLEGNCE</option> </select> </label> <label for="record-video-width" title="record video width">录制视频宽度</label><input id="record-video-width" type="number" disabled value="640"/> <label for="record-video-height" title="record video height">录制视频高度</label><input id="record-video-height" type="number" disabled value="360"/> <label for="record-frame-rate" title="record frame rate">录制帧率</label><input id="record-frame-rate" type="number" disabled value="18"/> <label for="record-bitrate" title="record bitrate">录制码率</label><input id="record-bitrate" type="number" disabled value="18"/> <label for="record-file-name" title="record file name">录制文件名</label><input id="record-file-name" type="text" disabled/> <fieldset> <legend>存储参数</legend> <label for="record-storage-protocol" title="record storage protocol">存储协议</label><input id="record-storage-protocol" type="text" disabled value="aws"/> </fieldset> <label for="record-remote-file-name" title="record remote file name">自定义文件名(第三方)</label><input id="record-remote-file-name" type="text" disabled/> </fieldset> <label for="message-type" title="message type">消息类型</label><input id="message-type" type="text" disabled/> <label for="message-content" title="message content">消息内容</label><input id="message-content" type="text" disabled/> <button id="send-message" onclick="sendMessage()" title="发送消息" disabled>发送消息</button> </fieldset> <fieldset> <legend>统计数据</legend> <label>音频发送码率: <strong id="send-audio-bitrate"></strong>kbps</label> <label>视频发送码率: <strong id="send-video-bitrate"></strong>kbps</label> <label>音频接收码率: <strong id="receive-audio-bitrate"></strong>kbps</label> <label>视频接收码率: <strong id="receive-video-bitrate"></strong>kbps</label> </fieldset> <fieldset> <legend>其他</legend> <button id="download-log" onclick="downloadLog()" title="下载日志" disabled>下载日志</button> </fieldset> </section> <section style="flex: 1 1 0;display: flex;flex-direction: column;"> <div id="local-video"></div> <div id="remote-video"></div> <img id="snapshot-preview" src=""> </section> </section> <!-- <textarea style="width: 100%; height: 100%;font-size: 10px;white-space: pre-line;word-break: break-word;" id="log" disabled></textarea>--> </article> <script src="index.js"></script> </body> </html>