@jp-web/ts-sdk
Version:
视频客服,视频会议Web端及微信小程序端SDK
177 lines (174 loc) • 11 kB
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>