fuyuhang
/
Project_yhfu
tükrözi: http://121.37.83.100:3000/sooka_onest/sooka_onest_forestfire_vue2_visualization.git


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032
							<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no,user-scalable=no"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="theme-color" content="#000000"/>
    <meta name="x5-fullscreen" content="true">
    <meta name="mobile-web-app-capable" content="yes">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-control" content="no-cache">
    <title>我的会议</title>
    <style>
      .select-text {
        -webkit-user-select: text;
        -moz-user-select: text;
        -ms-user-select: text;
        user-select: text;
      }

      .box {
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        justify-content: space-around;
        background: center / contain repeat url(https://www.huaweicloud.com/content/dam/cloudbu-site/archive/china/zh-cn/product/cloud_communications/meeting/image/image-%E5%B8%AE%E5%8A%A9%E6%96%87%E6%A1%A3-2.png);
      }

    </style>
</head>

<body>
<div id="root" style="position: absolute; width: 100%; height: 100%;"></div>


<div class="box" style="display: flex; display: -webkit-flex; display:none;">
    <div class="title is-2" style="text-align: center; width: 100%;">华为云webSDK演示页面</div>

    <div style="width: 50%;">
        <div>
            <button id="get-sdk-version-button" class="button is-link" onclick=getSdkVersion()
                    style="padding-left:15px;">获取SDK版本号
            </button>
            <button id="browser-check-button" class="button is-success" onclick=checkBrowserSupport()
                    style="padding-left:15px;">检查浏览器兼容性
            </button>
        </div>
        <div>
          <input id="lang" autocomplete="off" class="input is-rounded" placeholder="en-US | zh-CN " type="text"
                  style="width: 160px;" value = 'zh-CN'>
          <button id='setLangButton' type="submit" onclick = setLang() class="button is-link">设置语言</button>
        </div>

        <div style="width: 100%;  margin-top: 8px;">
            <input id="token" autocomplete="off" class="input is-rounded" type="text" placeholder="token(可选:用于实名入会)"
                   style="width: 220px;">
            <input id="confId" autocomplete="off" class="input is-rounded" placeholder="请输入会议ID" type="text"
                   style="width: 140px;" value="">
            <input id="pwd" autocomplete="off" class="input is-rounded" placeholder="请输入会议密码" type="text"
                   style="width: 150px;" value="">
            <input id="nickName" autocomplete="off" class="input is-rounded" placeholder="请输入姓名" type="text"
                   style="width: 130px;" value="">
            <button type="submit" onclick=validateForm() id="join" class="button is-link">加入会议</button>
            <button class="button is-danger" onclick=clickLeaveConf() style="padding-left:15px;">离会</button>
        </div>

        <div id="leaveConfModal" class="modal">
            <div class="modal-background"></div>
            <div class="modal-card">
                <header class="modal-card-head">
                    <p class="modal-card-title">提示</p>
                    <button class="delete" aria-label="close" onclick=closeModals()></button>
                </header>
                <section class="modal-card-body">
                    <div class="control">
                        <label class="radio">
                            <input type="radio" name="leaveConfConfirm" value="leave" checked>
                            离开会议
                        </label>
                        <label class="radio">
                            <input type="radio" name="leaveConfConfirm" value="end">
                            结束会议
                        </label>
                    </div>
                </section>
                <footer class="modal-card-foot">
                    <button class="button is-success" onclick=handleLeaveConfirm()>确认</button>
                    <button class="button" onclick=closeModals()>取消</button>
                </footer>
            </div>
        </div>

        <div style="margin-top: 8px;">
            <button id="handup-button" class="button is-primary" onclick=handleHand()>举手</button>

            <button id="chat-button" class="button is-info" onclick=handleChatVisible() style="padding-left:15px;">聊天显示
            </button>
            <button id="attendee-button" class="button is-link" onclick=handleAttendeeListVisible()
                    style="padding-left:15px;">与会者显示
            </button>
            <button id="control-button" class="button is-info" onclick=handleControlBarVisible()
                    style="padding-left:15px;">会控条显示
            </button>
            <button id="title-button" class="button is-success" onclick=handleTitleVisible() style="padding-left:15px;">
                标题隐藏
            </button>
            <button id="bullet-button" class="button is-success" onclick=handleBulletScreenVisible()
                    style="padding-left:15px;">弹幕隐藏
            </button>

            <button id="share-button" class="button is-info" onclick=handleShareScreen()>共享</button>
            <button id="video-button" class="button is-warning" onclick=handleVideoMute() style="padding-left:15px;">
                打开视频
            </button>
            <button id="audio-button" class="button is-primary" onclick=handleMuteAudio() style="padding-left:15px;">
                取消静音
            </button>
            <button id="speaker-button" class="button is-danger" onclick=handleMuteSpeaker() style="padding-left:15px;">
                关闭扬声器
            </button>
        </div>

        <div style="margin-top: 8px;">
            <input id='volumeInput' value class="input is-primary is-rounded" type="number" min="0" max="100" placeholder="请输入音量 "
                   onchange=volumeChange(value) style="width:136px;padding-left:15px;"></input>
            <button id="conf-staus-button" class="button is-success" onclick=handleSetVolume()
                    style="padding-left:15px;">
                设置音量
            </button>

            <input id='changeNameInput' value class="input is-link is-rounded" type="text" placeholder="请输入姓名： " onchange=changingName(value)
                   style="width:184px;padding-left:15px;"></input>
            <button id="chat-button" class="button is-info" onclick=handleChangeName() style="padding-left:15px;">修改名字
            </button>

            <input id='changeWidthInput' value=1280 class="input is-link is-rounded" type="number" min="300" max="2000" placeholder="宽度 "
                   onchange=changingWith(value) style="width:100px;padding-left:15px;"></input>
            <input id='changeHeightInput' value=720 class="input is-link is-rounded" type="number" min="300" max="1000" placeholder="高度 "
                   onchange=changingHeight(value) style="width:100px;padding-left:15px;"></input>
            <button id="chat-button" class="button is-info" onclick=handleChangeSize() style="padding-left:15px;">修改窗口宽高
            </button>
        </div>

        <div style="margin-top: 8px;">
        <span id="guest-url">
          <input value class="confViewInput input is-warning is-rounded" autocomplete="off" type="text" placeholder="请输入链接： "
                 onchange=changingGuestUrl(value) style="width:700px;padding-left:15px;"></input>
          <button id="chat-button" class="button is-warning" onclick=handleGuestSharingUrl()
                  style="padding-left:15px;">设置嘉宾链接</button>
        </span>
        </div>

        <div style="margin-top: 8px;">
        <span id="audience-url">
          <input value class="confViewInput input is-success is-rounded" autocomplete="off" type="text" placeholder="请输入链接： "
                 onchange=changingAudienceUrl(value) style="width:700px;padding-left:15px;"></input>
          <button id="chat-button" class="button is-success" onclick=handleAudienceSharingUrl()
                  style="padding-left:15px;">设置观众链接</button>
        </span>
        </div>

        <div style="margin-top: 8px;">
          <span id="leave-url">
            <input value class="confViewInput input is-success is-rounded" autocomplete="off" type="text" placeholder="请输入链接： "
                   onchange=changingLeaveUrl(value) style="width:700px;padding-left:15px;"></input>
            <button id="chat-button" class="button is-success" onclick=handleLeaveUrl()
                    style="padding-left:15px;">设置离会链接</button>
          </span>
        </div>

        <div style="margin-top: 8px;">
          <span id="record-content">
            <textarea name="record-content" rows="4" cols="80" value class=" confViewInput is-success is-rounded" autocomplete="off" type="text" placeholder="请输入内容： "
                   onchange=changingStopRecordTip(value) style="width:700px;padding-left:15px;"></textarea>
            <button id="chat-button" class="button is-success" onclick=handleStopRecordTip()
                    style="padding-left:15px;">设置停止录制内容</button>
          </span>
        </div>

        <div style="margin-top: 8px;">

            <div id="mode-select" class="select is-link">
                <select id='changeModeSelect' onchange=selectMode(value)>
                    <option value="">--设置视图--</option>
                    <option value="speaking">演讲者视图</option>
                    <option value="gallery">画廊视图</option>
                    <option value="single">单视图</option>
                </select>
            </div>

            <div class="select is-primary">
                <select id='getViewSelect' onchange=getViewStatus(value)>
                    <option value="">--查看视图状态--</option>
                    <option value="titleVisible">标题显示</option>
                    <option value="bulletScreenVisible">弹幕显示</option>
                    <option value="attendeeListVisible">与会者显示</option>
                    <option value="chatVisible">聊天显示</option>
                    <option value="viewMode">视图模式</option>
                    <option value="controlBarVisible">会控条显示</option>
                    <option value="guestSharingUrl">嘉宾分享链接</option>
                    <option value="audienceSharingUrl">观众分享链接</option>
                    <option value="stopRecordTip">停止录制内容</option>
                    <option value="leaveUrl">离会后跳转链接</option>
                </select>
            </div>

            <div class="select is-danger">
                <select id='getConfStatusSelect' onchange=getConfStatus(value)>
                    <option value="">--查看会控状态--</option>
                    <option value="audioMute">静音状态</option>
                    <option value="videoMute">视频状态</option>
                    <option value="speakerMute">扬声器状态</option>
                    <option value="volume">音量</option>
                    <option value="handUp">举手状态</option>
                    <option value="shareScreen">共享状态</option>
                    <option value="userName">名称</option>
                    <option value="role">获取角色</option>
                </select>
            </div>
        </div>

        <div style="margin-top: 8px;">
        <textarea id="meeting-config" name="meeting-config" rows="8" cols="80" placeholder="请输入自定义 config 的 参数（JSON 类型）"
                  onchange=changingCustomConfig(value)></textarea>
            <div>
                <button id="formatConfig" class="button is-success" onclick=formatConfig() style="padding-left:15px;">
                    格式化参数
                </button>
                <button id="setServerConfigButton" class="button is-warning" onclick=invokeSetServerConfig()
                        style="padding-left:15px;">setServerConfig
                </button>
                <button id="joinConfButton" class="button is-info" onclick=invokeJoinConf() style="padding-left:15px;">
                    joinConf
                </button>
                <button id="leaveConfButton" class="button is-info" onclick=invokeLeaveConf()
                        style="padding-left:15px;">leaveConf
                </button>
                <button id="setViewConfigButton" class="button is-success" onclick=invokeSetViewConfig()
                        style="padding-left:15px;">setViewConfig
                </button>
                <button id="setConfConfigButton" class="button is-info" onclick=invokeSetConfConfig()
                        style="padding-left:15px;">setConfConfig
                </button>
            </div>
        </div>
    </div>

    <article class="message is-danger" style="width: 40%;">
        <div class="message-header">
            <p>事件监听</p>
            <button class="button is-success is-small" onclick=clearMessagePanel()
                    style="padding-left:15px;background-color: #c33a55;">清空
            </button>
            <!-- <button class="delete" aria-label="delete"></button> -->
        </div>
        <div id="message-body" class="message-body" style="height: 500px; overflow-y: auto; user-select: text;">
        </div>
    </article>
</div>
<div id="stream-pools" style="display: none"></div>
</body>

<script src="./react.development.js" crossorigin></script>
<script src="./react-dom.development.js" crossorigin></script>
<script src="./moment.min.js" crossorigin></script>
<!-- SDK -->
<script src='./HWMeeting.js'></script>


<link rel="stylesheet" href="./bulma.min.css">

<script>
  /**
   * 设置会议服务器地址, 不设置时默认使用中国站
   * 中国站: host: 'meeting.huaweicloud.com', port: '443'
   * 国际站: host: 'intl.meeting.huaweicloud.com', port: '443'
   * */
  HWMeeting.setServerConfig({
    host: 'meeting.huaweicloud.com',
    port: '443'
  });

  let listener;
  let role;
  function createListener() {
    listener = HWMeeting.createEventListener();

    HWMeeting.getEventList().forEach(event => {
      listener.on(event, (eventData) => {
        handleListeningEvents(event, JSON.stringify(eventData));
        if (event === "leave_conf_result") {
          handleConfLeaveEvent(eventData);
        }
        if (event === "conf_config_changed") {
          handleConfChangeEvent(eventData);
        }
        if (event === "view_config_changed") {
          handleViewChangeEvent(eventData);
        }
        if (event === "join_conf_result" && eventData?.retCode === "0") {
          // 同步按钮状态
          syncConfConfig();
          syncViewConfig();
        }
      });
    });
  }

  // 可视化事件结果
  function handleListeningEvents(event, eventDataJson) {
    let msgBody = document.getElementById("message-body");
    let newContent = document.createElement("div");
    newContent.textContent = `【事件回调】 | ${moment().format("YYYY-MM-DD HH:mm:ss")} | 事件内容: [${event}]: ${eventDataJson}`;
    newContent.class = 'select-text';
    newContent.style = " white-space: pre-wrap; word-wrap:break-word";
    // 添加文本节点 到这个新的 div 元素
    msgBody.appendChild(newContent);
    msgBody.scrollTop = msgBody.scrollHeight;
    console.warn("事件监听：", event, eventDataJson)
  }

  function clearMessagePanel() {
    let msgBody = document.getElementById("message-body");
    msgBody.innerHTML = '';
  }


</script>

<!-- 会控控制 -->
<script>
  let width = 1280;
  let height = 720;

  let customConfig;

  const SUCCESS = true;
  const FAIL = false;

  const confConfig = {
    audioMute: {
      name: 'audioMute',
      value: true,
    },
    videoMute: {
      name: 'videoMute',
      value: true,
    },
    speakerMute: {
      name: 'speakerMute',
      value: false,
    },
    volume: {
      name: 'volume',
      value: 50,
    },
    handUp: {
      name: 'handUp',
      value: false,
    },
    shareScreen: {
      name: 'shareScreen',
      value: false,
    },
    userName: {
      name: 'userName',
      value: null,
    },
    role: {
      name: 'role',
      value: null,
    },
  }

  const buttonMap = {
    [confConfig.audioMute.name]: {
      element: document.getElementById("audio-button"),
      value: {
        true: "取消静音",
        false: "静音"
      }
    },
    [confConfig.videoMute.name]: {
      element: document.getElementById("video-button"),
      value: {
        true: "打开视频",
        false: "关闭视频"
      }
    },
    [confConfig.speakerMute.name]: {
      element: document.getElementById("speaker-button"),
      value: {
        true: "打开扬声器",
        false: "关闭扬声器"
      }
    },
    [confConfig.handUp.name]:
    {
      element: document.getElementById("handup-button"),
      value: {
        true: "放下",
        false: "举手"
      }
    },
    [confConfig.shareScreen.name]:
    {
      element: document.getElementById("share-button"),
      value: {
        true: "取消共享",
        false: "共享"
      }
    },
  }

  function syncConfConfig() {
    Object.keys(confConfig).forEach((key => {
      HWMeeting.getConfConfig(key).then((result) => {

        if (Object.prototype.hasOwnProperty.call(buttonMap, key)) {
          buttonMap[key].element.textContent = buttonMap[key].value[result.data[key]];
          confConfig[key].value = result.data[key];
        }

      }).catch((e) => {
        console.error('mark syncConfConfig', e)
      });
    }));
  }

  function handleConfLeaveEvent() {
    Array.from(document.querySelectorAll('.confViewInput')).forEach(node => {
      node.value = '';
    })
  }

  function handleConfChangeEvent(eventData) {
    const { configName, previousValue, currentValue } = eventData;

    if (Object.prototype.hasOwnProperty.call(buttonMap, configName)) {
      buttonMap[configName].element.textContent = buttonMap[configName].value[currentValue];
      confConfig[configName].value = currentValue;
    }
  }

  function handleShareScreen() {
    let params = { shareScreen: !confConfig.shareScreen.value };
    HWMeeting.setConfConfig(params).then((result) => {
      // 显示结果
      showPromiseResult("setConfConfig", params, SUCCESS, result);
    }).catch((e) => {
      // 显示结果
      showPromiseResult("setConfConfig", params, FAIL, e);
    });
  }
  function handleMuteAudio() {
    let params = { audioMute: !confConfig.audioMute.value };
    HWMeeting.setConfConfig(params).then((result) => {
      // 显示结果
      showPromiseResult("setConfConfig", params, SUCCESS, result);
    }).catch((e) => {
      // 显示结果
      showPromiseResult("setConfConfig", params, FAIL, e);
    });
  }
  function handleVideoMute() {
    let params = { videoMute: !confConfig.videoMute.value };
    HWMeeting.setConfConfig(params).then((result) => {
      // 显示结果
      showPromiseResult("setConfConfig", params, SUCCESS, result);
    }).catch((e) => {
      // 显示结果
      showPromiseResult("setConfConfig", params, FAIL, e);
    });
  }
  function handleMuteSpeaker() {
    let params = { speakerMute: !confConfig.speakerMute.value }
    HWMeeting.setConfConfig(params).then((result) => {
      // 显示结果
      showPromiseResult("setConfConfig", params, SUCCESS, result);
    }).catch((e) => {
      // 显示结果
      showPromiseResult("setConfConfig", params, FAIL, e);
    });

  }

  function handleHand() {
    let params = { handUp: !confConfig.handUp.value };
    HWMeeting.setConfConfig(params).then((result) => {
      // 显示结果
      showPromiseResult("setConfConfig", params, SUCCESS, result);
    }).catch((e) => {
      // 显示结果
      showPromiseResult("setConfConfig", params, FAIL, e);
    });
  }

  function getConfStatus(value) {
    if (value === "") {
      return;
    }
    HWMeeting.getConfConfig(value).then((data) => {
      // 显示结果
      showPromiseResult("getConfConfig", value, SUCCESS, data);
    }).catch((e) => {
      // 显示结果
      showPromiseResult("getConfConfig", value, FAIL, e);
    });
  }

  function getViewStatus(value) {
    if (value === "") {
      return;
    }
    HWMeeting.getViewConfig(value).then((data) => {
      // 显示结果
      showPromiseResult("getViewConfig", value, SUCCESS, data);
    }).catch((e) => {
      // 显示结果
      showPromiseResult("getViewConfig", value, FAIL, e);
    });
  }
  function handleSetVolume() {
    let params = { 'volume': Number(confConfig.volume.value) }
    HWMeeting.setConfConfig(params).then((result) => {
      // 显示结果
      showPromiseResult("setConfConfig", params, SUCCESS, result);
    }).catch((e) => {
      // 显示结果
      showPromiseResult("setConfConfig", params, FAIL, e);
    });
  }


  function handleChangeName() {
    let params = { userName: confConfig.userName.value }
    HWMeeting.setConfConfig(params).then((result) => {
      // 显示结果
      showPromiseResult("setConfConfig", params, SUCCESS, result);
    }).catch((e) => {
      // 显示结果
      showPromiseResult("setConfConfig", params, FAIL, e);
    });
  }

  function handleGetToken() {
    getToken();
  }

  function changingWith(e) {
    width = e;
  }
  function changingHeight(e) {
    height = e;
  }

  // confConfig
  function changingName(e) {
    confConfig.userName.value = e;
  }

  function volumeChange(e) {
    confConfig.volume.value = e;
  }

  // viewConfig
  function changingGuestUrl(e) {
    viewConfig.guestSharingUrl.value = e;
  }

  function changingAudienceUrl(e) {
    viewConfig.audienceSharingUrl.value = e;
  }

  function changingLeaveUrl(e) {
    viewConfig.leaveUrl.value = e;
  }

  function changingStopRecordTip(e) {
    viewConfig.stopRecordTip.value = e;
  }

  // 自定义参数
  function changingCustomConfig(value) {
    customConfig = value;
  }

  function parseConfJson(config) {
    if (typeof config === 'undefined' || config === null) {
      return config;
    }
    if (config === '') {
      return undefined;
    }

    try {
      return JSON.parse(config);
    } catch (err) {
      console.error(err);
      alert('JSON 格式错误' + JSON.stringify(err))
    }
  }

  function formatConfig() {
    const customConfigJson = parseConfJson(customConfig);
    if (customConfigJson) {
      document.getElementById("meeting-config").value = JSON.stringify(customConfigJson, null, 4);
    }
  }


</script>
<!--  UI控制： -->
<script>
  const viewConfig = {
    titleVisible: {
      name: 'titleVisible',
      value: false
    },
    attendeeListVisible: {
      name: 'attendeeListVisible',
      value: false
    },
    chatVisible: {
      name: 'chatVisible',
      value: false
    },
    bulletScreenVisible: {
      name: 'bulletScreenVisible',
      value: false
    },
    controlBarVisible: {
      name: 'controlBarVisible',
      value: false
    },
    viewMode: {
      name: 'viewMode',
      value: null
    },
    guestSharingUrl: {
      name: 'guestSharingUrl',
      value: null
    },
    audienceSharingUrl: {
      name: 'audienceSharingUrl',
      value: null
    },
    stopRecordTip: {
      name: 'stopRecordTip',
      value: null
    },
    leaveUrl: {
      name: 'leaveUrl',
      value: null
    },
  }

  const viewButtonMap = {
    [viewConfig.titleVisible.name]: {
      element: document.getElementById("title-button"),
      value: {
        true: "标题隐藏",
        false: "标题显示"
      }
    },
    [viewConfig.attendeeListVisible.name]: {
      element: document.getElementById("attendee-button"),
      value: {
        true: "与会者隐藏",
        false: "与会者显示"
      }
    },
    [viewConfig.chatVisible.name]: {
      element: document.getElementById("chat-button"),
      value: {
        true: "聊天隐藏",
        false: "聊天显示"
      }
    },
    [viewConfig.bulletScreenVisible.name]: {
      element: document.getElementById("bullet-button"),
      value: {
        true: "弹幕隐藏",
        false: "弹幕显示"
      }
    },
    [viewConfig.controlBarVisible.name]: {
      element: document.getElementById("control-button"),
      value: {
        true: "会控条隐藏",
        false: "会控条显示"
      }
    },
  }

  function syncViewConfig() {
    Object.keys(viewConfig).forEach((key => {
      HWMeeting.getViewConfig(key).then((result) => {

        if (Object.prototype.hasOwnProperty.call(viewButtonMap, key)) {
          viewButtonMap[key].element.textContent = viewButtonMap[key].value[result.data[key]];
          viewConfig[key].value = result.data[key];
        }
      }).catch((e) => {
        console.error('syncViewConfig', key,  e)
      });
    }));
  }

  function handleViewChangeEvent(eventData) {
    const { configName, previousValue, currentValue } = eventData;

    if (Object.prototype.hasOwnProperty.call(viewButtonMap, configName)) {
      viewButtonMap[configName].element.textContent = viewButtonMap[configName].value[currentValue];
    }
    viewConfig[configName].value = currentValue;
  }

  function clickLeaveConf() {
    const value = "role"
    HWMeeting.getConfConfig(value).then((data) => {
      // 显示结果
      showPromiseResult("getConfConfig", value, SUCCESS, data);
      if (data?.data?.role === "host") {
        openModals();
      } else {
        handleLeave({ isEndConf: false });
      }
    }).catch((e) => {
      // 显示结果
      showPromiseResult("getConfConfig", value, FAIL, e);
    });
  }

  function handleLeaveConfirm() {
    closeModals();
    const radioValue = document.querySelector('[name=leaveConfConfirm]:checked').value;
    const params = { isEndConf: radioValue === "end" };
    handleLeave(params);
  }

  function handleLeave(params) {
    HWMeeting.leaveConf(params).then((result) => {
      // 显示结果
      showPromiseResult("leaveConf", params, SUCCESS, result);
    }).catch((e) => {
      // 显示结果
      showPromiseResult("leaveConf", params, FAIL, e);
    })
  }

  function openModals() {
    document.getElementById("leaveConfModal").classList.add('is-active');
  }

  function closeModals() {
    document.getElementById("leaveConfModal").classList.remove('is-active')
  }


  function handleChatVisible() {
    let params = { chatVisible: !viewConfig.chatVisible.value };
    HWMeeting.setViewConfig(params).then((result) => {
      // 显示结果
      showPromiseResult("setViewConfig", params, SUCCESS, result);
    }).catch((e) => {
      // 显示结果
      showPromiseResult("setViewConfig", params, FAIL, e);
    });

  }
  function handleAttendeeListVisible() {
    let params = { attendeeListVisible: !viewConfig.attendeeListVisible.value };
    HWMeeting.setViewConfig(params).then((result) => {
      // 显示结果
      showPromiseResult("setViewConfig", params, SUCCESS, result);
    }).catch((e) => {
      // 显示结果
      showPromiseResult("setViewConfig", params, FAIL, e);
    });

  }

  function handleControlBarVisible() {
    let params = { controlBarVisible: !viewConfig.controlBarVisible.value };
    HWMeeting.setViewConfig(params).then((result) => {
      // 显示结果
      showPromiseResult("setViewConfig", params, SUCCESS, result);
    }).catch((e) => {
      // 显示结果
      showPromiseResult("setViewConfig", params, FAIL, e);
    });
  }
  function handleTitleVisible() {
    let params = { titleVisible: !viewConfig.titleVisible.value };
    HWMeeting.setViewConfig(params).then((result) => {
      // 显示结果
      showPromiseResult("setViewConfig", params, SUCCESS, result);
    }).catch((e) => {
      // 显示结果
      showPromiseResult("setViewConfig", params, FAIL, e);
    });
  }
  function handleBulletScreenVisible() {
    let params = { bulletScreenVisible: !viewConfig.bulletScreenVisible.value };
    HWMeeting.setViewConfig(params).then((result) => {
      // 显示结果
      showPromiseResult("setViewConfig", params, SUCCESS, result);
    }).catch((e) => {
      // 显示结果
      showPromiseResult("setViewConfig", params, FAIL, e);
    });
  }

  function selectMode(value) {
    if (value === "") {
      return;
    }
    let params = { viewMode: value };
    HWMeeting.setViewConfig(params).then((result) => {
      // 显示结果
      showPromiseResult("setViewConfig", params, SUCCESS, result);
    }).catch((e) => {
      // 显示结果
      showPromiseResult("setViewConfig", params, FAIL, e);
    })
  }


  // 修改sdk渲染框大小
  function handleChangeSize() {
    let sdkRoot = document.getElementById("root");
    width = Math.max(Math.min(width, 2000), 300);
    height = Math.max(Math.min(height, 1000), 300);
    sdkRoot.style.width = width + "px";
    sdkRoot.style.height = height + "px";
  }

  function handleGuestSharingUrl() {
    let params = { guestSharingUrl: viewConfig.guestSharingUrl.value }
    HWMeeting.setViewConfig(params).then((result) => {
      // 显示结果
      showPromiseResult("setViewConfig", params, SUCCESS, result);
    }).catch((e) => {
      // 显示结果
      showPromiseResult("setViewConfig", params, FAIL, e);
    });
  }

  function handleAudienceSharingUrl() {
    let params = { audienceSharingUrl: viewConfig.audienceSharingUrl.value };
    HWMeeting.setViewConfig(params).then((result) => {
      // 显示结果
      showPromiseResult("setViewConfig", params, SUCCESS, result);
    }).catch((e) => {
      // 显示结果
      showPromiseResult("setViewConfig", params, FAIL, e);
    });
  }

  function handleLeaveUrl() {
    let params = { leaveUrl: viewConfig.leaveUrl.value };
    HWMeeting.setViewConfig(params).then((result) => {
      // 显示结果
      showPromiseResult("setViewConfig", params, SUCCESS, result);
    }).catch((e) => {
      // 显示结果
      showPromiseResult("setViewConfig", params, FAIL, e);
    });
  }

  function handleStopRecordTip() {
    let params = { stopRecordTip: viewConfig.stopRecordTip.value };
    HWMeeting.setViewConfig(params).then((result) => {
      // 显示结果
      showPromiseResult("setViewConfig", params, SUCCESS, result);
    }).catch((e) => {
      // 显示结果
      showPromiseResult("setViewConfig", params, FAIL, e);
    });
  }

  function invokeSetConfConfig() {
    const customConfigObj = parseConfJson(customConfig);
    HWMeeting.setConfConfig(customConfigObj).then((result) => {
      // 显示结果
      showPromiseResult("setConfConfig", customConfigObj, SUCCESS, result);
    }).catch((e) => {
      // 显示结果
      showPromiseResult("setConfConfig", customConfigObj, FAIL, e);
    })
  }

  function invokeSetViewConfig() {
    const customConfigObj = parseConfJson(customConfig);
    HWMeeting.setViewConfig(customConfigObj).then((result) => {
      // 显示结果
      showPromiseResult("setViewConfig", customConfigObj, SUCCESS, result);
    }).catch((e) => {
      // 显示结果
      showPromiseResult("setViewConfig", customConfigObj, FAIL, e);
    })
  }

  function invokeJoinConf() {
    const customConfigObj = parseConfJson(customConfig);
    HWMeeting.joinConf(customConfigObj).then((result) => {
      // 显示结果
      showPromiseResult("joinConf", customConfigObj, SUCCESS, result);
    }).catch((e) => {
      // 显示结果
      showPromiseResult("joinConf", customConfigObj, FAIL, e);
    })
  }

  function invokeLeaveConf() {
    const customConfigObj = parseConfJson(customConfig);
    HWMeeting.leaveConf(customConfigObj).then((result) => {
      // 显示结果
      showPromiseResult("leaveConf", customConfigObj, SUCCESS, result);
    }).catch((e) => {
      // 显示结果
      showPromiseResult("leaveConf", customConfigObj, FAIL, e);
    })
  }

  function invokeSetServerConfig() {
    const customConfigObj = parseConfJson(customConfig);
    try {
      HWMeeting.setServerConfig(customConfigObj);
      // 显示结果
      showPromiseResult("setServerConfig", customConfigObj, SUCCESS);
    } catch (e) {
      // 显示结果
      showPromiseResult("setServerConfig", customConfigObj, FAIL, e);
    }
  }


</script>

<script>
  function validateForm() {
    let nickName = document.getElementById("nickName").value;
    let pwd = document.getElementById("pwd").value;
    let confId = document.getElementById("confId").value;
    let token = document.getElementById("token").value;

    console.warn(confId, pwd, nickName, token);
    HWMeeting.joinConf({ confId, pwd, nickName, token }).then((result) => {
      // 显示结果
      showPromiseResult("joinConf", { confId, pwd, nickName, token }, SUCCESS, result);
    }).catch((e) => {
      // 显示结果
      showPromiseResult("joinConf", { confId, pwd, nickName, token }, FAIL, e);
    })
  }

  function setLang() {
    let lang = document.getElementById('lang').value;
    if (lang == undefined || lang === null || lang === '') {
      return;
    }

    try {
      HWMeeting.setLang(lang);
      showPromiseResult("setLang", lang, SUCCESS);
    } catch (e) {
      showPromiseResult("setLang", lang, FAIL, e);
    }
  }

  // 可视化事件结果
  function showPromiseResult(event, params, isSuccess, result) {
    let msgBody = document.getElementById("message-body");
    let newContent = document.createElement("div");

    newContent.textContent = `【API调用】   | ${moment().format("YYYY-MM-DD HH:mm:ss")} | ${isSuccess ? 'SUCCESS' : 'FAIL'} | [api]: ${event} | [api-params]: ${JSON.stringify(params)} | [api-result]: ${JSON.stringify(result)}`
    newContent.class = 'select-text';
    newContent.style = " white-space: pre-wrap;";
    // 添加文本节点 到这个新的 div 元素
    msgBody.appendChild(newContent);
    msgBody.scrollTop = msgBody.scrollHeight;
  }

  function checkBrowserSupport() {
    const result = HWMeeting.checkSystemRequirements().then((result) => {
      // 显示结果
      showPromiseResult("checkSystemRequirements", null, SUCCESS, result);
    }).catch((e) => {
      // 显示结果
      showPromiseResult("checkSystemRequirements", null, FAIL, e);
    })
  }

  function getSdkVersion() {
    const result = HWMeeting.getVersion();
    // 显示结果
    showPromiseResult("getSdkVersion", null, SUCCESS, result);
  }

  //获取地址参数
  function getQueryString(name) {//name为传入参数
    let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
    let r = window.location.search.substr(1).match(reg);
    if (r != null) return unescape(r[2]); return null;
  }

  //进入该页面自动加入会议 李猛add 20230222
  function autoJoin() {
    let id = getQueryString("conferenceID");
    let password = getQueryString("password");
    let nickName = getQueryString("nickName");
    document.getElementById("confId").value = id;
    document.getElementById("pwd").value = password;
    document.getElementById("nickName").value = decodeURI(decodeURI(nickName));
    validateForm();
  }
</script>

<script>
  createListener();
  //进入该页面自动加入会议 李猛add 20230222
  autoJoin();
</script>

</html>