<view style="margin: 8px;">
  <text>环境设置</text>
  <input bindinput="environmentAddressChange" placeholder="服务环境" value="{{environmentAddress}}"></input>
  <input bindinput="appKeyChange" placeholder="appKey" value="{{appKey}}"></input>
  <input bindinput="tokenChange" placeholder="token" value="{{token}}"></input>
  <button type="deafult" size="mini" bindtap="getToken">获取token</button>
</view>
<view style="margin: 8px;">
  <view>会议设置</view>
  <button bindtap="createClient" title="创建Client" size="mini" disabled="{{clientEnable}}">创建Client</button>
  <button bindtap="destroyClient" title="销毁Client" size="mini" disabled="{{clientEnable}}">销毁Client</button>
  <input bindinput="accountNameChange" value="{{accountName}}" placeholder="账号(可选)"></input>
  <input bindinput="accountPasswordChange" value="{{accountPassword}}" placeholder="密码(可选)"></input>

  <view style="border-top: 1px gray solid;margin: 4px 0;"></view>

  <input bindinput="conferenceNumberChange" value="{{conferenceNumber}}" placeholder="会议号" disabled="{{!clientEnable}}"></input>
  <input bindinput="nicknameChange" value="{{nickname}}" placeholder="昵称" disabled="{{!clientEnable}}"></input>
  <input bindinput="capacityChange" value="{{capacity}}" placeholder="会议最大人数" type="number" disabled="{{!clientEnable}}"></input>
  <input bindinput="mtcConfPasswordKeyChange" value="{{mtcConfPasswordKey}}" placeholder="会议密码(可选)" disabled="{{!clientEnable}}"></input>
  <view>开启录制</view>
  <switch checked="{{remoteRecordEnable}}" bindchange="remoteRecordEnableChange"/>
  <view style="border-top: 1px gray solid;margin: 4px 0;"></view>

  <button bindtap="join" title="加入会议" size="mini" disabled="{{!clientEnable}}">加入会议</button>
  <button bindtap="leave" title="离开会议" size="mini" disabled="{{!clientEnable}}">离开会议</button>
  <button bindtap="stop" title="结束会议" size="mini" disabled="{{!clientEnable}}">结束会议</button>

  <view style="border-top: 1px gray solid;margin: 4px 0;"></view>

  <input bindinput="channelIdChange" value="{{channelId}}" placeholder="会议号" disabled="{{!clientEnable}}"></input>
  <button bindtap="query" title="查询会议" size="mini" disabled="{{!clientEnable}}">查询</button>
</view>
<view style="display: flex;flex-direction: row;height: 300px;">
  <local-stream id="local-stream" style="width: 50%;height: 100%;"></local-stream>
  <remote-stream id="remote-stream" style="width: 50%;height: 100%;"></remote-stream>
</view>
<view style="margin: 8px;">
  <view>接口测试</view>
  <button bindtap="openCamera" size="mini" disabled="{{!interfaceEnable}}">打开摄像头</button>
  <button bindtap="switchCamera" size="mini" disabled="{{!interfaceEnable}}">切换摄像头</button>
  <button bindtap="switchAudioRoute" size="mini" disabled="{{!interfaceEnable}}">切换扬声器</button>
  <button bindtap="triggerAudioOutput" size="mini" disabled="{{!interfaceEnable}}">开启关闭扬声器</button>
  <button bindtap="triggerVideoInput" size="mini" disabled="{{!interfaceEnable}}">开启关闭摄像头</button>
  <button bindtap="triggerAudioInput" size="mini" disabled="{{!interfaceEnable}}">开启关闭麦克风</button>
  <button bindtap="startRemoteRecord" size="mini" disabled="{{!startRemoteRecordEnable}}">开始远程录制</button>
  <button bindtap="stopRemoteRecord" size="mini" disabled="{{!stopRemoteRecordEnable}}">结束远程录制</button>
  <input bindinput="messageTypeInput" value="{{messageType}}" placeholder="消息类型" disabled></input>
  <input bindinput="messageContentInput" value="{{messageContent}}" placeholder="消息内容" disabled></input>
  <button bindtap="sendMessage" size="mini" disabled>发送消息</button>
  <button bindtap="takePhoto" size="mini" disabled="{{!interfaceEnable}}">本地拍照</button>
</view>
<view style="margin: 8px;">
  <view>录制配置</view>
  <view style="display: fl!ex;flex-direction: row;justify-content: space-between;">
    <text>录制分辨率</text>
    <picker bindchange="recordResolutionChange" value="{{recordResolutionIndex}}" range="{{recordResolutionList}}" range-key="label" disabled="{{!interfaceEnable}}">
      <view>{{recordResolutionList[recordResolutionIndex].label}}</view>
    </picker>
  </view>
  <view style="display: fl!ex;flex-direction: row;justify-content: space-between;">
    <text>媒体录制视频合并模式</text>
    <picker bindchange="recordMergeModeChange" value="{{recordMergeModeIndex}}" range="{{recordMergeModeList}}" range-key="label" disabled="{{!interfaceEnable}}">
      <view>{{recordMergeModeList[recordMergeModeIndex].label}}</view>
    </picker>
  </view>
  <input bindinput="recordVideoWidthInput" value="{{recordVideoWidth}}" placeholder="录制视频宽度" disabled="{{!interfaceEnable}}"></input>
  <input bindinput="recordVideoHeightInput" value="{{recordVideoHeight}}" placeholder="录制视频高度" disabled="{{!interfaceEnable}}"></input>
  <input bindinput="recordFrameRateInput" value="{{recordFrameRate}}" placeholder="录制帧率" disabled="{{!interfaceEnable}}"></input>
  <input bindinput="recordBitrateInput" value="{{recordBitrate}}" placeholder="录制码率" disabled="{{!interfaceEnable}}"></input>
  <input bindinput="recordFileNameInput" value="{{recordFileName}}" placeholder="录制文件名" disabled="{{!interfaceEnable}}"></input>
  <view>
    <view>存储参数</view>
    <input bindinput="recordStorageProtocolInput" value="{{recordStorageProtocol}}" placeholder="存储协议" disabled="{{!interfaceEnable}}"></input>
  </view>
  <input bindinput="recordRemoteFileNameInput" value="{{recordRemoteFileName}}" placeholder="自定义文件名(第三方)" disabled="{{!interfaceEnable}}"></input>
</view>
<view style="margin: 8px;">
  <view>设置分屏合并模式</view>
  <view style="display: fl!ex;flex-direction: row;justify-content: space-between;">
    <text>分屏模式</text>
    <picker bindchange="mergeModeChange" value="{{mergeModeIndex}}" range="{{mergeModeList}}" range-key="label" disabled="{{!interfaceEnable}}">
        <view>{{mergeModeList[mergeModeIndex].label}}</view>
    </picker>
  </view>
  <view style="display: fl!ex;flex-direction: row;justify-content: space-between;">
    <text>智能分屏模式</text>
    <picker bindchange="intellegenceMergeModeChange" value="{{intellegenceMergeModeIndex}}" range="{{intellegenceMergeModeList}}" range-key="label" disabled="{{!interfaceEnable}}">
      <view>{{intellegenceMergeModeList[intellegenceMergeModeIndex].label}}</view>
    </picker>
  </view>
  <view style="display: fl!ex;flex-direction: row;justify-content: space-between;">
    <text>智能分屏带屏幕共享模式</text>
    <picker bindchange="screenShareModeChange" value="{{screenShareModeIndex}}" range="{{screenShareModeList}}" range-key="label" disabled="{{!interfaceEnable}}">
      <view>{{screenShareModeList[screenShareModeIndex].label}}</view>
    </picker>
  </view>
</view>
<view style="display: flex;flex-direction: row;height: 300px;">
<image style="width: auto;height: auto;" src="{{takePhotoImage}}"></image>
</view>
<view style="margin: 8px;">
  <view>版本信息</view>
  <text style="word-break: break-word;">{{versionInfo}}</text>
</view>
