fuyuhang
/
Project_yhfu
同期ミラー http://121.37.83.100:3000/sooka_onest/sooka_onest_forestfire_vue2_visualization.git


			
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015
							<!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>My Meeting</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 class="box" style="display: flex; display: -webkit-flex; ">
    <div class="title is-2" style="text-align: center; width: 100%;">Huawei Cloud Web SDK Demo</div>

    <div style="width: 50%;">
        <div>
            <button id="get-sdk-version-button" class="button is-link" onclick=getSdkVersion()
                    style="padding-left:15px;">Obtain SDK Version
            </button>
            <button id="browser-check-button" class="button is-success" onclick=checkBrowserSupport()
                    style="padding-left:15px;">Check Browser Compatibility
            </button>
        </div>
        <div>
          <input id="lang" autocomplete="off" class="input is-rounded" placeholder="en-US | zh-CN " type="text"
                  style="width: 160px;" value = 'en-US'>
          <button id='setLangButton' type="submit" onclick = setLang() class="button is-link">Set Language</button>
        </div>

        <div style="width: 100%;  margin-top: 8px;">
            <input id="token" autocomplete="off" class="input is-rounded" type="text" placeholder="Token (optional, used for joining a meeting after login)"
                   style="width: 220px;">
            <input id="confId" autocomplete="off" class="input is-rounded" placeholder="Meeting ID" type="text"
                   style="width: 140px;" value="">
            <input id="pwd" autocomplete="off" class="input is-rounded" placeholder="Meeting password" type="text"
                   style="width: 150px;" value="">
            <input id="nickName" autocomplete="off" class="input is-rounded" placeholder="Name" type="text"
                   style="width: 130px;" value="">
            <button type="submit" onclick=validateForm() class="button is-link">Join Meeting</button>
            <button class="button is-danger" onclick=clickLeaveConf() style="padding-left:15px;">Leave Meeting</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">Information</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>
                            Leave meeting
                        </label>
                        <label class="radio">
                            <input type="radio" name="leaveConfConfirm" value="end">
                            End meeting
                        </label>
                    </div>
                </section>
                <footer class="modal-card-foot">
                    <button class="button is-success" onclick=handleLeaveConfirm()>OK</button>
                    <button class="button" onclick=closeModals()>Cancel</button>
                </footer>
            </div>
        </div>

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

            <button id="chat-button" class="button is-info" onclick=handleChatVisible() style="padding-left:15px;">Show Chat
            </button>
            <button id="attendee-button" class="button is-link" onclick=handleAttendeeListVisible()
                    style="padding-left:15px;">Show Participant
            </button>
            <button id="control-button" class="button is-info" onclick=handleControlBarVisible()
                    style="padding-left:15px;">Show Control Bar
            </button>
            <button id="title-button" class="button is-success" onclick=handleTitleVisible() style="padding-left:15px;">
              Hide Title
            </button>
            <button id="bullet-button" class="button is-success" onclick=handleBulletScreenVisible()
                    style="padding-left:15px;">Hide On-Screen Comments
            </button>

            <button id="share-button" class="button is-info" onclick=handleShareScreen()>Share Screen</button>
            <button id="video-button" class="button is-warning" onclick=handleVideoMute() style="padding-left:15px;">
              Enable Camera
            </button>
            <button id="audio-button" class="button is-primary" onclick=handleMuteAudio() style="padding-left:15px;">
              Unmute
            </button>
            <button id="speaker-button" class="button is-danger" onclick=handleMuteSpeaker() style="padding-left:15px;">
              Disable Speaker
            </button>
        </div>

        <div style="margin-top: 8px;">
            <input id='volumeInput' value class="input is-primary is-rounded" type="number" min="0" max="100" placeholder="Volume "
                   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;">
                    Set Volume
            </button>

            <input id='changeNameInput' value class="input is-link is-rounded" type="text" placeholder="Name " onchange=changingName(value)
                   style="width:184px;padding-left:15px;"></input>
            <button id="chat-button" class="button is-info" onclick=handleChangeName() style="padding-left:15px;">Rename
            </button>

            <input id='changeWidthInput' value=1280 class="input is-link is-rounded" type="number" min="300" max="2000" placeholder="Width "
                   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="Height "
                   onchange=changingHeight(value) style="width:100px;padding-left:15px;"></input>
            <button id="chat-button" class="button is-info" onclick=handleChangeSize() style="padding-left:15px;">Change Resolution
            </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="Link "
                 onchange=changingGuestUrl(value) style="width:700px;padding-left:15px;"></input>
          <button id="chat-button" class="button is-warning" onclick=handleGuestSharingUrl()
                  style="padding-left:15px;">Set Panelist Link</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="Link"
                 onchange=changingAudienceUrl(value) style="width:700px;padding-left:15px;"></input>
          <button id="chat-button" class="button is-success" onclick=handleAudienceSharingUrl()
                  style="padding-left:15px;">Set Attendee Link</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="Link "
                   onchange=changingLeaveUrl(value) style="width:700px;padding-left:15px;"></input>
            <button id="chat-button" class="button is-success" onclick=handleLeaveUrl()
                    style="padding-left:15px;">Set Leave Url</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;">Set Stop Record Content</button>
          </span>
        </div>

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

            <div id="mode-select" class="select is-link">
                <select id='changeModeSelect' onchange=selectMode(value)>
                    <option value="">Select a view.</option>
                    <option value="speaking">Presenter</option>
                    <option value="gallery">Gallery</option>
                    <option value="single">Single screen</option>
                </select>
            </div>

            <div class="select is-primary">
                <select id='getViewSelect' onchange=getViewStatus(value)>
                    <option value="">View element status.</option>
                    <option value="titleVisible">Title</option>
                    <option value="bulletScreenVisible">On-screen comment</option>
                    <option value="attendeeListVisible">Show Participant</option>
                    <option value="chatVisible">Show Chat</option>
                    <option value="viewMode">Video view</option>
                    <option value="controlBarVisible">Show Control Bar</option>
                    <option value="guestSharingUrl">Panelist link</option>
                    <option value="audienceSharingUrl">Attendee link</option>
                    <option value="stopRecordTip">Stop Record Content</option>
                    <option value="leaveUrl">Redirection link after leaving meeting</option>
                </select>
            </div>

            <div class="select is-danger">
                <select id='getConfStatusSelect' onchange=getConfStatus(value)>
                    <option value="">View meeting control status.</option>
                    <option value="audioMute">Microphone</option>
                    <option value="videoMute">Camera</option>
                    <option value="speakerMute">Speaker</option>
                    <option value="volume">Volume</option>
                    <option value="handUp">Hand-raising</option>
                    <option value="shareScreen">Sharing</option>
                    <option value="userName">Name</option>
                    <option value="role">Role info</option>
                </select>
            </div>
        </div>

        <div style="margin-top: 8px;">
        <textarea id="meeting-config" name="meeting-config" rows="8" cols="80" placeholder="Enter custom config parameters (JSON type)."
                  onchange=changingCustomConfig(value)></textarea>
            <div>
                <button id="formatConfig" class="button is-success" onclick=formatConfig() style="padding-left:15px;">
                  Format Parameter
                </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>Event Listening</p>
            <button class="button is-success is-small" onclick=clearMessagePanel()
                    style="padding-left:15px;background-color: #c33a55;">Clear
            </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="root" style="position: absolute; width: 1280px; height: 720px; margin: 2% 5%">
</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 = `[Event callback] | ${moment().format("YYYY-MM-DD HH:mm:ss")} | Event: [${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: "Unmute",
        false: "Mute"
      }
    },
    [confConfig.videoMute.name]: {
      element: document.getElementById("video-button"),
      value: {
        true: "Enable Camera",
        false: "Disable Camera"
      }
    },
    [confConfig.speakerMute.name]: {
      element: document.getElementById("speaker-button"),
      value: {
        true: "Enable Speaker",
        false: "Disable Speaker"
      }
    },
    [confConfig.handUp.name]:
    {
      element: document.getElementById("handup-button"),
      value: {
        true: "Lower Hand",
        false: "Raise Hand"
      }
    },
    [confConfig.shareScreen.name]:
    {
      element: document.getElementById("share-button"),
      value: {
        true: "Cancel Sharing",
        false: "Share Screen"
      }
    },
  }

  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('Incorrect JSON format.' + 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: "Hide Title",
        false: "Title"
      }
    },
    [viewConfig.attendeeListVisible.name]: {
      element: document.getElementById("attendee-button"),
      value: {
        true: "Hide Participant",
        false: "Show Participant"
      }
    },
    [viewConfig.chatVisible.name]: {
      element: document.getElementById("chat-button"),
      value: {
        true: "Hide Chat",
        false: "Show Chat"
      }
    },
    [viewConfig.bulletScreenVisible.name]: {
      element: document.getElementById("bullet-button"),
      value: {
        true: "Hide On-Screen Comments",
        false: "On-screen comment"
      }
    },
    [viewConfig.controlBarVisible.name]: {
      element: document.getElementById("control-button"),
      value: {
        true: "Hide Control Bar",
        false: "Show Control Bar"
      }
    },
  }

  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);
      setLang()
    }).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);
      setLang()
    }).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 calling]   | ${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);
  }


</script>

<script>
  createListener();
</script>

</html>